How To Add A Responsive Footer To Your Blogger Website

How To Add Responsive Footer To Your Blogger Website.

Hello Everybody, Today in this post I will write a blog post on How To Add A Responsive Footer To Your Blogger Website. Footer is very important for a website or blog. With the footer, visitors who stop at a website to look for information can easily get what they are looking for.

Footers can also be made in such a way as to be cooler for a website or blog. For those of you who want to register your blog or website with AdSense, it's a good idea to see if your footer is good enough to register for AdSense or not.

Besides Footer, there are also some considerations for AdSense to approve your blog or website, a small example is a sitemap, you can read a responsive sitemap for bloggers. there are several responsive sitemap scripts that you can use for your blog or website so that it becomes a great opportunity for AdSense to be accepted.

Unlike the Footer on other templates, the Footer that we will apply in the Sora templates this time is very cool and responsive. If you want to have a cool Footer, please read this article carefully so that there is no error when you want to apply it to your blog or website. So Let's get started

How To Add A Custom Responsive Footer To Your Blogger Website:-

Step 1 :- First of all you need Go To Blogger.Com.

Step 2 :- Then Login to Your Blogger Account.

Step 3 :- Then Click on Theme Menu.

Step 4 :- After this Click on Edit Html.

Step 5 :- Then find ]]></b:skin> tag and copy the code provided below and paste it above the ]]></b:skin> tag.

/* Footer */
footer {
background: #001219;
font-family: "Roboto", sans-serif;
color: #f1faee;
padding: 32px;
border-radius: 32px 32px 0 0;
}
footer .footer-container {
max-width: 1100px;
margin: 0 auto;
padding: 0 32px;
}
footer .footer-container .footer-top {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
footer .logo {
font-size: 36px;
font-weight: 800;
}
footer .footer-container a {
color: #f1faee;
text-decoration: none;
}
footer .footer-container a:hover {
text-decoration: underline;
}
footer .footer-container ul {
list-style: none;
padding: 0;
font-size: 16px;
margin-bottom: 24px;
}
footer .footer-container ul li {
margin: 10px 0;
}
footer .footer-container h3.quick-links-h3::before {
content: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAyiCuiouD26js_1l3BsI5nh2NL7yIl9yW6Wgh5UtOSDKjWSiDizPwK2VR9OPFYJVXq-wG7SpJqjqIQTA_YJ5uxXjiLxLpSpBjE6qszifog3f1dHXPLQrTnO7ly8VA9Cru0mkkYJc6Uq4a/s0/quick-links-icon.png");
}
footer .footer-container h3.services-h3::before {
content: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9D2-Uxx5_Fruv_WsnzBJytzbhP7eZ09OGgpE-vgXqH_GMAVe2VE8cg8TXrK-La0Ct9SWgdw316bsJ6AgM8Sz4F_v8c5Dva-4QnpJNzdyRJB4YNfOpXSmP1hFbmA1Rj5rhgyPXGrK-7ynB/s0/services-icon.png");
}
footer .footer-container h3.categories-h3::before {
content: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxa947gQmn1xQ-YjzIMeK00uBa8Ph5sZAUqi9_psLgMPgFjv8SFXdYY0btVrJgYpAfeXt-suL_IXDkjPv0vc7c5EbqBayYJh_BHFjHzPN_Wht2aYF_Sj5gsUNe3QDoyiPkl31Wf3Wl7vXr/s0/categories-icon.png");
}
footer .footer-container h3.contact-h3::before {
content: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy5PEkisfIXLt7fyc5JykGcOHlAJTyQoOhAU-vCAJ4NJfNc1zfZZF2Jb766htMidvQAB_YouV-TSgBxiR1ybR-5RQw6dCG3kjfmYbqVuouL-qREhUTNYfWlFmhtiYOxed5G_YMEUvkBe5k/s0/contact-icon.png");
}
footer .footer-container h3 {
position: relative;
color: #fff;
}
footer .footer-container h3::before {
position: absolute;
transform: translate(-24px, -5px);
}
footer .footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.2);
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 32px;
}
footer .footer-bottom .copyright {
color: #e63946;
font-size: 20px;
font-weight: 800;
}
footer .social a:hover {
text-decoration: none;
transform: scale(1.1);
}
footer .social a {
margin: 0 16px;
display: inline-block;
transition: all 500ms;
}
@media (max-width: 850px) {
footer .footer-container .footer-top {
grid-template-columns: 1fr 1fr;
}
footer .social img {
height: 30px;
}
}
@media (max-width: 600px) {
footer .footer-container .footer-top {
grid-template-columns: 1fr;
text-align: center;
}
footer .footer-bottom .copyright {
font-size: 16px;
}
}
.page {
padding-bottom: 0;
}

Step 6 :- Now its the turn of Adding responsive footer in your theme.

Step 7 :- To Add custom footer in blogger you need to copy the code provided below and paste it just above the </body> tag.

<footer>
<div class='footer-container'>
<div class='logo'>LB.</div>
<div class='footer-top'>
<div class='links'>
<h3 class='quick-links-h3'>Quick Links</h3>
<ul>
<li>
<a href='#'>Home</a>
</li>
<li>
<a href='#'>About</a>
</li>
<li>
<a href='#'>Services</a>
</li>
<li>
<a href='#'>Contact</a>
</li>
</ul>
</div>
<div class='links'>
<h3 class='services-h3'>Services</h3>
<ul>
<li>
<a href='#'>Web Design</a>
</li>
<li>
<a href='#'>App Design</a>
</li>
<li>
<a href='#'>SEO Optimization</a>
</li>
</ul>
</div>
<div class='links'>
<h3 class='categories-h3'>Categories</h3>
<ul>
<li>
<a href='#'>WordPress</a>
</li>
<li>
<a href='#'>Blogger</a>
</li>
<li>
<a href='#'>Android</a>
</li>
</ul>
</div>
<div class='links'>
<h3 class='contact-h3'>Get In Touch</h3>
<ul>
<li>Email: contact@gmail.com</li>
<li>Mobile No.: +1-111-111-1111</li>
</ul>
</div>
</div>
<div class='footer-bottom'>
<div class='copyright'>Live Blogger &copy; 2021</div>
<div class='social'>
<a href='#'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWf2QEQCVplpy84vTHMTZaRAgw_bjSRNMAP_MgbZnYA1RZv1s1DW7TnaJmSBigcVBBlVQhPq4vL7TRMixD4TUUpjIB1PYYsnj-MDmZA5VfolQDU4sDXauYZ5zQw0sxS72LrHin9poE8L8N/s0/facebook-icon.png'/>
</a>
<a href='#'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicrNqwJ94_gHQp-fyUYgL_cOqrvKpTcDdbSpJQuNyHppdJkzhEFfaBiXy7NzqSELHDt9dfUaa53HkMe5k8Nm-bI0Z-vfF1Do271BnwXICOwMLfkZEmNMhlExx_QqQM72IFmyWsGHAaOH5q/s0/twtter-icon.png'/>
</a>
<a href='#'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaNNd_5_VEf5w_Obf-F832wWYydOt_X9ulIfV47FIY3rK_2s6DH0N4NvqMqJyYJjtI9-IDf7xS4dq1Wp6eLV0zuGdFDqcnGuugv2Xm-FR84xwjbdNVVKe7MYX-u_A8zePNkpU0D0UsRYIL/s0/dribbble-icon.png'/>
</a>
</div>
</div>
</div>
</footer>

Step 8 :- Now Click on save button to save your work. after saving the theme your custom footer in blogger website has been added.

Conclusion

So thats the all code is provided by Live Blogger Youtube Channel So Subscribe Youtube Channel of Live Blogger to get latest videos.

In this post I have shared tutorial on How To Add A Responsive Footer To Your Blogger Website. I hope this tutorial can be useful for all blogger blogspot users in adding a custom footer in your blogger website. Thank you for visiting our website.