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 supaya lebih gampang mengakses konten blog terbaru milik sahabat.


Sebenarnya dari blogger sudah menyediakan widget ini, namun sepertinya versi defaultnya kurang begitu menarik. Maka kali ini, penulis akan bagikan aba-aba script bagi sahabat blogging semua untuk menciptakan widget subscribe yang tidak mengecewakan manis dan sanggup diubah-ubah isinya sesuai kebutuhan. Berikut tahap-tahap tutorialnya.
 

Cara menciptakan widget keren subscribe blog

Buka dasboard blogger, masuk ke hidangan layout. Pilih Add a gadget kemudian klik HTML/Java script. Lalu copy-paste aba-aba 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'> Belajar NgeBLOG </div> <p> Bagi sahabat yang ingin menerima gosip terkini terkait cara menciptakan blog, 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 goresan pena silakan diedit. Berikut goresan pena yang sanggup diganti sesuai kebutuhan.
- Belajar NgeBLOG
- Bagi sahabat yang ingin menerima gosip terkini terkait cara menciptakan blog, silakan isi form berikut. 

Khusus pada goresan pena "tutorialngeblogging" didapatkan pada ID feedburner blog milik sahabat. Cara mengetahui ID feedburner yakni dengan menuju ke site feedburner. Lalu klik edit feed detail. Lihat ibarat gambar.

Lingkaran itu yakni ID feedburnernya. Sedangkan warna merah pada aba-aba script sanggup diubah menyesuaikan lebar widget yang akan dipasang.

Artikel menarik lainnya Aneka Cara Membuat Kotak Search pada Blog.

Demikian tutorial cara menciptakan widget subscribe blog. Semoga bermanfaat dan selamat mencoba.

Tweet

Subscribe to receive free email updates: