Sayem Tutorial

    Social Items

How to add dark mode on blogger blog
Hey guys, what up in this article, we will talk about the dark mode. How to add dark mode on blogger? On the blogger, does not support any plugin so can't add dark mode so there is only one way to add and it uses custom coding and design the dark mode but in this article, I will tell you how you can design the dark mode on your blog and also how you can add. If you want to add a dark mode to your blog theme then you need to follow 3 steps:
  • Design a dark mode toggle button (you can use a template)
  • Design the dark mode with css
  • Add toggle for dark mode and use local storage to save dark mode data
How to add dark mode on blogger blog

How to add dark mode

Hey, guys now I am telling you how you can add dark mode on your blog. Before you start creating dark mode design you need to select a template then you can start design.

Select any template you want:
How to add dark mode on blogger blog
<div class='dark-btn'>
    <i aria-hidden='true' class='fa fa-moon-o'></i>
    </div>

/* Dark Mode Button */
.dark-btn{
    position: fixed;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    text-align: center;
    z-index: 99;
    border: 1px solid #5b95f5;
    width: 47px;
    height: 44px;
    line-height: 40px;
    right: 25px;
    bottom: -25px;
    padding-top: 2px;
    transition: all 0.5s ease-in-out;
    transition-delay: 0.2s;
    box-shadow: 4px 4px 15px rgba(0,0,0,0.1);
    border-radius: 100px;
    visibility: visible;
    cursor: pointer;
    opacity: 1;
    bottom: 25px;
    }
    .fa-moon-o:before{
      font-size: 39px;
      color: #00bfff;
      
    }

How to add dark mode on blogger blog

 <div class='dark-btn'><input class='check' id='dark-btn' title='Night Dark' type='checkbox'>
    <i aria-hidden='true' style="color: blue;" class='fa fa-moon-o'></i>
  </div>

/* Dark Mode Button */
.dark-btn{position:fixed;float:left;z-index:99;bottom:20px;left:20px;font-size:15px;padding:15px;border-radius:50%;background:#00A3FE;text-align:center}
.check {display: none}
.dark-btn .iconmode .openmode{display:block}
.dark-btn .iconmode .closemode{display:none}
.dark-btn .check:checked ~ .iconmode .openmode{display:none}
.dark-btn .check:checked ~ .iconmode .closemode{display:block}
}
Now if you see the icon moon icon is not showing then you can install the font awesome CDN:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" crossorigin="anonymous" />
Note: Add the HTML code after the </body> tag then add the css after ]]></b:skin> tag (if you use the cdn then add the code code after </head> tag.)
<script>const body = document.querySelector("body");
    const darkModeBtn = document.querySelector(".dark-btn");
    
    if (localStorage.getItem("darkModeStatus")) {
      body.classList.add("dark");
      darkModeBtn.style.background = "#000";
    }
    
    darkModeBtn.addEventListener('click', function(){
      if (localStorage.getItem("darkModeStatus")) {
        body.classList.remove('dark');
        darkModeBtn.style.background = "#fff";
            darkModeBtn.style.color = "#fff";
        localStorage.removeItem("darkModeStatus");
      } else {
        body.classList.add('dark');
        darkModeBtn.style.background = "#000";
        localStorage.setItem("darkModeStatus", "true");
      }
    });</script>
Now: Add the javascript code after the </body> tag.

How to design dark mode

For designing dark mode you can work with this small css first:
    body.dark {
      background: #000000;
  }
To add the dark mode for full theme you need to found all class division and adding the dark mode color one by one for founding the class division just inspact the element you will the devision. After you found the division see the below CSS code:
body.dark devision{
  now styling here
  }

Now add the division on division text of the css and add you style code on the now styling here for example:

  background: #000;
  color: #fff;
How to add dark mode on blogger blog

Video

Now if you don't understand anything you can watch the below video to get a better idea about how to add dark mode on blogger blog:

Base data of this project

Before writing this article I am so many demo data for creating dark mode on blogger. You can browse and download all base data for the below link:

Demo Dark Mode 1

Download Dark Mode 1

Demo Dark Mode 2

Download Dark Mode 2

See Result On Blogger Theme 

Conclosing

This a quick guide article about how you can install dark mode on a blogger blog by using HTML,css and also with js (for the one-click event and local storage). Thanks for with us.

How to add dark mode on blogger blog

 Designing a Blogger Template is not as difficult as you think (if you already understand a little about HTML and CSS). I have summarized how to make a Blogger Template and here I will show you a way that is easy to understand. Before continuing, the first thing you should know is how Blogger works.

To design a template requires skills in Web Development. You have to be good at or understand Web Design but you don't have to be (very) very good at it. At least, you understand basic HTML, CSS, JavaScript, and XML. To learn about these technologies, I recommend that you study them at W3Schools.com.

How Does Blogger Work?

When we upload or install a new template on Blogger. The template will be entered into the Blogger Database. When someone visits your blog, the browser will send a request and the blogger will give the output to the browser.

Basic Layout


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<title><data:blog.pageTitle/></title>
</head>
<body>
 <!-- CONTENT HERE -->
</body>
</html>
The Blogger templates all contain XML code and a few elements. We can see the code above that the code structure of Blogger consists of xmlns (XML Namespace). Namespaces such as xmlns:b , xmlns:data, xmlns:expr are used to provide us with data from the Blogger database.

The following is an explanation of the XML Namespace on Blogger:
  1. xmlns:b - To access elements on Blogger.
  2. xmlns:data - This is where the data comes from.
  3. xmlns:expr - Used to compute Expressions for attributes (We'll learn about that later)
Note : You can change the Namespace from xmlns:b to xmlns:blog or xmlns:data to xmlns:d . But it's better to just use the default version.

Before Continuing

Before we go to the next stage, here I have a little explanation about the Layout and how it looks like. To design a Layout, you can take a picture or make a sketch.

Here are some keys to creating a Layout:

  1. Determine where the Menu is located and how the Menu will look.
  2. Determine how and where the post will appear, whether it consists of 2 columns or 3 columns.
  3. Determine where the Widget can appear. 

Section

The layout on Blogger Templates is created using Sections. The section is one of the locations of elements such as Header, Footer, Sidebar, etc.

Writing Section

Creating Sections on Blogger is very easy. We can insert widgets into sections, but we cannot insert HTML elements into sections. To insert content in a Section, we must use the Widget element.

Here is an example of writing a Section:


<b:section id='' class='' maxwidgets='' showaddelement=''>
</b:section>
Writing Sections is almost the same as writing HTML which has attributes. Each attribute has a different meaning.

Attributes to Section

  1. id (Required) - Contains a name that is allowed only in letters or numbers.
  2. class (Opsional) - Berisi nama seperti "navbar", "header", "sidebar", dll.
  3. maxwidgets (Optional) - Number of Widgets to add to the Section.
  4. showaddelement (Optional) - You can only select " Yes " or " No ". By default, the showaddelement is " Yes ". These attributes are elements for adding a Widget.
  5. growth (Optional) - You can only choose between " Horizontal " and " Vertical ". By default, the contents of the growth attribute are " vertical ". This attribute is the layout of the widget (flat sideways or flat down).
Sections can have Widgets inside. However, we cannot add a Section to the Section.

Here is an example of writing a Section:

<b:section id='header' class='header' maxwidgets="1" showaddelement="no">
<!-- Content Of Section -->
</b:section>
<b:section id='main' class='main' maxwidgets="1" showaddelement="no">
<!-- Content Of Section -->
</b:section>
<b:section id='footer' class='footer' showaddelement="no">
<!-- Content Of Section -->
</b:section>

Widget

The section is where the Widget comes from. The section is just a Layout element, which will be displayed in the browser is a Widget. We can enter a default Widget or Custom Widget into the Section.

Here is an example of writing a Widget:

<b:widget id='' locked='' mobile='' title='' pageType='' type='' />

Attributes on Widgets

  1. id (Required) - Contains a name that is allowed only in letters or numbers.
  2. type (Required) - This is the type or type of Widget. The following types of widgets can be used on Blogger:
  3. BlogArchive
  4. Blog
  5. Feed
  6. Header
  7. HTML
  8. SingleImage
  9. LinkList
  10. List
  11. Logo
  12. BlogProfile
  13. Navbar
  14. VideoBar
  15. Newsbar
  16. locked (Optional) - You only choose between " Yes " or " No ". By default it is " No ". If you select " No ", the Widget will be locked, cannot be moved or deleted.
  17. title (Optional) - This is an attribute to display the Widget title. If not filled, then the Title can be the name of the Widget Type.
  18. pageType (Optional) - Can be a name such as "main", "archive", "item", etc. The default is "all".
  19. mobile (Optional) - You just choose between " Yes ", " No ", or " only ". If you select " Yes ", the Widget will only appear on Mobile devices.
The following is the writing of the Section and its Widgets:

<b:section id="sidebar" class="sidebar" maxwidgets="" showaddelement="yes">
<b:widget id='CustomSearch1' title='Search' type='CustomSearch' locked='false'/>
<b:widget id='FollowByEmail1' title='Follow By Email' type='FollowByEmail' locked='false' />
<b:widget id='PopularPosts1' locked='false' title='Popular Post' type='PopularPosts'/>
<b:widget id='Label1' type='Label' locked='false' />
</b:section>

How to Make a Blogger Template: Sections and Widgets

Photor is a professional magazine blogger template. It is fully customizable, making it a unique option for you who want to create multiple sites with a totally different design with just one template. OnePress is very fast compared to any other magazine you find on the internet. Because we built it with the best and most advanced blogger template optimization techniques. It is also perfect for those who want to increase earnings as it has multiple ad sections, which is perfect for AdSense or other services ads.

PREVIEW
Template Features
100% Responsive Design
Dark Version (Included)
Full-Width Version
Auto Translate
Fixed Menu
Header Ads
Featured Posts
Post Widget 1 and 2
Home Ads 1
AdSense (In-Feed ADS) on Homepage
Ads Areas (In-Article ADS 1, In-Article ADS 2) on Post Page
Home Ads 2
Post Share Buttons
Auto Author Box
Disqus and Facebook Comments
Fixed Sidebar
Post List Widget by (Recent, Label or Comments)
About Section on Footer
Footer Menu
Templateify Post Shortcodes
Fast Loaded
SEO Optimized
Fully Customizable Background, Widths, Colors and Fonts
Lifetime Template Updates

Free Download
Buy Now 10$

CHANGELOG


Lazy load added on the photor blogger template
Lazy Load Added
Google Custom Search Engine Space Added
Google Custom Search Engine Space Added

Photor Responsive Blogger Template

How to make image lazyload on blogger blog
Hi, guys in this article I will explain what is the lazy loading image and how you can add the lazy loading image on your blogger blog. There so many benefits of the lazyload script. If you want to know deeply about lazyload then read the below program carefully.


When any user visits on your site all image of your site are automatic start loading and the user get a bad impression from your site because your site takes so much time to load.

If your blog time is high like my blog then it's so hard to rank on google but if you see your site loading speed increases for the image load then you can fix it by using image lazy load.
When anyone browses your site then if this person scrolls down then your site image is load so the full load time has digressed and it helps you lot for making your site super fast.
If you still face any problem then reload this page and see the network img tab of your browser.

How to add

Now let's talk about how you can add this script on your blogger blog. Follow all the below steps to install an automatic lazyloading image system on your blogger blog.
  1. Open blogger dashboard
  2. Go to the theme section then theme HTML edit.
  3. Now search for </body> tag
  4. If you want to search for anything on the theme then click on the HTML code then press Ctrl + F now you see a small search box opened, type your keyword, and hit enter.
  5. Now paste the below code after the </body> tag
    <script>
    //<![CDATA[
    // Lazy Load
    (function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"https://3.bp.blogspot.com/-xtM_7x0_cU4/XIok1BisovI/AAAAAAAAPUc/QGJpBJZ3QBM_Spkd9r3-SMurEUbRI1pOQCLcBGAs/s10/loadingku.gif",effect:"fadeIn",threshold:"-50"})});
    //]]>
    </script>
  6. Now save your theme.

That's How to Install Lazy Load on a Blog that Arlina Code can share. Thank you for visiting and greetings.

How to make image lazyload on blogger blog