Hello Bloggers, Here It Is Awesome And Stylish Ribbon Style Social Facebook, Twitter, Google +, Pinterest and RSS Feeds Follow Buttons With Smooth Rotation For Blog And Website. Now I would like to share this “Ribbon Style Social Follow Buttons With Smooth Rotation” customized by Trickiezone. This is smooth rotation from 3D Social Follow Button then, I changed it into Ribbon Style Follow Button.
Ribbon Style Social Buttons have 4 differents social networking site and 1 RSS Feed button, you will see a
Facebook, Twitter, Google +, Pinterest and RSS Feeds Icons.
All we know that social networking sites is very important to us especially to all bloggers out there, you can increase your blog traffiic simply by following you to your social networking sites and by subscribing to your RSS Feeds link and today I will teach it to you on how to put that buttons into your Blogger.
Features:
1.) Awesome And Stylish Design.
2.) CSS Code.
3.) Easy To Install And Quick To Load.
4.) Rotate On Hover.
5.) Facebook, Twitter, Google +, Pinterest and RSS Feeds Icons Added.
How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To Layout.
4.) Click “Add A Gadget” Where You Want To Add It.
5.) Now Scroll To “HTML-JAVASCRIPT”
6.) Click “+” Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.
How To Add In Website?
1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between <body> </body>.
3.) Save It, Now You Are Done.
<style>#social{border:0px solid #888; margin:0px 0px 0px 0px; padding:0px; } #social:hover {border:0px solid #ccc;cursor:pointer; } .opacity {opacity: 1;margin-left: 50px;-moz-transition: all 1s ease-out;-o-transition: all 1s ease-out;-webkit-transition: all 1s ease-out;-ms-transition: all 1s ease-out;transition: all 1s ease-out;-moz-transform: rotate(360deg);-o-transform: rotate(360deg);-webkit-transform: rotate(360deg);-ms-transform: rotate(360deg);transform: rotate(360deg);filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');zoom: 0;} .opacity:hover {opacity: 0.65;-moz-transform: rotate(0deg);-o-transform: rotate(0deg);-webkit-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');zoom: 0;}</style><a href="http://facebook.com/EXEIdeas2010" rel="nofollow" target="_blank" title="Like Our Facebook Page"><img alt="Icon" border="0" class="opacity" id="opacity" img="img" src="https://1.bp.blogspot.com/-W1aO8YaW08o/UH50oXJb8WI/AAAAAAAABsg/MynUZuKFe2Q/s320/Facebook.png" style="margin-right: 1px;" /></a><a href="http://twitter.com/EXEIdeas" rel="nofollow" target="_blank" title="Follow Our Updates On Twitter"><img alt="Icon" border="0" class="opacity" id="social" img="img" src="https://4.bp.blogspot.com/-6R_fACCwbx0/UH502D8r8iI/AAAAAAAABss/JQQzGF1Af4M/s320/Twitter.png" style="margin-right: 1px;" /></a><a href="https://plus.google.com/102256859586166648016" rel="nofollow" target="_blank" title="Follow Us On Google+"><img class="opacity" id="social" img="img" src="https://3.bp.blogspot.com/-ty8KRg1-_Wc/UH51ATKtd8I/AAAAAAAABs4/xrdyvnnT454/s320/Google%2Bplus.png" style="margin-right: 1px;" /></a><a href="http://pinterest.com/EXEIdeas" id="opacity" rel="nofollow" target="_blank" title="Follow Us On Pinterest"><img alt="Icon" border="0" class="opacity" id="social" img="img" src="https://3.bp.blogspot.com/-jOGSreFAmyQ/UH51izwTz5I/AAAAAAAABtE/MHvO-YDuamc/s320/Pinterest.png" style="margin-right: 1px;" /></a><a href="http://feeds.feedburner.com/EXEIdeas" target="_blank" title="Grab Our Rss Feed"><img alt="Icon" border="0" class="opacity" id="social" img="img" src="https://1.bp.blogspot.com/-hUmy2a1rd4E/UH50TwJtnaI/AAAAAAAABsU/tzUkQ1Sd1hw/s320/RSS.png" style="margin-right: 1px;" /></a>Customization:
1.) Change “EXEIdeas2010” into your Facebook page account username.
2.) Change “EXEIdeas” into your Twitter account username.
3.) Change “102256859586166648016” into your Google + account.
4.) Change “EXEIdeas” into your Pinterest account username.
4.) Change “EXEIdeas” into your Feedburner blog name.
Hope this tutorial/article useful l to you. If there’s something wrong with the code please leave a feedback below. Thank You!
About the Author:John Francel is a part time Blogger, Online Marketer’s , Founder of Trickiezone. See more Blogger tutorials, widgets and SEO tips and you can reach John by visiting on Trickiezone
thank you for posting this blogger widget
You Are Welcome…
The New design of EXEideas.. I like it..
http://www.MoreBlogTools.com
Thanks…
Is is possible to increase the size of the icons?
Sorry, All Images Are Pre Resized To 48×48…
How can I make them appear as vertical rather than horizontal?
Just Add BR Tag After Every Image Tag End…
Could you please mail me the code for vertical appearance?
I don’t know much about coding..
juren007@gmail.com
Check Your E-Mail…
Thank you so much. You are the best. No other website helps people like you do. I have asked doubts in many of your articles and you have always responded quickly. Keep up the good work.
God bless u!
I have a problem with the code. Please check your email.
Check Your E-Mail Again…
Thanks For Leaving Your Review…
Its still the same. I have mailed you.
Check Your New E-Mail With Live DEMO HTML File…
Thank a lot. Works perfectly.
You Are Welcome Here…