Cara Membuat Widget Subscribe Box Flat UI Di Sidebar Blogger

Cara Membuat Widget Subscribe Box Flat UI Di Sidebar – Selamat Pagi Sobat bagaimana liburan kemarinnya ? menyenangkan bukan ? Okeh, Kali i...


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 digunakan agar 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 menentukan warna Flat UI yang cocok agar box subcribe menjadi padu antara satu dengan yang lainnya. Oke sobat enggak usah lama-lama deh ya langsung aja ke langkah-langkah membuatnya.

Berikut Langkah-Langkahnya :

1. Login ke akun blogger sobat.
2. Pada menu Dasboard, kemudian sobat pilih Tab Template lalu Pilih Edit HTML.
3. Kemudian cari kode ]]></b:skin>, agar lebih cepat silahkan tekan CTRL + F.
4. Kemudian copy semua script CSS dibawah ini dan letakkan tepat diatas kode
]]></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 hasilnya di blog sobat, jika ada kesalahan atau widget nya tidak muncul maka silahkan komentar dan maaf belum bisa membuat 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 karena admin akan melaksanakan update artikel-artikel lainnya yang enggak kalah menariknya untuk dibaca dan dikembangkan oleh kamu. Selanjutnya admin akan membuat posting mengenai Widget Subscribe Box lainnya, jadi ikutin terus ya dan jangan lupa like fanspage BacaLagi dan Subscribe agar admin menjadi lebih semangat untuk terus update artikel-artikel lainnya. Terima Kasih..

COMMENTS

Destinasi Wisata di Singapura
Nama

AdSense,2,AdWords,1,Android,5,aplikasi kasir online omegasoft,2,bersama untan membangun negeri,1,Bisnis,1,Bisnis Online,1,Blogger,20,Blogging,20,Blogging Competition,1,Bussiness,1,CSS,1,Depok News,3,Gadget,5,Hiburan,2,HTML,1,Investement,1,iphone,1,Komunitas,2,Kontes SEO,1,Lifestyle,5,Pikko Group,1,RSMRM,1,SEO,7,Signature Park Grande,1,Smart City Indonesia,1,Software,2,Software Kasir,1,Software POS,1,Tech News,16,teknologi,16,Tips and Trik,11,Traveling,2,Unik,1,Widget,6,Windows,4,
ltr
item
Bacalagers Design: Cara Membuat Widget Subscribe Box Flat UI Di Sidebar Blogger
Cara Membuat Widget Subscribe Box Flat UI Di Sidebar Blogger
https://2.bp.blogspot.com/-VXb8KRJWecU/WBZdU3HH6-I/AAAAAAAAA10/6thX2bbP9hcipSHXSg6IrQHy4zdTNjXFQCLcB/s1600/layer%2B1.jpg
https://2.bp.blogspot.com/-VXb8KRJWecU/WBZdU3HH6-I/AAAAAAAAA10/6thX2bbP9hcipSHXSg6IrQHy4zdTNjXFQCLcB/s72-c/layer%2B1.jpg
Bacalagers Design
https://designmbc.blogspot.com/2016/10/cara-membuat-widget-subscribe-box-flat.html
https://designmbc.blogspot.com/
https://designmbc.blogspot.com/
https://designmbc.blogspot.com/2016/10/cara-membuat-widget-subscribe-box-flat.html
true
6049018267264755231
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy