Cara Membuat Widget Berlangganan Dengan Flat UI Style

Cara Membuat Widget Berlangganan Flat UI

Adanya Feed Form Widget atau biasa dikenal dengan widget berlangganan adalah sangat lah vital bagi suatu blog. Dengan adanya widget ini maka para pelangan setia Blog kita akan selalu mendapatkan update apa saja artikel terbaru yang kita buat. Namun jika hanya sekedar Widget berlangganan yang biasa tentu sedikit yang akan tertarik, nah untuk kali ini saya akan memberikan sebuah cara bagaimana membuat Widget Berlangganan Flat UI. Baca Juga " Cara Menambahkan Slide Box Rekomendasi Artikel di Blog "

Untuk demonya bisa anda lihat pada widget sebelah kanan dan untuk cara penerapanya, dibawah telah saya sediakan tutorialnya dan simak langkahnya :

1. Masuk ke akun blogger kalian
2. Pilih menu Template dan pilih Edit HTML
3. Masukkan CSS berikut tepat diatas kode ]]></b:skin> atau </style>

Skrip HTML




1

2

3

4

5

6

7

8

   
#subscribe-box .title {padding: 10px 25px;font: 26px Oswald;color: #FFF;text-align: center;background: none repeat scroll 0% 0% #293D4F;
text-transform: uppercase;border-radius: 2px 2px 0px 0px;border-bottom: 1px solid #EEE;}
#subscribe-box {width: 300px;height: auto;background-color: #293D4F;padding-bottom:10px;margin:0 auto}
#subscribe-box p {font-size: 14px;color:#fff;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: 14px;width: 92%;border:0;border-radius: 2px;}
#subscribe-box .emailfield input:focus {outline: none;}
#subscribe-box .emailfield .submitbutton {background: #E06949;color: #fff!important;border:none;outline: none;width: 100%;cursor:pointer;border-radius: 2px;}
#subscribe-box .emailfield .submitbutton:active {padding-top: 11px;padding-bottom: 9px;}
#subscribe-box .emailfield .submitbutton:hover{background: rgba(225, 60, 15, 1);}

4. Save template blog kalian, langkah selanjutnya yaitu membuat widget baru dengan cara masuk ke Tata Letak > Add Gadget > Html/Javascript. Masukan Script dibawah ini :

Skrip HTML




1

2

3

4

5

6

7

8

   

<div id='subscribe-box'>
              <div class='title'>
               Subscribe Here
              </div>
                 <p>Sign up here with your email address to receive updates from this blog in your inbox.</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=Softlikasi&apos;,
 &apos;popupwindow&apos;, 
&apos;scrollbars=yes,width=550,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='
Softlikasi
'
/>

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

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