CSS Subscribe Email Menarik

Email Subscribe merupakan fitur yang memudahkan user untuk memantau perkembangan blog langganannya, dimana setiap ada update feed pata situs tersebut maka ia akan mendapatkan update otomatis di blognya.

Umumnya Blogger hanya menyediakan tampilan defaultnya yang sangat sederhana, meskipun begitu, kita bisa memodifikasinya dengan CSS yang menarik.

Berikut tutorialnya.

  • Login ke Akun Blogger anda
  • Masuk ke Layout » Page Element » Add new a gadget » HTML Java Script
  • Copy Paste Kode Berikut :
<style>
.mbt-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI1PNqlc75nQuTphG9MvoonV6dJWy882NDoDni41iFckiyEQ241YG4y6vxfYkCwl4uyCf_FAuSfFGuacs3APVCjbxNNjCJyQC7N6WpiBai7FxhV_b9lgVh-eg9HzsO-hrN01eaD5BoN3Yg/s1600/email.png) no-repeat 0px 12px ;
width:320px;height:65px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}
.mbt-emailsubmit{
background:#e75c08;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:10px;
border-radius:6px;
font:15px sans-serif;
}
.mbt-emailsubmit:hover{
background:#911c05;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#fa8f54;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:15px;  
width:150px;
color:#666;}
</style>
<div class="mbt-email">
Berlangganan Lewat Email
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FarishBlog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Masukan Email&quot;;}" onfocus="if (this.value == &quot;Masukan Email&quot;) {this.value = &quot;&quot;;}" value="Masukan Email" type="text" />
<input type="hidden" value="Fs-Galery" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="mbt-emailsubmit" value="Submit" type="submit" />
</form>
</div>

Ganti tulisan yang berwarna biru dengan url Feed sobat..
  • Simpan, dan selesai..
Sangat mudah bukan?.. Semoga bermanfaat..

Lihat demonya disini

Keywords :
Cara Membuat Subscribe Email Menarik, Cara membuat langganan Artikel menarik, cara membuat form langganan artikel yang menarik, cara membuat email subscribe menarik, css mengedit email subscribe, css mengedit tampilan langganan artikel lewat email.

4 komentar: