Cara Membuat Widget Berlangganan via Email (Kotak Subscribe) Keren di sidebar Blogger

Salasatu Widget penting di dalam sebuah blog adalah widget Ikuti lewat Email yaitu menampilkan fitur berupa tombol berlangganan atau Subscribe box dari FeedBurner. Widget ini berfungsi untuk meningkatkan jumlah pengunjung blog tetap secara berkelanjutan setiap blog mempublikasikan artikel terbaru. Pelanggan secara otomatis akan mendapatkan kiriman Email dari Blog Anda tersebut.

Kotak Berlangganan FeedBurner merupakan widget yang harus dipasang (pada Sidebar/HTML Tema) sebagai syarat mutlak bagi blog yang akan di daftarkan ke Google AdSense agar bisa keterima dalam sekali daftar. Karena pengiklan seperti Google AdSense sangat menyukai situs yang sudah memiliki pengunjung tetap untuk menayangkan iklan.

Ketika pemilik ingin memasang widget khusus berlangganan pada blog-nya yang harus dilakukan adalah menambahkan Gadget Ikuti lewat Email atau dengan mendaftarkan blog Anda tersebut ke FeedBurner.com, yaitu situs layanan kiriman postingan/artikel terbaru dari situs web Anda. Nantinya secara otomatis blog Anda mempunyai URL dan ID dari FeedBurner yang bisa dilakukan modifikasi tampilan Subscribe Box di Template atau pada sidebar blog melalui HTML/JavaScript.

Terbaru pemasangan Tombol Berlangganan bisa di modifikasi tampilan menjadi menarik dan lebih profesional, Anda yang suka dengan tampilan berbeda bukan namun tetap responsive?

Cara Membuat Widget Berlangganan via Email (Kotak Subscribe) Keren di sidebar Blogger

Untuk membuat Kotak/Tombol Berlangganan di blog minimal harus memasang widget Ikuti lewat Email yang sudah tersedia pada konten default blogger tinggal memasang. Berikut langkah dalam memasang Widget Berlangganan (Subscribe box) di Blogger...

Langkah pertama Membuat Subscribe Box/follow by Email di Blogger

1. Pertama Login ke Blogger.

2. Pada menu, pilih Tata Letak.

3. Selanjutnya klik Tambahkan gadget.

4. Kemudian pilih widget Ikuti lewat Email > Ganti judul dengan tulisan Anda atau biarkan:

Menambahkan widget berlangganan artikel FeedBurner

• Disini secara otomatis blog Anda sudah memiliki URL dan ID dari FeedBurner, catat baik baik ID tersebut kode ini bisa untuk membuat modifikasi tampilan widget berlangganan kustomisasi.
• Bisa juga dilihat langsung di FeedBurner.com, kurang-lebih seperti ini contoh username atau ID blog:

• ID-nya sama saja.

5. Tinggal Klik Simpan.

6. Selesai.

Widget tersebut adalah blogger tampilan default pada sidebar blog. Untuk mendesain Subscribe Box menjadi menarik biasanya bisa dilakukan modifikasi form melalui HTML Tema atau melalui Rancangan HTML/JavaScript.

Cara Memasang Widget Berlangganan pada sidebar dengan modifikasi

Memodifikasi Subscribe blog para blogger sangat banyak macam gayanya, tampilan keren berguna untuk menarik perhatian pembaca baru agar ikut berlangganan artikel.
Contoh nyata seperti ini:

Dapatkan Update Terbaru Mudahriki !!

Contoh gambar/Widget Berlangganan lewat Email modifikasi pada sidebar blog

Hal pertama yang harus dilakukan adalah menyiapkan ID dari FeedBurner seperti cara pertama berikut langkahnya:

1. Buka Blogger anda yang akan dipasang Widget Berlangganan Modifikasi.

2. Pada menu pilih Tata Letak > Tambahkan Gadget

3. Selanjutnya pilih Rancangan HTML/JavaScript.

4. Kemudian copy kode berikut dan paste pada kolom konten HTML/JavaScript:

<style>

#sidebar-subscribe-box{width:300px;border:1px solid #aaa;border-radius:3px;padding:3px 0}

 .sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjga_gz9l-5GA9ENdPXiwbIZVk4x795M5a-_W_m3wpabQA09FhoPqloEVRLVtosmxg0E3VsZm_ZgxokVRX7wxwQR3AELYB0Fidspq9oqZNOM9dk2f8KSwTxzt8sMUQejmYmPOEoYB7-9Fw/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: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:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW8Y_GKdgbrcenhC4qvL448Y5OjE6OqQg7fbJ2ZG5i5zs45JRxlDgGrotfNZnPOkBnQwOO6NfrQs4y0VK8BPlNeZtI6gmINDIq-HZ4LnU-bAvjbF0VdBI7IhQHy2Ht2L_8tpCk9Rvr76I/s1600/icons.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}

 .sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;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: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{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>Dapatkan Update Terbaru Mudahriki !!</p>

<div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=mudahrizki/OlNQC" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=mudahrizki/OlNQC', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="bloggertrix" />

<input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Masukkan email anda disini"/>

<input class="sidebar-subscribe-box-email-button" title="" type="submit" value="BERLANGGANAN" /></form>

</div></div></div>

Keterangan
Ganti Tulisan berwarna biru sesuai keinginan.
Ganti ID (mudahrizki/OlNQC)dengan ID FeedBurner blog Anda.

5. Jika dirasa selesai, klik Simpan.

Kesimpulan membuat Kotak Berlangganan Subscribe di blogger

Memilih widget berlangganan ternyata bisa dirubah menjadi keren ala blog desainer seperti Arlinadesign atau MasSugeng, pasti membuat pengunjung suka jika anda ingin membuat Kotak Berlangganan keren ala MasSugeng silahkan baca "Cara membuat kotak berlangganan (email subscribe) ala mas Sugeng"

Selamat mencoba ya..