Do you want to add a responsive custom footer section in your blogger
website. But can't find any informative instructions. Then, we say, you come
in the right place. In this article, we explain, how you can add a custom
footer section. So, you must stay with this article.
What is Footer Section?
A Footer Section refers a webpage typically contains contact information,
links with important pages, copyright details, as well as something
essential informations. A footer section is generally located at the bottom
of every websites and pages. This section helps to enhance the usability and
accessibility of a website by providing all important resources and
information.
How to Add a Custom Footer Section in Blogger Website
You can create a responsive footer section by following these step-by-step
instructions:
Instruction for PC and Laptop
- First of all, you have to go to your Blogger Dashboard
- Then you have to search footer section
-
Then you must copy the below codes and replace with your footer section
Note You can easily find it by following a short technique.
Press CTRL+F and simply paste there "footer" and find it as easy as well.
Instruction for Mobile
Though it’s easy to find out the footer section in PC very easily, but it's
really difficult to find footer section in mobile. Let's know how you can
find it in your mobile device.
-
Firstly, you must need a keyboard which one have PC keyboard functions
-
We recommend that, you had better download a keyboard from Play Store or any website
-
Then follow the same instruction like PC and also follow the short technique as well.
Important Notice: Every blogger theme has different footer position.
It may vary on a blogger theme.
Responsive Footer HTML Code:
<!-- Coded By AproZone - aprozone.blogspot.com -->
<section class="footer">
<div class="footer-row">
<div class="footer-col">
<h4>Info</h4>
<ul class="links">
<li><a href="#">About Us</a></li>
<li><a href="#">Compressions</a></li>
<li><a href="#">Customers</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Collection</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Explore</h4>
<ul class="links">
<li><a href="#">Free Designs</a></li>
<li><a href="#">Latest Designs</a></li>
<li><a href="#">Themes</a></li>
<li><a href="#">Popular Designs</a></li>
<li><a href="#">Art Skills</a></li>
<li><a href="#">New Uploads</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Legal</h4>
<ul class="links">
<li><a href="#">Customer Agreement</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">GDPR</a></li>
<li><a href="#">Security</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Media Kit</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Newsletter</h4>
<p>Subscribe to our newsletter for a weekly dose of news, updates, helpful tips, and exclusive offers.</p>
<form action="#"><input type="text" placeholder="Your email" required><button type="submit">SUBSCRIBE</button></form>
<div class="icons">
<i class="fa-brands fa-facebook-f"></i>
<i class="fa-brands fa-square-x-twitter"></i>
<i class="fa-brands fa-linkedin"></i>
<i class="fa-brands fa-github"></i>
</div>
</div>
</div>
</section>
Responsive Footer CSS Code:
<style>
.footer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 1280px;
width: 95%;
background: #2f4464;
border-radius: 6px;
}
.footer .footer-row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 3.5rem;
padding: 60px;
}
.footer-row .footer-col h4 {
color: #fff;
font-size: 1.2rem;
font-weight: 400;
}
.footer-col .links {
margin-top: 20px;
}
.footer-col .links li {
list-style: none;
margin-bottom: 10px;
}
.footer-col .links li a {
text-decoration: none;
color: #bfbfbf;
}
.footer-col .links li a:hover {
color: #fff;
}
.footer-col p {
margin: 20px 0;
color: #bfbfbf;
max-width: 300px;
}
.footer-col form {
display: flex;
gap: 5px;
}
</style>
Advance Tips: You can change footer background color #2f4464 to replace
with others color as you chosen. Also change paragraph text color: #bfbfbf and customize
any other elements as you can.
Conclusion
We hope that this article will helpful for you. By following the above
steps you can add a responsive footer section in your blogger website very
easily. In case, if you feel some problems, you can contact with us. We
will help and guide you.
