Cara Membuat Subscribe Box Minimalis Dibawah Postingan Blog

Dalam membuat sebuah blog, pasti kita mengharapkan banyak pengunjung yang membaca blog kita. Agar blog kita mampu bersaing di mesin pencarian dan mendapat unique visitor atau pengunjung tetap, tentu ada banyak cara yang dilakukan oleh para Blogger. Nah salah satunya adalah dengan menampilkan kotak subscribe box.

Mungkin pada saat ini Blogger belum secanggih saudaranya, yaitu Youtube dalam mengakomodasi para pelanggan atau pengunjung suatu blog. Jika di Youtube kita tinggal tekan "Subscribe" dan tombol lonceng notifikasi, maka otomatis update konten terbaru akan masuk ke email para subscribernya.

Lain halnya jika kita memakai sebuah blog, kita harus menampilkan widget subscribe blog dan biasanya kita letakkan di sidebar. Tapi masalahnya dengan menambah widget, maka akan menambah pula waktu loading blog kita. Dan itu sangat ditakuti para Blogger yang mengutamakan kecepatan loading blog.

Supaya kita bisa mengakomodasi para unique visitor blog kita, biasanya kita memanfaatkan fasilitas gratis dari Feedburner milik Google. Yang berfungsi hampir mirip seperti email marketing, agar pengunjung setia kita tidak ketinggalan update dari postingan-postingan terbaru kita.

Nah, kali ini saya akan membagikan sebuah Subscribe Box yang bisa kalian tampilkan dibawah blog, dan sangat responsive serta menggunakan CSS only. Jadi blog AMP maupun Non AMP bisa menggunakannya tanpa perlu takut error.

Langkah yang pertama cukup copy kode CSS dibawah ini dan tempatkan dibawah <style> untuk blog Non AMP dan <style amp-custom='amp-custom'> untuk blog AMP.

#minisubsbox{overflow:hidden;margin:20px 0;width:100%}

#minisubsbox p{margin:1em 0}

#minisubsbox .subsemail{margin:auto;text-align:center}

#minisubsbox .subsemail form{margin:0;padding:0;border:0}

#minisubsbox .subsemail input{background:rgba(255,255,255,1);padding:9px 12px;color:#999;font-size:14px;margin-bottom:0;border:1px solid rgba(0,0,0,0.14);transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;width:73%}

#minisubsbox .subsemail input:hover{border-color:rgba(0,0,0,.34)}

#minisubsbox .subsemail input:focus{color:#000;outline:none;border-color:linear-gradient(60deg,#00fff2,#3379ea,#00fff2,#3379ea,#00fff2,#3379ea,#00fff2,#3379ea,#00fff2);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}

#minisubsbox .subsemail .Submitter{background:linear-gradient(to left,#3379ea,#00fff2);color:#fff;margin:0 0 0 4px;font-size:14px;cursor:pointer;border:0 solid rgba(0,0,0,0.05);border-radius:3px;transition:all .3s;width:25%}

#minisubsbox .subsemail .Submitter:active,#minisubsbox .subsemail .Submitter:hover{background:linear-gradient(to left,#00fff2,#3379ea);color:#fff}

Setelah itu kalian copy kode HTML ini dibawah postingan blog kalian.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='minisubsbox'>

<div class='subsemail'>

<form action='https://feedburner.google.com/fb/a/mailverify?' method='get' novalidate='' target='_blank'>

<input name='email' placeholder='Your Email' required='required' type='email'/>

<input name='uri' type='hidden' value='HendraSurya'/>

<input class='Submitter' type='submit' value='Subscribe'/>

</form>

</div>

</div>

</b:if>

Silahkan kalian ganti tulisan yang saya tandai dengan ID feedburner kalian. Dan untuk warnanya bisa kalian sesuaikan dengan template blog kalian.

Untuk tag kondisional <b:if cond='data:blog.pageType == &quot;item&quot;'> boleh kalian sertakan ataupun tidak, tergantung tag kondisional yang ada di blog kalian.

Bagaimana? Mudah kan?? Selamat mencoba!!

Ohh ya.. jangan lupa masukkan email kalian di kotak subscribe dibawah postingan ini ya..

Agar kalian tidak ketinggalan update terbaru dari Hendra Surya.