Sebelumnya saya telah membuat sebuah artikel yaitu cara membuat strip ad footer atau statis footer. Kali ini kita akan melakukan trik sedikit berbeda yaitu membuat strip header atau statis header. Strip ad ini akan terlihat seperti layaknya navigation bar. Apabila anda mengscroll halaman ke bawah maka strip ad tersebut akan ikut ke bawah seperti floating image. Pada strip ad ini anda dapat memasang pesan, iklan dan lain sebagainya.
Tertarik gimana cara membuatnya...Apabila anda uda gak sabaran dan ingin segera membuatnya sehingga blog anda terlihat lebih menarik maka ikuti trik yang satu ini:
1. Login ke blogger
2. Klik Tata Letak dan klik lagi pada edit HTML
3. Lalu kopi dan paste kode berikut sebelum kode ]]></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://www.rexrainey.com/wp-content/themes/rexrainey_v3/images/r_icon.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://tbn1.google.com/images?q=tbn:SIPxi6jgt3SnnM:http://www.freelancerlisting.net/images/icon_exit.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsw8m6YV9xbI6tOABedwuqPowXZ_IkhCFVygNSQT_5aVartPDRmvFxp5kHUx9ZzdvjkMdYhEFj4QBmexlEDSBA77iUBRKLlzL3sw7fncSji5EV9EhWrBNiNEMrKJc3H9BMIAThn29jsxDP/s400/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}
======================================================================
Keterangan:
- Kode berwarna biru adalah kode warna
- Kode warna merah berfungsi untuk membuat warna kelihatan transparant
- warna ungu adalah alamt url gambar
4. Masukan kode ini diatas kode </head>
======================================================================
<script src='http://bahauddin.fileave.com/kumpulanJavaScript/Flot%20atas-Stript-ad.js' type='text/javascript'/>
======================================================================
5. Letak kode ini dibawah kode <body>
======================================================================
<div id='mta_bar'>
<div id='left_bar2'>
<span class='left'>
<a href='http://www.blogger.com/logout.g' target='_blank'>Log Out</a></span></div>
<div id='left_bar'>
<span class='center'>
Masukan tulisan anda disini
</span></div>
<span class='right' onmouseout='self.status=''' onmouseover='self.status='o-om.com.com';return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsw8m6YV9xbI6tOABedwuqPowXZ_IkhCFVygNSQT_5aVartPDRmvFxp5kHUx9ZzdvjkMdYhEFj4QBmexlEDSBA77iUBRKLlzL3sw7fncSji5EV9EhWrBNiNEMrKJc3H9BMIAThn29jsxDP/s400/delete.png' style='cursor:hand;cursor:pointer;'/></span></div>
=====================================================================
7. Masukan tulisan anda pada kode warna merah
6. Simpan hasilnya
maaf ya tulisannya agak berantakan , karena saya Masih Newbie / Pemula ..
sumber:blogtrikdantips
Tidak ada komentar:
Posting Komentar