Pasang Stripe-ad Ala Navbar, itulah yang terbenak dalam pikiran saya kali ini. 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 :
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 :
- Login ke account blog sobat
- Klik rancangan lalu klik edit html
- Klik expand widget templates
/*-- (mta bar) --*/Catatan :
#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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjimap0ylB8nNp0aAohXEMVKdjk-MpiRv4Zfa9fnluksmlLIMqgEHPrGA8EH8nTExsOUOeNUP-uhKpIqBg7cWVsdDz84xnFGgKnnlvhsEIjuiy9ku2jjRMRnHj0ynkXEftmb6IQof-cJYVr/') 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbdmm62ZoK876mH7ACRqRH94vtTi9fD3UQ9HbeDRpP_vhpyppe_L1pgc-aEtox0A10kAgAwVOecI8GsIgoJximSLiHh886QUEf1FxmLsnNf1IqSrZSK7EbqKD1DLZzWrbUiukG0yJOnpbo/) 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcgCO1Lz0KWSMBGfMzloMotnkf9XsIc_jmUifuAo63UvHcNOLMyu4issLKanHKxkWFJPYdacg9jCoz5ooYkahLrTIEnxz_Ls1Wx-yDurIeSKuOqW_rbgNYg_6Qy8cXn1TSnzusWZgaiFzb/) 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}
- 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.
<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.
Langkah terakhir adalah simpan hasil kerja anda..semoga berhasil...
<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=''' onmouseover='self.status='asrizalwahdanwilsa';return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcgCO1Lz0KWSMBGfMzloMotnkf9XsIc_jmUifuAo63UvHcNOLMyu4issLKanHKxkWFJPYdacg9jCoz5ooYkahLrTIEnxz_Ls1Wx-yDurIeSKuOqW_rbgNYg_6Qy8cXn1TSnzusWZgaiFzb/' style='cursor:hand;cursor:pointer;'/></span></div>
