Judul : Cara Pasang Tombol Berlangganan dgn efek Spraying animated
link : 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiisMsHPlBGdxthzU1x4gQAr1i-UMfKGZ98bxcRzmcZl82fEO7a_mSr04wmxnengO67xvnu-n9Ar8iGmeYhrJ9zZtegt9OZX6tJC4ZK-vS-klFLnYdzbn8d2y1LyiQMUoVNvndqx2UN1zY/s1600/1x1juice.png" /></a><div id="circle-mod"><div id="container-circle"><a id="netoopsblog-fb" class="btn" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigbU_uf9Kk9TjX8BPftzUjx-Rjy7Iz2x3jo8LtXXAs7goPv86XL90iAfbnWsCl9Bu3-FlWi1xXlReld50V6SvXW1iRAWXRcvljpTF7btiXkx6Zrb5kRO_u5rcvlfKsigmas7mqddrTB8E/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigbU_uf9Kk9TjX8BPftzUjx-Rjy7Iz2x3jo8LtXXAs7goPv86XL90iAfbnWsCl9Bu3-FlWi1xXlReld50V6SvXW1iRAWXRcvljpTF7btiXkx6Zrb5kRO_u5rcvlfKsigmas7mqddrTB8E/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigbU_uf9Kk9TjX8BPftzUjx-Rjy7Iz2x3jo8LtXXAs7goPv86XL90iAfbnWsCl9Bu3-FlWi1xXlReld50V6SvXW1iRAWXRcvljpTF7btiXkx6Zrb5kRO_u5rcvlfKsigmas7mqddrTB8E/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigbU_uf9Kk9TjX8BPftzUjx-Rjy7Iz2x3jo8LtXXAs7goPv86XL90iAfbnWsCl9Bu3-FlWi1xXlReld50V6SvXW1iRAWXRcvljpTF7btiXkx6Zrb5kRO_u5rcvlfKsigmas7mqddrTB8E/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigbU_uf9Kk9TjX8BPftzUjx-Rjy7Iz2x3jo8LtXXAs7goPv86XL90iAfbnWsCl9Bu3-FlWi1xXlReld50V6SvXW1iRAWXRcvljpTF7btiXkx6Zrb5kRO_u5rcvlfKsigmas7mqddrTB8E/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<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiisMsHPlBGdxthzU1x4gQAr1i-UMfKGZ98bxcRzmcZl82fEO7a_mSr04wmxnengO67xvnu-n9Ar8iGmeYhrJ9zZtegt9OZX6tJC4ZK-vS-klFLnYdzbn8d2y1LyiQMUoVNvndqx2UN1zY/s1600/1x1juice.png" /></a><div id="circle-mod"><div id="container-circle"><a id="netoopsblog-fb" class="btn" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigbU_uf9Kk9TjX8BPftzUjx-Rjy7Iz2x3jo8LtXXAs7goPv86XL90iAfbnWsCl9Bu3-FlWi1xXlReld50V6SvXW1iRAWXRcvljpTF7btiXkx6Zrb5kRO_u5rcvlfKsigmas7mqddrTB8E/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigbU_uf9Kk9TjX8BPftzUjx-Rjy7Iz2x3jo8LtXXAs7goPv86XL90iAfbnWsCl9Bu3-FlWi1xXlReld50V6SvXW1iRAWXRcvljpTF7btiXkx6Zrb5kRO_u5rcvlfKsigmas7mqddrTB8E/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigbU_uf9Kk9TjX8BPftzUjx-Rjy7Iz2x3jo8LtXXAs7goPv86XL90iAfbnWsCl9Bu3-FlWi1xXlReld50V6SvXW1iRAWXRcvljpTF7btiXkx6Zrb5kRO_u5rcvlfKsigmas7mqddrTB8E/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigbU_uf9Kk9TjX8BPftzUjx-Rjy7Iz2x3jo8LtXXAs7goPv86XL90iAfbnWsCl9Bu3-FlWi1xXlReld50V6SvXW1iRAWXRcvljpTF7btiXkx6Zrb5kRO_u5rcvlfKsigmas7mqddrTB8E/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigbU_uf9Kk9TjX8BPftzUjx-Rjy7Iz2x3jo8LtXXAs7goPv86XL90iAfbnWsCl9Bu3-FlWi1xXlReld50V6SvXW1iRAWXRcvljpTF7btiXkx6Zrb5kRO_u5rcvlfKsigmas7mqddrTB8E/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 -->
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
Demikianlah Artikel Cara Pasang Tombol Berlangganan dgn efek Spraying animated
Sekian Cara Pasang Tombol Berlangganan dgn efek Spraying animated, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingankali ini.
