Cara Membuat Menu Bar Di Blog - Pada tutorial kali ini saya akan berbagi tips untuk membuat Menu Bar pada blogspot, dikarenakan setiap template tidak menentu adanya kelengkapan seperti widget. Salah satu nya Menu. Website tanpa menu, akan terlihat tidak elegan dan pengunjung yang datang ke website pun akan kesusahan untuk melihat-lihat isi dalam website kita. Sebenarnya tanpa harus dikasih menu saja, pengunjung bisa memilih lewat label/kategory yang tersedia di setiap website, namun alangkah baiknya jika kita menambahkan fitur ini di blog kita.
Untuk cara ini anda tidak harus ahli dalam bahasa pemograman. karena disini anda hanya harus mengatur tata letak dimana anda menyimpan tampilan menu nya dan menyisipkan link di setiap menu, agar setiap pengunjung yang mengklik menu nya akan di tujju pada kategory yang ada. Berikut Caranya.
Setelah anda copy kan script di atas, langsung masuk ke blog anda > ke tata letak > pilih dimana anda ingin menyisipkan Menu Bar nya.
Untuk cara ini anda tidak harus ahli dalam bahasa pemograman. karena disini anda hanya harus mengatur tata letak dimana anda menyimpan tampilan menu nya dan menyisipkan link di setiap menu, agar setiap pengunjung yang mengklik menu nya akan di tujju pada kategory yang ada. Berikut Caranya.
Cara Membuat Menu Bar Di Blog
Ada dua macam untuk membuat Menu Bar Di Blog, yaitu dengan cara cukup memasang widget pada tata letak dan mengedit template. Jadi anda tinggal memilih cara mana yang akan anda gunakan untuk membuat Menu Bar Di Blog anda.
1. Membuat Menu Bar Dengan Edit Tata Letak
Cara ini sangat mudah untuk anda pemula yang baru belajar ngeblog karena cukup memasang widget saja. Yang pertama anda copy script yang saya kasih dibawah ini terlebih dahulu.
<style type="text/css">
/*CSS MENU*/
#menu{background:#00FF00;color:#eee;height:35px;border-bottom:4px solid #eeeded}
#menu ul,#menu li{margin:0 0;padding:0 0;list-style:none;z-index:9999;}
#menu ul{height:35px}
#menu li{float:left;display:inline;position:relative;font:bold 12px Arial;text-shadow: 0 -1px 0 #000;border-right: 1px solid #444;border-left: 1px solid #111;text-transform:uppercase}
#menu li:first-child{border-left: none}
#menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#eee;}
#menu li:hover > a,#menu li a:hover{background:#111}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:12px;position:absolute;left:35px}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#111;position:absolute;z-index:99;display:none;border:0;}
#menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;}
#menu li:hover ul.menus{display:block}
#menu a.home {background: #c00;}
#menu a.sub{padding:0 27px 0 14px}
#menu a.sub::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}
#menu ul.menus a:hover{background:#333;}
</style>
<!-- Mulai Area Menu -->
<nav id="menu">
<input type="checkbox" />
<label>≡Navigation</label>
<ul>
<li><a class="home" href="/">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Daftar Isi</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Login Admin</a></li>
<!-- Mulai Area Menu Dropdown -->
<li><a class="sub" href="#">Menus</a> <ul class="menus">
<li><a href="#" title="Menus">Menus 1</a></li>
<li><a href="#">Page</a></li>
<li><a href="#">Menus2</a></li>
<li><a href="#">Menus 3</a></li>
<li><a href="#">Menus 4</a></li>
<li><a href="#">Menus 5</a></li>
</ul>
</li>
<!-- Area Dropdown Selesai--> </ul>
</nav>
<!-- Area Menu Selesai-->
/*CSS MENU*/
#menu{background:#00FF00;color:#eee;height:35px;border-bottom:4px solid #eeeded}
#menu ul,#menu li{margin:0 0;padding:0 0;list-style:none;z-index:9999;}
#menu ul{height:35px}
#menu li{float:left;display:inline;position:relative;font:bold 12px Arial;text-shadow: 0 -1px 0 #000;border-right: 1px solid #444;border-left: 1px solid #111;text-transform:uppercase}
#menu li:first-child{border-left: none}
#menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#eee;}
#menu li:hover > a,#menu li a:hover{background:#111}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:12px;position:absolute;left:35px}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#111;position:absolute;z-index:99;display:none;border:0;}
#menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;}
#menu li:hover ul.menus{display:block}
#menu a.home {background: #c00;}
#menu a.sub{padding:0 27px 0 14px}
#menu a.sub::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}
#menu ul.menus a:hover{background:#333;}
</style>
<!-- Mulai Area Menu -->
<nav id="menu">
<input type="checkbox" />
<label>≡Navigation</label>
<ul>
<li><a class="home" href="/">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Daftar Isi</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Login Admin</a></li>
<!-- Mulai Area Menu Dropdown -->
<li><a class="sub" href="#">Menus</a> <ul class="menus">
<li><a href="#" title="Menus">Menus 1</a></li>
<li><a href="#">Page</a></li>
<li><a href="#">Menus2</a></li>
<li><a href="#">Menus 3</a></li>
<li><a href="#">Menus 4</a></li>
<li><a href="#">Menus 5</a></li>
</ul>
</li>
<!-- Area Dropdown Selesai--> </ul>
</nav>
<!-- Area Menu Selesai-->
Setelah anda copy kan script di atas, langsung masuk ke blog anda > ke tata letak > pilih dimana anda ingin menyisipkan Menu Bar nya.
- Klik tambahkan Gadget seperti gambar di atas, setelah itu pilih HTML/JavaScript, lalu pastekan script yang sudah anda copy di atas.
- Lalu edit script nya seperti dibawah ini
Keterangan.
Cara mengedit Backround Menu
Temukan kode dibawah ini lalu anda edit tulisan (#343434) sesuai dengan warna yang anda inginkan. Contoh "Red"
#menu{background:#343434;color:#eee;height:35px;border-bottom:4px solid #eeeded}
Cara Mengedit Link Pada Menu Bar
Temukan kode (<li><a href="#">About</a></li>) lalu anda rubah (#) nya dengan link yang anda inginka, agar setiap yang klik bagian menu nya akan tertuju ke karegory sesuai dengan nama menu.
Jika semua sudah selesai jangan lupa klik simpan, dan lihat hasilnya.
2. Cara Membuat Menu Bar Dengan mengedit Template
Untuk cara ini memang agak susah, namun jika anda ingin tampilan menu nya sangat elegan dan propesional anda bisa menggunakan cara ini untuk membuat tampilan Menu Bar pada blog anda. berikuta caranya.
Masuk ke blog yang akan dikasihkan tampilan Menu Bar > Lalu masuk ke Template > Edit Template Saran saya untuk cara ini sebelum anda memulai cara ini alangkah lebih baik nya jika anda cadangkan terlebih dahulu takut nya ada hal yang tidak di ingin kan.
Setelah berada pada tampilan edit template copy kan kode dibawah ini.
Masuk ke blog yang akan dikasihkan tampilan Menu Bar > Lalu masuk ke Template > Edit Template Saran saya untuk cara ini sebelum anda memulai cara ini alangkah lebih baik nya jika anda cadangkan terlebih dahulu takut nya ada hal yang tidak di ingin kan.
Setelah berada pada tampilan edit template copy kan kode dibawah ini.
<style>
/* -- Menu Horizontal + Sub Menu-- */
#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}
#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}
#cat-nav a:hover { color:#fff; }
#cat-nav li:hover { background:#000; }
#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}
#cat-nav .nav-description { display:block; }
#cat-nav a:hover span { color:#fff; }
#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }
#secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}
#secnav li { float:left; width: auto; height:35px;}
#secnav li ul { position: absolute; left: -999em; width: 200px; top:35px}
#secnav li ul li { height:30px; border-top:1px solid #fff; }
#secnav li ul li a { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }
#secnav li ul ul { margin: -30px 0 0 180px; }
#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }
#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }
#secnav li:hover,#secnav li.hover { position:static; }
#cat-nav #secnav {width:100%;margin:0 auto;}
</style>
<div id='cat-nav'>
<ul class='fl' id='secnav'>
<li><a href='#'>Beranda</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu2 a</a></li>
<li><a href='#'>Sub Menu2 b</a></li>
</ul>
</li>
<li><a href='#'>Menu3</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu3a</a></li>
<li><a href='#'>Sub Menu3b </a></li>
</ul>
</li>
<li><a href='#'>Menu4</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu4a</a></li>
<li><a href='#'>Sub Menu4b </a></li>
</ul>
</li>
<li><a href='#'>Menu5</a></li>
</ul>
</div>
/* -- Menu Horizontal + Sub Menu-- */
#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}
#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}
#cat-nav a:hover { color:#fff; }
#cat-nav li:hover { background:#000; }
#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}
#cat-nav .nav-description { display:block; }
#cat-nav a:hover span { color:#fff; }
#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }
#secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}
#secnav li { float:left; width: auto; height:35px;}
#secnav li ul { position: absolute; left: -999em; width: 200px; top:35px}
#secnav li ul li { height:30px; border-top:1px solid #fff; }
#secnav li ul li a { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }
#secnav li ul ul { margin: -30px 0 0 180px; }
#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }
#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }
#secnav li:hover,#secnav li.hover { position:static; }
#cat-nav #secnav {width:100%;margin:0 auto;}
</style>
<div id='cat-nav'>
<ul class='fl' id='secnav'>
<li><a href='#'>Beranda</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu2 a</a></li>
<li><a href='#'>Sub Menu2 b</a></li>
</ul>
</li>
<li><a href='#'>Menu3</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu3a</a></li>
<li><a href='#'>Sub Menu3b </a></li>
</ul>
</li>
<li><a href='#'>Menu4</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu4a</a></li>
<li><a href='#'>Sub Menu4b </a></li>
</ul>
</li>
<li><a href='#'>Menu5</a></li>
</ul>
</div>
- Setelah copy script di atas, kembali ke edit template cari kode Div class='main-outer'> agar pencarian nya cepat lakukan dengan cara menekan CTRL+F Lalu msukan kode nya tekan Enter. Jika sudah ketemu anda pastekan semua script di atas yang sudah anda copy di atas kode div class='main-outer'>.
Penjelasanya.
Untuk merubah Warna pada Backround nya
Cari kode #cat nav {backround:#156994 anda rubah (#156994) dengan warna yang anda inginkan.
Untuk Menulisakn Judul Menu Dan Link Tujuanya.
Tingggal anda rubah tulisan yang saya beri tanda warna Hijau untuk membuat tampilan nama menu nya dan untuk tujuan menu nya tinggal anda rubah tanda "#" dengan link yang anda inginkan.
Nah cukup mudah bukan untuk Cara Membuat Menu Bar Di Blog jadi jika website anda tidak memiliki menu bar anda bisa memilih beberapa cara di atas untuk membuatnya. Jika masih perlu ada yang ditanyakan anda bisa Kontak saya lewat Email atau juga bisa isikan kolom komentar dibawah.