Pasang Strip-ad Footer Navbar

Pasang Strip-ad Footer, selbelumnya saya sudah memposting pembuatan strip-ad ini dengan judul cara membuat navbar footer namun diartikel sebelumnya belum ada tombol close untuk artikel lanjutannya disini saya akan memberikan tutorial cara membuat strip-ad ala navbar tapi letaknya di footer dan ada dua design transparant dan tidak silahkan Anda pilih saja.

Contoh :

Contoh Live klik disini

PERTAMA TIDAK TRANSPARANT.

Login ke akun blogger
Tata letak / Design kemudian Edit HTML.
Kemudian cari kode ]]></b:skin>. Gunakanlah fasilitas search untuk mencari nya dengan menekan CTRL+F atau F3.
Copy script dibawah ini, lalu paste diatas code ]]></b:skin> yang tadi.

#mta_bar { background: #000000; 
border-top: 1px solid #333333; 
margin: 3px 0 0 0; padding: 4px 0; 
z-index: 1000; 
bottom: 0; left: 0; 
width: 100%; overflow: auto; position: fixed; }
* html #mta_bar{ /*IE6 hack*/
position: absolute;

width: expression(document.compatMode=="CSS1Compat"?

document.documentElement.clientWidth+"px" :

body.clientWidth+"px"); }
#mta_bar .left { float: left; text-align: center;

font-family: Arial;

font-size: 13px; font-weight: bold; font-style: normal;

color: #fff;

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: #fff;

text-decoration:

underline;}
#mta_bar .right a:hover {font-size: 10px; color: #fff;

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

Masukan kode pemanggilan JS dibawah, letakan diatas kode </head>,

<script src='http://acuncode.googlecode.com/files/Stript-adbottom.js'

type='text/javascript'/>

Letakan kode dibawah ini dibawah kode <body>, Silahkan sesuaikan link dan deskripsi yang berwarna merah diganti dengan milik Anda sendiri dan silahkan di edit atau disetting sesuai selera Anda.

<div id='mta_bar'>
<div id='left_bar'>
<span class='left'>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=MusikLiriks'

target='_blank'>

Kurang lebih 3000 pembaca Rss Feed sudah bergabung, Sudahkah anda?</a>
</span>
</div>
<span class='right' onmouseout='self.status=&apos;&apos;'

onmouseover='self.status=&apos;o-om.com.com&apos;;

return true;'>

<img align='absmiddle' border='0'

onClick='closeTopAds();return false;'

src='http://www.alamatserveranda.com/gambar_close.gif'

style='cursor:hand;cursor:pointer;'/>
</span>
</div>

Klik Save Template.

KEDUA TRANSPARANT (seperti contoh live diatas.)

Untuk membuat transpart cukup tambah kode CSS opacity: 0.9;filter: alpha(opacity: 90); Sebagai contoh atau juga bisa Anda pakai sekalian lihat penambahannya saya beri warna biru dan kode warna background saya ganti biar kayak transparant lihat dibawah ini :

#mta_bar { background: #f5f5f5; 
border-top: 1px solid #333333; 
margin: 3px 0 0 0; 
padding: 4px 0; 
z-index: 1000;  
opacity: 0.9;filter: alpha(opacity: 90); 
bottom: 0; left: 0; 
width: 100%; overflow: auto; position: fixed; }
* html #mta_bar{ /*IE6 hack*/
position: absolute; width:

expression(document.compatMode=="CSS1Compat"?

document.documentElement.clientWidth+"px" :

body.clientWidth+"px"); }
#mta_bar .left { float: left;

text-align: center;

font-family: Arial;

font-size: 13px; font-weight: bold;

font-style: normal;

color: #fff; 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: #fff; text-decoration:

underline;}
#mta_bar .right a:hover {font-size:

10px; color: #fff;

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

Untuk langkahnya membuatnya sama dengan yang diatas cuma diganti CSS yang sudah saya tambahin kode opacity: 0.9;filter: alpha(opacity: 90); diatas, letakkan saja CSS diatas kode ]]></b:skin> .

**Note: semua warna blackground bisa dibuat transpart menggunakan kode CSS opacity: 0.9;filter: alpha(opacity: 90); dan CSS diatas bisa Anda ganti -ganti sesuai ukuran warna pokoknya sesuai selera Anda saja lah....

Silahkan dicoba semoga berhasil jika masih bingung bisa berikan komentar Anda, dan terimakasih kepada O-om.com. Semoga bermanfaat.

Kamis, 02 Februari 2012

Pasang Strip-ad Footer Navbar

Tidak ada komentar:

Posting Komentar

damar web blogspot