Pasang Stripe-ad Ala Navbar di Blog

 

Pasang Stripe-ad Ala Navbar, itulah yang terbenak dalam pikiran saya kali ini, setelah pada postingan sebelumnya saya posting mengenai cara mudah mendapatkan pagerank. sobat blogger semua pasti tahu apa itu navbar, sosok kecil yang tampil diatas blog kita yang selalu mengikuti halaman kita ketika kita scroll halaman ke bagian bawah, nah membuat stripe ad ini akan admin paparkan layaknya sebuah navbar. stripe ad ini sangat cocok untuk sobat semua apabila mempunyai artikel terbaru, pasang iklan dsb.untuk contohnya dapat dilihat pada bagian atas blog ini, untuk contoh lainnya kunjungi blog ini.
dengan tombol close navbar ini bisa di hide dan close, sangat keren bukan?
satu lagi blog hack yang bisa membuat tampilan blog kita lebih elegan.
Berikut tutorialnya :

1. Login ke account blog sobat
2. Klik rancangan lalu klik edit html
3. Klik expand widget templates

Copy-paste kode CSS berikut dan letakkan di atas ]]>

/*-- (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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoTBkbJefgvi3fBMXCSE_WN2PoZ5gx03WyXYGMl3_POXhwYhIGpumQwwik4WLB-sp4fmahA_FjRI2aTGe7X86yPTy76fP1XEf8cnA2cjc0whGVJZ6MlhDHdpl13a11I77GD9jNHqMqILop/') 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3KFk_SgkMCP4AdN03ttKml5irapNMOAehchCG8Bs5Vb_DK8FizS_ObSE5QN92jIjEfavyphnQNffD0iA8u0rHSzVpqxEtasPteppD51n2ERX9josPVWKpRQWjp0BSS2_L7Xecj7Ft-wA5/) 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlXfqGRt2sp1OAj5kOVZz9-r_kFTONxGX1BKh7ECF0UuJzGaiPXBGWKFufpT4gh5nJFWwxjOCqtvHxJ9COsAayYffAq0Nf9Ic5csmpC_OQyjrt5kJWjp5OMuZFyNgCfan-UF__3VHXitWr/) 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 biru adalah alamt url gambar. Silahkan sesuaikan dengan kebutuhan anda.

Masukan kode javascript dibawah ini, letakan diatas kode