728x90 AdSpace

HEADLINE NEWS

31 Juli 2010

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...
Asrizal Wahdan Wilsa

Memulai Blogging sejak tahun 2009 hingga sekarang. Aktif di bidang musik yang dinaungi salah satu label musik di Kota Bandung. Saat ini fokus melanjutkan kuliah ke jenjang S2 di Universitas Negeri Semarang (UNNES). Website: Sharing Media - Info Tips dan Trik Terbaru

  • Blogger Comments
  • Facebook Comments

9 komentar:

  1. Wah keren banget tutornya sob,,,nambah ilmu blog lagi nih,,,, Thx,

    BalasHapus
  2. tapi ini ngelanggar TOS blogger gak ya?

    BalasHapus
  3. @ Asis
    Yups, semoga bermanfaat kawan...:n:

    @ Kang Uchiha
    enggak sob, kan kita ga ngilangin navbarnya, hanya membuat stripe ad seperti navbar, kalo navbarnya dihilangkan ya jelas melanggar tos, contoh blog ini, strip navbarnya ada, ketika di klik close navbar asli bloggernya pun juga ada :n:

    BalasHapus
  4. inget templatenya OOM,.,,,,
    persis sich..!

    BalasHapus
  5. Saya tes yah,, semoga bermanfaat, terimakasih telah berkunjung di blog saya,,, saya sangat bangga atas kunjungan itu,,,dan skrng saya jg sdh follow blog kamu,,,,sekali lagi terima kasih,,,

    BalasHapus

Berkomentarlah dengan bijak, relevan dengan artikel, komentar spam dan promosi akan kami hapus, terimakasih.

Kami akan menjawab komentar anda secepat mungkin, opsi lain silakan berkomentar di halaman facebook/melalui twitter kami.

Item Reviewed: Pasang Stripe-ad Ala Navbar di Blog Description: Rating: 5 Reviewed By: Asrizal Wahdan Wilsa
Scroll to Top