Notification

×

Pasang Stripe-ad Ala Navbar di Blog

31 July 2010 | 20:54 WIB Last Updated 2021-09-18T09:23:24Z
Pasang Stripe-ad Ala Navbar di Blog
Pasang Stripe-ad Ala Navbar, itulah yang terbenak dalam pikiran saya kali ini, setelah pada postingan sebelumnya saya posting mengenai cara mudah mendapatkan pagerank. sobat blogger semua pasti tahu apa itu navbar, sosok kecil yang tampil diatas blog kita yang selalu mengikuti halaman kita ketika kita scroll halaman ke bagian bawah, nah membuat stripe ad ini akan admin paparkan layaknya sebuah navbar. stripe ad ini sangat cocok untuk sobat semua apabila mempunyai artikel terbaru, pasang iklan dsb.untuk contohnya dapat dilihat pada bagian atas blog ini.
dengan tombol close navbar ini bisa di hide dan close, sangat keren bukan?
satu lagi blog hack yang bisa membuat tampilan blog kita lebih elegan.
Berikut tutorialnya :
  1. Login ke account blog sobat
  2. Klik rancangan lalu klik edit html
  3. Klik expand widget templates
Copy-paste kode CSS berikut dan letakkan di atas ]]></b:skin>

/*-- (mta bar) --*/
#mta_bar{background:#58ACFA; border-bottom:2px 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:7px; padding-bottom:4px;
z-index:10000;opacity: 0.9;filter: alpha(opacity: 90);}

* 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:13px; font-weight:bold; font-style:normal; color:#FF0080; width:65%}

#mta_bar .left{float:left; text-align:left; font-family:Verdana,Arial; font-size:13px; font-weight:normal; font-style:normal; color:#FF0080; width:20%}

#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:#FF0080; text-decoration:underline}

#mta_bar .right a:hover{font-size:10px; color:#FF0080; text-decoration:none}

#left_bar a{background:url('http://lh3.ggpht.com/_mWNaJ9OwpbA/TFQz3uyMN9I/AAAAAAAAAhY/OARuBr4VwIw/mybloglog.gif') no-repeat; text-decoration:none; color:#FF0080; padding-left:23px; padding-right:0; padding-top:0; padding-bottom:0}

#left_bar a:hover{text-decoration:underline; color:#FF0080}

#left_bar2 a{background: url(http://lh6.ggpht.com/_mWNaJ9OwpbA/TFQz3vUrxGI/AAAAAAAAAhc/zMVRp6zSQTY/myfacebook.gif) no-repeat 2px; text-decoration:none; color:#FF0080; padding-left:21px; padding-right:0; padding-top:0; padding-bottom:0}

#left_bar2 a:hover{text-decoration:underline; color:#FF0080}

#to_top{background:transparent url(http://lh5.ggpht.com/_mWNaJ9OwpbA/TFQz3m9CBzI/AAAAAAAAAhU/3whudNQNZEg/delete.png) no-repeat scroll 0%; position:absolute; /*this replaces float - fixes thanks to Larry ofhttp://blog.lroot.com*/height:18px; width:19px; margin:0 0 0 900px; /*this was updated*/padding:9px 5px}

#to_top a{padding:8px}
Catatan :
  • Kode warna merah adalah kode warna. Silahkan sesuaikan dengan keinginan anda..
  • Kode warna hijau berfungsi untuk membuat warna kelihatan transparant. Anda bisa menghapusnya atau membiarkannya.
  • Sedangkan yang berwarna biru adalah alamt url gambar. Silahkan sesuaikan dengan kebutuhan anda.
Masukan kode javascript dibawah ini, letakan diatas kode </head>

<script src='http://sites.google.com/site/asrizalofficialweb/javascript/Stript-ad.js' type='text/javascript'/>

Letakan kode dibawah ini dibawah kode <body>, Silahkan sesuaikan setingan dibawah dengan link dan deskripsi anda sendiri.

<div id='mta_bar'>
<div id='left_bar2'>
<span class='left'>
<a href='http://www.facebook.com/asrizalww' target='_blank'>Login to Facebook </a></span></div>
<div id='left_bar'>
<span class='center'><a href='http://http://feedburner.google.com/fb/a/mailverify?uri=asrizalwahdanwilsa' target='_blank;'>Dapatkan artikel asrizal secara gratis via mail, join here!</a></span></div>
<span class='right' onmouseout='self.status=&apos;&apos;' onmouseover='self.status=&apos;asrizalwahdanwilsa&apos;;return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='http://lh5.ggpht.com/_mWNaJ9OwpbA/TFQz3m9CBzI/AAAAAAAAAhU/3whudNQNZEg/delete.png' style='cursor:hand;cursor:pointer;'/></span></div>
Langkah terakhir adalah simpan hasil kerja anda..semoga berhasil...
×