Selasa, 07 Juli 2009

Pasang Stripe-Ad Seperti Navbar Blogger

iklan bergaya Stripe-Ad tentu lebih baik dari pada menayangkan iklan dalam bentuk Popup Ad (Pop-ups, pop-overs and pop-unders), Selain dapat menghindari Popup Blocker, memasang Stripe-Ad terasa sangat pas untuk menampilkan satu fokus informasi yang dirasa penting (bisa berupa iklan baris, pengumuman, Feed atau informasi apa saja sesuai kebutuhan).

Jika anda melihat contoh Stripe-Ad diatas pada blog ini, atau di blog sebelah juga ada,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 X pada pojok kanan atas.

Stripe-Ad tentu saja bukan hal yang baru. Pengguna Wordpress biasanya menggunakan plugin Strip-Ad buatan MaxBlogPress cara installasinya pun terbilang mudah dan sudah ditulis dengan lengkap caranya, silahkan pelajari sendiri disitusnya ya :)

Cara Pasang Strip-Ad di Blogger:

1) Login Ke blogger

2) Masuk Ke halaman tata letak

3) Masuk ke halaman edit HTML

4) Copy paste kode berwarna biru dibawah ini tepat diatas ]]></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; }

5) Masih pada halaman Edit HTML, Copy paste kode berwarna biru dibawah ini tepat diatas </head>

<script type='text/javascript'>
//<![CDATA[
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";
}
//]]>
</script>

6) Masih pada halaman Edit HTML, Copy paste kode berwarna biru dibawah ini tepat dibawah <body> Silahkan sesuaikan setingan yang bercetak tebal dibawah ini dengan link dan deskripsi anda sendiri.

<div id='mta_bar'>
<div id='left_bar'><span class='left'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=stopdreamingstartinaction&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='border:0px solid ;padding:0px;text-align:center;' target='popupwindow'><b>Kirim Info Lowongan Kerja dan Artikel Terbaru Ke Email Anda:</b><input name='email' style='width:140px' type='text'/><input name='uri' type='hidden' value='stopdreamingstartinaction'/><input name='loc' type='hidden' value='en_US'/><input type='submit' value='Kirim'/></form></span></div>
<span class='right' onmouseout='self.status=&apos;&apos;' onmouseover='self.status=&apos;stopdreamingstartinaction.com&apos;;return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='http://www.alamatserverandanyimpangambar.com/close.gif' style='cursor:hand;cursor:pointer;'/></span></div>

7) Simpan dan lihat hasilnya

Berlangganan RSS FEED melalui Email

Setiap STOPDREAMINGSTARTINACTION.COM melakukan pembaharuan terhadap tulisan, maka anda akan mendapatkan kiriman artikel terbaru melalui Email dan semua ini gratis (tidak dipungut biaya), caranya anda cukup memasukan alamat email pada kolom dibawah ini:

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman Informasi Lowongan Kerja terbaru dan artikel terbaru dari STOPDREAMINGSTARTINACTION.COM di inbox anda:

Kirim Info Lowongan Kerja dan Artikel Terbaru Ke Email Anda:

Tambah Ke daftar bacaan anda:
Add to Google Reader or HomepageSubscribe in NewsGator OnlineSubscribe in RojoAdd to My AOLAdd to netvibesSubscribe in BloglinesAdd to The Free DictionaryAdd to PlusmoSubscribe in NewsAlloyAdd to Excite MIXAdd to netomat HubAdd to fwickiAdd to WebwagAdd to AttensaReceive IM, Email or Mobile alerts when new content is published on this site.Add FREE DOWNLOAD|SOFTWARE|SCRIPT|EBOOK|TEMPLATE to ODEOSubscribe in podnovaAdd to Pageflakes

Tidak ada komentar:

Posting Komentar