Add Horizontal Floating Social Media and Newsletter Icons for Blogger

For boosting our articles we need social networks.We can’t go there and share our articles.For this we need Social icons. Recently I added Scrolling Slide Hover Pop-Up Subscription Box for blogger. Now I’m here to share an new Social Icons with Newsletter icon for blogger. You can add this icons anywhere on your blog.Because these icons are so small. For my ideas the best place for placing these icon is bellow the navigation buttons.

[Live Demo]

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“>
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(“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>