Cara membuat tombol Subscription keren pada blog

Gadget satu ini merupakan salah satu gadget terpenting yang harus dipasang di blog sobat.Gadget ini berfungsi untuk pembaca yang ingin dikirimkan artikel pada blog sobat ke alamat E-mail pembaca.Namun bagaimana bisa dipasang jika ruang blog sobat sudah penuh?tenang,yang saya akan bahas kali ini bersifat auto-hide jadi dapat menghemat ruang blog sobat.


Oke kita langsung mulai tutorialnya :

1. Pertama masuk ke blogger
2. Lalu buka Tata letak-tambah gadget-HTML/JavaScript

     3.lalu copy kode berikut pada kotak dialog

<style type="text/css"> #gb{ position:fixed; top:50px; z-index:+1000; } * html #gb{position:relative;} .gbtab{ height:100px; width:30px; float:left; cursor:pointer; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtbnQP37T0eokMwK3gbMTybqFOHdct9qlEmb3b3Y0YOHaGeYLUEyIMLY_9wmNsp9JckgMchKzVE89IwkhuuU8mU44Z1LqHC4IppyekbbOjU8G74Mb4qEgTV7CpV-G_3NxZZbMsKeeJXO0/s1600/subscribe4.png') no-repeat; } .gbcontent{ float:left; border:2px solid #A5BD51; background:#F5F5F5; padding:10px; } </style> <script type="text/javascript"> function showHideGB(){ var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0); gb.opened = !gb.opened; } function moveGB(x0, xf){ var gb = document.getElementById("gb"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; gb.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} } </script> <div id="gb"> <div class="gbtab" onclick="showHideGB()"> </div> <div class="gbcontent"> <style> form.feedburner{ margin-bottom;5px; display:block; clear:both; } .RBstyle{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5eXADF1F9wA7Va51dpwKu7radf_5thzgcf_rgBiMocvURbIRp-_jNFHvlxjY1J5tvzQAHw4CZTer0QTPoKvguBYwbbTv7jN2pkr_ElcWQ9Hfn7VyQMXHBDvwORErWw1fFD8bAg9IDb-w/s320/1420038175_icon-ios7-email-32.png) no-repeat scroll 4px center transparent; padding:9px 20px 9px 35px; color:#666; font-weight:bold; text-decoration:none;box-shadow: #B3B3B3 5px 5px 5px; border:1px solid #D3D3D3; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 1px 1px 2px #CCC inset; -webkit-box-shadow: 1px 1px 2px #CCC inset; box-shadow: 5px 5px 7px #CCC inset; } .RBsubmit{ color:#666; font-weight:bold; text-decoration:none; padding:6px 20px; border:1px solid #D3D3D3; cursor: pointer; -moz-border-radius: 4px; -webkit-border-radius: 4px; -goog-ms-border-radius: 4px; border-radius: 4px; background: #fbfbfb; background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4)); background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 ); background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); } #emailwidget-outer { -moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; -goog-ms-border-radius: 10px 10px 10px 10px; border-radius: 10px; background: none repeat scroll 0 0 transparent; border: 1px solid #D3D3D3; padding: 8px; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; width:auto; } #emailwidget-outer:hover{ background: none repeat scroll 0 0 #FFF; -moz-box-shadow: 1px 1px 2px #CCC inset; -webkit-box-shadow: 1px 1px 2px #CCC inset; box-shadow: 1px 1px 2px #CCC inset; } #emailwidget-outer td{ padding:3px 0; } </style> <div style='align:center;float:center;text-align:center;'> <div id='emailwidget-outer'> <div id='emailwidget'> <table style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;' width='100%'> <tbody> <tr style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'> <td align='left' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'> <p style='color:#666; font-weight: bold; font-size: 16px; margin:0px 0px 5px 0px; '> Get free E-mail updates!</p> <form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri= Heroesman', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'> <input name='uri' type='hidden' value='Realcombiz'/> <input name='loc' type='hidden' value='en_US'/> <input class='RBstyle' name='email' onblur='if (this.value == "") {this.value = "Enter your email…";}' onfocus='if (this.value == "Enter your email…") {this.value = ""}' type='text' value='Enter your email…'/></form> </td></tr> </tbody></table> </div> </div> </div> <div style="text-align:right"> <a href="http://heroesman.blogspot.com/2015/01/cara-membuat-tombol-subscription-keren.html"> [get this] </a> </div> </div> </div> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.right = (30-gb.offsetWidth).toString() + "px"; </script>

NB : ganti kata Heroesman dengan ID RSS feed sobat masing-masing

     4.Lalu simpan pada blog sobat

Bagaimana sobat,sangat mudah kan?namun jika sobat menemukan kendala bisa komentar pada kolom dibawah