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:-
/* 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;
}
<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 © 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>
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.
إرسال تعليق
إرسال تعليق