Cara Membuat Stripe-Ad di Blogspot

Apa anda tau apa itu Stripe-Ad ? Jika belum tahu, mari kita bahas. Stripe-Ad yaitu sebuah Navigasi yang biasanya tampil di bagian atas blog. Stripe-Ad ini sendiri berfungsi sebagai wadah atau tempat menaruh link penting bahkan sebagai tempat memasang iklan pada suatu blog. Anda bisa melihat contoh Stripe-Ad di bagian atas pada ZonaUnlimited ini.

Jika anda amati, sekilas terlihat hampir serupa dengan standar Navigation Bar (Navbar) Blogger. Hanya bedanya jika Stripe-Ad ini akan tetap tampil walaupun pembaca melakukan Mouse Scroll pada halaman. Dengan menggunakan Stripe-Ad ini, ketika ada pengunjung datang, mereka dapat melihat langsung navigasi ini ketika pertama kali mereka mengunjungi halaman blog Anda. Jika tertarik kemungkinan besar pembaca akan mengkliknya, jika dirasa mengganggu mereka dapat dengan mudah menutupnya dengan mengklik tombol X pada pojok kanan atas.

Nah, untuk cara membuatnya sendiri sebetulnya sangat lah mudah. Ikuti langkah-langkah untuk membuat Stripe-Ad di bawah ini :

1. Login ke akun blogspot Anda
2. Buka Tab Rancangan » Edit HTML
3. Setelah itu, letakkan kode di bawah ini di atas kode </body> (tekan CTRL + F untuk mencarinya) :
   

   <script type='text/javascript'>
   //<![CDATA[
   var mta_arr=new Array();var mta_clear=new Array();function mtaFloat(mta){mta_arr[mta_arr.length]=this;var mtapointer=eval(mta_arr.length-1);this.pagetop=0;this.cmode=(document.compatMode&&document.compatMode!="BackCompat")?document.documentElement:document.body;this.mtasrc=document.all?document.all[mta]:document.getElementById(mta);this.mtasrc.height=this.mtasrc.offsetHeight;this.mtaheight=this.cmode.clientHeight;this.mtaoffset=mtaGetOffsetY(mta_arr[mtapointer]);var mtabar="mta_clear["+mtapointer+'] = setInterval("mtaFloatInit(mta_arr['+mtapointer+'])",1);';mtabar=mtabar;eval(mtabar)}function mtaGetOffsetY(b){var c=parseInt(b.mtasrc.offsetTop);var a=b.mtasrc.offsetParent;while(a!=null){c+=a.offsetTop;a=a.offsetParent}return c}function mtaFloatInit(a){a.pagetop=a.cmode.scrollTop;a.mtasrc.style.top=a.pagetop-a.mtaoffset+"px"}function closeTopAds(){document.getElementById("mta_bar").style.visibility="hidden"};
   //]]>
   </script>

4. Langkah selanjutnya, letakkan kode di bawah ini di atas kode ]]></b:skin> (tekan CTRL + F untuk mencarinya) :
   

   /*-- (mta bar) --*/
   #mta_bar{background:#444 url('http://4.bp.blogspot.com/_C6KkooKXCEw/TIChde9sutI/AAAAAAAAGzk/5DJ4Cbds91E/s200/topnavbar-c.png') repeat-x; border-bottom:1px solid #111; z-index:100; top:0; left:0; width:100%; overflow:auto; position:fixed; margin-left:0; margin-right:0; margin-top:0; margin-bottom:4px; padding-left:0; padding-right:0; padding-top:8px; padding-bottom:6px}
   * html #mta_bar{position:absolute; /*IE6 hack*/width:expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px":body.clientWidth+"px")}
   #mta_bar .center{float:left; text-align:center; font-family:Verdana,Arial; font-size:12px; font-weight:normal; font-style:normal; color:#fff; width:55%}
   #mta_bar .left{float:left; text-align:left; font-family:Verdana,Arial; font-size:12px; font-weight:normal; font-style:normal; color:#fff; width:30%}
   #mta_bar .right{font-family:verdana,Arial,Helvetica,sans-serif; float:right; text-align:center; font-weight:normal; font-size:10px; letter-spacing:0; width:30px; white-space:nowrap}
   #mta_bar .right a{font-size:10px; color:#fff; text-decoration:underline}
   #mta_bar .right a:hover{font-size:10px; color:#fff; text-decoration:none}
   #left_bar a{background:url('http://1.bp.blogspot.com/_C6KkooKXCEw/TIBf3E-mUfI/AAAAAAAAGwM/EoxAFDlcdr4/s200/feed-c.png') no-repeat; font-weight:bold;text-decoration:none; color:#fff; padding-left:23px; padding-right:0; padding-top:0; padding-bottom:10px}
   #left_bar a:hover{text-decoration:underline; color:#fff}
   #left_bar2 a{background: url(http://2.bp.blogspot.com/_C6KkooKXCEw/TICuIqKZqRI/AAAAAAAAG0E/hfkQzQz7h20/s200/check-c.png) no-repeat 2px; text-decoration:none; font-weight:bold; color:#fff; padding-left:21px; padding-right:0; padding-top:0; padding-bottom:0px}

5. Setelah itu, click Simpan
6. Setelah langkah di atas selesai, buka Tab Rancangan » Elemen Halaman / Tata Letak
7. Setelah itu, click Tambah Gadget » HTML / JavaScript
8. Lalu, letakkan kode di bawah ini di kotak munculan :
   

   <div id='mta_bar'>
   <div id='left_bar2'>
   <span class='left'>
   
   Masukkan link/iklan anda di sini (tampil di bagian kiri). 
   
   </span>
   </div>
   <div id='left_bar'>
   <span class='center' style='margin-left:20px;'>
   
   Masukkan link/iklan anda di sini (tampil di bagian kanan). 
   
   </span></div></div>

9. Kemudian, click Simpan

Nah, bagaimana. Mudah bukan. Semoga dengan Stripe-Ad ini blog anda lebih terlihat Proffesional. hhe

Selamat mencoba dan semoga berhasil! :)

Posting yang berjudul Cara Membuat Stripe-Ad di Blogspot ini Diposting oleh Coba Coba pada 11/26/2011 05:31:00 AM
Label: Tutorial Blog, Tutorial Blogspot
Jangan lupa berikan komentar anda pada artikel yang berjudul Cara Membuat Stripe-Ad di Blogspot ini :DD