Membuat Widget Keren Subscribe Blog

Membuat Widget Keren Subscribe Blog - Sahabat sudah punya banyak reader atau pembaca rutin ? Jika demikian, ada baiknya sahabat buat widget khusus untuk pembaca setia dan calon pembaca agar lebih mudah mengakseskonten blog terbaru milik sahabat.


Sebenarnya dari blogger sudah menyediakan widget ini, namun tampaknya versi defaultnya kurang begitu menarik. Maka kali ini, penulis akan bagikan kode script bagi sahabat blogging semua untuk membuat widget subscribe yang lumayan bagus dan bisa diubah-ubah isinya sesuai kebutuhan. Berikut tahap-tahap tutorialnya. 
 

Cara membuat widget keren subscribe blog

Buka dasboard blogger, masuk ke menu layout. Pilih Add a gadget lalu klik HTML/Java script. Lalu copy-paste kode berikut ini :

<style type='text/css'>
#subscribe-box {width: 300px;height: auto;border-radius: 2px;background-color: #E0E0DF;box-shadow: 0px 3px 0px 0px #7f8c8d;padding-bottom:10px}
#subscribe-box .title {padding: 10px 25px;line-height: 30px;font: 26px Oswald;color: #95A5A6;text-align: center;background: #F1F1F1;text-transform:uppercase;border-radius:2px 2px 0 0;}
#subscribe-box p {font-family: 'Droid Serif';font-size: 13px;color:#555;line-height: 20px;padding: 10px 20px 0 20px;margin: 0;}
#subscribe-box .emailfield {padding: 0px 20px 10px;}
#subscribe-box .emailfield input {color: #777;padding: 10px;margin-top: 10px;font-size: 15px;font-family: 'Droid Serif';width: 92%;border:0;border-radius: 2px;box-shadow: 0px 3px 0px 0px #bbb;}
#subscribe-box .emailfield input:focus {outline: none;}
#subscribe-box .emailfield .submitbutton {background: #008287;color: #fff!important;border:none;outline: none;width: 100%;cursor:pointer;box-shadow: 0px 3px 0px 0px #00686C}
#subscribe-box .emailfield .submitbutton:active {padding-top: 11px;padding-bottom: 9px;box-shadow: 0px 1px 0px 0px #3293ba;}
#subscribe-box .emailfield .submitbutton:hover{background: #00686C;}
</style>
<div id='subscribe-box'>
              <div class='title'>
               BLog Azri
              </div>
<p>
Bagi sahabat yang ingin mendapat informasi terkini terkait  blog ini, silakan isi form berikut.</p>
<div class='emailfield'>
              <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=tutorialngeblogging', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
               <input type='text' name='name' onblur='if (this.value == "") {this.value = "Your Name";}' onfocus='if (this.value == "Your Name") {this.value = "";}' value='Your Name'/>
               <input type='text' name='email' onblur='if (this.value == "") {this.value = "Your Email";}' onfocus='if (this.value == "Your Email") {this.value = "";}' value='Your Email'/>
<input name='uri' type='hidden' value='tutorialngeblogging'/>
<input name='loc' type='hidden' value='en_US'/>
                <input class='submitbutton' type='submit' value='Subscribe Now'/>
              </form>
</div>
</div>

Beberapa tulisan silakan diedit. Berikut tulisan yang bisa diganti sesuai kebutuhan.

- Blog Azri

- Bagi sahabat yang ingin mendapat informasi terkini terkait cara membuat blog, silakan isi form berikut. 

Khusus pada tulisan "BlogAzri" didapatkan pada ID feedburner blog milik sahabat. Cara mengetahui ID feedburner adalah dengan menuju ke site feedburner. Lalu klik edit feed detail. Lihat seperti gambar.

Lingkaran itu adalah ID feedburnernya. Sedangkan warna merah pada kode script bisa diubah menyesuaikan lebar widget yang akan dipasang.Demikian tutorial cara membuat widget subscribe blog. Semoga bermanfaat dan selamat mencoba.

Tweet