Membuat Subscribe Box Keren di Blog

Ilmu Komputek- Selamat Malam ! Setelah Menge-post tentang Cara Membuat Search Box Keren bergaya Metro di Blog, selanjutnya saya akan menge-post tentang Cara membuat Subscribe Box Keren di Blog. Oke Langsung saja.

1. Login ke akun Blogger anda

2. Masuk ke menu Tata Letak

3. Klik Tambahkan Gadget/Add Gadget

4. Lalu pilih HTML/Javascript

5. Lalu masukkan kode berikut ini 

<style type='text/css'> #sidebar-subscribe-box{background: #ffffff; repeat scroll 0 0 transparent;border:0px solid #eeeeee;border-radius:0px;padding:3px 0} .sidebar-subscribe-box-wrapper{background:#ffffff; repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase} .sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}.sidebar-subscribe-box-email-field{-moz-border-radius:0px;-webkit-border-radius:0px;background:#eeeeee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtLJ6oWU1LoTsfC770G05RkdS1nR9NgKNhQwCOzFlTXfVE37l6FQcF_GNrRqJFklYxx0BNZ0AdnNK1Uq6p8Qv1aI7BaRHylnXEx7nwW4U4ie59uJfNsp9efQjA5ih6Jb-xQATVB_VaZpON/s1600/sprites.png) no-repeat 0 -27px;border:0px solid #ccc;border-radius:0px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}.sidebar-subscribe-box-email-button{background:#1ca4ff;border:0px solid #1ca4ff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}.sidebar-subscribe-box-email-button:hover{background: grey;border:0px solid grey;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}.sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}#footer-section{background:#f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqOtiuIYPMPbsAbVROk3_6-XorTp2EehjgvdlNG_apiuRuENTSysWUsTaZQ-X3scWcr039muxR9xVxNZ4Hh3WlJR_qX4maEmgwMAfVbejC6YGtQ84senpq6N_K4BZszc4WZ_E-vHnv-aFx/s0/bg-pattern.png) repeat top left;border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}</style> <div id="sidebar-subscribe-box"> <div class="sidebar-subscribe-box-wrapper"> <p> Subscribe to our email newsletter & receive updates right in your inbox.</p> <div class="sidebar-subscribe-box-form"> <form action="http://feedburner.google.com/fb/a/mailverify?uri=blogspot/DzCIpP" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open ('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/DzCIpP', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <input name="uri" type="hidden" value="blogspot" /><input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter your email address "/><input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Subscribe Now !" /></form> </div> </div> </div>

6. Nanti hasilnya akan menjadi seperti ini

Selamat Malam

NB: Anda ganti "http://feedburner.google.com/fb/a/mailverify?uri=blogspot/DzCIpP" dengan alamat feedburner anda