Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Sunday, April 14, 2013

Cara membuat widget subscribe V 1

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','','http://4.bp.blogspot.com/-xLab7lhTJyw/UWo-ORQvYwI/AAAAAAAAAlE/evlJwacEIx4/s1600/ff2.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="http://2.bp.blogspot.com/-qP8kjbvQmUQ/UWo-JtWXffI/AAAAAAAAAk8/fewISZSIJOU/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','','http://1.bp.blogspot.com/-0HiCihpNd64/UWo-GuWXyCI/AAAAAAAAAk0/NE0X3QAW-HU/s1600/TT1.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="http://1.bp.blogspot.com/-m14KcM_IjXE/UWo-FnNkhQI/AAAAAAAAAks/lprIJtR-Au8/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+','','http://4.bp.blogspot.com/-urEEDD7lqKQ/UWo-FT74vNI/AAAAAAAAAkk/RmXyPUwmVPk/s1600/GG2.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="http://3.bp.blogspot.com/-rsh-MPS6Bgg/UWo-Es3oGeI/AAAAAAAAAkc/-0ZuCdbx8jQ/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.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Rivai Silaban Update pada : 1:29 PM

4 comments :

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog