Cara Pasang Tombol Berlangganan dgn efek Spraying animated

Cara Pasang Tombol Berlangganan dgn efek Spraying animated
Sudah banyak tutorial cara Pasang kotak langganan artikel | subscribe dengan berbagai Variasi, bentuk atau model, pada kesempatan kali ini saya ingin membagikan Cara membuat Tombol Langganan Artikel Spraying animated yang tentunya agak sedikit berbeda dan bergaya Spraying animated. Dimana Kotak berlangganan akan muncul setelah Tombol + di klik, tombol berlangganan animasi inu diciptakan oleh Redeyeoperations
Tombol Berlangganan ini cukup elegan dan kelihatan keren, dan bagi sobat yang ingin menjajalnya silahkan ikuti langkah-langkah berikut ini

Features

5 subscription buttons
jQuery Animation
Effective CSS3 Animation

Cara Pasang di Blog

Pertama
SIlahkan klik Template -> Edit HTML

Copy dan Paste Code berikut dibawah <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

Kedua
Silahkan menuju Tata Letak+Tambah Gadget+HTML/JavaScript

Copy dan Paste Code Berikut ini :

<!--kumpulancara.com Spraying animated subscription buttons -->
<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/kumpulancara" 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/daenkblog" 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/112764290697005874210" 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/kumpulancara/YkOq" 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=kumpulancara/YkOq" rel="nofollow" target="_blank"></a><a id="base-button"><span class="plus">+</span></a></div></div><a href="http://www.kumpulancara.com" rel="dofollow"></a><!--kumpulancara.com Spraying animated subscription buttons --><!-- kumpulancara.com Spraying animated subscription buttons -->
Silahkan Ganti
http://www.facebook.com/kumpulancara
http://twitter.com/daenkblog
https://plus.google.com/u/0/112764290697005874210
http://feeds.feedburner.com/kumpulancara/YkOq
http://feedburner.google.com/fb/a/mailverify?uri=kumpulancara/YkOq

Selamat mencoba

Cara Pasang Tombol Berlangganan dgn efek Spraying animated 10out of 10 ratings.
Powered by Blogger.