Cara buat widget Berlangganan bergaya google Plus


Cara membuat widget Langganan | subscribe.

Cara membuat widget Langganan | subscribe.
Mungkin sobat blogger sudah banyak melihat kotak langganan artikel | subscribe dengan berbagai Variasi, bentuk atau model, pada kesempatan kali ini saya ingin membagikan Cara membuat widget Langganan Artikel yang tentunya agak sedikit berbeda dan bergaya Google Plus, kelebihan widget ini yakni tidak membuat blog lelet.







Cara Pasang di Blog cukup mudah
Silahkan Menuju :
Dasbord+Tata Letak+Tambah Gadget+HTML/JavaScript

Silahkan Masukkan kode berikut di dalamnya
<div class="subscribe_outer">
<div class="subscribe_wrapper">
<p>Silahkan Langganan Artikel</p>
<div id="btntEmailsub">
<form class="btntEmailform" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=kumpulancara', 'popupwindow', 'scrollbars=yes,width=600,height=540');return true" method="post" action="http://feedburner.google.com/fb/a/mailverify">
<input type="hidden" value="kumpulancara" name="uri" />
<input type="hidden" value="en_US" name="loc" />
<input class="emailText" type="text" value="Enter your email..." onfocus="if (this.value == " enter="" your="" email...")="" {this.value="" }"="" onblur="if (this.value == " ")="" ;}"="" onclick="value=&#39;&#39;" name="email" />
<input class="emailButton" type="submit" value="Signup Now!" title="" />
</form>
</div>
</div>
</div>
<style>
.subscribe_outer {
background: url("http://1.bp.blogspot.com/-R8OgBaEYEfQ/UHf_0V7jVjI/AAAAAAAAPJE/FDP4NWvVBhQ/s1600/color-chronicl.gif") repeat scroll 0 0 transparent;
margin: 0 -10px;
padding: 5px 0;
}
.subscribe_wrapper {
background: url("http://1.bp.blogspot.com/-aJhnRZuZjyw/UHf_1zcxQtI/AAAAAAAAPJU/jJJEOM8J52s/s1600/pattern-chronicl.png") repeat scroll 0 0 #333333;
color: #CCCCCC;
font-size: 15px;
font-weight:bold;
line-height: 20px;
padding: 10px 50px 18px 38px;
}
.emailButton {
background:#249334;
border: 0 none;
border-radius: 4px 4px 4px 4px;
color: #FFFFFF;
cursor: pointer;
font-weight: bold;
padding: 10px 40px;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
width: 100%;
}
.emailText {
background: url("http://4.bp.blogspot.com/-pphfyiwvVr8/UHf_1a5jAvI/AAAAAAAAPJM/cxbjM4o0crk/s1600/email.png") no-repeat scroll 10px center #FFFFFF;
border: 0 none;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.05) inset;
color: #444444;
padding: 10px 40px;
margin: 0 0 15px;
outline: none;
text-decoration: none;
width: 70%;
}
input, textarea {
font-family:'Lora',georgia,serif;
}
.subscribe_wrapper {
color: #CCCCCC;
font-size: 14px;
line-height: 20px;
}
.emailButton {
width: 300px;
}
.emailButton {
background: -moz-linear-gradient(center top , #30A146 0%, #249334 100%) repeat scroll 0 0 transparent;
border: 0 none;
border-radius: 4px 4px 4px 4px;
color: #FFFFFF;
cursor: pointer;
font-weight: bold;
padding: 10px 40px;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
width: 100%;
}
</style>


Ganti  kumpulancara dengan id feedburner masing-masing

Terakhir disimpan....
Semoga bermanfaat
Cara buat widget Berlangganan bergaya google Plus 10out of 10 ratings.
Powered by Blogger.