Social Media and Newsletter Buttons

How to Setup?

Navigate to your Blogger blog Dashboard >> Template >> Edit HTML. Search for </body> by using CTRL +F

Now simply add the following code above the </body> tag.

<div align="center">
 <ul class="footer-social-icons">
<li>
<a class="icon-twitter" rel="external" href="Your Twitter Link">
Twitter
<span>Follow us</span>
</a>
</li>
<li>
<a class="icon-facebook" rel="external" href="Your Facebook Page link">
Facebook
<span>Become our fan</span>
</a>
</li>
<li>
<a class="icon-google" rel="external" href="Your Google+ Link">
Google+
<span>Join our circle</span>
</a>
</li>
<li>
<a class="icon-rss" rel="external" href="Your Feedburner Feed Link">
RSS
<span>Subscribe now</span>
</a>
</li>
<li>
<a class="icon-email" rel="external" href="Your Feedburner Widget Subscription link">
Newsletter
<span>Get latest updates</span>
</a>
</li>
</ul>
<style>
.footer-social-icons {
    border-top: 4px solid #333333;
    overflow: hidden;
    padding: 15px 0;
    width: 100%;
}
.footer-social-icons a, .footer-social-icons a:visited {
    color: #000000;
    display: block;
    float: left;
    font-size: 14px;
    font-weight: bold;
    height: 32px;
    padding: 0 0 0 40px;
    width: 143px;
}
.footer-social-icons a:hover {
    color: #008AB2;
}
.footer-social-icons a span {
    color: #999999;
    display: block;
    font-size: 11px;
    font-weight: normal;
}
.footer-social-icons .icon-twitter {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfVVpuQ75mtlE8Qs4434YPOlZVMbc4FbOLjdgVyI5WodKOf6aCG9hsqgTgeRmK4HA6Nvh7rVQ26kjTnloH8xiz6Rlysyoofch3lm5Bc_f7y-aO4WOQiJoiC2Gs2E_NeN2V9jMnynm6DMg/s1600/ico-footer-twitter.png") no-repeat scroll 0 0 transparent;
}
.footer-social-icons .icon-facebook {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnLQ8p_LaURU2OEmQWkfPbU5eVCbM_WOuhyonaJYH2F4FVU7YQkOd7BR4_GyHBJR0pU6DTn7l-wzahPIntngTIeu9E1-dfux8B51ylrnt53S2eVVuUe0P0NEMYZTa4j67zO_uIe4llPKw/s1600/ico-footer-facebook.png") no-repeat scroll 0 0 transparent;
}
.footer-social-icons .icon-google {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG0v1cQyinhW23ovS1swq2I5DARgolLEtDM8R8vead8ZPh6H3fGw6-DxvJbCSkqTvLGOtbL5nyrCZTug47aogcl62kyPJjrzesCdx_DtvwXNQnTClVUfKjuR7AekjmA_ul11v3CwS2JhY/s1600/ico-footer-google.png") no-repeat scroll 0 0 transparent;
}
.footer-social-icons .icon-rss {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzHYkLrUhQDe8Ki493qhYBJz4M0js5wSZSYy2qSRnft3vSx8Mq3M9s4os4Ba6g2vbBlAjwfAD_1LITTpxBfYf94WF1TYZNRMJe3fU2wvpgss-DIdu8opE91Lg_MaNxfXb925WQVxI6gn4/s1600/ico-footer-rss.png") no-repeat scroll 0 0 transparent;
}
.footer-social-icons .icon-email {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2TQPOjUooEXtg0pw1Ih_20Lq5gmqaTxjAcOAF95EzRrk2f0SUJbb1Spt6lzgZitoh1E_byp6Mg28aS6caFXHdN8H9I_Xa5pr2ZvZxHuL7-4fZMdK7340wwqg0twqExNabpBQXbf0kjPo/s1600/ico-footer-email.png") no-repeat scroll 0 0 transparent;
    margin-right: 0;
}

ol, ul {
    list-style: none outside none;
}
</style>
</div>

Adding your Social connections link

Now simply add your social media links with in the highlighted sections and hit save template. Thats all! You'll see the widget in place.

Autor : Mian Fx

Saturday, 11 October 2014