Elegant Style Social Media Follow Buttons and Subscribe to Feed Button

515 loyal readers

RSS feed | E-mail

1058 followers

Follow us on Twitter!

260 followers

Join us on Facebook!

Here are Elegant Style social media following 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. The design is so attractive you can see the demo of elegant style social media follow button. 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.

Windows Reloded, Get Latest Blogger widgets

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

<style>
#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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpIqto9JTddxl9wsn5WWKLidUTIBH6wSrOMUi3LviOxfVtt9eA1bwLtH0e5zvERHysjfXKs3DOB_DvyK4H-EYWsjyWuhPUlldVi7bwY5gTAZ4dDFkMTNIo2SDHfVMavLv7ABqfaxPr9ks/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);}
</style>

Windows Reloded, Get Latest Blogger widgets

<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/howtowords“>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>
</ul>
<!–Follow Me Sliding Gadget Button by http://www.howtowords.com/—>
<a href=”http://wp.me/p2YPqJ-5n” title=”Add floating social media share buttons to your blog! do not remove this”><span class=”getfloat”>Get This Gadget!</span></a>

Windows Reloded, Get Latest Blogger widgets

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

In the above code, Find this word “howtowords” and 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