Skip to main content

Cara Pasang Stripe-Ad Ala Navbar Blogger

Bagi para pengguna Wordpress, menggunakan plugin Strip-Ad bukanlah hal yang baru. Mereka biasanya memanfaatkan buatan MaxBlogPress. Cara installasinya pun terbilang mudah dan sudah ditulis lengkap dewngan caranya. Untuk mempelajarinya, silahkan klik di sini.



Stripe-Ad memang cocok untuk mempromosikan sesuatu. Dan menayangkan 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 focus informasi yang dirasa penting (bisa berupa iklan baris, pengumuman, Feed atau informasi apa saja sesuai kebutuhan).

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 minus (-) pada pojok kanan atas.

Untuk memasangnya di Blogger, berikut langkah-langkahnya:

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";
}



Atau jika anda malas mengupload file di atas, anda bisa menggunakan link milik saya sendiri dengan alamat :

http://bahauddin.fileave.com/kumpulanJavaScript/Flot%20atas-Stript-ad.js

Catatan :
Bagi anda yang belum memiliki hosting gratis penyimpanan JavaScript dan bagaimana cara menyimpannya, silahkan baca di sini.

2. Tuju kehalaman Edit HTML di blogger.

Copy-paste kode CSS berikut dan letakkan di atas ]]></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://i437.photobucket.com/albums/qq97/syahdu140208/My%20Network/mybloglog.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://i437.photobucket.com/albums/qq97/syahdu140208/My%20Network/myfacebook.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(http://2.bp.blogspot.com/_C6KkooKXCEw/Si0hpItyl-I/AAAAAAAAEYQ/kmsk9iVM9HM/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}


Catatan :
*Kode warna merah adalah kode warna. Silahkan sesuaikan dengan keinginan anda. Lihat kode warna html di sini.
*Kode warna hijau berfungsi untuk membuat warna kelihatan transparant. Anda bisa menghapusnya atau membiarkannya.
*Sedangkan yang berwarna ungu adalah alamt url gambar. Silahkan sesuaikan dengan kebutuhan anda.


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

<script src='http://bahauddin.fileave.com/kumpulanJavaScript/Flot%20atas-Stript-ad.js' type='text/javascript'/>

atau menggunakan alamat file JavaScript yang telah anda upload.

<script src='http://www.alamatserveranda.com/Stripe-Ad.js' type='text/javascript'/>

4. Letakan kode dibawah ini dibawah kode <body>, Silahkan sesuaikan setingan dibawah dengan link dan deskripsi anda sendiri.


<div id='mta_bar'>
<div id='left_bar2'>
<span class='left'>
<a href='http://www.facebook.com/people/Bahauddin-Amyasi/1123539184' target='_blank'>Login to Facebook </a></span></div>
<div id='left_bar'>
<span class='center'><a href='http://www.mybloglog.com/buzz/yjoin/?ref_id=2008112013571770;ref=w;' target='_blank;'>Sudah Gabung di MBL Bahauddin?, join sekarang!</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://2.bp.blogspot.com/_C6KkooKXCEw/Si0hpItyl-I/AAAAAAAAEYQ/kmsk9iVM9HM/s400/delete.png' style='cursor:hand;cursor:pointer;'/></span></div>



5. Jangan lupa simpan hasil kerja anda....

Untuk Suhu O_OM Ramadani, mohon maaf telah memodofikasi source-nya tanpa izin.

Happy blogging....

Popular posts from this blog

HUMAN RELATION ; Perspektif Psikologi Humanistik, Fungsionalisme dan Behaviorisme (Sebuah Kajian Analitis-Interkonektif)*

Pendahuluan
Human Relation, merupakan hubungan atau kerjasama antara dua individu atau lebih, khususnya dalam status hubungan atau interaksi social. Buruk atau baiknya human relation dapat diukur dari adanya kepercayaan yang bersifat timbal balik antara satu orang dengan orang lain serta dari adanya sebuah penghormatan atau penghargaan dan rasa tolong menolong yang kokoh. Bukan menjadi keraguan lagi bahwasanya human relation menjadi suatu keinginan yang sangat primordial bagi setiap yayasan atau sebuah organisasi, bahkan menjadi syarat utama dari terealisasinya tujuan-tujuan serta pencapaian visi dan misi sebagai kunci kesuksesan organisasi pada umumnya.

Human relation sering disebut juga dengan “interpersonal relation”, yaitu kerjasama sekelompok individu dari masyarakat social yang tumbuh dari adanya hubungan antara satu individu dengan individu yang lain. Interpersonal relation merupakan sebuah deskripsi yang jelas tentang tata pergaulan atau tingkah laku manusia dan karakteristik pr…

Kumpulan Novel Jar (untuk HP Aplikasi Java)

Bagi para novel mania, membaca novel tentunya adalah kesenangan tersendiri. Semacam interaksi personal dengan dunia imaji yang kerap menghentak-hentak ambisi. Di dunia maya, kita banyak menjumpai situs-situs yang menyediakan novel dengan berbagai format dan ekstensinya. Ada format PDF (portable document format), yang dapat dibuka dengan program Acrobat Reader atau sejenisnya. Ada juga yang dengan bentuk format htm, yang dapat dibuka dengan browsing atau internet eksplorer secara offline. Ada juga yang berbentuk format exe. Ada juga yang menggunakan windjvu-viewer (untuk membuka file extensi *.djv / *.djvu). Ada format "lit Viewer"(untuk membuka file extensi *.lit). Dan banyak "ada juga-ada juga" yang lain...

Tapi, pada postingan kali ini, saya akan berbagi lagi dengan sobat sekalian tentang Novel HP (aplikasi java). So, bagi sobat yang punya hobbi ngoleksi novel, tetapi jarang online dan tidak punya komputer, jangan khawatir. Berkat kecerdasan teknologi, kita yang …

Download Alfiyah MP3

Di kalangan pondok pesantren, nama Ibnu Malik dan Kitab Alfiyah adalah dua entitas yang sudah tidak asing lagi, terlebih bagi pondok pesantren salaf yang setiap harinya bergumul dengan kitab kuning dan tata gramatika bahasa Arab (Nahwu & sharrof). Di pondok saya sendiri, Mambaul Ulum Bata-bata, Pamekasan, Madura, kitab Alfiyah Ibnu Malik menjadi Kitab standart acuan dalam pembelajaran Kaidah bahasa Arab, dan menjadi syarat pelulusan ke tingkat Aliyah B, yang orientasinya memang menitik beratkan pada kajian kitan klasik.

Pada malam-malam tertentu, para santri diwajibakan membaca nadham (bait-bait) Alfiyah dengan bersama-sama, dengan lagu dan irama yang bermacam-macam. diharapkan, dengan tradisi pembacaan Alfiyah secara rutin dan intens, santri mamapu menhafal dan memahami isi kandungan kitab Alfiyah ini dengan baik dan mudah.

Di era teknologi dan informasi yang serba canggih ini, kitab Alfiyah dan kitab-kitab kuning lainnya sudah tidak dipelajari secara manual dan klasikal, tetapi …