Pasang Strip-Ad Seperti Navbar Blogger

Saya pernah ditanya untuk memasang strip-ad ala blogger oleh sobat Elric seperti ini "Bang Del...apa Navbarnya gak bisa dimodif tampilannya kaya di situs o-om.com...link balik yaaa ^_^". Kalau ditanya bisa atau enggak maka jawabannya bisa. Nah, strip-ad berguna untuk menampilkan link yang akan dipasang di sana. Link ini bisa berupa link iklan atau link lainnya seperti ajakan untuk bergabung menjadi readers blog yang diletakkan menutupi navbar blogger. Oke, ilustrasinya bisa dilihat seperti gambar di bawah ini.

Default blogger navbar


Strip-Ad seperti navbar blogger



Jika pembaca merasa terganggu, mereka dapat mengklik tombol silang di sebelah kanan dan strip-ad akan hilang. Nah, o.om.com sudah menjelaskan caranya di pasang strip-ad ala navbar blogger. Saya pun mengikuti cara beliau dengan modifikasi tertentu. Anda yang tertarik bisa mengikuti langkah berikut ini.

Cara pasang Strip-Ad Ala Blogger

1. Upload kode javascript di bawah ini di tempat hosting javascript anda yang nantinya digunakan sebagai kode pemanggilan javascript.
   
   

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

   
   Biar mudah, kamu bisa menggunakan alamat penyimpanan kode javascript di atas yang sudah saya hosting dan hasilnya ini. Tinggal dipakai saja koq.
   http://www.yourjavascript.com/583618909/Stript-ad.js



2. Copy dan paste kode CSS di bawah, letakkan di atas kode ]]></b:skin>
   
   

   #mta_bar { background: #0B610B; border-bottom: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF;margin: 0 ; padding: 7px 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 {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTNkYkEeF8BTWh_jgCjCeK7sSr-fekMGTsH6Y_i50ciGExymsUpnZTk4NH5tfZpXwg7Egbsfs_A7XltZ3Gi73Uvz9RCJ89LeDUyu_eRyPilfSNMEHYG5BpVixpfYZADVLos043ozl54ug/?imgmax=800') no-repeat; text-decoration: none; color: #fff; padding:5px 0px 5px 30px;}
   #left_bar a:hover { text-decoration: underline; color: #0000FF; }
   



3. Copy dan paste kode pemanggilan javascript di atas kode </head>. Penulisannya seperti ini.
   <script src='http://www.yourjavascript.com/583618909/Stript-ad.js' type='text/javascript'/>



4. Copy kode ini di bawah kode <body>
   
   

   <div id='left_bar'><span class='left'><a href='http://feeds.feedburner.com/bangdel' target='_blank'>Gratis berlangganan artikel Bang Del</a></span></div>
   <span class='right' onmouseout='self.status=&apos;&apos;' onmouseover='self.status=&apos;bangdel.blogspot.com&apos;;return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCzvF8oIX5lah477blNb3doYjTMwUzUQYSIuCs2b51c8bdH2yb8mHvtJskxV8q-89rUzfk6RvtG6ysANVm1Mmxdo2jN0cHoIJwYkwwnH7GDBIq6gaKnzwrUoXAdRJrrsp-8mpKjH58pkw/?imgmax=800' style='cursor:hand;cursor:pointer;'/></span></div>
   



5. Simpan template anda dan selesai.

Nah, anda harus menyesuaikan link sesuai dengan blog anda. Perhatikan kode yang saya kasih warna merah. Ganti lah kode tersebut sesuai blog dan kebutuhan anda. Kamu juga masih dapat memodifikasi strip-ad ala navbar blogger ini dengan kode warna lain dan background lain. Anda juga bisa membaca artikel tentang modifikasi navbar blogger lainnya. Oke, selamat mencoba dan berkreasi untuk memasang strip-ad ala navbar blogger.

Related Post:

or or