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


#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.

About Mobashhir

I am founder, designer and author of How To Words. I am SEO expert. My areas of interest are blogging, web designing, web development, online marketing, techology reviews and social media.


  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. 🙂
    Harleena Singh recently posted…How to Make Your Life Easier in Simple Ways

    • 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. Thanks for sharing…great help…

  3. Vishesh Kachheda says

    Hey Mubashir!

    Can you made these buttons with a little modification. If you replace the Pinterest with Youtube?
    Vishesh Kachheda recently posted…7-Zip: A Free Alternative to WinRar and WinZip

  4. Hey Vishesh!
    Yes I have made it for you 🙂
    I have replaced Pinterest with YouTube. You can see live demo here. And you can download the code from here
    Mubashir recently posted…Create Custom Search Engine for Blogger and WordPress

  5. 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.
    Syed Ali recently posted…Harry Potter and the Philosopher 1080P

    • 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

  6. 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.
    Gary Hyman recently posted…How To Generate More Conversions with Solid Squeeze Page Design

  7. This isn’t working for me 🙁 I’ve done it three times and it still doesnt show
    Ivyanna recently posted…Fitness Friday: Fitness Slogan Tees

Speak Your Mind


CommentLuv badge