Sexy Spraying Animated Subscription Round + Buttons Widgets V.2 For Blogger
In my previous post I gave you Sexy Hover Effect Social Media Sidebar Button It is similar widget like this but only the difference is that i work very smooth.
How It Works?
When you will install it to your blog then it will appear on right corner of your blog whenever any visitor will click on it smoothly all icons will come out.
Step To Add Spraying Animated Into Blog
Step 1
- Go to blogger dashboard
- Go to Template->Edit HTML
- Now Search <head>
- Now Copy the below code and paste it after <head> code
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
Step 2
Copy the below code and paste it in Html/Javascript of your blog.
<style type="text/css">#circle-mod{bottom: 0 !important;left: 5px !important;position: fixed;}#container-circle{position:relative;height:100px;width:100px}#base-button{background:-moz-linear-gradient(center top,#A90329 0,#8F0222 44%,#6D0019 100%) repeat scroll 0 0 #6D0019;background:-webkit-linear-gradient(top,#a90329 0,#8f0222 44%,#6d0019 100%);background:-o-linear-gradient(top,#a90329 0,#8f0222 44%,#6d0019 100%);background:-ms-linear-gradient(top,#a90329 0,#8f0222 44%,#6d0019 100%);background:linear-gradient(top,#a90329 0,#8f0222 44%,#6d0019 100%);border:4px solid #fff;text-decoration: none;z-index:9999;cursor:pointer;border-radius:50px 50px 50px 50px;box-shadow:0 1px 3px rgba(0,0,0,0.5);color:#fff;font:68px Arial;height:80px;left:0;padding:0;position:absolute;text-align:center;top:0;width:80px}.btn{position:absolute;height:50px;width:50px;border-radius:25px;top:15px;left:15px;-webkit-transition:all 250ms;-moz-transition:all 250ms;-o-transition:all 250ms;-ms-transition:all 250ms;transition:all 250ms;box-shadow:0 1px 3px rgba(0,0,0,.5)}#netoopsblog-fb.open{top:-125px;left:25px}#netoopsblog-fb.open.clicked{top:-135px;left:15px}#netoopsblog-tw.open{top:-105px;left:80px}#netoopsblog-gplus.open{top:-75px;left:125px}#netoopsblog-rss.open{top:-30px;left:160px}#netoopsblog-mail.open{left:175px;top:25px}.plus{-moz-user-select: none;-moz-transition:all 200ms ease-in 0s;-webkit-transition:all 200ms ease-in;-o-transition:all 200ms ease-in}.rot{-moz-transform:rotate(137deg);-o-transform:rotate(137deg);-webkit-transform:rotate(137deg);transform:rotate(137deg)}</style><script type="text/javascript">var delay=40,delayTime;$(function(){btns=$(".btn");$("#base-button").toggle(function(){$("span.plus").addClass("rot");btns.each(function(a){var b=$(this);delayTime=a*delay;window.setTimeout(function(){b.addClass("open")},delayTime)})},function(){$("span.plus").removeClass("rot");$($(btns).get().reverse()).each(function(a){var b=$(this);delayTime=a*delay;window.setTimeout(function(){b.removeClass("open")},delayTime)})})});</script><a href="http://netoopsblog.blogspot.com" style="position:absolute;z-index:-11"><img src="http://1.bp.blogspot.com/-RikrI-c_pyQ/T2DTcP6aMvI/AAAAAAAAAL0/H6v7PVoHM_w/s1600/1x1juice.png" /></a><div id="circle-mod"><div id="container-circle"><a id="netoopsblog-fb" class="btn" style="background:url(http://4.bp.blogspot.com/-8sWA79td_C8/T5qWGh7zLSI/AAAAAAAAANg/pce_C3grCHE/s1600/netoopsblog_share+buttons2.png) repeat -1px 0" href="http://www.facebook.com/lordhtml" rel="nofollow" target="_blank"></a><a id="netoopsblog-tw" class="btn" style="background:url(http://4.bp.blogspot.com/-8sWA79td_C8/T5qWGh7zLSI/AAAAAAAAANg/pce_C3grCHE/s1600/netoopsblog_share+buttons2.png) repeat -52px 0" href="http://twitter.com/technologyblg" rel="nofollow" target="_blank"></a><a id="netoopsblog-gplus" class="btn" style="background:url(http://4.bp.blogspot.com/-8sWA79td_C8/T5qWGh7zLSI/AAAAAAAAANg/pce_C3grCHE/s1600/netoopsblog_share+buttons2.png) repeat -157px 0" href="https://plus.google.com/u/0/113143762085765715608" rel="nofollow" target="_blank"></a><a id="netoopsblog-rss" class="btn" style="background:url(http://4.bp.blogspot.com/-8sWA79td_C8/T5qWGh7zLSI/AAAAAAAAANg/pce_C3grCHE/s1600/netoopsblog_share+buttons2.png) repeat -105px 0" href="http://feeds.feedburner.com/lordhtml" rel="nofollow" target="_blank"></a><a id="netoopsblog-mail" class="btn" style="background:url(http://4.bp.blogspot.com/-8sWA79td_C8/T5qWGh7zLSI/AAAAAAAAANg/pce_C3grCHE/s1600/netoopsblog_share+buttons2.png) repeat -210px 0" href="http://feedburner.google.com/fb/a/mailverify?uri=lordhtml" rel="nofollow" target="_blank"></a><a id="base-button"><span class="plus">+</span></a></div></div><a href="http://netoopsblog.blogspot.com" rel="dofollow"></a>
Now replace the link which I highlighted with red color with your social media link.
Comment Is Best way to say Thanks....:)
0 comments:
Post a Comment