Cara membuat subscribe box simple di blog

Hi sobat blogger jumpa kembali bersama saya di blog Mang Tamvan untuk sobat yang ingin menambahkan Widget SUBSCRIBER BOX di blognya bisa sobat tambahkan dengan cara silakan buka > Log in Ke Blogger > Tata letak > Add Widget > silahkan sobat bisa cari menu berlangganan email. Jika tampialan SUBSCRIBER BOX dengan tampilan yang berbeda sobat bisa menggunakan cara dibawah ini.

Jika sobat ingin menggunakan tampilan yang berbeda silahkan bisa menggunakan code dibawah ini

 <b:includable id='postsubscribebox' var='post'>
<div class='berlangganan-box'>
 <form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=GunawanOfficial&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);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='GunawanOfficial'/>
 <input name='loc' type='hidden' value='en_US'/>
 <p><input class='submit-email' type='submit' value='Subscribe'/></p>
 </form>
</div>
<!--
...
Edit ID feedburner Gunawan Official di atas dengan ID feedburner milik sobat
...
-->
<style>
/* SUBSCRIBER BOX */

</style>
</b:includable>

NB: Silahkan sobat bisa mengganti id feedburner diatas dengan id feedburner sobat sendiri

Jika sudah sobat bisa menerapkanya di bawah postingan blog maupun di tata letak lainnya.

Untuk selanjutnya sobat gunakan atau silahkan letakan CSS dibawah ini tepat sebelum </style> atau bisa juga sebelum </b:skin>

/* 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;
}

Jika sudah menerapkannya simpan kembali template sobat, untuk domo langsung bisa dibawah ini.
Live Demo
Ok sobat itulah dari saya tentang Cara membuat widget SUBSCRIBER BOX Simple selamat mencoba, dan semoga bermanfaat.

If You Enjoyed This, Take 5 Seconds To Share It

• 
• 
• 
• 
• 
•