Saturday, June 9, 2012

How To Add Spraying Animated Subscription Buttons On Blogger Blog

Author: Gagan Masoun
How To Add Spraying Animated Subscription Buttons On Blogger Blog
Bloggers daily searching for new blogging tips, stylish social bookmarking widgets, subscription box etc. Today, You will learn "How To Add Spraying Animated Subscription Buttons On Blogger Blog". Before this tutorial I published about hand drawn subscription buttons. But, now you will learn something different from this widget.

You can add spraying animated subscription buttons to your blogger blog easily. Just follow 2 steps given below and make your blog more dashing. 

How It Works On Your Blog?

When you will add 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. It will create amazing view for your visitors. I am sure this will increase your social fan following.

Demo Of Spraying Animated Subscription Buttons

Screenshot Of Spraying Animated Subscription Buttons

Screenshot Of Spraying Animated Subscription Buttons

How To Add Spraying Animated Subscription Buttons On Blogger Blog

  • Go To Blogger Dashboard > Design > Edit HTML (For New Interface Templates > Edit HTML)
  • Backup Your Template Before Making Any Changes
  • Click (Ctrl + F) Search <head> Just After This Code, Copy & Paste Below Code
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
  • Go To Blogger Dashboard --> Layout --> Add A Gadget --> HTML/JAVASCRIPT
  • Now Paste The Code Shown Below Inside It
<style type="text/css">#circle-mod{bottom: 0 !important;right: 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;right:0;padding:0;position:absolute;text-align:center;top:0;width:80px}.btn{position:absolute;height:50px;width:50px;border-radius:25px;top:15px;right: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)}#blogsdaddy-fb.open{top:-125px;right:25px}#blogsdaddy-fb.open.clicked{top:-135px;right:15px}#blogsdaddy-tw.open{top:-105px;right:80px}#blogsdaddy-gplus.open{top:-75px;right:125px}#blogsdaddy-rss.open{top:-30px;right:160px}#blogsdaddy-mail.open{right: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://www.blogsdaddy.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="blogsdaddy-fb" class="btn" style="background:url(http://4.bp.blogspot.com/-8sWA79td_C8/T5qWGh7zLSI/AAAAAAAAANg/pce_C3grCHE/s1600/blogsdaddy_share+buttons2.png) repeat -1px 0" href="http://www.facebook.com/BlogsDaddy" rel="nofollow" target="_blank"></a><a id="blogsdaddy-tw" class="btn" style="background:url(http://4.bp.blogspot.com/-8sWA79td_C8/T5qWGh7zLSI/AAAAAAAAANg/pce_C3grCHE/s1600/blogsdaddy_share+buttons2.png) repeat -52px 0" href="http://twitter.com/BlogsDaddy" rel="nofollow" target="_blank"></a><a id="blogsdaddy-gplus" class="btn" style="background:url(http://4.bp.blogspot.com/-8sWA79td_C8/T5qWGh7zLSI/AAAAAAAAANg/pce_C3grCHE/s1600/blogsdaddy_share+buttons2.png) repeat -157px 0" href="https://plus.google.com/106217413057730068740" rel="nofollow" target="_blank"></a><a id="blogsdaddy-rss" class="btn" style="background:url(http://4.bp.blogspot.com/-8sWA79td_C8/T5qWGh7zLSI/AAAAAAAAANg/pce_C3grCHE/s1600/blogsdaddy_share+buttons2.png) repeat -105px 0" href="http://feeds.feedburner.com/BlogsDaddy" rel="nofollow" target="_blank"></a><a id="blogsdaddy-mail" class="btn" style="background:url(http://4.bp.blogspot.com/-8sWA79td_C8/T5qWGh7zLSI/AAAAAAAAANg/pce_C3grCHE/s1600/blogsdaddy_share+buttons2.png) repeat -210px 0" href="http://feedburner.google.com/fb/a/mailverify?uri=BlogsDaddy" rel="nofollow" target="_blank"></a><a id="base-button"><span class="plus">+</span></a></div></div><a href="http://www.blogsdaddy.com" rel="dofollow"></a> 

Customization Of Spraying Animated Subscription Buttons

  • Replace Highlighted Blue Color Links With Your Social Profile Links
  • Now, Save Your Template & Its Done.... Enjoy :)
Any suggestions, tips & tricks or want to say thanks to us for this beautiful widget. Please use comment box below.

0 comments:

Post a Comment