Cara Membuat Widget Subscribe Box Email Blog Keren

Ok sobat jumpa lagi dengan postingan saya, dan sebelumnya saya membagikan Template Keren Dan Gratis di kesempatan kali ini saya akan coba share sebuah widget SUBSCRIBE BOX EMAIL untuk sobat setia pengunjung blog Saya, dan Subscribe Box ini saya coba buat dengan menggunakan tampilan atau warna yang di sebut Gradient dan tampilannyapun cukup bagus sobat.

Jika sebelumnya banyak yang menerapkan warna atau tampilan dengan satu warna saja kali ini sobat bisa menambahkan atau mrngkombinasikan beberapa warna untuk mempercantik tampilannya.

Dan kombinasi tampilan atau warna gradient tersebut sudah banyak menggunakannya, dengan hal ini saya akan coba posts dalam bentuk Subscribe Berlangganan Email, jika sobat ingin mencoba menerapkannya di blog sobat, sobat bisa ikuti langkah-langkah berikut.

Pertama silahkan sobat copy code css dibawah ini.

CSS
/* SUBSCRIBER BOX */
.berlangganan-box {
background:linear-gradient(45deg, #08AADB, #fff);

font-weight:500;
border:1px solid #08AADB;
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;
font-weight:400;
text-align: center;
border-radius: 2px;
border: 1px solid #f0f0f0;
outline: none;
}
.berlangganan-box input.submit-email[type="submit"] {
background: linear-gradient(45deg, #fff, #08AADB);

padding: 10px 15px;
border-radius: 2px;
color: #ffffff;
border: none;
outline: none;
}
.berlangganan-box input.submit-email[type="submit"]:hover {
background: linear-gradient(45deg, #fff, #08AADB);

color: #fff;
cursor: pointer;
}
.berlangganan-box input.email-address[type="text"]:focus {
background: #08AADB;
}

Jika sudah mengcopynya silahkan sobat pergi ke dasboard blog sobat lalu pilih Template/Themes selanjutnya silahkan sobat pilih menu sesuaikan, setelah itu silahkan sobat pilih menu Tambahkan CSS di kolom yang sudah disediakan selanjutnya silahkan tekan terapkan.

Setelah itu silahkan sobat copy code HTML berikut ini untuk subscribe blog sobat.

HTML
  <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=blogspot/FDDZJx&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='blogspot/FDDZJx'/>
 <input name='loc' type='hidden' value='en_US'/>
 <p><input class='submit-email' type='submit' value='subscribe'/></p>
 </form>
</div>
<!--
...
Edit ID feedburner blogspot/FDDZJx di atas dengan ID feedburner milik sobat
...
-->

jika sudah silahkan sobat terapkan di bagian bawah potingan atau di menu footer, dll sesuka sobat aja mau di terapkannya dimana.

Sebelumya silahkan sobat Edit ID feedburner blogspot/FDDZJx di atas dengan ID feedburner milik sobat , silahkan sobat ganti IDnya yang saya kasih tanda berwarna merah.

Jika sudah di ganti selanjutnya silahkan save atau terapkan di blog sobat, lalu lihat tampilannya.
Ok sobat semua cara diatas saya brikan untuk sobat blogger yang masih baru di dunia blogger untuk itu buat yang sudah master atau sudah jago dalam hal ini silahkan menyimak saja ya.

TERIMA KASIH:AGUS GUNAWAN OFFICIAL

Share this post