Cara Membuat Widget Subscribe di Blogspot

Cara Membuat Widget Subscribe di Blogspot - Sobat sudah punya banyak reader atau pembaca rutin ? Jika demikian, ada baiknya sobat buat widget khusus untuk pembaca setia dan calon pembaca agar lebih mudah mengakses konten blog terbaru milik sobat.

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

• Buka Browser > Website blogger.com
• Login > Pilih blog yang akan di pakai *bagi anda yang memiliki blog lebih dari satu dalam satu Gmail
• Pergi ke Layout/Tata Letak

• Pilih Tambahkan Gadget > HTML/Java Script

• Copy Paste kan kode dibawah ini didalam kotak HTML/Java Script

<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 BLOG Mr Ivanchan
              </div>
<p>
Bagi sahabat yang ingin mendapat informasi terkini terkait cara membuat 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=blognyamrivanchan', '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>

Catatan :

Untuk yang warna Merah ganti Tulisan sesuai keinginan anda
Untuk yang warna Biru ganti dengan URL Feedburner sobat

• Selesai

OK itu dulu yang saya share kali ini bila ada yang kurang kata-katanya saya mohon maaf. Semoga artikel ini dapat membantu dan bermanfaat....
Regards,
Mr Ivanchan

BloggingTips & Triks

Share This :