Cara Membuat Widget Subscribe Box Flat UI

Hari ini saya akan membahas tentang widget blog. sama dengan halnya Membuat CSS Button Flat UI Dengan Font Awesome, 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. Disini sobat jangan kuatir. Saya menyediakan list lengkap kode warna Flat UI:

• LIST LENGKAP KODE WARNA FLAT UI

Jika sobat ingin memadukan sendiri warna yang sesuai dengan keinginan, sobat bisa menggunakan tool dibawah ini:

• TOOL GENERATOR KODE WARNA HTML

Saya akan membahas 2 versi widget subscribe dengan kombinasi warna Flat UI dan masing-masing memiliki perbedaan. Silahkan sobat memilih sendiri. Berikut langkah-langkah membuatnya:

Versi 1

1. Login ke akun blogger sobat. Jika belum login klik tautan berikut: Login Page.
2. Pada menu Dashboard, Pilih Template --> Edit HTML.
3. Cari kode ]]></b:skin> dengan cara 
   Ctrl
   +
   F
   .
4. Kemuadian salin kode dibwah ini tepat dibawahnya.

.subscribe-wrapper {
 color : #fff;
 background: none repeat scroll 0% 0% #FF6C60;
 font-family: "Oswald",Tahoma,Sans-serif;
 line-height : 20px;
 padding : 1px 20px 10px;
 text-align : center; 
} 
.subscribe-form {
 background : #FF6C60;
 clear : both;
 display : block;
 margin : 10px 0;
 overflow : hidden; 
} 
form.subscribe-form {
 clear : both;
 display : block;
 margin : 10px 0 0;
 width : auto;
 overflow : hidden; 
} 
.subscribe-css-email-field {
 background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBKcNCvhQtCdInJr_IlyeK0PTiXF5tSRb58qQAgGsL-eUKu4F7u8iDmDIMP-hakArpL4JHl0mY8FMR9XLxIxF3GBuOVbIc8J9_H7RXFnzIBS5QlP9dwAjN-uSMlHUdlomXTDg8lg8qM0lt/s1600/sprites.png) 1px -27px no-repeat #eee;
 color : #444;
 margin : 0 0 15px;
 padding : 12px 40px;
 width : 100%;
 border : none; 
}
.subscribe-css-button {
 background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.1);
 color : #fff;
 cursor : pointer;
 font-weight : 700;
 padding : 7px;
 text-transform : none;
 width : 100%;
 border : none;
 font-size : 16px;
 transition : all 0.3s ease-in; 
}
.subscribe-css-button:hover {
 transition : all 0.3s ease-in;
 background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.2); 
}

5. Simpan Template.
6. Pada menu Dashboard, Pilih Layout --> Add Widget.
7. Kemudian pilih widget HTML/Javascript.
8. Letakkan kode dibawah ini ke dalam teks editor widget.

<div id="subscribe-css">
<div class="subscribe-wrapper">
<p>Ikuti Blog ini dengan memasukan Email Anda dibawah ini! Terima Kasih</p>
<div class="subscribe-form">
<form action='http://feedburner.google.com/fb/a/mailverify?uri=bacilsoft' class="subscribe-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=CampusBugs', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="CampusBugs" />
<input name="loc" type="hidden" value="en_US" />
<input class="subscribe-css-email-field" name="email" autocomplete="off" placeholder="Enter your email address "/>
<input class="subscribe-css-button" title="" type="submit" value="SUBSCRIBE NOW !" />
</form>
</div>
</div></div></div>

Ganti ID Feedburner bacilsoft dengan ID sobat
9. Simpan Widget.
10. Untuk melihat demo klik link dibawah ini:
• Demo

Versi 2

1. Langkah awal sama seperti versi 1.
2. Cari kode ]]></b:skin> dengan cara 
   Ctrl
   +
   F
   .
3. Kemuadian salin kode dibwah ini tepat diatasnya.

#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. Simpan Template.
5. Pada menu Dashboard, Pilih Layout --> Add Widget.
6. Kemudian pilih widget HTML/Javascript.
7. Letakkan kode dibawah ini ke dalam teks editor widget.

<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=bacilsoft&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='
bacilsoft
'
/>

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

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

Ganti 2 ID Feedburner bacilsoft dengan ID sobat
8. Simpan Widget.
9. Untuk melihat demo klik link dibawah ini:
• Demo