Cara Buat Form Subcribe Simple + Keren pada Blog

Sahabat Kabeka || Seorang Blogger tentunya tidak asing dengan kata "subscribe" atau "berlangganan", yah fitur sakti ini bisa membuktikan 'sepopuler' apasih blog kita sampai-sampai orang mau mengikuti setiap artikel-artikel terbarunya..

Ada banyak jenis-jenis widget subscribe, ada yang PopUp, Form biasa, Banner, dan lain sebagainya.. disini pun kabeka akan membagikan sebuah widget Subscribe berbentuk form, beda dengan sebelumnya yaitu "Widget Subscribe Rss dengan Efek Lipatan".

oke, jika boleh jujur, Kabeka juga bingung mau ngebuat judul ni post :v sekian lama mikirin judul akhirnya terciptalah judul "Simple + Keren" ini :v

oke, di stop dulu basa basinya.. buat sobat blogger yang udah penasaran bagaimana buatnya seperti ss diatas.. silahkan simak...

Cara Buat Form Subcribe
1. Silahkan sobat login ke akun blogger sobat..
2. Pada dashboard pilih "Template" lalu pilih opsi "Edit HTML"

3. Cari kode </style> *gunakan Ctrl+F untuk memudahkan pencarian*, bila sudah ketemu paste kode dibawah tepat diatas kode </style>

#ayosubscribe .title {padding: 10px 25px;font: 26px Oswald;color: #FFF;text-align: center;background: none repeat scroll 0% 0% #38424b;
text-transform: uppercase;border-radius: 2px 2px 0px 0px;border-bottom: 1px solid #EEE;}
#ayosubscribe {width: 100%;height: auto;background-color: #38424b;padding-bottom:10px;margin:0 auto}
#ayosubscribe p {font-size: 14px;color:#fff;line-height: 20px;padding: 10px 20px 0 20px;margin: 0;}
#ayosubscribe .emailfield {padding: 0px 20px 10px;}
#ayosubscribe .emailfield input {color: #777;padding: 10px;margin-top: 10px;font-size: 14px;width: 100%;position: center; border:0;border-radius: 2px;}
#ayosubscribe .emailfield input:focus {outline: none;}
#ayosubscribe .emailfield .submitbutton {background: #22A1CA;color: #fff!important;border:none;outline: none;width: 100%;cursor:pointer;border-radius: 2px;}
#ayosubscribe .emailfield .submitbutton:active {padding-top: 11px;padding-bottom: 9px;}
#ayosubscribe .emailfield .submitbutton:hover{background: rgba(225, 60, 15, 1);}
#HTML9 {Padding: 0px 0px 0px 0px; background:#38424b;}
#Attribution1 {
height:0px;
visibility:hidden;
display:none
}

4.  Save Template, Lalu buka Layout, pilih "add a gadget", akan muncul jendela baru, pilih saja "HTML/JavaScript"

5. Disini tambahkan/pastekan kode berikut ke kolom yang tersedia

<div id='ayosubscribe'>
              <div class='title'>
               Berlangganan
              </div>
                 <p>Ayo Berlangganan! Masukkan Nama & Email Anda Dibawah Untuk Mendapat Update Artikel Di Blog Ini........   Gratis !!</p>
             <div class='emailfield'>
              <form action='http://feedburner.google.com/fb/a/mailverify'
 method='post'
onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Kabeka&apos;,
 &apos;popupwindow&apos;,
&apos;scrollbars=yes,width=100%,height=520&apos;);return true'
target='popupwindow'>
               <input type='text' name='name' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Name&quot;;}' onfocus='if (this.value == &quot;Your Name&quot;) {this.value = &quot;&quot;;}' value='Your Name'/>
               <input type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}' onfocus='if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}' value='Your Email'/>
<input name='uri' type='hidden' value='Kabeka'
/>

<input name='loc' type='hidden' value='en_US'/>
                <input class='submitbutton' type='submit' value='Subscribe Now!'/>

              </form>
             </div></div>

6. Ganti yang berwarnah merah dengan id feeds burner sobat..
7. Save... dan lihat hasilnya... silahakan dicoba, apakah berfungsi atau tidak:)

hehe,, mudah bukan?? silahkan dicoba.. hasilnya persis seperti screenshot paling atas....
hmm, apalagi yah :v okedeh berhubung mata Kabeka tidak bisa diajak nego, kali ini Kabeka undur diri, sampai jumpa di post berikutnya,, silahkan di share jika bermanfaat... klik juga ya tombol follow + g+nya :)

Terimakasih...

Related Posts:

Tweet