Hallo sahabat Alekpedia, kali ini saya akan berbagi kembali tentang tutorial Membuat Kotak berlangganan yang keren untuk blogger. Dan kotak berlangganan ini, bisa terbilang penting karena ini dapat membantu kita menyebarkan informasi lebih luas lagi kepada pembaca blog kita.

Dimana dengan adanya kotak berlangganan ini, para pembaca akan selalu menerima update terbaru dari situs blog kita. Saat kita selesai menerbitkan artikel baru, maka pembaca setia dari blog kita akan menerima notifikasi mengenai artikel yang baru selesai kita publish di blog.

Kotak berlangganan ini, sering juga disebut dengan istilah Subscribe blog. Namun apapun namanya, tujuannya sama. Apalagi jika blog kamu sudah berkembang dan memiliki traffick yang tinggi, maka akan banyak orang juga yan akan berlangganan dengan situs blog kamu. Silakan coba juga cara Memasang Widget Mode Dark pada blog kita.

Cara membuat kotak berlangganan ini untuk blog kita sangat mudah, silakan kamu copy kode dibawah ini. Dan letakan kode tersebut diatas kode </style> pada template kamu.

/* SUBSCRIBER BOX */
.berlangganan-box {
background: #016fba;
background: linear-gradient(to right, #016fba, #0066cc);
color: #ffffff;
padding: 15px;
margin: 20px 0;
text-align: center;
}
.berlangganan-box p {
margin:15px 0;
}
.berlangganan-box input.email-address[type="text"] {
width: 60%;
padding: 10px;
text-align: center;
border-radius: 2px;
border: none;
outline: none;
}
.berlangganan-box input.submit-email[type="submit"] {
background: #F57224;
padding: 10px 15px;
border-radius: 2px;
color: #fff;
border: none;
outline: none;
}
.berlangganan-box input.submit-email[type="submit"]:hover {
background: #444444;
color: #fff;
cursor: pointer;
}
.berlangganan-box input.email-address[type="text"]:focus {
background: #fffcd2;
}

Setelah itu save. Dan untuk menampilkan Kotak berlangganannya, silakan kamu copy kode berikut ini dan letakan pada bagian tataletak, sesuai seleramu:

<b:includable id='postsubscribebox' var='post'>
<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=alekpedia', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<p>Berlangganan update artikel terbaru via email:</p><p><input class='email-address' name='email' placeholder='Masukan alamat email...' type='text'/></p><input name='uri' type='hidden' value='alekpedia'/>
<input name='loc' type='hidden' value='en_US'/>
<p><input class='submit-email' type='submit' value='Subscribe'/></p>
</form>
</div>
<!--
...
Edit ID feedburner alekpedia di atas dengan ID feedburner milik kamu
...
-->
<style>
/* SUBSCRIBER BOX */
</style>
</b:includable>

Selesai.

Nah itulah cara mudah membuat widget Kotak berlangganan atau Kotak Subscribe pada blog kita. Dan mudah-mudahan bermanfaat t