Cara Menciptakan Widget Subscribe Box Flat Ui Di Sidebar Blogger - Fezarzone

Cara Membuat Widget Subscribe Box Flat UI Di Sidebar – Selamat Pagi Sobat bagaimana liburan kemarinnya ? menyenangkan bukan ? Okeh, Kali ini saya akan membagikan widget subscribe box. kita harus mengetahui elemen yang ingin dipakai semoga sebuah widget tersebut menjadi indah dan menarik. Pada kesempatan kali ini, saya akan mengulas secara jauh widget subscribe yang dimodifikasi menjadi Flat UI. Kesulitan disini yaitu memilih warna Flat UI yang cocok semoga box subcribe menjadi padu antara satu dengan yang lainnya. Oke sahabat enggak usah lama-lama deh ya eksklusif aja ke langkah-langkah membuatnya.

Berikut Langkah-Langkahnya :

1. Login ke akun blogger sobat.

2. Pada sajian Dasboard, kemudian sahabat pilih Tab Template kemudian Pilih Edit HTML.

3. Kemudian cari arahan ]]></b:skin>, agar lebih cepat silahkan tekan CTRL + F.

4. Kemudian copy semua script CSS dibawah ini dan letakkan sempurna diatas arahan
]]></b:skin> (Silahkan Atur Kode CSS berikut sesuai kebutuhan).

#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);} 

5. Kemudian simpan Template.
6. Pada menu Dasboard, Pilih Tab Layout (Tata Letak) dan Pilih Add Widget.

7. Kemudian pilih Widget HTML/Javascript.
8. Letakkan Script HTML dibawah ini pada Widget Tersebut.   

<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=bacalagicom&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='bacalagicom'/> <input name='loc' type='hidden' value='en_US'/> <input class='submitbutton' type='submit' value='Subscribe Now!'/> </form> </div> </div> 

Ganti ID Feedburner bacalagicom dengan ID Feedburner sobat.

9. Simpan Widget.

10. Selesai.

Silahkan Liat karenanya di blog sobat, jikalau ada kesalahan atau widget nya tidak muncul maka silahkan komentar dan maaf belum dapat menciptakan Live Demo nya dikarenakan belum admin belum sempat mencari lokasi server Live Demo yang terbaik. Terima kasih untuk kunjungannya dan jangan pernah bosan untuk berkunjung kesini alasannya yakni admin akan melakukan update artikel-artikel lainnya yang enggak kalah menariknya untuk dibaca dan dikembangkan oleh kamu. Selanjutnya admin akan menciptakan posting mengenai Widget Subscribe Box lainnya, jadi ikutin terus ya dan jangan lupa like fanspage BacaLagi dan Subscribe semoga admin menjadi lebih semangat untuk terus update artikel-artikel lainnya. Terima Kasih..