Cara membuat widget subscribe v.2

Satu lagi wigdet yang bisa sobat pake untuk mempercantik blog/web sobat. Tampilan Widget Subcribe v.2 ini adalah pengembangan dari Tampilan Widget Subcribe v.1 yang sudah saya liris pada postingan terdahulu. Widget Subcribe kali ini lengkap dengan tombol ikon G+, Facebook dan twitter. Icon yang saya buat kali ini menunjukkan keseriusan dari Widget Subcribe v.1 terdahulunya. Semoga sobat bloger semakin lebih kreativ dan inovativ untuk kejayaan blog kedepannya.

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:#767575;font-weight:bold;; background:#ececea  ;}

.emailtext:hover{background: #00ffff ;}

.emailtext:focus{outline:none;}

.sub-button{color:#000000eee;font-weight:bold; text-decoration:none;padding:1px 1px; border:1px solid #666;cursor:pointer;background:#00ffff}

.sub-button:hover{color:#ff0000;border-color: #999;background:#03a4a2}

.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;

}

.style5 {

    font-family: Arial, Helvetica, sans-serif;

    color: #FFFF00;

    font-weight: bold;

}

.style6 {color: #FF0000}

</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="270" border="0" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
  <tr>
       <td height="19" colspan="8" valign="top" bgcolor="#000099"><div align="center" class="style5">Subscribe via RSS Feed v.2 </div></td>
  </tr>
  <tr>
    <td width="4" height="91"></td>
    <td colspan="2" valign="top"><div align="left"><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 colspan="4" valign="top"><a href="http://feeds.feedburner.com/RivaiSilaban" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQdaAZd4m000uZKi-Oz4-mHgeCjsAMlH5SH_2vThf4KuPWa-cCyAne3YBB3DdcOMgmEf2FIc0CV3vanRPQi1OsxN3f2hYgOfkGijPb9uoxKXJU9RGad_A3jMrovLNAtR8o8fGcIWPNRKo/s1600/Newspaper-db2.png" width="72" height="91" border="0" align="texttop" /></a></td>
  <td width="5"></td>
  </tr>
  <tr>
    <td height="7"></td>
    <td width="148"></td>
    <td width="35" rowspan="3" valign="top"><a href="https://plus.google.com/108560124605502700357" target="_blank" onmouseover="MM_swapImage('G+','','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijN95VufAlGjERzzI7pT6Fc7eeL6FMN4ZazMaOhUXqssi5JzBtDLWNNPFSz9dFsta0IDyRkBIOplJnhi5hKtT3SNoIIWv_tr2gi2gWmy0G_fi4c4ISsqa5Fdz3CTd_oH7W2Nl-zMs9erg/s1600/G2.gif',1)" onmouseout="MM_swapImgRestore()"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhukbbgTact60BUPtnghe8SCN8MJYoGUTj4Iy3Hz7m1zpWRz25kUnegc0c-V5q6bOvwvxkKgNQFdP3K-h35XkBG7WtKwjxAnlXVfD62CJhBrIB6lxM47DZN57GJPPDJuxQOLi5nrEXnHj8/s1600/G1.gif" alt="G+" name="G+" width="35" height="35" border="0" id="G+" /></a></td>

  <td width="4"></td>

    <td width="35" rowspan="3" valign="top"><a href="https://www.facebook.com/halaktoba" target="_blank" onmouseover="MM_swapImage('FB','','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ89sAa8Oy_9r-Red3QREOZqy92oDo79BZztw5c9StIoui0Xpb5RuiJ-g1pms3b4RoTU9BsPmjx74tijyqiWRE4T0TVF92_Rd6mACIoJBXyexle7_yQ3O4AcDi7L-3zBnw6e1kXF7ndho/s1600/F2.gif',1)" onmouseout="MM_swapImgRestore()"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrw2fctqjIaTwQg7ILLjZEgpcUot_bM2dohORLOGquhwoI_GXMzozyTIQP33db-AnkGmQgIUxYTYthfSMs2Qy3YpviZZUG8jy7qhtpZ475yhR0JI5C59DPaMjBspu8kB2kfrhej0th0ls/s1600/F1.gif" alt="Fans page" name="FB" width="35" height="35" border="0" id="FB" /></a></td>
  <td width="4"></td>
    <td width="35" rowspan="3" valign="top"><a href="https://twitter.com/Rivai_Silaban" target="_blank" onmouseover="MM_swapImage('Twieet','','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLLwN0L9nzIu3PXXtNzc9y-WF5h5QtK9IxBw7ZneSTOxatiV4T5NHjFFK6O1U3Xrzo3jhN_puwpIydzmjsJhULSTHYyNGQT4Mz8y1kU1s276AVX0olE3Xa0MxVgsd9HpjTgi9_vcPO5vM/s1600/T2.gif',1)" onmouseout="MM_swapImgRestore()"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpcPDRFh9V3ZUXT-9PVTKwERrxIrXPymj78wvCkrT1HQp8Wur_byFTJ10_ZLwnWdotOC2w3qrBxkGlZz3GnZhY8UymXytYMX5qeWV5h4G62AvkYGgyfCep2_LX_jhPizmfJS5K-y3vFUo/s1600/T1.gif" alt="Twitter" name="Twieet" width="35" height="35" border="0" id="Twieet" /></a></td>
    <td></td>
  </tr>
  <tr>
    <td height="19" colspan="2" valign="top" class="style4"><div align="center"><marquee>
      <span class="style6">CEK EMAIL ANDA</span>
                    </marquee></div></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td height="9"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
           <tr>
    <td height="6"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td height="26" colspan="8" 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..." size="27" />
        <input name="submit" type="submit" class="sub-button" title='' value="Kirim" alt='' />
        </div>
    </form></td>
  </tr>
</table>

Keterangan gambar

Tulisan warna Merah ganti dengan URL Facebook, Twitter, G+ anda.

Tulisan yang diblog warna biru langit ganti dengan URL Feedburner anda

Update terbaru dari Widget Subcribe v.2 ini akan dapat mempercantik blog sobat, selamat mencoba.

Nb : Bila ada kesalahan dalam menulis code script silahkan hubungi saya dengan kotak komentar dibawah ini.

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 : 3:54 PM