Cara Membuat Widget Subscribe Box Flat UI Di Sidebar Blogger
Cara Membuat Widget Subscribe Box Flat UI Di Sidebar Blogger

Cara Membuat Widget Subscribe Box Flat UI Di Sidebar Blogger

Cara Membuat Widget Subscribe Box Flat UI Di Sidebar, Widget HTML/Javascript, ID Feedburner bacalagicom, Widget Subscribe Box Valid HTML5, Membuat OnClick PopUp Email Subscription Box pada Blogger, Cara mudah membuat widget subscribe box flat ui, cara mudah membuat popup widget subscribe box valid HTML5.



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..

Baca juga:






WAJIB DIKETAHUI!
Iklan yang tampil pada halaman Situs ini sepenuhnya diatur oleh pihak google, kami hanya menyediakan Slot Kosong. Jadi jika ada iklan yang kurang berkenan untuk Anda, harap informasikan kepada kami melalui Formulir Kontak Situs ini untuk selanjutnya akan Kami sampaikan ke pihak Google, Terima Kasih!

Jika Anda merasa bahwa artikel di blog ini bermanfaat, Anda bisa memberikan donasi melalui Paypal atau dengan Klik Donasi. Dengan Membaca Bismillah, Dana hasil dari Donasi yang Anda berikan akan digunakan untuk Bersodaqoh kepada Kaum Dhuafa dan Anak Yatim setiap Bulannya, Semoga Rezeki yang telah Anda berikan mendapat Balasan yang setimpal oleh Allah SWT, Amin. Terima kasih..
Admin
Adalah Tempatnya Panduan Blogger dan Belajar SEO untuk Pemula, Berita Teknologi Terbaru Seputar Smartphone Terbaru dan Tips Gaya Hidup Sehat.

Loading...

1. Silahkan berikan komentar dengan Tata Bahasa yang baik agar orang lain tahu sebijak apa karakter Anda melalui kata-kata.
2. Ketik komentar Anda untuk hal apapun yang masih berhubungan dengan artikel pada halaman ini.
3. Dimohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar satu persatu.
5. Komentar selalu di Moderasi.
6. Jangan lupa Ngopi.
EmoticonEmoticon