Posts

Showing posts with the label Custom-code

How to create Dark Mode in Blogger website - complete script code

Image
  Welcome back guys. So, in this post, I will guide you on how to create Dark Mode in Blogger website .  What the purpose of Dark Mode Dark mode is reduces the light emitted by device screens while maintaining the minimum colour contrast ratios required for readability. Both iPhones and Android handsets offer system-wide dark modes. Is Dark mode better for eyes? when we use dark mode less light enters our eyes, which results in the pupils being dilated. This leads to the formation of a blurring image and strain while reading. Which is better light or dark mode? Dark mode successfully cuts glare and reduces blue light, both of which help your eyes. However, dark mode isn't for everyone, and in some cases, it can actually cause more vision problems than solutions.  How to create Dark Mode in Blogger website Before we move forward you must install jQuery in your blog, some blog mey already installed it.  If can't find it paste following code just after <head>, ...
Post a Comment
Read more

Html Codes for Jump link, Marquee Text, disable copy button, Animating headings, Floating Slide in Banner, Floating Youtube subscribe button for Blogger website

Image
  Welcome back guys. So, in this post, I will guide you on how to create the following things on the Blogger website.  Today we are going to see, Jump link Marquee Text  disable copy button Animating headings Floating Slide in Banner  Floating Youtube subscribe button #1. Jump link  Jump link is one kind of internal linking strategy . By using a jump link, users can skip unnecessary topics or they can jump to the final answers or any other steps as they want. The jump link strategy gave a better experience to the visitors. This will give easy navigation to the visitors. So let's see, How to create a jump link strategy in blogger? STEP:#1 Go to the blog post where you want to add it and switch to HTML mode. STEP:#2 Add span tag before on heading or paragraph(as you want). Like this <span id="step1"> </span> STEP:#3 Then copy the URL of that post and choose the text where you want to link it. Then click link icon and paste URL of that particular ...
Post a Comment
Read more

Advanced timer script script for blogger website

Image
  Welcome back guys. So, in this post, I will guide you on how to set an advanced timer before the download button and advanced download button for Blogger. Before we move forward, let's talk about the purpose of the timer. Purpose of timer It will decrease your website bounce rate. It will increase your ad impression. It will increase your ad CTR rate. We will follow up today, Advanced timer script Advanced download button script Advanced timer script This type of timer script will open the download page as a pop-up window , when visitors click the download button. You can see the image below. Steps to create download page STEP:#1 Go to the blogger dashboard, under the theme section and click edit html and search </head> and paste following css code just before it. <style> .modal { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; text-align: left; background: rgba(0,0,0, .9); ...
Post a Comment
Read more

Top 5 html Codes - that make Your Blogger website look professional

Image
Today we will see top 5 html Codes, that make Your Blogger website Look professional. We follow up today, Custom internal link builder html code for Blogger Custom reading bar html code for Blogger Custom WebKit scrollable label html code for Blogger Custom news ticker widget html code for Blogger Custom preloader effect html code for Blogger Let's get started, #1.Custom internal link builder html code for Blogger Best way to increase your views of each post. Follow these steps, Search </head> and Paste CSS code Above it. <b:if cond='data:blog.pageType != &quot;index&quot;'> <style type='text/css'> /* Multi Related Post */ .gourabdesignmultiRelated{background-color:#2a2a2a;color:#fff;margin:15px auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;overflow:hidden;transition:all .3s} .gourabdesignmultiRelated:hover{background-color:#222} .gourabdesignmultiRelated .content{padding:12px 15...
Post a Comment
Read more