Membuat Kotak Berlangganan (Subscription Box) di Bawah Posting Blog

Membuat Kotak Berlangganan (Subscription Box) di Bawah Posting Blog

Salah satu cara blogger untuk mendapatkan pengunjung setia adalah memasang kotak berlangganan (Subscription Box) di blog. Bagi saya kotak berlangganan ini sangat penting untuk sebuah blog. Dengan ini pengunjung akan lebih mudah untuk berlangganan postingan atau artikel blog via email. Nantinya ketika sebuah blog update postingan, maka postingan tersebut secara otomatis akan terkirim ke inbox email pelanggan.

Saat ini banyak blogger yang sudah memasang kotak berlanggan. Ada yang memasang di sidebar, footer, dan yang lebih banyak saya temukan saat ini dipasang di bawah postingan. Kali ini saya akan memberikan trik membuat kotak berlangganan di bawah postingan blog. Untuk demo tampilan kotak berlangganannya seperti pada gambar di bawah ini.

Membuat Kotak Berlangganan (Subscription Box) di Bawah Posting Blog

Membuat Kotak Berlangganan (Subscription Box) di Bawah Posting Blog

Untuk penerapannya silahkan letakkan kode CSS di bawah ini di atas kode ]]></b:skin> atau kode </style>

/* Kotak berlangganan */
.berlangganan-box {
border-top: 1px solid #E9E9E9;
border-bottom: 1px solid #E9E9E9;
padding: 15px;
margin:0;
text-align:center;
}
.berlangganan-box input.email-address[type="text"] {
width:60%;
padding:10px;
border:1px solid #ddd;
text-align:center;
border-radius: 4px;
outline:none;
background: #fff;
}
.berlangganan-box input.submit-email[type="submit"] {
transition:all 0.5s;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;
padding:10px 15px;
background:#07ACEC;
border-radius: 4px;
color:#fff;
border:none;
font-weight:bold;
border-bottom: 3px solid #0D9AD0;
outline:none;
}
.berlangganan-box input.submit-email[type="submit"]:hover {
background:#0D9AD0;
cursor:pointer;
}
.berlangganan-box input.email-address[type="text"]:focus {
box-shadow:0 0 2px #106FE4;
}

Kemudian cari kode yang mirip dengan kode di bawah ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Selanjutnya letakkan kode berikut ini di bawah kode di atas.

<div class='berlangganan-box'>
<form action='https://feedburner.google.com/fb/a/mailverify?uri=wahyupratama/blog' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=wahyupratama/blog&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<p>Berlangganan via email (gratis):</p><p><input class='email-address' name='email' placeholder='Masukan alamat email...' type='text'/></p><input name='uri' type='hidden' value='WahyuPratama'/>
<input name='loc' type='hidden' value='en_US'/>
<p><input class='submit-email' type='submit' value='Berlangganan'/></p>
</form>

</div>

Ganti wahyupratama/blog dengan id feedburner Anda.

Setelah itu simpan template dan lihat hasilnya.

Semoga bermanfaat.

Leave a Reply