How To Add A Responsive and Beautiful Footer To Your Blogger Website

Hello everybody, Today in this post I will write a blog post on How To Add A Responsive and Beautiful 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.

Blogger let you customize your post footer options easily. Oh, you may known it. And some may not whatever it is, here you can find how to customize your simple blogger footer in a responsive and beautiful footer.

When someone makes it to the footer of your blog they want something to click down there. They want to convert. They have likely consumed a decent amount of your content. At a minimum they are in explore mode, trying to figure you out.

So when they get to the very bottom of your blog, they either scroll back up, close the page, OR… they focus on something interesting enough to hold their attention. Give them something interesting. Give them something to click.

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.

 

Things That Can Go In Website Footers

Three must-haves: Copyright, Privacy Policy, and Terms of Use

These three content components are critical for every website, as they are used for legal protection. 

Copyright: 

The year and the copyright symbol protects websites from plagiarism.

Privacy Policy:

 It explains to users how your company will use and protect their sensitive data and other information.

Terms & Conditions: It offers general rules and guidelines on using a website or your products. 

 

Navigation

Navigation placed in the footer is another important website component, as it allows website visitors to find the necessary information in case if they failed to do it before scrolling through the entire website. 

In recent years, we could also see the rise of the “fat footer” trend. It implies adding more elements to the website footer than usual. In common, website footers contain the information displayed in the mega-menu in the header. 

 

Social Icons

Adding social icons to the footer allows users to easily find and connect with the company on social networks. Since most businesses don’t like redirecting website traffic to social networks, they put social media icons in the footer instead of the header. This practice provides users with the opportunity to interact with a brand on social networks, but it also keeps web design more focused on retaining users on a site.

 

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. (For convenience see the picture below)

Now Copy the below code and paste it as said above.

/* 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/AVvXsEjS7aIRg75F_rZXmKcjkom2XcOyBBNbxJWdIDI28krfriFxWYdOCyMrdlelmfpR5KdDfUhKzX9SmNDbnKnYEbhRgHmL_zVqZgOZbQeOyLzbRb9rqXCZWLxv0F64jx8Y4tZcYKSUKuqQIMHJ/s0/quick-links-icon.png");
}
footer .footer-container h3.services-h3::before {
content: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidtDTR93PDXXktVCyUT7aHryt4-iEm190dMle0FfVEGTQE6k6i5p2RugedHCWjiJEK0_IgacsIfG_t2kxwgEiSMuCy92f6EqyC2ZV4QRSkEoXCiyzFxM65ZJ2fFJewcuzLq2lR7CgJJfTQ/s0/services-icon.png");
}
footer .footer-container h3.categories-h3::before {
content: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1bcnclxy_1Wz1j9sXqMyU-YSiBX4C3t7Rc3zMFu4nSLygz5PLKLYS9tTt_-TY5ig73nMaI8YPSc1_InpU-H0wtKwpXZiWUMv5xAVZWguJuDKK2_P_BHnTnzDH_ZLjhE9RN1d568cGFPXS/s0/categories-icon.png");
}
footer .footer-container h3.contact-h3::before {
content: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdTzy8iIrd2-SEXHao0G1kvIuc3Dnymht-AZ3QQrkyzxBSEtzfl7uHd_RyEjjRhq6zi8tnoxyG1CYM6IksVyNkvQC2mV50E6EhqryurCf6SB-2IJvJ8XVxzR8eD9oT5-ydMCXMdSFsFyOM/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. (For convenience see the picture below)

Now Copy the below code and paste it as said above.

 <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css' rel='stylesheet'/>
  <footer>
<div class='footer-container'>
<div class='footer-top'>
<div class='links'>
<h3 class='quick-links-h3'>Quick Links</h3>
<ul>
<li>
<a href='https://www.techandfunzone.eu.org/'>Home</a>
</li>
<li>
<a href='https://www.techandfunzone.eu.org/p/about-us.html'>About</a>
</li>
<li>
<a href='https://www.techandfunzone.eu.org/p/contact-us-if-you-want-to-contact-fun.html'>Contact</a>
</li>
  <li>
<a href='https://www.techandfunzone.eu.org/p/privacy-policy.html'>Privacy Policy</a>
</li>
</ul>
</div>
<div class='links'>
<h3 class='services-h3'>Tools</h3>
<ul>
<li>
<a href='https://www.techandfunzone.eu.org/p/exact-age-calculator-maincontainer.html'>Age Calculator</a>
</li>
<li>
<a href='https://www.techandfunzone.eu.org/p/html-icons.html'>HTML Icons</a>
</li>
<li>
<a href='#'>SEO Optimization</a>
</li>
</ul>
</div>
<div class='links'>
<h3 class='categories-h3'>Categories</h3>
<ul>
<li>
<a href='#'>Windows Related</a>
</li>
<li>
<a href='https://www.techandfunzone.eu.org/search/label/Blogging%20Topics'>Blogging Topics</a>
</li>
<li>
<a href='https://www.techandfunzone.eu.org/search/label/Pc%20Softwares'>Pc Softwares</a>
</li>
</ul>
</div>
<div class='links'>
<h3 class='contact-h3'>Get In Touch</h3>
<ul>
  <li><i class='fas fa-2x fa-envelope'/><a href='https://www.techandfunzone.eu.org/p/name-email-address-important-content.html'><strong>&#160;&#160;Contact Us</strong></a></li>
  <li><i class='fab fa-2x fa-telegram'/><a href='http://t.me/techandfunzone/'><strong>&#160;&#160;Telegram</strong></a></li>
</ul>
</div>
</div>
<div class='footer-bottom'>
  <p style='text-align:left;'><strong>Copyright<font color='#24ffff'> (c)</font> 2021 <a href='https://www.techandfunzone.eu.org/'><font color='#24ffff'>Tech &amp; Fun Zone&#160;</font></a>-&#160;All Rights Reseved</strong></p>
  <div class='ty-copy-container row' style='font-size:4px; opacity:0;'/>

<div class='social'>
  <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'/>
  <h3 style='text-align:center;'> Follow us</h3>
<a href='http://www.youtube.com/TechFunZone/'><i class='fab fa-2x fa-youtube'/></a>
  <a href='http://www.facebook.com/thoda.sa.pagal.2743/'><i class='fab fa-2x fa-facebook'/></a>
  <a href='http://www.instagram.com/thoda_sa_pagal__/'><i class='fab fa-2x fa-instagram'/></a>
  <a href='http://t.me/techandfunzone/'><i class='fab fa-2x fa-telegram'/></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

In this post I have shared tutorial on How To Add A Responsive and Beautiful 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.

Go to Link

© Tech & Fun Zone