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:

Trik Blogspot

• Menambahkan Image Pada Judul Posting
• Mengganti Pager Link Blogger Dengan Icon
• Klik Label Tampil Hanya Judul Posting Update
• Klik Label Tampil Hanya Judul Posting
• Menambahkan Icon Pada Label Dan Link Sidebar
• Mengganti Tanggal Dengan Icon Kalender
• Menghilangkan Icon QuickEdit (Tang dan Obeng)
• Area Sidebar Dalam Kotak Terpisah
• Area Komentar Dalam Kotak Terpisah
• Area Posting Dalam Kotak Terpisah
• Background Warna Pada Teks Posting
• Modifikasi Pesan Pengantar Formulir Komentar
• Beda Tampilan Komentar Pemilik Blog
• Nomor Urut Komentar (Numbering Comment) Blogger
• Pasang Emoticon Di Atas Kotak Komentar
• Membuat Blockquote Dan Modifikasi Blockquote
• Masalah Pada Verifikasi Kotak Komentar
• Membuat Teks Berkedip Blink Text
• Membuat Horizontal Navigasi Blogger
• Avatar Profil Komentar Blogger Update
• Latar Belakang Teks Dengan Efek Stabilo
• Menggunakan Gambar Untuk Latar Belakang Blog
• Menghilangkan Border Pada Image Posting
• Modifikasi Border Photo Profil Blogger

or or