Fungsi dari subscribe ini untuk mendapatkan pengunjung tetap pada setiap postingan baru kamu, sehingga blog akan mendapatkan jumlah pengunjung yang terus bertambah nantinya dengan semakin banyaknya pelanggan.
Subscribe box bekerja seperti layaknya tombol subscribe di Youtube, tetapi bedanya untuk blog dan website ini pengunjung diharuskan untuk mengisi akun email pada kolom subscribe box. Sehingga apabila seseorang sudah mengisi email dan berlangganan, mereka bisa mendapatkan notifikasi dari email tentang adanya artikel baru yang bisa dibaca.
Kotak langganan ini memadukan script css, html serta ID Feedburner. Perhatikan baik baik untuk panduannya agar kamu lebih mudah dan berhasil untuk membuat subscribe box ini untuk diterapkan di blog kamu.
Pertama, buka Blogger kemudian perhatikan di bagian menu kiri klik Tema dan pilih Edit HTML
Kemudian memasang script CSS untuk membuat tampilan lebih menarik, letakkan kode berikut ini dibagian atas kode ]]></b:skin> atau </style>, gunakan kolom pencarian script agar lebih mudah (Ctrl + F)
/* Footer Subscribe Box */
#na-wrapper{background:#fff;width:100%;border-top:1px solid rgba(0,0,0,0.08)}
.invertsubs-content{max-width:970px;margin:0 auto;overflow:hidden;padding:0;position:relative}
#invertsubs-subs{text-align:center;text-transform:uppercase;width:100%;height:auto;border-radius:2px;padding:0}
#invertsubs-subs .emailfield form.invertsubs-form{position:relative;margin:0 auto 40px auto;overflow:hidden;width:65%}
#invertsubs-subs p{color:#888;padding:40px 20px 20px 20px;margin:0;overflow:hidden}
#invertsubs-subs .emailfield{padding:0 20px 10px}
#invertsubs-subs .emailfield input{width:100%;color:#888;padding:15px;font-size:13px;border:1px solid rgba(0,0,0,0.1);background:rgba(255,255,255,1)}
#invertsubs-subs .emailfield input:focus{color:#000;outline:0}
#invertsubs-subs .emailfield input::-webkit-input-placeholder{color:#888}
#invertsubs-subs .emailfield input::-moz-placeholder{color:#888}
#invertsubs-subs .emailfield input:-ms-input-placeholder{color:#888}
#invertsubs-subs .emailfield input:-moz-placeholder{color:#888}
#invertsubs-subs .emailfield .submitbutton{display:inline-block;position:absolute;right:0;top:0;background:#20b1d6;color:rgba(255,255,255,1);text-transform:uppercase;border:0;outline:0;cursor:pointer;width:20%;border-radius:0;transition:all .1s}
#invertsubs-subs .emailfield .submitbutton:active{border:0;outline:0}
#invertsubs-subs .emailfield .submitbutton:hover{background:#2f2f2f;color:rgba(255,255,255,1);box-shadow:0 10px 20px -10px rgba(0,0,0,0.1)}
@media screen and (max-width:768px){
#invertsubs-subs .emailfield form.invertsubs-form{width:95%}#invertsubs-subs .emailfield .submitbutton{width:auto}}Selanjutnya letakkan kode HTML berikut ini didalam class footer atau di atas </body> karena subscribe box akan dipasang di bagian footer.
<div class='invertsubs-content'>
<div id='invertsubs-subs'>
<p>Subscribe Our Newsletter</p>
<div class='emailfield'>
<form action='https://feedburner.google.com/fb/a/mailverify' class='invertsubs-form' method='post' novalidate='' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=Iniesa', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='email' placeholder='Your email address' title='Email' type='text'/>
<input name='uri' type='hidden' value='Iniesa'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submitbutton' type='submit' value='Subscribe'/>
</form>
</div></div></div>Sekarang simpan perubahan templatenya, hasilnya seperti ini. Selamat kamu sudah menambahkan subscribe box di blog.
Demikian informasi tentang cara membuat subscribe box di footer blog ini semoga bisa membantu kamu memasang kotak langganan di blog dengan mudah dan cepat. Sekarang kamu bisa mengajak para pengunjung blog kamu untuk berlangganan gratis dan akan mendapatkan informasi terbaru langsung ke akun email mereka.
