Membuat menu Horisontal

Home / Blog / Membuat menu Horisontal

Membuat menu Horisontal

Posted by Unknown Sabtu, 02 Maret 2013 0 komentar

Baiklah sekarang saya akan memberikan cara singkat pembuatan menu horizontal tersebut :

1. Buka pengaturan Template dengan cara klik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’.

2. Cari ]]></b:skin> atau gunakan CTRL+F untuk memudahkan pencarian dan kemudian sisipkan kode di bawah ini tepat di atasnya.
--------------------------------------------------------------------------

#navbar-iframe {

   height:0px; visibility: hidden; display: none;

_______________________________________________

Keterangan:
Kode tersebut berfungsi untuk menyembunyikan navbar standar Blogger, sehingga apabila sebelumnya kamu telah menyembunyikan navbar standar maka lewati langkah ini dan lanjutkan pada langkah berikutnya.

3. Sisipkan rangkaian kode CSS berikut ini tepat di atas ]]></b:skin> .
_______________________________________________
.bilah-menu-atas {
width: 100%;
min-width: 960px;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
height: 27px;
font-size: 13px;
z-index: 99;
white-space: nowrap;
background-color: #336699;
background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #336699 100%);
box-shadow: 0px 2px 0px rgb(14, 90, 140);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.kolom-utama {
-moz-transition: all 0.2s linear 0s;
width: 960px;
height: auto;
margin: 0px auto;
}
.kolom-menu {
width: 521px;
height: auto;
margin: 0px 0px 0px -41px;
float: left;
display: inline;
}
.kolom-menu ul {
height: auto;
margin-top: 0px;
}
.kolom-menu ul li {
float: left;
position: relative;
list-style: none outside none;
}
.kolom-menu ul li:first-child {
border-left: 1px solid rgba(30, 30, 30, 0.125);
}
.kolom-menu ul li a {
color: #ffffff;
font-weight: bold;
text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
text-decoration: none;
display: inline-block;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
position: relative;
border-right: 1px solid rgba(30, 30, 30, 0.125);
box-shadow: 1px 0px 0px rgba(255, 255, 255, 0.1);
}
.kolom-menu ul li a:hover, .kolom-menu ul li a:focus {
background-color: rgba(255, 255, 255, 0.125);
}
_______________________________________________
Keterangan:
Warna yang dihasilkan oleh rangkaian kode CSS di atas adalah warna biru untuk background dan putih pada teks. Sehingga apabila belum sesuai dengan desain tampilan halaman blog kalian, maka sesuaikan warna yang digunakan dengan mengganti kode warna yang dipakai pada bagian color:, background-color:, dan background-image:.

4. Cari kode <body dan kemudian sisipkan rangkaian kode berikut ini tepat di bawahnya.
_______________________________________________

<div class='bilah-menu-atas' id='bilahmenuatas'>

   <div class='kolom-utama'>

     <div class='kolom-menu'>

       <ul>

         <li><a href='http://andieshinigami.blogspot.com/'><img alt='L3' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFJL7kK7CDOOUSbpvqIfGjccEiwJ6bRsgkZ42KWFXpGka_2yG4l3ll15N7rfZpxWSW0ZqSvUjtZjByrKyihNt-fHIucB-O3vlEq1PxOQoHncWYtDoxlBuzfPnHn9UFGfSxpPIBwXB1xFs/s800/Beranda.png' width='20px'/></a></li>

         <li><a href='URL'>Menu Kiri 1</a></li>

         <li><a href='URL'>Menu Kiri 2</a></li>

       </ul>

     </div>

     <div class='kolom-menu'>

       <ul style='float: right'>

         <li><a href='URL'>Menu Kanan 1</a></li>

         <li><a href='URL'>Menu Kanan 2</a></li>

       </ul>

     </div>

   </div>

</div>

_______________________________________________

Keterangan :
Ganti http://andieshinigami.blogspot.com dengan URL blog kamu
Ganti pula kata URL dengan link artikel / labels yang akan ditautkan
Ganti kata Menu Kiri 1, Menu Kiri 2, Menu Kanan 1 dan Menu Kanan 2 sesuai dengan menu tampilan yang diinginkan.

5. klik save template
Setelah template disimpan maka navbar standar Blogger tidak akan lagi ditampilkan di halaman blog dan akan tergantikan dengan navbar baru seperti yang tampak pada blog saya di atas. Kemudian perlu diketahui bahwa rangkaian contoh kode pada langkah yang keempat akan menghasilkan 2 (dua) buah kolom menu. Kolom sebelah kiri berisikan 3 (tiga) buah menu yaitu Beranda (Home), Menu Kiri 1, dan Menu Kiri 2, sedangkan kolom sebelah kanan berisikan 2 (dua) buah menu yaitu Menu Kanan 1 dan Menu Kanan 2. Sehingga apabila belum sesuai dengan keinginan, maka silakan dilakukan kustomisasi atau edit seperlunya agar tampilan blog anda semakin menarik dengan menambahkan atau mengurangi kode <li><a href='URL'>Menu</a></li>. utube.com/watch?v=jIWJxc1V9Lg

Sobat Darmanto semua,pada Tutorial Blog kali ini saya akan berbagi Cara Membuat Menu Horizontal untuk Blogger/Blogspot.Cara Membuat menu horizontal ini sangat mudah dan berbasis tab individual, dan tidak menggunakan list (HTML unordered list). Catatan ini untuk memberikan jawaban salah seorang sobat pada catatan saya yang berjudul Cara membuat halaman blog.

Langsung saja inilah Tutorial blog bagi para sobat untuk Cara Membuat menu horizontal pada blogger/blogspot:

1.Login ke dasbor blog milik sobat
2.Klik Template-Edit HTML dan centang Expand Template Widget
3.Copy kode CSS dibawah ini dan letakkan kode tersebut tepat diatas kode ]]></b:skin>

/* Navigasi tabs Sederhana darmanto.com Starts */
a.darmantotabs, a.darmantotabs:link, a.darmantotabs:visited {display:block; width:102px; height:30px; background:#444444; border:1px solid #ebebeb; margin-top:2px; text-align:center; text-decoration:none; font-family:arial, sans-serif; font-size:12px; font-weight:bold;color:#FFFFFF; line-height:25px; overflow:hidden; float:left;}
a.darmantotabs:hover {color:#FFFFFF; background:#666666;}
#darmantobar {width:auto; margin:0 auto;}
/* Navigasi tabs Sederhana Ends */

4.Klik Simpan.

Setelah memasukkan kode CSS pada template blog milik sobat,buka Tata Letak,Tambah Gadget dan pilih HTML/JavaScript.
Copy dan paste kan kode dibawah ini pada kolom HTML/Javascript:

<div id='darmantobar'>
<a href="#" class="darmantotabs">Home</a>
<a href="#" class="darmantotabs">About</a>
<a href="#" class="darmantotabs">Blog Tips</a>
<a href="#" class="darmantotabs">SEO Tips</a>
<a href="#" class="darmantotabs">Contact</a>
<a href="#" class="darmantotabs">Sitemap</a>
<a href="#" class="darmantotabs">Advertise</a>
</div>

Setelah itu Simpan.