Cara Membuat Subscribe Box Seperti Alpukoding

Subscribe Box atau yang biasa dikenal dengan kotak langganan ini memang sering sekali dipakai untuk mendapatkan pengunjung setia yang akan selalu datang ke blog yang dikunjungi. Subcribe box ini juga dapat membuat pengunjung blog bisa balik lagi dan akan mendapatkan artikel/postingan yang cepat karena jika pengunjung yang sudah melakukan langganan akan otomatis mendapatkan notifikasi di blog tersebut tentu saja dengan cara ini pengunjung tidak perlu repot report bolak balik untuk melihat apakah blog tersebut update atau tidak. Karena sudah ada notifkasi bila pengunjung sudah berlangganan diblog.



Bila sobat melihat blog ini pasti ada subscribe box dibagian bawah yang dihiasi dengan tampilan anime yang bisa membuat orang lain menarik, karena saya sangat suka anime jadi ditambahkan gambar anime biar terlihat kece maksimal :v bagi sobat yang ingin menggunakan subscribe box seperti Alpukoding ini bisa dicoba sendiri dengan Tutorial dibawah ini.



1. Buka Blogger > Klik Tema > Klik tombol Edit HTML > Kemudian tambahkan kode dibawah ini sebelum ]]></b:skin> atau </style>

CSS.note {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibDIx2TPBInj7XRShNhBNd2m8rZ-cv8rq5Uljhck6HLt1LbTdPaJFSIj3TqLL-U1sh1naQwOnOMPXiGhKsId1MNiV32sP-qoaUOHS2Du1GrzW8pdbCyj6htlbpdLHlPaF3HZOFnZ0ayZ-b/s1600/thanks-alpukoding.png) no-repeat left; min-height:38px; padding:10px 12px 12px 68px; margin:5px 0;font:normal 13px Arial,Sans-Serif;border: 1px solid #d9d9d9;border-radius: 2px;box-shadow: 0 1px 1px rgba(0,0,0,.08);color:#333; line-height:25px; }
.note a:link,.note a:visited { color:#333 }
@media screen and (max-width:480px){
.note {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibDIx2TPBInj7XRShNhBNd2m8rZ-cv8rq5Uljhck6HLt1LbTdPaJFSIj3TqLL-U1sh1naQwOnOMPXiGhKsId1MNiV32sP-qoaUOHS2Du1GrzW8pdbCyj6htlbpdLHlPaF3HZOFnZ0ayZ-b/s1600/thanks-alpukoding.png) no-repeat left; }
.note { background:none;padding:1px;}
.note3{display:none}}

2. Setelah itu cari tambahkan kode dibawah ini seterah sobat mau diletakkan dimana saja. Tapi menurut saya bagusnya dibawah tombol Share.

HTML<div class='note'>
<div class='note3'>
Terimakasih telah membaca : <a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>. Silahkan masukan email anda dibawah ini! dan anda akan otomatis mendapatkan kiriman artikel terbaru dari <a class='sitename' expr:href='data:blog.homepageUrl' expr:title='data:blog.title'><data:blog.title/></a>. Terimakasih.<br/>
</div>
<form action='//feedburner.google.com/fb/a/mailverify' class='langanan' method='post' onsubmit='window.open(&apos;//feedburner.google.com/fb/a/mailverify?uri=ekcoTV&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Ketikkan email anda disini&quot;;}' onfocus='if (this.value == &quot;Ketikkan email anda disini&quot;) {this.value = &quot;&quot;;}' type='text' value='Ketikkan email anda disini'/>
<input name='uri' type='hidden' value='alpukoding'/>
<input name='title' type='hidden' value='alpukoding'/>
<input name='loc' type='hidden' value='en_US'/>
<input type='submit' value='Subscribe'/>
</form>
</div>

3. Simpan tema dan lihat hasilnya

Keterangan:

Ganti teks yang saya warnai biru dengan feedburner sobat

Ganti teks yang saya warnai merah dengan nama blog sobat

See the Pen Subscribe Box Alpukoding by Kang Iyan (@KangIyan) on CodePen.

Mungkin sekian artikel Cara Membuat Subscribe Box di Blog dan semoga artikel ini sangat bermanfaat bagi sobat semuanya.