After reading your article visitors will come down in search of many articles. While they do so they will see this stylish icons. They will be attracted to it and they will click it. Well this widget was first used by Bloggingehow, So I thank him for this beautiful widget. Which increases your blog’s traffic. Lets see how to add it to your blog.
How to Add Social Media Icons with Newsletter
- Go to Blogger Dashboard >> Template
- Then Click Edit HTML
- And search for </body>
- Then paste the following code given bellow just </body> tag
<div align=”center”>
<ul class=”footer-social-icons”>
<li>
<a class=”icon-twitter” rel=”external” href=”Your Twitter Link“>
<span>Follow us</span>
</a>
</li>
<li>
<a class=”icon-facebook” rel=”external” href=”Your Facebook Page link“>
<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(“http://4.bp.blogspot.com/-KyT6y2aCkRk/UbKpF11hwTI/AAAAAAAAKXU/C2U7riacG-g/s1600/ico-footer-twitter.png”) no-repeat scroll 0 0 transparent;
}
.footer-social-icons .icon-facebook {
background: url(“http://4.bp.blogspot.com/-H6CJsyuLEHE/UbKpMFkoKKI/AAAAAAAAKXc/ZIScOiPSEUk/s1600/ico-footer-facebook.png”) no-repeat scroll 0 0 transparent;
}
.footer-social-icons .icon-google {
background: url(“http://1.bp.blogspot.com/-jbMEBuqEbIM/UbKpUTCltQI/AAAAAAAAKXk/A7k1jhf-VFI/s1600/ico-footer-google.png”) no-repeat scroll 0 0 transparent;
}
.footer-social-icons .icon-rss {
background: url(“http://2.bp.blogspot.com/-YLWVHN8nVqQ/UbKpi9SfXaI/AAAAAAAAKXs/x4Iqi_MAmNY/s1600/ico-footer-rss.png”) no-repeat scroll 0 0 transparent;
}
.footer-social-icons .icon-email {
background: url(“http://3.bp.blogspot.com/-72_FrxdhkCM/UbKqLy8ll4I/AAAAAAAAKX4/Nj8czIPSUzw/s1600/ico-footer-email.png”) no-repeat scroll 0 0 transparent;
margin-right: 0;
}
ol, ul {
list-style: none outside none;
}
</style>
</div>
- Now add your social media links for the highlighted area.Then save your template.
- That’s it!
Hope you liked the article and this button. If you have still any doubt then feel free to share it with us in comments. Happy Blogging!