Membuat Subscribe Box Blog Dengan CSS ~ Lubang Pengetahuan

Baru dapat apa yang akan di posting di blog ini yaitu cara memasang SUBCRIBE NOW atau yang lebih di kenal dengan layanan via email yang di peruntukan untuk para pengejung blog setia bahwa blog yang dia ikuti teleh memuat postingan baru dan dapat di cek atau agar bila pengunjung lupa alamat blog kita maka pengunjung gak usah khawatir tinggal cek email aja, meskipun untuk berlanganan tidak mudah apalah salah kita coba dulu.untuk memaksimalkan widget ni anda harus mendaftarkan blog anda ke feedburner, untuk mengunakan layanan gratis ini

Berikut ini langkah langkah nya

Login ke Blogger
pilih menu "Tata Letak"
Pilih "Tambahkan Gadget" >> "HTML/JavaScript", dan Paste-kan kode berikut :

<div class="widget-content">
<div id="subscribe-css">
<div class="subscribe-wrapper">
Ikuti Blog ini dengan memasukan Email Anda dibawah ini! Terima Kasih<br />
<div class="subscribe-form">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=LubangPengetahuan" class="subscribe-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=LubangPengetahuan', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="LubangPengetahuan" /><input name="loc" type="hidden" value="en_US" /><input autocomplete="off" class="subscribe-css-email-field" name="email" placeholder="Enter your email address " /><input class="subscribe-css-button" title="" type="submit" value="SUBSCRIBE NOW !" /></form>
</div>
</div>
</div>
</div>

Ganti Tulisan warna merah Dengan ID FeedBurner sobat

4. Klik Simpan
5. Masuk ke Template > Edit HTML. Cari kode ]]></b:skin> atau </style>

Masukan kode CSS berikut tepat di atas nya

.subscribe-wrapper { color : #fff; background: none repeat scroll 0% 0% #FF6C60; font-family: "Oswald",Tahoma,Sans-serif; line-height : 20px; padding : 1px 20px 10px; text-align : center;  } 
.subscribe-form { background : #FF6C60; clear : both; display : block; margin : 10px 0; overflow : hidden;  }  form
.subscribe-form { clear : both; display : block; margin : 10px 0 0; width : auto; overflow : hidden;  }  
.subscribe-css-email-field { background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi95AUj7xq2Of7aVH2b8-iIUj-c_eAR_VG_n8siK0GChEOWcQxoVfc6AvGNZCNBLfZVa9ATwXrZ7pyofbFJbcczW1hnqFTzHHZUo9kOIqVGB05gm_KcvjJO7igogNsWma8ag_1EC2FclyQJ/s1600/sprites.png) 1px -27px no-repeat #eee; color : #444; margin : 0 0 15px; padding : 12px 40px; width : 100%; border : none;  } 
.subscribe-css-button { background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.1); color : #fff; cursor : pointer; font-weight : 700; padding : 7px; text-transform : none; width : 100%; border : none; font-size : 16px; transition : all 0.3s ease-in;  } 
.subscribe-css-button:hover { transition : all 0.3s ease-in; background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.2);  }

6. Simpan template Dan lihat hasilnya