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=''" name="email" />
<input class="emailButton" type="submit" value="Signup Now!" title="" />
</form>
</div>
</div>
</div>
<style>
.subscribe_outer {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibsfj4EiO0iU0d39FDxMO9Xp45giGYZWUlhBV381uTTMBesLlyc-vzi1mEN3XyBg0lAG6OmWjmdTcDXzyPA9XWYJTgYjxJE6Acx2zXsxeiPI8Qn51eyeDgmrZq_6YcEqTAva4qTXw5nZs/s1600/color-chronicl.gif") repeat scroll 0 0 transparent;
margin: 0 -10px;
padding: 5px 0;
}
.subscribe_wrapper {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXEmQZu54JzOctXUCZQcbgoLImWNLELJjCBqwMEC0Ni9rMMnnErYQhxfttvvX1uqsn1tKUOYk3w4fXHsdxHaLeqrdFoB51LuC6Aeh5Fi1M6K6f5yQMfqQoQrcijI4ZfrGbWx-pfBJQqcI/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib6GlMZ7obY7kCFBtN0bs7LYxf6n29FLx25HFBF-aXfOyj3IUGhwFNFqOQ1eZsWPIfdKoVR6BXd4PJSWqLHbHdcnMhOodsiSzP7upoAbyYDJzztgc_gxuH26KpRIkcKMNvEeAsN-IOVrY/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
Judul: Cara buat widget Berlangganan bergaya google Plus
Rating: 100% based on 99998 ratings. 5 user reviews.
Ditulis Oleh 12:44 PM
Rating: 100% based on 99998 ratings. 5 user reviews.
Ditulis Oleh 12:44 PM
0 komentar:
Post a Comment