Elegant Style social media follow buttons and subscribe to feed button for Blogger and WordPress is available for free to use. It can be shown in a widget of WordPress and gadget of Blogger. Design is so attractive you can see the demo of elegant style social media follow buttons.  And you are also free to customize with your own links. With the help of this follow buttons you surely have more social media followers. To have a copy of elegant style social media sharing button you all need to follow some certain steps written below.

See Live Demo


See Also: 7 Customized Facebook Floating Plugin for WordPress and Blogger

First copy the below code and Paste it into Notepad or any Text Editor

[box color=”blue” icon=”accept”]


#wtss{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#wtss a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#wtss li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#wtss .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://lh4.googleusercontent.com/-l0EYSSxxuc8/UFd37FdwjzI/AAAAAAAAG2E/CDbmwPO4haA/s800/sprites.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;}
#wtss li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;}
#wtss .icon{overflow:hidden; color:#fafafa;}
#wtss .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#wtss .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#wtss .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#wtss .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#wtss .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#wtss li:hover .icon,
.touch #wtss li .icon{width:210px;}
.touch #wtss li .facebook, #wtss li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #wtss li .twitter, #wtss li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #wtss li .googleplus, #wtss li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #wtss li .pinterest, #wtss li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #wtss li .rss, #wtss li:hover .rss{background-color:rgba(255,102,0,1);}

<ul id=”wtss”>
<li data-alt=”Follow me on Facebook”><a class=”icon facebook” href=”http://www.facebook.com/howtowords“>Follow on Facebook</a></li>
<li data-alt=”Follow me on Twitter”><a class=”icon twitter” href=”http://www.twitter.com/mrmubi2“>Follow on Twitter</a></li>
<li data-alt=”Follow me on Google+”><a class=”icon googleplus” href=”http://plus.google.com/103803904451424576751/posts”>Follow on Google Plus</a></li>
<li data-alt=”Subscribe with pinterest”><a class=”icon pinterest” href=”http://pinterest.com/howtowords/”>Follow on Pinterest</a></li>
<li data-alt=”Subscribe with RSS”><a class=”icon rss” href=”http://feeds.feedburner.com/howtowords“>Subscribe to RSS feed</a></li>
<!–Follow Me Sliding Gadget Button by http://www.howtowords.com/—>
<a href=”http://wp.me/p2YPqJ-5v” title=”Add floating social media share buttons to your blog! do not remove this”><span class=”getfloat”>Get This !</span></a>


Now follow the below tutorial of how you can edit the code with your own social media profiles or pages add these social follow buttons to your own Blogger or WordPress.

In above code, Find this word howtowords and mrmubi2, then replace the word with your own Facebook, Twitter, Feed Burner, and Pintrest username

Then find this code 103803904451424576751 and replace it with your own Google+ Profile username

If you are newbie and facing trouble to find your username or edit above code then you are free to ask your query in below comment form.

How to Add Social Media Follow Buttons in Blogger

It is very easy to add social media follow buttons in Blogger. Do as written below.

  • Login in to your Blogger dashboard
  • Go to Layout
  • Then click on Add a Gadget and select HTML gadget
  • Paste above code after modification and give a name to gadget or leave it blank and save the gadget
  • Place the gadget anywhere you want to show these social media follow buttons on your blog

See Also: Blogger Template Free Download

How to Add Social Media Follow Buttons in WordPress

  • Login in to WordPress dashboard
  • Click on Appearance
  • Then click Widgets
  • Open a TEXT widget and paste the modified code in it
  • Give a name to widget or leave it blank
  • Select the area of widget where you want to show social media follow buttons and feed burner subscription button
  • Then save

Now see your blog and enjoy the elegant style social media follow buttons.