Membuat Widget Email Subscribe Keren

Jika Anda sering menonton video di Youtube, kata-kata Subscribe pasti sering Anda lihat disana. Subscribe sendiri artinya adalah langganan. Yang berarti pula, setiap Anda mengklik Subscribe di Youtube, pemilik video akan selalu mengabari Anda jika mereka punya video baru.

Di dunia blog, Subscribe juga bukan hal yang baru. Sudah sejak dulu, layanan ini hadir. Pengertiannya sama dengan Subscribe yang disediakan oleh Youtube. Bedanya hanya satu, Subscribe di Youtube sudah ada sejak pertama kita buat kanal disana, sedangkan di blog, Subscribe harus dibuat sendiri.

Contoh layanan Subscribe bisa Anda lihat di Blog Saya ini ~. Di bagian paling bawah sebelah kana Di blog Saya adalah layanan Subscribe atau layanan berlangganan artikel melalui email. Tujuannya agar setiap artikel dari blog ini akan langsung terkirim ke email Anda secara utuh, tanpa harus mengunjungi blog ini setiap saat. Kita Langsung saja...Ikut langkah langkah di Bawah ini :

• Login Blogger Dasbor >>> Blogger
• Pilih Opsi Lainnya >>> Pilih TataLetak
• Kamu Copy semua Kode dibawah ini :

<div class="widget HTML" id="HTML6">
<h3 class="title">
Subscribe</h3>
<div class="widget-content">
<div class="widget-content">
<style type="text/css">
 .sub-box{background:#FFF;border:1px solid #D3D3D3;width: 293px;-moz-border-radius: 0px 0px 6px 6px;
 -webkit-border-radius: 0px 0px 6px 6px;
 border-radius: 0px 0px 6px 6px;-khtml-border-radius: 0px 0px 6px 6px;padding:5px;}
 .emailtext{
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJmaMZ3-lWE2kWyyNmDzra-KCG5ydberhWvLzAlV1SlOhoIIX8UuTDUsyaJD8ZVN0jYvGYoxlvaP45ieuGyLbUK35iTxfV_SQCWds4CMmvxctX19SYCE1PlDTXyofbk2pGPVyAeX6QK7VW/s28/w2b-mail.png) no-repeat scroll 4px center transparent;
 padding: 7px 7px 7px 35px;
 margin-top:3px;
 margin-left:5px;
 margin-bottom:3px;
 border:1px solid #D3D3D3;
 color: #444; 
 -moz-border-radius: 3px; 
 -webkit-border-radius: 3px; 
 -o-border-radius: 3px; 
 -ms-border-radius: 3px; 
 -khtml-border-radius: 3px; 
 border-radius: 3px; 
 border-image: initial; 
 font-weight:bold;
 font-family: "Arial","Helvetica",sans-serif;
 }
 .ebutton{
 background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%); 
 background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00)); 
 background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%); 
 -pie-background: linear-gradient(270deg,#ffca00,#ff9b00); 
 font-family: "Arial","Helvetica",sans-serif; 
 border-radius:3px; 
 -moz-border-radius:3px; 
 -webkit-border-radius:3px; 
 border:1px solid #cc7c00; 
 color:white; 
 text-shadow:#d08d00 1px 1px 0; 
 padding:6px 7px; 
 margin-left:3px; 
 font-weight:bold; 
 font-size:12px; 
 cursor:pointer; 
 border-image: initial;}
 .ebutton:hover{background: #ff9b00;
 background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00);
 background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));
 filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
 outline:0;-moz-box-shadow:0 0 3px #999;
 -webkit-box-shadow:0 0 3px #999;
 box-shadow:0 0 3px #999
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00));
 background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);
 -pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
 border-radius:3px;
 -moz-border-radius:3px;
 -webkit-border-radius:3px;
 border:1px solid #cc7c00;
 color:#FFFFFF;
 text-shadow:#d08d00 1px 1px 0}
 #socialbookmark ul {padding: 0px;list-style: none;}
 #socialbookmark ul li {text-align: center;width: 58px;float: left;padding: 0px 6px;border-right: 1px solid #dedede;font-size: 11px;text-decoration:none;}
 #socialbookmark ul li a{text-decoration:none;color:#4c9cb0;}
 #socialbookmark ul li img {width: 48px;height: 44px;border: 0px;}
 #socialbookmark ul li.last {border: 0px;}
 #socialbookmarkbottom {border-bottom:1px solid #dedede;padding-top:5px;margin-bottom:5px;}
 </style>
 
 <!--[if IE]>
 <style> 
 .ebutton{ 
 background: #FFCA00; 
 }
 </style>
 <![endif]-->
 
 <br />
<div class="sub-box">
<!--BOOKMARK-->
 <br />
<div id="socialbookmark">
<ul>
<li><a href="https://www.facebook.com/bucikeh" rel="nofollow" target="_new"><img alt="Ewabloggerock Facebook" src="http://2.bp.blogspot.com/-g3-LDmUu7hI/T2X3d3k7cYI/AAAAAAAABMY/oBM9HzXfyRw/s1600/facebook.png" title="Facebook" /></a>
Facebook</li>
<li><a href="https://twitter.com/Rhe_Naldy" rel="nofollow" target="_new"><img alt="Ewabloggerock Twitter" src="http://1.bp.blogspot.com/-LrgUE4P20cs/T2X3fbQWOqI/AAAAAAAABMo/4OHiU4aunbc/s1600/twitter.png" title="Twitter" /></a>
Twitter</li>
<li><a href="https://plus.google.com/u/0/105331123587240119358/posts" rel="nofollow" target="_new"><img alt="Ewabloggerock Google+" src="http://3.bp.blogspot.com/-iSYFrJgyTJo/T2X20L-32xI/AAAAAAAABMQ/bcFXbl5vYx4/s1600/google+.png" title="Plus Google" /></a>
Google+</li>
<li class="last"><a href="http://feeds.feedburner.com/rhenaldy" rel="nofollow" target="_new"><img alt="Ewabloggerock RSS" src="http://3.bp.blogspot.com/-lXWmbWyrFF4/T2X3esEPFfI/AAAAAAAABMc/7gPWA9scsxA/s1600/rss.png" title="RSS" /></a>
RSS</li>
</ul>
<div id="socialbookmarkbottom">
</div>
</div>
<!--ENDOFBOOKMARK-->
 <br />
<div style="display: inline-block; text-align: left;">
<form action="http://feedburner.google.com/fb/a/mailverify" class="emailform" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ewabloggerock', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="Ewabloggerock" />
 <input name="loc" type="hidden" value="en_US" />
 <input class="emailtext" id="email" name="email" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" style="font-size: 12px; width: 150px;" type="text" value="Enter Your Email here.." />
 <input al="" class="ebutton" title="" type="submit" value="Subscribe" />
 </form>
</div>
</div>
</div>
</div>
</div>

• Tambah Gadget >>> HTML/JavaScript

Kamu Bisa letakan Gadget Tersebut sesuai keinginan kamu

• Lalu Simpan...Lihat deh hasilnya...

NOTE:

• <a href="https://www.facebook.com/bucikeh> Ganti dengan Url Facebook kamu
• <a href="https://www.twitter.com/Rhe_Naldy>Ganti dengan Url Twitter kamu
• ><a href="https://plus.google.com/u/0/105331123587240119358/posts">Ganti dengan Url Google+ kamu
• <a href="http://feeds.feedburner.com/rhenaldy" >Ganti dengan Url FeedBurner kamu

SELAMAT MENCOBA...| Jangan Lupa Berkomentarya...!

Share :

Tweet

✚

Related Post