Adding Social Media on you Blogger Blog

We've learn lots of information regarding on how we promote our website on my previous post. Now I teach you how to interact you're audience to some social media button. Social Media Button has a vital part in promoting your site on likewise search engine optimazation (SEO) signalling on the ranking of you website. Below is the step by step on how you can add social media button on you blogger site.

1. First You must signin with your respective blogger site.
2. Second go to the Layout Setting.
3. In the Layout Setting hit the "ADD GADGET"

4. Look for the “HTML/JavaScript” on Gadget and click for it.

 5. On the Java Script Box, Copy the code below and simple paste the prepare html code on it.

6. Code:

<style>
#abt{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#abt a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#abt li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#abt .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivIsnPtRd31Q5YNKMpNFaxRafvISsZSz5X3SoS9s55vHizNOjLlerI100oOeIkThxib_HMWQdpFwHpo64VpJ-n5cAfeRh71IJcyS0gC8N5JcTxx2SYAAzX_6WQOauYkIJycGjoJl0HXOQ/w35-h158-no/facebook+and+google%252B+.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#abt li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;}
#abt .icon{overflow:hidden; color:#fafafa;}
#abt .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#abt .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#abt .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#abt .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#abt .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#abt li:hover .icon,
.touch #abt li .icon{width:210px;}
.touch #abt li .facebook, #abt li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #abt li .twitter, #abt li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #abt li .googleplus, #abt li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #abt li .pinterest, #abt li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #abt li .rss, #abt li:hover .rss{background-color:rgba(255,102,0,1);}
</style>
<ul id="abt">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="https://www.facebook.com/pages/Tips-on-how-to-promote-your-website/216573458454890"target="blank">Follow us on Facebook</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="https://plus.google.com/+vamert/posts"target="blank">Follow us on Google+</a></li>
<li data-alt="Follow us on twitter"><a class="icon twitter" href="https://twitter.com/vamert"target="blank">Follow us on Twitter</a></li>
<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="http://pinterest.com/vamert/"target="blank">Follow us on Pinterest</a></li>
<li data-alt="Subscribe via RSS"><a class="icon rss" href="http://webspromotetraffic.blogspot.com/feeds/posts/default"target="blank">Follow us and Get Update</a></li>
</ul>
<small><div style="font-size:50%; text-align:right;"><a href="http://www.webspromotetraffic.blogspot.com" target="_blank" title="Get This Widgets">Widget by How to Promote Your Website</a></div></small>

 7.  Now your social media button is now ready and may look like this. See below

Note: Please Change all the text in YELLOW with you own profile id.