Membuat Navbar Menu Di Blog

Membuat Navbar Menu di Blog
Membuat Navbar Menu di Blog. Navbar menu atau Meta bar di bagian atas blog yang fungsinya mungkin untuk notice atau pemberitahuan dsb. Oh ya, cara membuat menu navbar ini hanya untuk pengguna blogger / blogspot. Sebelum membuatnya, coba anda lihat demo Navbar menu tersebut.

Cara membuat Navbar Menu di Blogspot

  • Login ke Blog anda > Design > Edit HTML
  • Cari kode ]]></b:skin> ( Gunakan CTRL + F biar gampang )
  • Copy kode di bawah ini dan paste di atas kode ]]></b:skin>
#meta_bar { background: #454545; 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"); }
#meta_bar .left { float: left; text-align: center; font-family: Arial; font-size: 13px; font-weight: bold; font-style: normal; color: #0000FF; width:95%;}
#meta_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;}
#meta_bar .right a {font-size: 10px; color: #0000FF; text-decoration: underline;}
#meta_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; }
  • Sekarang cari kode </head> dan paste kode Javascript berikut tepat di atas kode </head>
<script src='http://script-bamz-us.googlecode.com/files/navbarmenu.js' type='text/javascript'/>
  • Selanjutnya cari kode <body> dan paste kode berikut di bawah <body>
<div id='meta_bar'>
<div id='left_bar'><span class='left'><a href='http://feeds.feedburner.com/BamzUs' target='_blank'>Ada 1.000.000 pembaca Rss Feed sudah bergabung, Sudahkah anda?</a></span></div>
<span class='right' onmouseout='self.status=&apos;&apos;' onmouseover='self.status=&apos;return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='http://www.jurnalismewarga.com/images/utils/icon_close.png' style='cursor:hand;cursor:pointer;'/></span></div>
Simpan
Catatan :
  • Kode yang berwarna merah adalah Isi pesan singkat navbar menu tersebut, bebas bisa anda ganti susuai keinginan anda.
  • Kode yang warna hijau adalah warna background dari navbar menu tersebut juga bisa di sesuaikan dengan warna background blog anda.

Bookmark and Share



Artikel Terkait :)

0 komentar:

Posting Komentar

 




Pengikut

Harbudi Manggala Putra MengucapkanTerima Kasih Atas Kunjungan Anda Di Blog Saya . Maaf Saya Hanya Manusia Biasa Yang Berusaha Untuk Menjadi Yang Terbaik