How To Add A Responsive and Beautiful Footer To Your Website
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
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/AVvXsEjdRy6fN7vpN5IL16npSB_ltcXSfBPF4kqd8ASgh_H59r67WHd6KIWu23IlOAi-d6nHFhGpI6WPxYOC3KBNSXA46UWkK3AAse_g2ZOuf33XJS8KD8nRYc7JbqlxpJ8h4nGEu18IS-B4RZJA/s0/quick-links-icon.png");
}
footer .footer-container h3.services-h3::before {
content: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMUO5i3wIRbf1PzvZG7WvH0_slHDsCkO0XRYu7YwjhCrBMsSkQvZFfE_WbPRA12tanxdt1ZUg6b7mM4t5F7gaX6L8QVwT6uOZPnhtfSoJJX2ritI0mF8aaQTB1Tr_kQZvfxwrt5UGN7EYS/s0/services-icon.png");
}
footer .footer-container h3.categories-h3::before {
content: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8uBhD_giv8gFoKk0Q49NaMgXHkLVYG3v7VnxtlJrGckLo3viwPTDHgxmn3RJyzr6qiLoSkg4y73MXwPwUzZqatOsxp_sA4AwLZ7CdCe8idSPxe7wlf8RqIyiU3WNsCtZJQbjyIlW7suQj/s0/categories-icon.png");
}
footer .footer-container h3.contact-h3::before {
content: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwm_Je7-HgTJ93xt3CXiJrn-_pvP53PAledHXqgsxglGhhOL1ZneSqBzyrLInix9iIM4hQsHCTZwiWSfZwErK7iwIjlHAdHlMthqdKvZNX-5SEqXBuOrSiQeMFoBDk2fb68gvyftY9IbGj/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://shiftcodeprog.blogspot.com/'>Home</a>
</li>
<li>
<a href='https://shiftcodeprog.blogspot.com/p/about-us.html'>About</a>
</li>
<li>
<a href='https://shiftcodeprog.blogspot.com/p/contact-us-if-you-want-to-contact-fun.html'>Contact</a>
</li>
<li>
<a href='https://shiftcodeprog.blogspot.com/p/privacy-policy.html'>Privacy Policy</a>
</li>
</ul>
</div>
<div class='links'>
<h3 class='services-h3'>Tools</h3>
<ul>
<li>
<a href='https://shiftcodeprog.blogspot.com/p/exact-age-calculator-maincontainer.html'>Age Calculator</a>
</li>
<li>
<a href='https://shiftcodeprog.blogspot.com/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://shiftcodeprog.blogspot.com/search/label/Blogging%20Topics'>Blogging Topics</a>
</li>
<li>
<a href='https://shiftcodeprog.blogspot.com/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://shiftcodeprog.blogspot.com/p/name-email-address-important-content.html'><strong>  Contact Us</strong></a></li>
<li><i class='fab fa-2x fa-telegram'/><a href='http://t.me/##############/'><strong>  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://shiftcodeprog.blogspot.com/'><font color='#24ffff'>shift code prog </font></a>- 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/############/'><i class='fab fa-2x fa-youtube'/></a>
<a href='http://www.facebook.com/###############/'><i class='fab fa-2x fa-facebook'/></a>
<a href='http://www.instagram.com/###############/'><i class='fab fa-2x fa-instagram'/></a>
<a href='http://t.me/##############/'><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.