Cara membuat Kotak Belangganan Dibawah Posts

Kotak berlangganan adalah salah satu solusi agar visitor kita dapat memantau situs kita dari jarak jauh. Manfaatnya adalah mengakibatkan visitor anda naik, pelanggan anda selalu setia mengikuti artikel anda. kali ini saya akan membahas bagaimana caranya agar dapat meletakan kotak berlangganan tersebut lebih responsiv dan juga lebih SEO dimata google ataupun dimata para penggemarnya. Saya akan menggunakan kode HTML untuk membuat kotak berlangganan tersebut. Tapi jika anda lebih suka widget, maka anda bisa baca caranya di Cara Membuat Kotak Berlangganan Via Widget. Ok langsung saja disimak tutorialnya.

Cara membuat Kotak Belangganan Dibawah Posts :

• Untuk yang pertama kalinya, anda harus masuk keblogger terlebih dahulu
• Yang kedua, silahkan anda pilih Template > edit HTML
• Kemudian carilah kode </b:skin> (gunakan ctrl+f untuk mempermudahkan pencarian anda)
• Pasanglah kode berikut ini tepat diatas kode </b:skin>

/*kotak berlangganan*/ .berlangganan-box { background:#F7F7F7; padding:15px; border:1px solid #ededed; margin:10px 0 20px; text-align:center; } .berlangganan-box input.email-address[type="text"] { width:300px; padding:10px; border:1px solid #ddd; text-align:center; border-radius: 4px; outline:none; } .berlangganan-box input.submit-email[type="submit"] { transition:all 0.5s;-moz-transition:all 0.5s;-webkit-transition:all 0.5s; padding:10px; background:#FFCC00; border-radius: 4px; color:#fff; border:none; font-weight:bold; border-bottom: 3px solid #E2B810; outline:none; } .berlangganan-box input.submit-email[type="submit"]:hover { background:#E7BB0D; cursor:pointer; } .berlangganan-box input.email-address[type="text"]:focus { box-shadow:0 0 20px #106FE4; } .button { transition:all 0.5s;-moz-transition:all 0.5s;-webkit-transition:all 0.5s; text-align:center; position:relative; vertical-align:top; width:148px; height:32px; padding:0; font-size:13px; color:#fff; font-weight:bold; text-align: center; background:#07ACEC; border:0; cursor:pointer; border-bottom: 3px solid #0D9AD0; border-radius: 4px; outline: none; } .button:active { top: 1px; outline: none; } .button:hover { background:#0D9AD0; } </center>

• Jika anda belum paham juga, maka silahkan lihat gambar berikut ini

• Setelah itu kita hanya tinggal memanggil kode CSS yang tadi
• Masih di HTML yang tadi, silahkan anda cari kode <data:post.body/> (gunakan ctrl+f untuk mempermudahkan pencarian anda)
• Jika sudah ketemu, maka copy pastekan kode berikut ini tepat dibawah kode yang tadi

<!--kotak berlangganan--><div class='berlangganan-box'><form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('https://feedburner.google.com/fb/a/mailverify?uri=hesupa', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><p>Jangan Sampai Ketinggalan Postingan-Postingan Terbaik Dari <data:blog.title/>. Berlangganan Melalui Email Sekarang Juga:</p><p><input class='email-address' name='email' placeholder='Masukan Alamat Email...' type='text'/></p><input name='uri' type='hidden' value='hesupa'/><input name='loc' type='hidden' value='en_US'/><p><input class='submit-email' type='submit' value='Berlangganan'/></p></form></div></center>

• Lihatlah Gambar berikut ini

• Setelah itu anda save templatenya

Catatan : https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('https://feedburner.google.com/fb/a/mailverify?uri=hesupa Menjadi https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('https://feedburner.google.com/fb/a/mailverify?uri=namafeedburnerkamu