Elegant Style Social Media Follow Buttons and Subscribe to Feed Button


Elegant Style Social Media Follow Buttons and Subscribe to Feed Button

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.

14 thoughts on “Elegant Style Social Media Follow Buttons and Subscribe to Feed Button

  1. Just what I was looking for Mubashir!

    However, I was looking out for social buttons where even the counter numbers show alongside – any ideas where and how can we get those. I know of the paid ones, but wanted to know if there are any free ones too.

    Thanks for sharing. 🙂

    • Thanks Harleena,
      There are a many of free Social Media Sharing buttons which will also shows numbers alongside. Search a plugin if you are using WordPress otherwise let me know I will find a good one for you

  2. Hey Mubashir!

    Can you made these buttons with a little modification. If you replace the Pinterest with Youtube?

  3. I have made a blog and I want to get page views but I am not getting it, and please make post a blog post on how to make your website popular.

    • Hey Ali,
      I have visited your Blog. It is hosted on Blogger. And Blogger has its built-in gadget to show page views. Go to your blogger layout page and then click on add a gadget, you will find a list of gadgets. In them page views gadget is also available

  4. Mubashir, I’m curious if you can point me to an actual live demo of these social media buttons? Buttons look good, instructions seem very straight forward too. Thanks.

Leave a Reply

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

Time limit is exhausted. Please reload the CAPTCHA.