Membuat Subscribe Box Blog Dengan CSS


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

  1. Login ke Blogger
  2. pilih menu "Tata Letak"
  3. 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
Previous
Next Post »

3 komentar

Click here for komentar
October 6, 2014 at 5:13 PM

Ane Coba dulu boleh kan gan.? Thank's :)

Reply
avatar
October 6, 2014 at 5:14 PM

wah keren nih kebetulan pnya sya blm ada ijin di coba ya gan di web saya yg ini http://goo.gl/mLnfz0

Reply
avatar
Unknown
admin
October 6, 2014 at 7:33 PM

pelajaran baru nih ..
makasih infonya :)

Reply
avatar
Thanks for your comment