Dalam menciptakan suatu blog, pasti kita mengharapkan banyak hadirin yang membaca blog kita. Agar blog kita bisa bersaing di mesin penelusuran dan menerima unique visitor atau pengunjung tetap, tentu ada banyak cara yang dilakukan oleh para Blogger. Nah salah satunya yaitu dengan menampilkan kotak subscribe box.
Mungkin pada dikala ini Blogger belum secanggih saudaranya, ialah Youtube dalam mengakomodasi para konsumen atau pengunjung sebuah blog. Jika di Youtube kita tinggal tekan "Subscribe" dan tombol lonceng notifikasi, maka otomatis update konten modern akan masuk ke email para subscribernya.
Lain halnya jika kita menggunakan sebuah blog, kita mesti memperlihatkan widget subscribe blog dan umumnya kita letakkan di sidebar. Tapi masalahnya dengan memperbesar widget, maka akan memperbesar pula waktu loading blog kita. Dan itu sangat ditakuti para Blogger yang memprioritaskan kecepatan loading blog.
Supaya kita mampu mengakomodasi para unique visitor blog kita, biasanya kita mempergunakan akomodasi gratis dari Feedburner milik Google. Yang berfungsi nyaris seperti mirip email marketing, biar hadirin setia kita tidak ketinggalan update dari postingan-artikel terbaru kita.
Nah, kali ini saya akan membagikan suatu Subscribe Box yang bisa kalian tampilkan dibawah blog, dan sungguh responsive serta memakai CSS only. Makara blog AMP maupun Non AMP bisa menggunakannya tanpa perlu takut error.
Langkah yang pertama cukup copy arahan CSS dibawah ini dan tempatkan dibawah
#minisubsboxoverflow:hidden;margin:20px 0;width:100%
#minisubsbox pmargin:1em 0
#minisubsbox .subsemailmargin:auto;text-align:center
#minisubsbox .subsemail formmargin:0;padding:0;border:0
#minisubsbox .subsemail inputbackground: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:hoverborder-color:rgba(0,0,0,.34)
#minisubsbox .subsemail input:focuscolor:#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 .Submitterbackground: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:hoverbackground:linear-gradient(to left,#00fff2,#3379ea);color:#fffSetelah itu kalian copy instruksi HTML ini dibawah artikel blog kalian.
Silahkan kalian ganti tulisan yang aku tandai dengan ID feedburner kalian. Dan untuk warnanya bisa kalian sesuaikan dengan template blog kalian.
Untuk tag kondisional boleh kalian sertakan ataupun tidak, tergantung tag kondisional yang ada di blog kalian.
Bagaimana? Mudah kan?? Selamat menjajal !! Ohh ya.. jangan lupa masukkan email kalian di kotak subscribe dibawah artikel ini ya..
Agar kalian tidak ketinggalan update modern dari Hendra Surya.