Cara membuat widget subscribe V 1

Widget subcribe yang satu ini dapat diandalkan diblog/web anda untuk mempercantik sekalian untuk menghemat ruang blog/web anda. Fitur yang tersedia memang masih sederhana, alasannya saya melihat pengguna  blog maupun web sering kali hanya memakai ketiga fitur ini. Widget subcribe kali ini yang telah saya posting untuk para sobat sobat bloger saya memang terlihat sederhana dan tidak kalah dengan buatan teman2 yang lain. Widget Subcribe yang satu ini sudah lengkap dengan kode CSS dan Script yang saya satukan sehingga lebih memudahkan buat anda para sobat2 yang belum paham betul dengan kode HTML.

Oke langsung saja menuju TKP.

• Login ke Dasbor
• Pilih Layout  Tata Letak
• Tambahkan Gadget ( letaknya tergantung anda ) pilih HTML/JavaScript
• Copas code dibawah ini

<style type='text/css'>
.social a{color: #000000;font: bold 12px Calibri,Helvetica, Arial, sans-serif;text-decoration: none;padding: 3px 5px 2px;position: relative;display: inline-block;text-shadow: 0 1px 0 #fff;-webkit-transition: border-color .218s;-moz-transition: border .218s;-o-transition: border-color .218s;transition: border-color .218s; background: #f3f3f3;border: solid 1px #dcdcdc;}
.social a:hover {color: #333;border-color: #999;-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);}
.social a:active{color:#000;border-color: #444;}
.sub-box{width:300px;background:();padding: 2px 5px 7px 2px;font-family:Droid Sans,Helvetica,Arial;}
.emailform{margin:16px 0 0; display:block; clear:both;}
.emailtext{color:#a5a2a2;font-weight:bold;; background:#faf7bf  ;}
.emailtext:hover{background: #f3f3f3 ;}
.emailtext:focus{outline:none;}
.sub-button{color:#000000eee;font-weight:bold; text-decoration:none;padding:1px 1px; border:1px solid #666;cursor:pointer;background:#fca205}
.sub-button:hover{color:#444;border-color: #999;background:#ccc}
.style2 {
    font-family: "Courier New", Courier, monospace;
    font-size: 12px; padding:
   
}
#Layer1 {
    position:absolute;
    left:99px;
    top:126px;
    width:149px;
    height:34px;
    z-index:1;
}
#Layer2 {
    position:absolute;
    left:10px;
    top:173px;
    width:219px;
    height:19px;
    z-index:1;
}
a {
    font-size: 12px;
    color: #FF0000;
}
a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #990000;
}
a:hover {
    text-decoration: none;
    color: #0000FF;
}
a:active {
    text-decoration: none;
    color: #FF9900;
}
.style4 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}
</style>

<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

<table width="286" border="0" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
  <tr>
    <td width="86" rowspan="2" valign="top"><a href="https://www.facebook.com/rivaisilaban" target="_blank" onmouseover="MM_swapImage('FB','','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPQX1bHDjsgRoQernmJWTKnLBDMqPQSue3Yh1XiIhOxhLRmONrqeHDI75sEKDnb1ttZ_-8X90iveIY8Jsc6BWLc6hsCU0idZ_LVvzMGxo93UJqCCTA4pZMoxnadZAKHVYW4kWz7ZKGaRs/s1600/ff2.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1iLB49sOmkdDnbM8wSl8IQlgSj8J9xXe0QUcCOkbwNxiBoNBqitkBgovtr6bzCfVG7SzimlAkHFb5raIzR4ZHT7PuCl378BYYhoiZymgZWh_DXr8T1JIRNrWlwLjnhZjfMj4bQKNKm_w/s1600/ff.jpg" alt="FB Rivai Silaban" name="FB" width="86" height="41" border="0" id="FB" /></a></td>
    <td width="4" height="19"></td>
    <td width="195" valign="top" bgcolor="#F7D18C"><div align="center" class="style4">Subscribe via RSS Feed</div></td>
    <td width="1"></td>
  </tr>
  <tr>
    <td height="21"></td>
    <td rowspan="3" valign="top"><div align="justify"><small class="style2">Jika anda suka dengan artikel ini <a href='http://feeds.feedburner.com/RivaiSilaban' target='_blank' title='feedburner'> <b>click disini</b></a> , atau silahkan berlangganan artikel terbaru dari kami, Daftarkan email anda pada form dibawah.</small></div></td>
    <td></td>
  </tr>
 
  <tr>
    <td height="40" valign="top"><a href="https://twitter.com/Rivai_Silaban" target="_blank" onmouseover="MM_swapImage('Twit','','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhhH_XYfwo8KVPNa4Aqr3lQA93imr_iroCua9wKQRckUpQOEciMx1-CVf86duG-7EK_xflyMDpQ6rJwnjBRcE8XsHkrOYONQn2Njfmwtgjonh_ZSRbheGS1qT3nLkfu-ampf4MSXiMtKI/s1600/TT1.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2peBOMYr8YoRiG_i8FeF8ji3MrsT-lUNuqIGc_ge31ot_UXP5C2IxpNyoWDPEc1Bryj4qGaMuLCEFgLPgNxz0hUhW6Fvdy7PegCDKBylcf2o3s5CdgjQUvTg3jXoPf-gm7IRm61HRdKY/s1600/TT.jpg" alt="Twitter Rivai Silaban" name="Twit" width="86" height="40" border="0" id="Twit" /></a></td>
    <td>&nbsp;</td>
    <td></td>
  </tr>
  <tr>
    <td rowspan="2" valign="top"><a href="https://plus.google.com/108560124605502700357" target="_blank" onmouseover="MM_swapImage('G+','','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAaHaVeeZ1fDjOsG9kF2VK3oatUohQOXzlIXEziFIjlZjgdfit-FcoVKTwwg-LpMNCW6YYgUz75j-Z8pqPRvhLt02DXwKJZPhMlc6lzp3Km5hke2S9iCZC0OW2GATAwMNsOkrdeWhsSec/s1600/GG2.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRpR-RJ-ofojuu3QgBJdSaBj7tD6-XYD1pcPQ7U70ptMkWS2NSQFc2bUxk-RKeBp1xPgnk7vdHbQUElWSKR9WsDa2XFxnMYwiZVYkgEVsALKhnldBhy5hrU9r0XiatLHdVri4K8UH2AwA/s1600/GG.jpg" alt="G+ Rivai Silaban" name="G+" width="86" height="40" border="0" id="G+" /></a></td>
    <td height="30"></td>
    <td></td>
  </tr>
  <tr>
    <td colspan="2" rowspan="2" align="left" valign="top"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=RivaiSilaban', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
      <div align="right">
        <input name="email" type="text" class="emailtext" onfocus="if (this.value == &quot;Email anda...&quot;) {this.value = &quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Email anda...&quot;;}" value="Email anda..." />
        <input name="submit" type="submit" class="sub-button" title='' value="Kirim" alt='' />
        <input name="Reset" type="reset" class="sub-button" value="Reset" />
        </div>
    </form></td>
    <td height="10"></td>
  </tr>
  <tr>
    <td height="63">&nbsp;</td>
    <td></td>
  </tr>
</table>

Keterangan Code

• Warna MERAH pada huruf diatas adalah code link Facebook, Twitter, dan G+ silahkan anda ganti dengan code link anda
• Code yang diblog warna biru langit diatas adalah code link dari feedburner, silahkan ganti dengan kode link anda.

NB : Selamat mencoba, bila sobat masih belum paham atau ada code yang salah silahkan hubungi saya melalui kotak komentar dibawah.

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 1:29 PM