Website Content Articles

Footer For Website

Blogger giving us many features like Widgets, Footer, Comments etc.
But if we put a footer different then other, It'll look awesome and different .
You can see how it'll look in image.
It's only by Purecss and html not javascript, jquery or etc.
So now going to learn how to put footer in blog or website.

1. Go to your blog Layout Tab .
2. Then press on Add a gadget .
3. Select HTML/JavaScript .
4. Give title which you want and click on content and paste below code.

CODE

<center>
<div class="d1">
<div class="foot1">
<a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMZtPCoOdJrCTSist-jU8Kw2zHYqDNSenzWup_PPwzLgkjDb0yUMTIJ7ATvNc7FSqjmDBdIgJvUQuwhdIKkRfaBNCRl7lcj7atmwfh0tGRkiw81NarvMuNyuGMNESlLkFvPOYu4QbnAes/s1600/about_button.png" class="img1" />
</a>
<br />
About
</div>
<div class="foot1">
<a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX2hNVK2WtcqwaHqoqcoO1UOjqfF6jE2n0iZbMhsAywAHHIvxJGznEaTjobnqYnIt1PN4BRdSUex7WeUAmpMPtfQyA7An63RBRZuoUJkILh5z2EpxHCK4V3kx3hhL2j4v78bxsDfxR2uk/s1600/Write-For-Us.png" class="img1" />
</a>
<br />
Write for us
</div>
<div class="foot1">
<a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcEaC7QTaqVFbqdYJdxSK6qgDUa4DEc4Zqd2JhcNjHcJAu4atR6UEgZD7IlWaF-M70KvM6FuzcbJ_DdCp_2BTxq-iACmG4ehuDPqTgG6YJ7X1HcUONbk7b2bnNakVUTuKZHiemVjEC-9Y/s1600/Newsletter.png" class="img1" />
</a>
<br />
Newsletter
</div>
<div class="foot1">
<a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-pb4vxjsK7BNA2oim22fddE7Ta5Na8ylwrXPsSGbIkTXVY-oOC74eOAT8WKwzhUg8WyaRUfBrIY1DvFCs7NnRwjRFoqYB5SpbUcoLiGrLqBDoghu9hjMItB0wKuIUW37ERtevGtlxVpY/s1600/Our_blog.png" class="img1" />
</a>
<br />
Our blog
</div>
<div class="foot2">
<a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD7AqzYRRiczIoIHTUpxDjX2sb9f9-NQ3AHbdbYMOHLhhGtb30Vn3kINr7h0jea1peSo0OX6Hgn8Xx4CBbc2T7LYQILdrUeQNXKJ2E0e5R8JPsb3vFd3AXMe55qU0i29NlOj5X7trZ5eo/s1600/Advertise.png" class="img1" />
</a>
<br />
Advertise
</div>
</div>
</center>

5. Then save it and then Go to your blog Template Tab .
6. First Back up your template.
7. Then click on Edit HTML and Find (CTRL + F) for ]]></b:skin> .
8. Paste this code before (above) ]]></b:skin> .

.d1
{
margin: 10px;
background: #fff;
display: inline-block;
border: 5px double #00d;
padding: 5px;
}
.foot1
{
display: inline-block;
border-right: 3px double #666;
}
.foot2
{
display: inline-block;
}
.img1
{
height: 150px;
margin: 10px;
opacity: .5;
transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
}
.img1:hover
{
opacity: 1;
}

9. And don't forget to put this gadget in last means go to Layout tab and drag this gadget to bottom , above attribution gadget.(As shown in image)