Cara Membuat Subscribe Box (Kotak Berlangganan) di Blog

Cara Membuat Subscribe Box (Kotak Berlangganan) di Blog - Hallo Sahabat Zure, Kali ini mimin akan memberikan Tutorial  Cara Membuat Subs...

Cara Membuat Subscribe Box (Kotak Berlangganan) di Blog - Hallo Sahabat Zure, Kali ini mimin akan memberikan Tutorial Cara Membuat Subscribe Box (Kotak Berlangganan) di Blog. Sebelumnya, Apa sih itu Subscribe Box? Subscribe Box adalah Fitur Kotak Langganan yang dibuat untuk mempermudah para Pengunjung Blog, Fitur ini berisi "Formulir Email"untuk berlangganan Postingan atau Konten Blog Kamu Via Email.

Dalam Subscribe Box ini, Jika kamu berlangganan disebuah Blog, Maka setiap ada artikel baru yang mereka buat, otomatis Artikel itu akan masuk ke dalam Emailmu. Subscribe Box ini Bernilai SEO yang dapat menaikkan Jumlah Pengunjung dan sekaligus bisa mendapatkan Backlink,

Sebelum menggunakan Subscribe Box ini, ada baikknya kalian mendaftar dahulu di Feedburner, Jikalau kalian belum mendaftar.

 Baiklah, Berikut adalah langkah-langkahnya:

1. Masuklah ke Bloger>Template/Theme/Tema>Edit HTML

2. Carilah Code ]]></b:skin> lalu Copy-pastekan Code dibawah ini

/*===== Zure Design Subscribe Box Widget =====*/
 #sidebar-subscribe-box{width:290px;border:1px solid #aaa;border-radius:3px;padding:3px 0}
 .sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrkCCCi8q4RyZFAY4kwMXhK87y5OUzyMBcttgRiY-0zSWPPzr8E97o0-_yyurt_Th9ApuWnnQMdHHTx4wAPjs88DwjsATAESozQqf106we7INg9ZeKjm0Wr-ULCRRbt1T9-G67v_oKBxQ/s1600/background.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:none}
 .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:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwGHpYfRjaG1WxSe3Ii42IE-DvNXC_MYEAziMoYeaypdItteA2Km1_qbwT2l15xQHxoj3T1iNgsni5lcvie-hK6dSO1XYEe5SNeE1syb5qx6jTmDO5ARdqnORAO3BwDO8PYzr5vV5HYzo/s1600/icons.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:100%}
 .sidebar-subscribe-box-email-button{background:#009cff;border:1px solid #009cff;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:5px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-align:center;width:100%}
 .sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#0082d4}
 .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:5px;padding:4px 4px 4px}
 #footer-section{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%}
a.social-icons{margin-right: 5px;height:45px;width:45px;}
a.social-icons:hover { opacity: .7; filter:alpha(opacity=70);}

3. Klik simpan Template lalu Klik Tata Letak > Tambah Widget (Widget yang di Sidebar) > HTML/Javascript > Masukkan Code dibawah ini di Bagian Konten.

<div id="sidebar-subscribe-box">
<div class="sidebar-subscribe-box-wrapper">
Dapatkan Update Informasi Terbaru <a href="http://zuredesign.blogspot.com/" target="_blank">Designnya Zure</a> Melalui Email !! 

<div class="sidebar-subscribe-box-form">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=Zuredesign" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Zuredesign', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="Zuredesign" />
<input name="loc" type="hidden" value="en_US" /><input autocomplete="off" class="sidebar-subscribe-box-email-field" name="email" placeholder="Masukan email anda disini..." />
<input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Berlangganan" /></form>
</div>
</div>
</div>

4. Klik Simpan dan Selesai

Semoga Tutorial ini bermanfaat bagi kita semua, jangan pernah Bosan ya berkunjung ke Blognya saya dan juga silahkan Corat-coret di Komentar untuk Kalian yang tidak mengerti Tutorial diatas, Sekian dan Terima Kasih