Add Fixed 3D Social Buttons With Hover Effect to your Blog

Today i tell you how to add cool Fixed 3D social buttons with mouse hover effect.These buttons float on right side of your blog and when you move your mouse over then they turn info colorful 3D button.And the main feature of this widget is that they move with you when you scroll down.This widget surely increase your blog traffic, Social sharing likes and your blog reader.Then why are you waiting get this widget now !!

---

Add This Widget To Your Blog

---

1-Goto Blogger Dashboard > Layout > Add Widget.
2-Select HTML/Javascript widget.
3-Now paste the below code in it,

<!-- rnhckr.com 3D Social Widget Code -->
<style> .TNT-flt-wdt { position:fixed; right:10px; top:36% ; } .TNT-flt-wdt img { float:right; clear:right; margin:1px; -webkit-transition: all .0s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .TNT-flt-wdt img:hover { -moz-transform: scaleundefined1.2) rotateundefined6deg); -webkit-transform: scaleundefined1.2) rotateundefined6deg); -o-transform: scaleundefined1.2) rotateundefined6deg); -ms-transform: scaleundefined1.2) rotateundefined6deg); transform: scaleundefined1.2) rotateundefined6deg); } </style> <div class="TNT-flt-wdt">
<style> .TNT1 { display: block; width: 64px; height: 64px; background: urlundefined'http://1.bp.blogspot.com/-tx_vF9eQ4-0/UDTfscLT45I/AAAAAAAABnc/xpo5WKfAR5M/s1600/Facebook+Icon.png') bottom; text-indent: -99999px; } .TNT1:hover { background: urlundefined'http://3.bp.blogspot.com/-CW5UXw9tlJ4/UDTftHq12XI/AAAAAAAABnk/OYNJ1Z9KDi8/s1600/Facebook+Rollout+Image.png') bottom; height: 64px; } </style> <a class="TNT1" href="YOUR FACEBOOK LINK HERE"></a>

<style> .TNT2 { display: block; width: 64px; height: 64px; background: urlundefined'http://3.bp.blogspot.com/-xs-A-sxI5Rg/UDTfxKZSl5I/AAAAAAAABoM/4lSjbIAwLn4/s1600/Twitter+Icon.png') bottom; text-indent: -99999px; } .TNT2:hover { background: urlundefined'http://4.bp.blogspot.com/-Av3BgeByurw/UDTfxgVGqYI/AAAAAAAABoU/4BmnsYNK6JE/s1600/Twitter+Rollout+Image.png') bottom; height: 64px; } </style> <a class="TNT2" href="YOUR TWITTER LINK HERE"></a>

<style> .TNT3 { display: block; width: 64px; height: 64px; background: urlundefined'http://4.bp.blogspot.com/-1s1g_MazmMc/UDTftg_jb1I/AAAAAAAABns/2JhD1VYDYfc/s1600/Feedburner+Icon.png') bottom; text-indent: -99999px; } .TNT3:hover { background: urlundefined'http://4.bp.blogspot.com/-464885HODoE/UDTfuVzBYKI/AAAAAAAABn0/-yMgRXt2hUA/s1600/Feedburner+Rollout+Image.png') bottom; height: 64px; } </style> <a class="TNT3" href="YOUR RSS FEED LINK HERE"></a>

<style> .TNT4 { display: block; width: 64px; height: 64px; background: urlundefined'http://2.bp.blogspot.com/-N5kf9ym1mWk/UDTfvIvzklI/AAAAAAAABn8/jCexUi767Ko/s1600/Google+Icon.png') bottom; text-indent: -99999px; } .TNT4:hover { background: urlundefined'http://3.bp.blogspot.com/-viLihCxmAMo/UDTfvlGxnzI/AAAAAAAABoE/kfF_v8Rq_7U/s1600/Google+Rollout+Image.png') bottom; height: 64px; } </style> <a class="TNT4" href="YOUR GOOGLE PLUS LINK HERE"></a>
</div>
<!-- rnhckr.com 3D Social Widget Code -->

4- Replace YOUR FACEBOOK LINK HERE with you facebook fan page url.

5- Replace YOUR TWITTER LINK HERE with your twitter page url.

6-. Replace YOUR RSS FEED LINK HERE with your rss feed url.
7- Replace YOUR GOOGLE PLUS LINK HERE with your google+ profile url.
8-Save It...that's all
Hope you all Like This post ...so make your valuable comment if you like this post.