Cara Membuat Subscribe Box Flat UI

Karena alasan buat sobat yang memakai template subculture fix mungkin masih minim fitur nya..
Saya akan kasih pernak pernik nya, kali saya akan ngasih cara bikin subscribe box :

Caranya :

1. Login ke blogger dan masuk ke menu layout
2. Tambah Widget Html/Javascript
3. Copy kan kode ini

<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=CampusBugs' 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 CampusBugs dengan ID sobat..
4. Simpan widget..

Apabila ingin mengganti tampilannya seperti yang ada diblog Campus Bugs, pakai CSS ini :

.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/AVvXsEgf35X07LsClL8n6gDCNE0a36nJiWz51VK8R8ygWBtXLDY4F3AwTPmUGulrSFtt-9tOWDEGlMn75iQcIFCichlZvaIYrCnajWtv_ISSBkDO1c_FjMiHLOpOg51-WUUkEr_Fg7ggUfxTYB6b/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); 
}

Dan lihat hasilnya.. atau sobat bisa memodifikasi tampilannya dari css diatas.
Demikian tutorial ini semoga bermanfaaat.. :)