Monday, November 26, 2012

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 Rating: 4.5 Diposkan Oleh: Sarjana Cebong

7 komentar:

  1. Tips dan hiburan yang di sajikan diblog ini memang selalu menarik namun mungkin keberadaan kami sbagai spameers memang sering membuat anda jengkel dan mungkin risih..
    _kami berharap semoga pemilik blog ini dapat memaklumi keberadaan kami disini..
    trima kasih

    ReplyDelete
  2. Bisa diganti bahasa indonesia gak ya gan?

    ReplyDelete
  3. @TOKO ONLINE BARU Sudah diganti kok gan...dengan kalimat " Silahkan Langganan Artikel "

    ReplyDelete
  4. ajib..lg butuh banget nie gw artikel ini.thx banget gan

    ReplyDelete
  5. gan follow blog saya kalau udah follow saya akan follow blog agan

    ReplyDelete