I've added this widget to my blog at right side, move your mouse over the "Follow Us On Facebook" and you will see the whole blue colour of facebook expanding over the area.
In last post I've explained "How to get Displayed Author Image in Google Search Results" it was really awesome as getting author's image in google its very nice feeling
Anyways, Social Subscription widgets are always favorite widgets of all bloggers, there is no one who don't want to add them to his blog. This widget is really awesome as it gives Sexy and Fantastic look to visitor and visitor subscribes your Facebook, Twitter or etc etc profiles.
You can also have a look at "Make your Own Beautiful CSS Blogger Bagde"
Features
- Covers the most used four social networking buttons plus an RSS icon
- Smooth Sexy expand on hover
- Use of CSS sprites
- Very neat and clean
- No JavaScript. No jQuery. It's pure CSS
- Facebook, Google+, Twitter, Blogger, Pinterest, RSS Subscription Links.
Adding the widget to your Blog
If you want to Add this widget to blogger's blog then follow below steps-
- Go To Blogger Dashboard
- Click on Layout tab.
- Now click On Add Gadget>>HTML/JavaScript
- Now Paste below code there.
<style>
#tbisose{list-style:none; text-decoration:none; font-size:1.2em; font-family:'Bree Serif',serif;}
#tbisose a{text-decoration:none; font-family:'Bree Serif',serif;}
#tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#tbisose .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/AVvXsEhpC5Pm6A-uvB6WfM54VFqfbydJIHXKNVsMSioSUjx2CRHt-NCDL7tM-Z_r7eMZBhdGLBm3LSC-uc13wWI4qsiuEJAe1kY7hoiLgeDOruhjwMPjoB5KerWYihf_UsobdWzaGXsPtXgoDGE/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;}
#tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;}
#tbisose .icon{overflow:hidden; color:#fafafa;}
#tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#tbisose .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#tbisose li:hover .icon,
.touch #tbisose li .icon{width:210px;}
.touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);}
</style>
<ul id="tbisose">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="www.facebook.com/techghanta">Follow us on Facebook</a></li>
<li data-alt="Follow us on Twitter"><a class="icon twitter" href="https://twitter.com/rohitasare1">Follow us on Twitter</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="https://plus.google.com/104668699860095054602">Follow us on Google+</a></li>
<li data-alt="Follow us on Blogger"><a class="icon pinterest" href="http://www.blogger.com/follow-blog.g?blogID=6954204432185649959">Follow us on Blogger</a></li>
<li data-alt="Subscribe with RSS"><a class="icon rss" href="http://feedburner.google.com/fb/a/mailverify?uri=myrockingtips">Subscribe with RSS</a></li>
</ul>
Replace all # with your respective social networking URLs.
Save this widget and preview your blog if it look nice on your blog then comment below. If you want any help then comment our problem below.
Keep sharing our tricks with your freinds !
Want More Tricks? Go To TechEthix OR Check Our Popular Posts !
Want More Tricks? Go To TechEthix OR Check Our Popular Posts !
0 comments:
Post a Comment