How To Blog

Do you have attracting and eye catching social media buttons on your blog ? Attracting social media buttons are great source for converting your visitors to your subscribers. After subscription these visitors are changed in to your loyal visitors. If you have thousands of fans and followers in social media than you will definitely get huge traffic from social media. In these days social media is one of the biggest referral traffic source for many blog and websites. If you already have huge traffic than you can increase your traffic through social media channels. By adding attracting social buttons on your blog will not force your visitors to like or follow but it will get attraction of your visitor. Today i came up with very beautiful and attracting social media buttons. You can view them in action in GIF image and you can also view demo of this by following below link.

Live Demo

How to Add Them In Blogger

It's very simple to add them in blogger. if you want to add it in sidebar or footer you just need to follow below steps.

1. Go to Blogger and Select your blog.

2. Go to Layout==> Select Add a Gadget==> HTML/Javascript.

3. A new box will be open showing empty space and title box.

4. Enter suitable title for this widget and paste the blow code in that empty box.

}
#htbssw a{text-decoration:none; font-family:trebuchet ms,sans-serif;
font-weight:bold;
border-radius:25px;
border-style:solid;
border-width:5px;

}
#htbssw li{position:relative; height:45px; cursor:pointer; padding: 0 !important;
border-bottom-style:solid;
font-weight:bold;
border-width:1px;
border-radius:25px;
margin-right:85px;
}
#htbssw .facebook, .googleplus, .pinterest, .rss, .twitter{
position:relative; z-index:5; 
display:block; 
float:none; 
margin:10px 0 0 1; 
width:210px; 
height:38px; 
border-radius:5px; 
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgATvkcBt4zYJYkqaZ2Qf0pUihyZr9dqhOao4UGdlofU1LJu1ZuRneVUnOdFrXXvoLdQaI0yugMc9bvibm-Gw2n0t5maLOEAWxw-x_NSMqiKHlJY5b-GgD2i1ZDhF3vdENepkLIO0Jo/s158/howdoblog.com.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 .35s ease-in-out,background-color .25s ease-in-out;
 -moz-transition:width .35s ease-in-out,background-color .25s ease-in-out; 
-ms-transition:width .35s ease-in-out,background-color .25s ease-in-out; 
-o-transition:width .35s ease-in-out,background-color .25s ease-in-out; 
transition:width .35s ease-in-out,background-color .25s ease-in-out; 
-o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
}
#htbssw li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt);  line-height:32px;
}
#htbssw .icon{overflow:hidden; color:#fafafa;
}
#htbssw .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;
border-radius:25px;
border-style:solid;
border-width:5px;
}
#htbssw .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#htbssw .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#htbssw .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#htbssw .rss{ width:32px;  height:32px;  background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#htbssw li:hover .icon, 
.touch #htbssw li .icon{width:210px;}
.touch #htbssw li .facebook, #htbssw li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #htbssw li .twitter, #htbssw li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #htbssw li .googleplus, #htbssw li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #htbssw li .pinterest, #htbssw li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #htbssw li .rss, #htbssw li:hover .rss{background-color:rgba(255,102,0,1);}
/*Social Buttons Widget By howdoblog.com */
</style>

<ul id="htbssw">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="#">Follow us on Facebook</a></li>
<li data-alt="Follow us on Twitter"><a class="icon twitter" href="#">Follow us on Twitter</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="#">Follow us on Google+</a></li>
<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="#">Follow us on Pinterest</a></li>
<li data-alt="Subscribe with RSS"><a class="icon rss" href="#">Subscribe with RSS</a></li>
</ul>

5. Replace " # " with your links to facebook fanpage, twitter profile and pineterest account.

6. Save that window and save your new blog arrangements and click in view your blog.

7. You can change the location of these buttons on sidebar by just dragging your newly widget up or down in layout tab.

This is all for today. Hope you all will like my this work. If you want to share it on your blog for your readers than please add link back to us. This idea is originally brought by Modernizr but i have made some changes and now it is front of you. If you need any type of help in installing this widget in your blog you can just mention it in comments. Don't miss any tutorial from our side. Get subscribe to get daily updates from our blog. Have a Nice Day.