Cara membuat kotak berlangganan ( subscribe box) blog

Cara membuat atau memasang kotak berlangganan email di blog (subscribe box)

Kotak langganan atau widget subscribe email adalah alat yang sangat berperan di suatu situs atau website, dengan kita membuat subscribe keren di blog,maka pengunjung dapat dengan mudah berlangganan postingan atau konten blog kita via email, begitu ada update terbaru atau postingan baru yang kita buat,maka akan terkirim secara otomatis ke inbox email mereka.

Subscribe box yang akan kita buat modelnya seperti berikut:


Widget subscribe blogger yang kami bagikan tersebut memiliki nilai "SEO" yang sangat baik buat blog anda, dan dapat menaikkan  jumlah traffic sekaligus mendapatkan backlink yang berkualitas.

Cara membuat langganan email (subscribe box) di blog





Untuk membuat atau memasang kotak subscribe keren tersebut di blog anda,ikuti langkah-langkah berikut:

1. Copy kode script di bawah ini.

<div dir="ltr" style="text-align: left;" trbidi="on">
<style scoped="" type="text/css">
/* Subscribe Stello-Gazello */
#stello-gazello{position:relative;padding:20px 0;background:#333333;overflow:hidden;border-top:5px solid #E73138;box-shadow:0 2px 4px rgba(0,0,0,0.12),0 2px 3px rgba(0,0,0,0.24);border:1px solid #eee}
.stello-wrapper{color:#fff;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;width:100%}
.stello-form{clear:both;display:block;overflow:hidden}
form.stello-form{clear:both;display:block;margin:0;width:auto;overflow:hidden}
.stello-gazello-email-field{background:#415471;color:#ccc;margin:10px 0;padding:15px 20px;width:35%;border:0}
.stello-gazello-email-button{background:#E73138;color:#fff;cursor:pointer;font-weight:700;padding:14px 30px;margin-left:15px;text-transform:none;font-size:16px;border:0;border-radius:0;transition:all .6s}
.stello-gazello-email-button:hover{background:#222;border-top:5px solid #E73138}
#stello-gazello p.stello-note{margin:16px;text-align:center;color:rgba(255,255,255,.6);font-size:180%;font-weight:400;line-height:normal}
#stello-gazello p.stello-note span{position:relative;overflow:hidden;font-weight:700;transition:all .5s}
#stello-gazello p.stello-note span.slensa{font-weight:400;font-style:italic;color:rgba(255,255,255,.6);text-transform:lowercase}
#stello-gazello p.stello-note span.slensa:before,#stello-gazello-css p.stello-note span.slensa:after{display:none}
#stello-gazello p.stello-note span:before{content:&#39;&#39;;position:absolute;bottom:-2px;left:0;width:0;height:3px;margin:10px 0 0;background:rgba(255,255,255,.1);transition:all .5s}
#stello-gazello:hover p.stello-note span:before{width:100%}
</style>
<div id='stello-gazello'>
<p class='stello-note'>
<span>SUBSCRIBE</span> <span class='slensa'>TO</span> OUR NEWSLETTER</p>
<div class='stello-wrapper'>
<div class='stello-form'>
<form action='https://feedburner.google.com/fb/a/mailverify?uri=KupangTechNews' class='stello-form' method='post' onsubmit='window.open (&apos;https://feedburner.google.com/fb/a/mailverify?uri=KupangTechNews&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='KupangTechNews'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='stello-gazello-email-field' name='email' placeholder='Enter your Email'/><input class='stello-gazello-email-button' title='' type='submit' value='Submit'/></form>
</div>
</div>
</div>
</div>

Keterangan script:Gantikan alamat feedburner "Kupang Tech News" yang telah ditandai dengan alamat feedburner web blog atau website anda.

2. Masuk ke akun blogger.
3. Dari dasbor blogger, sentuh atau menemukannya fitur  tata letak.
4. Kemudian sentuh tambahkan gadget.
5. Tap baru yang terbuka adalah daftar gadget, cari atau sentuh ikon plus pada fitur HTML/JavaScript.lihat contoh gambar
   
6. Selanjutnya di dalam tab baru yang terbuka,paste kode script yang tadi telah anda copy ke dalam wadah yang tersedia.
   
7. Sentuh tombol orange Save.
8. Selesai!

Jika telah disimpan maka hasilnya akan nampak seperti gambar Subscribe Box Stello-Gazello di atas.

Informasi: untuk yang belum tau cara membuat Subscribe Box yang kami bagikan,anda dapat membuat web blog atau website terlebih dahulu,lalu ikuti tuthorial cara membuat atau memasang Subscribe Box Stello-Gazello di atas.

Baca disini: Cara membuat web blog atau website gratis menggunakan platform Blogger.

Sekian!

Semoga postingan artikel ini dapat bermanfaat bagi anda yang membutuhkan.