How to Add Stylish Custom Footer Section in Blogger

Hello Guys, Welcome to the Mironiyar blogger tutorial. If you want to know, How to Add Stylish Custom Footer Section in Blogger Then you have come to the right place.
Today I will show you How to Add Stylish Custom Footer Section in Blogger?


It is important to have a footer section for a stylish website. Because Footer Section makes the website more beautiful. Now you can see the footer section of almost all websites. This footer section contains links to some important pages of the website. This allows the user to easily find those pages.

Read more :

Add Stylish Custom Footer Section in 4 Steps

Step 1 : You have to go to the Deshboard of the blogger website. Now go to Edit Html in the Theme menu.

How to Add Stylish Custom Footer Section in Blogger

Step 2 : Copy the html code below. Paste the copied html code before the </body> tag. And change where you need to change.

Step 3 : Copy the css code below. Paste the copied css code before the ]]></b:skin>.

How to Add Stylish Custom Footer Section in Blogger

Step 4 : Save the theme by clicking the save button.

How to Add Stylish Custom Footer Section in Blogger

Stylish Custom Footer html Code


<footer>

      <div class="footer-container">

        <div class="footer-left">

          <h4>Quick Links</h4>

          <ul>

            <li>

              <a href="#">Home</a>

            </li>

            <li>

              <a href="#">About</a>

            </li>

            <li>

              <a href="#">Contact</a>

            </li>

            <li>

              <a href="#">Privacy Policy</a>

            </li>

          </ul>

        </div>

        <div class="footer-right">

          <h4>Follow us on</h4>

          <div class="social-icons">

            <a href="#">

              <img src="https://img.icons8.com/plasticine/100/000000/facebook-new.png" alt="" />

            </a>

            <a href="#">

              <img src="https://img.icons8.com/ios/100/000000/twitter-squared.png" alt="" />

            </a>

            <a href="#">

              <img src="https://img.icons8.com/cotton/100/000000/instagram-new.png" alt="" />

            </a>

          </div>

          <p>This website is managed by Mironiyar</p>

        </div>

      </div>

    </footer>

Change some parts of the code :

Home : Paste the 'Home' link instead of #.
About : Paste the 'About' link instead of #.
Contact : Paste the 'Contact' link instead of #.
Privacy Policy : Paste the 'Privacy Policy' link instead of #.

Stylish Custom Footer css Code


/* Footer */

footer {

  background: #000;

  color: #fcfcfc;

  font-family: "Roboto", sans-serif;

  padding: 36px;

}

footer a {

  color: #fcfcfc;

  text-decoration: none;

}

footer a:hover {

  text-decoration: underline;

}

footer .footer-container {

  display: flex;

  width: 900px;

  margin: 0 auto;

}

footer ul {

  list-style: none;

  margin-top: 16px;

  padding-left: 10px;

}

footer ul li {

  margin: 12px 8px;

}

footer .footer-left {

  padding-right: 100px;

  border-right: 1px solid #c4c4c4;

}

footer .footer-right {

  padding-left: 100px;

}

footer .social-icons {

  margin-top: 16px;

}

footer .social-icons a {

  text-decoration: none;

}

footer .social-icons img {

  margin: 0 16px;

}

footer .social-icons img:first-child {

  margin-left: 0;

}

footer .footer-right p {

  margin-top: 32px;

}

The most important thing is to follow the above four steps. If a step is omitted, the Footer section will not appear.

Hay, Please do not enter any spam link in the Comment Box...

Post a Comment (0)
Previous Post Next Post