11 February 2011

Cara Memasang Stripe-Ad ala Navbar

Pengunjungpun dapat melihat langsung batang navigasi ini ketika pertama kali mereka mengunjungi halaman blog anda. Iklan ini akan tetap tampil walaupun pembaca melakukan Mouse Scroll pada halaman.
Jika tertarik kemungkinan besar pembaca akan mengkliknya, jika dirasa mengganggu mereka dapat dengan mudah menutupnya dengan mengklik tombol - pada pojok kanan atas.

Langsung saja kita paraktekkan cara memasangnya :

Login ke Blogger klik Rancangan klik Edit HTML klik tulisan Download Template Lengkap.
Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula.
Beri tanda centang pada kotak di samping tulisan Expand Template Widget, kemudian cari kode ]]></b:skin>
Tips : Untuk mempercepat pencarian sobat bisa gunakan tombol (F3).
Jika sudah ketemu tambahkan kode berikut di atas kode ]]></b:skin>

#mta_bar { background: #FFFFE1; border-bottom: 1px solid #808080; margin: 0 0 3px 0; padding: 4px 0; z-index: 100; top: 0; left: 0; width: 100%; overflow: auto; position: fixed; }
* html #mta_bar{ /*IE6 hack*/
position: absolute; width: expression(document.compatMode==&quot;CSS1Compat&quot;? document.documentElement.clientWidth+&quot;px&quot; : body.clientWidth+&quot;px&quot;); }
#mta_bar .left { float: left; text-align: center; font-family: Arial; font-size: 13px; font-weight: bold; font-style: normal; color: #0000FF; width:92%;}
#mta_bar .right {font-family: 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: #0000FF; text-decoration: underline;}
#mta_bar .right a:hover {font-size: 10px; color: #0000FF; text-decoration: none;}
#left_bar a { text-decoration: none; color: #0000FF; }
#left_bar a:hover { text-decoration: underline; color: #0000FF; }

Kemudian cari kode </head> dan letakkan kode script berikut di atasnya

<script src=' http://imtikhan.googlecode.com/files/Stript-ad.js' type='text/javascript'/>

Masih dalam Edit HTML cari kode <body> jika sudah ketemu letakkan kode berikut di bawahnya

<div id='mta_bar'>
<div id='left_bar'><span class='left'><a href='http://feeds.feedburner.com/' target='_blank'> Rss Feed </a></span></div>
<span class='right' onmouseout='self.status=&apos;&apos;' onmouseover='self.status=&apos;Arda Blog&apos;;return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='http://i1002.photobucket.com/albums/af149/Imtikhan/close.png' style='cursor:hand;cursor:pointer;'/></span></div>

Keterangan : tulisan yang berwarna biru bisa sobat ganti sesuai keinginan.
Jika sudah selesai SIMPAN TEMPLATE dan lihat hasilnya

Selamat mencoba

No comments:

Post a Comment