Jika anda melihat contoh Stripe-Ad diatas pada blog ini, sekilas terlihat hampir serupa dengan standar Navigation Bar (Navbar) Blogger. Pengunjungpun dapat melihat langsung batang navigasi ini ketika pertama kali mereka mengunjungi halaman blog anda. Iklan ini akan tetap tampil walaupun pembaca melakukan Mouse Scroll pada halaman. Jika tertarik kemungkinan besar pembaca akan mengkliknya, jika dirasa mengganggu mereka dapat dengan mudah menutupnya dengan mengklik tombol - pada pojok kanan atas.
LAngsung Saja Ke tutorialnya:
1. Upload File javascript dibawah ke lokasi penyimpanan file anda, Simpan file dengan nama Stript-ad.js
var mta_arr = new Array();
var mta_clear = new Array();
function mtaFloat(mta) {
mta_arr[mta_arr.length] = this;
var mtapointer = eval(mta_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.mtasrc = document.all? document.all[mta] : document.getElementById(mta);
this.mtasrc.height = this.mtasrc.offsetHeight;
this.mtaheight = this.cmode.clientHeight;
this.mtaoffset = mtaGetOffsetY(mta_arr[mtapointer]);
var mtabar = 'mta_clear['+mtapointer+'] = setInterval("mtaFloatInit(mta_arr['+mtapointer+'])",1);';
mtabar = mtabar;
eval(mtabar);
}
function mtaGetOffsetY(mta) {
var mtaTotOffset = parseInt(mta.mtasrc.offsetTop);
var parentOffset = mta.mtasrc.offsetParent;
while ( parentOffset != null ) {
mtaTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return mtaTotOffset;
}
function mtaFloatInit(mta) {
mta.pagetop = mta.cmode.scrollTop;
mta.mtasrc.style.top = mta.pagetop - mta.mtaoffset + "px";
}
function closeTopAds() {
document.getElementById("mta_bar").style.visibility = "hidden";
}
2.SIlahkan menuju ke halaman Edit html di blogger.
Copy-Paste kode CSS dibawah, letakan diatas kode ]]></b:skin>
#mta_bar { background: #FFFFE1; border-bottom: 1px solid #808080; margin: 0 0 3px 0; padding: 4px 0; z-index: 100; top: 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: #0000FF; 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: #0000FF; text-decoration: underline;}
#mta_bar .right a:hover {font-size: 10px; color: #0000FF; text-decoration: none;}
#left_bar a { text-decoration: none; color: #0000FF; }
#left_bar a:hover { text-decoration: underline; color: #0000FF; }
3. Masukan kode pemanggilan JS dibawah, letakan diatas kode </head>, jangan lupa ganti ganti tulisan yang berwarna merah di bawah ini dengan alamat lokasi URL dimana anda meyimpan file JS-nya.
<script src='http://www.alamatserveranda.com/Stripe-Ad.js' type='text/javascript'/>
4. Letakan kode dibawah ini dibawah kode <body> Silahkan sesuaikan settingan dibawah dengan link dan deskripsi anda sendiri.
<div id='mta_bar'>
<div id='left_bar'><span class='left'><a href='http://feeds.feedburner.com/Ardablog' target='_blank'>Kurang lebih 3200 pembaca Rss Feed sudah bergabung, Sudahkah anda?</a></span></div>
<span class='right' onmouseout='self.status=''' onmouseover='self.status='Arda Blog';return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='Ganti Dengan Url Tombol Close anda' style='cursor:hand;cursor:pointer;'/></span></div>
6. Simpan hasinya....
By O-OM Dengan sedikit Perubahan
Jika Anda menyukai Artikel di blog ini, Silahkan
klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di www.arda.web.id
39 komentar: on "Cara Memasang Stripe-Ad ala Navbar"
coba ah
tapi agak rumit
klo g usah upload javascriptnya bisa g????
q blm bisa webhosting
ok sob. .
ntar di coba. .
lanjutkan ilmu postingannya. , hhe. .
Trikk baguss mass... Tx.
@fawaz
klo itu harus upload java script nya
Mudah kok di http://code.google.com/hosting/
kalau mau petunjuknya silah kan googling saja.
Maaf nanti ak post lagi deh. hehehe
boleh dicoba di blog baruku nih
untuk saat ini blm dibutuhkan kayak gini, mungkin suatu saat nanti dan pelan-pelan saja.
boleh juga nuh langsung ane praktikan.. nice info sob....
SEBENERNYA sih aku pengen pasang juga, tapi scriptnya banyak sih, mbo nambah berat blog . .hehe
wah..., sip tenan ini tutorialnya
tutorial yang mangstaf..., tapi aku memakai wordpress, tinggal pasang plugin je ;)
informatif banget sob, boleh juga nee dipraktekan,,,
Salam kenal sob...
nice info fren......lanjutkan
mantaps mas, jacky nyari2 dari kemaren eh adanya disini, ntar coba aaah
wih keren nie
maksih ya atas infonya
wah posting kita sama tapi aku gak ada yang koment
wouhhh . . .
kerennn . .
aq coba ahhh :D mkcih infonya
asik,, di coba ahahh
aku mw nanyak nih,, kan di templet default ada {home, post rss, edit , edit} nah cara ganti yang edit, edit tuh gmana yaa??? tolong di posting ya caranya,,, n kalo udah di posing kaih tw aku ,,,,,
thx
@SELAMAT DATANG DI BLOGKU
Ok..... insya Alloh nanti ak post
wah bagus nih, q dah dari dulu pingin masang kayak gitu, langsung praktek aja dah...
salam,
saya cuma mau ngajak anda dan para pembaca blog ini supaya mau mampir ke blog saya. terima kasih.
Nice weeeng.,., nice,.,.,
Nyongot weng,.,.,
siiiiiippppp.......
Ahhhhaaaa ha.,., ura ura da,.,., kur guyon.,.,
aku coba ya sobb..thanks!
komen untuk kedua kalinya
Wah keren banget kang Arda
ntar akan Felix coba :D
wah nanti kena depak google gak..? hehehe
komen untuk ketiga kalinya
bagus banget,.....
Buih. . . apik mas. . . itu script yang buat kamu sendiri ya?
@Yuda taufiqurrahman
Nggak mas ak hanya berterima kasih kepada o-om...
he3x
saya pingin kalau tampilan stripe ad nya ada diatas dan bawah,bukan diatas doang....tau gak cara nya gimana supaya ada tampilan di bawah juga stripe ad nya??
tolong balas melalui email saya ya!!
fadil.aidid@gmail.com
wah keren..
thanks.. azie coba nei..
saya coba dulu arda...
ijin mencoba kawan, makasih atas infonya, sukses selalu
Wah ternya ku dapat disini artikelnya, langsung kucoba kawan, makasih atas tutorialnya
eh sama kita aku juga sering lihat tutorial dari oom.loe.....
wah agak susah kayaknya tapi saya coba dulu sob
mantaap minta komen dong http://hutanmaya.blogspot.com/2011/12/resolusi-juara-2012.html
Posting Komentar
NO SPAM,NO SARA, Berkomentarlah Dengan Baik.......
Jika Terdapat Spam dan Tulisan yang Sara Maka Akan Langsung Saya Hapus Tanpa Se Izin Anda...