Cara Membuat Widget Subscribe Box Flat UI Di Sidebar Terbaru 2018
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).
]]></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('http://feedburner.google.com/fb/a/mailverify?uri=bacalagicom','popupwindow','scrollbars=yes,width=550,height=520');return true' target='popupwindow'> <input type='text' name='name' onblur='if (this.value == "") {this.value = "Your Name";}' onfocus='if (this.value == "Your Name") {this.value = "";}' value='Your Name'/> <input type='text' name='email' onblur='if (this.value == "") {this.value = "Your Email";}' onfocus='if (this.value == "Your Email") {this.value = "";}' 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
No comments :
Post a Comment