cara membuat Email Subscribe

 
Berbagai Macam cara membuat Email Subscribe memang banyak sekali di posting sahabat-sahabat blogging kita. Sebelumnya saya pernah posting dengan topik membuat Subcribe di blogspot, namun yang kemaren itu bisa di bilang kurang lengkap.

Mengapa kurang lengkap, ya karena kali ini kita akan menambah kan banyak fitur Seperti Follow Twitter ,Like halaman facebook, dan Like Google Plus.

nah ..langsung saja kita mulai cara-caranya.

1. Silahkan salin kode berikut ini ke dalam elemen Html/Javascript blog anda.
caranya di rancangan/desain pilih add widget pilih add html/javascript.

<style type="text/css">
/*<!CDATA[*/
#w2b-mashable{width:300px;margin:auto;padding:0;}
.w2b-googleplus {height: 57px;}
.w2b-facebook {background#FFFFFF;border: 1px solid #DCDCDC;margin-top: -2px;padding: 5px 10px;}
.w2b-gplusone {background-color: #f5fcfe;border: 1px solid #d8e6eb;border-top: 1px solid white;font-size: .87em;color: black;padding: 9px 0 0 11px;line-height: 24px;height:30px;}
.w2b-gplusone span {display: inline-block;vertical-align: middle;height: 20px;margin-top: -17px;font-size: 11px;font-family: "Arial","Helvetica",sans-serif;}
.w2b-twitter {background-color: #eef9fd;border: 1px solid #c7dbe2;border-top: 0;}
.w2b-twitter a.twitter-follow-button {display: block;}
.w2b-twitter iframe {margin: 9px 11px;}
.w2b-sociallinks {background-color: #d8e6eb;border: 1px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 10px 11px;overflow: hidden;}
.w2b-sociallinks a {text-shadow: 1px 1px white;}
.w2b-sociallinks .w2b-social {list-style: none;overflow: hidden;margin: 0 !important;padding: 0 !important;}
.w2b-sociallinks .w2b-social li {border:0 none !important;float: left;line-height: 1;padding: 2px 0 4px 20px !important;margin-bottom: 3px;width: 70px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpMCOBTEM4HTyQvM3irh7vobseRI4NPoB66hxPk7I1dlEAR_GfaM7X8DHH8gfcCjUUv_qQMaEFlx9wBPPaVtWtsuxBwMiFLqtRyi-OjbdULWqiUVCXEstVzhoLs-z9UZ6TJ9W9gaecEGdT/s1600/w2b_socialsprite.png) no-repeat;font-size: 12px;}
.w2b-sociallinks .w2b-social li a {display: block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;}
.w2b-sociallinks .w2b-social li a:hover {text-decoration: underline;}
.w2b-sociallinks .w2b-social li.facebook {background-position: 0 -450px !important;}
.w2b-sociallinks .w2b-social li.twitter {background-position: 0 -150px !important;}
.w2b-emailbox {background-color: #E3EDF4;border: 1px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 12px 16px;overflow: hidden;}
.w2b-emailbox form{width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;}
.w2b-emailbox input.emailu {float:left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;color: #999;padding: 7px 10px 8px;width: 100%;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 13px;}
.w2b-emailbox input.emailu:focus {color: #333;}
.w2b-emailbox input.submitu {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;color: white;padding: 7px 14px;font-weight: bold;font-size: 12px;float: right;cursor: pointer;}
.w2b-emailbox input.submitu:hover {text-decoration: none;}
.w2bDefault {border: 1px solid #cc7c00;text-shadow: #d08d00 1px 1px 0;background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffca00),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: linear-gradient(center top,#ffca00 0,#ff9b00 100%);}
.w2bDefault:hover {background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffe480),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: linear-gradient(center top,#ffe480 0,#ff9b00 100%);}.w2b-moresubs {background: none repeat scroll 0 0 #EBEBEB;border-style: solid;border-width: 1px;border-color: #fff #ccc #ccc;padding: 3px 8px 3px 3px;text-align: right;font-size: 7px;letter-spacing: 1px;}
.w2b-moresubs a {display: inline-block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;}
/*]]>*/
</style>
<div id="w2b-mashable">
<div class="w2b-googleplus">
<script type="text/javascript">
  /*<![CDATA[*/
  window.___gcfg = {lang: 'en'};
  (function(){
      var po = document.createElement("script");
      po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(po, s);
  })();
  /*]]>*/
  
</script>
<div class="g-plus" data-height="69" data-href="https://plus.google.com/111397735749075719497" data-theme="light" data-width="270">
</div>
</div>
<div class="w2b-facebook">
<iframe allowtransparency="true" src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Farieadie&amp;send=false&amp;layout=standard&amp;width=250&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=80" frameborder="0" scrolling="no" style="border: none; height: 66px; overflow: hidden; width: 250px;"></iframe></div>
<div class="w2b-gplusone">
<script type="text/javascript">
/*<![CDATA[*/
       (function() {
  var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;
  po.src = "https://apis.google.com/js/plusone.js";
  var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s);
       })();/*]]>*/
  
</script>
<div class="g-plusone" data-href="http://thizan.blogspot.com/" data-size="medium">
</div>
Recommend on Google</div>
<div class="w2b-twitter">
<a class="twitter-follow-button" data-show-count="true" href="https://twitter.com/lindamarlina40">Follow @topdanunik</a>
<script type="text/javascript">
/*<![CDATA[*/!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");/*]]>*/
</script></div>
<div class="w2b-sociallinks">
<ul class="w2b-social">
<li class="facebook"><a href="http://thizan.blogspot.com/">Facebook</a></li>
<li class="twitter"><a href="http://thizan.blogspot.com/">Twitter</a></li>
</ul>
</div>
<div class="w2b-emailbox">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogcapoenk', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">
<table><tbody>
<tr>    <td>
<input class="emailu" name="email" placeholder="Enter your email" type="text" /></td>    <td width="64px">
<input class="submitu w2bDefault" type="submit" value="Subscribe" /></td>       </tr>
</tbody></table>
<input name="uri" type="hidden" value="topdanunik" />
<input name="loc" type="hidden" value="en_US" /></form>
</div>
<div class="w2b-moresubs">

</div>
</div>

keterangan:
1. Ganti angka 300 yang berwarna merah sesuai ukuran yang anda inginkan.
2. ganti id Google plus yang berwarna biru dengan ID google Plus anda.
3.Ganti arieadie yang berwarna hijau dengan page halaman facebook anda.
4. Jika anda mau merubah background nya ,anda cukup mengganti kode #E3EDF4
dengan kode kesukaan anda.
5.Ganti lindamarlina dengan id twetter anda.
6.Ganti blogcapoenk dengan id email subscribe feedburner anda.
7. simpan widget anda dan lihat hasilnya.

Selamat mencoba ,semoga tutorial tentang membuat email subscription keren ini bermanfaat buat sahabat blogging.
jangan lupa ya support komentarnya di bawah.