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=''' onmouseover='self.status='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.
Membuat Navbar Menu di BlogMembuat Navbar Menu di Blog ala Bamz.Us ini memang tergolong simpel dan tidak terlalu banyak modifikasi. Kalau anda cukup paham Css anda bisa mempercantik tampilan navbar menu itu sendiri. Setelah saya lihat-lihat / berkunjung ke blog lain ternyata fitur navbar menu ini banyak dipakai untuk menarik visitor agar mau berlangganan via Feed. Yah memang kemungkinan besar visitor akan tertarik untuk berlangganan dengan adanya rayuan pada navbar menu tsb :). Semoga artikel Membuat navbar menu ini bermanfaat buat sobat smua.
Tidak ada komentar:
Posting Komentar