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>

  • 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!

About Harshit Jain

Harshit Jain is a tech-savvy blogger. He is graduated from Mumbai University. He likes to share his knowledge through his own blog at TripoSoft, Best Beard Trimmer, Best Electric Toothbrush & TechHug as well as by writing guest articles on other blogging sites. Follow him on Facebook, Google+, Twitter.

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.