Social Media Follow us Magical Effect Widget for Blogger
Social follow us gadgets for blogger add this beautiful widget for go to your Facebook, Twitter, Google+, Pinterest pages and RSS feed it’s look so cool when you bring your mouse cursor it will be large and Dark you can see below demo.
Add Below Given Code in your blog by add a widget option for social media button in your blog.
<style>
#abt{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#abt a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#abt li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#abt .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://lh6.googleusercontent.com/-O_eNfqyGbXY/Ua7QecE1aiI/AAAAAAAAA_M/CyeEAD56u1M/w35-h158-no/facebook+and+google%252B+.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;}
#abt li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;}
#abt .icon{overflow:hidden; color:#fafafa;}
#abt .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#abt .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#abt .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#abt .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#abt .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#abt li:hover .icon,
.touch #abt li .icon{width:210px;}
.touch #abt li .facebook, #abt li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #abt li .twitter, #abt li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #abt li .googleplus, #abt li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #abt li .pinterest, #abt li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #abt li .rss, #abt li:hover .rss{background-color:rgba(255,102,0,1);}
</style>
<ul id="abt">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="http://www.facebook.com/vktechzone"target="blank">Follow us on Facebook</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="https://plus.google.com/111153762318745795031/posts"target="blank">Follow us on Google+</a></li>
<li data-alt="Follow us on twitter"><a class="icon twitter" href="https://www.twitter.com/vktechzone"target="blank">Follow us on Twitter</a></li>
<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="http://pinterest.com/vktechzone/"target="blank">Follow us on Pinterest</a></li>
<li data-alt="Subscribe via RSS"><a class="icon rss" href="http://www.vktechzone.com/feeds/posts/default"target="blank">Subscribe via RSS</a></li>
</ul>
<small><div style="font-size:50%; text-align:right;"><a href="http://www.vktechzone.com/2014/05/social-media-follow-us-magical-effect.html" target="_blank" title="Get This Widgets">Get This Widget</a></div></small>
Note:-Replace vktechzone with your facebook page ID Replace 111153762318745795031 with your Google+ page ID Replace vktechzone with your Twitter ID Replace vktechzone with your Pinterest ID Replace http://www.vktechzone.com/feeds/posts/default with your Blog RSS URL
How to Add Html/Java widget? Follow below steps to add Widget
- Go to Blogger
- Go to your blog Layout option.
- Now Select Add a Gadget option.
- Now select Html/Java Script option
- Now past the above code in Content area field and press save button.
Know more About How to add Gadget In blogger
You May Also Like-Floating Facebook Like Box
You can drag and adjust widget place in blogger layout
Subscribe to:
Post Comments
(
Atom
)
