CONTOH BLOG

Iklan

Minggu, 06 Januari 2013

Cara Membuat Menu Bertingkat Pengganti Navbar

 

Cara Membuat Menu Bertingkat Pengganti Navbar
Cara membuat menu bertingkat pengganti navbar- Kali ini iBlogle akan mengajak anda mempelajari bagaimana cara mengganti menu navbar dengan menu buatan sendiri dengan gaya drop down atau bertingkat. Seperti kita tahu bersama, pertama kali kita membuat blogspot, pada template bawaan akan ada navbar diatas header.
Sebelum anda memonetize kan blog anda, dengan mencari-cari artikel 'Bagaimana cara membuat akun paypal', ada baiknya anda menyelesaikan masalah template blog anda dahulu, misalnya seperti tutorial ini, yaitu cara menghilangkan navbar dan menggantinya dengan menu buatan sendiri, plus dropdownnya.  

Dulu para blogger berusaha menghilangkannya dengan mengedit HTML, tapi kini blogger sudah mempermudahnya, dengan membuat pilihan 'Off' dari pengaturan layout navbar.

 Berikut adalah kira-kira tampilan menu yang akan kita buat.

Cara Membuat Menu Bertingkat Pengganti Navbar






Oke, kita mulai saja..

Langkah Pertama

Silahkan anda off kan navbar blog anda terlebih dahulu, dari pengaturan layout

Cara Membuat Menu Bertingkat Pengganti Navbar


Langkah Kedua

Anda masuk kepengaturan Template, edit HTML. Jangan lupa centang 'Expand Template Widget"

lalu anda cari kode  ]]></b:skin>   (Silahkan aktivkan pencarian, dengan menekan Control + F)
Kemudian anda letakkan kode dibawah ini, keatas kode  ]]></b:skin>

 .menu {
background:#000;
border-bottom:3px solid #111;
box-shadow:0 0 5px white;
-moz-box-shadow:0 0 5px white;
-webkit-box-shadow:0 0 5px white;
-khtml-box-shadow:0 0 5px white;
z-index:100;
top:0;
left:0;
width:100%;
position:fixed;
z-index:10000;
opacity:.9;
filter:alpha(opacity:90);
font-size:13px;
text-align:center;
}

.menu ul {
background:#000;
height:2px;
list-style:none;
margin:0;
padding:0;
}

.menu li {
float:left;
padding:0px;
}

.menu li a {
background:#000;
color:#fff;
display:block;
font-weight:normal;
line-height:27px;
margin:0px;
padding:0px 10px;
text-align:center;
text-decoration:none;
}

.menu li a:hover, .menu ul li:hover a {
background:#212121;
color:#00ff00;
text-decoration:none;
}

.menu li ul{
background:#000;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:100px;
z-index:200;
/*top:1em;/*left:0;*/
}

.menu li:hover ul {
display:block;
}

.menu li li {
display:block;
float:none;
margin:0px;
padding:0px;
width:100px;
}

.menu li:hover li a {
background:none;
}

.menu li ul a {
display:block;
height:27px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}

.menu li ul a:hover, .menu li ul li:hover a {
background:#212121 center left no-repeat;
border:0px;
color:#fff;
text-decoration:none;
}
.menu p {
clear:left;
}

Langkah Ketiga

Anda cari kode <body      (sengaja tidak ditutup kurung, karna ada sambungannya)
Lalu anda letakkan kode berikut ini, dibawah kode <body


<div class='menu'><ul>
<li><a href='Url Anda'>Internet</a></li>
<li><a href='Url Anda'>Editing</a></li>
<li><a href='Url Anda'>Games</a></li>
<li><a href='Url Anda'>Lainnya</a><ul>
<li><a href='Url Anda'>News</a></li>
<li><a href='Url Anda'>Request</a></li>
<li><a href='Url Anda'>Tips Trik</a></li></ul></li>
<li style='float:right;margin-right:5px;'><a href='http://www.iblogle.com'>Homepage</a></li></ul></div>


Silahkan anda ganti dengan Url Anda.

Jika anda ingin menambahkan link baru, silahkan anda sisipkan kode berikut ini, diantaranya

<li><a href='Url Anda'>Nama Halamannya</a></li>

Silahkan anda Save. Moga sukses ya gan..!


    Choose :
  • OR
  • To comment
Tidak ada komentar:
Write komentar

Mohon jangan Cantumkan Link Aktiv. Jika ingin Promo tolong dengan Etika, cukup beritahukan nama Website anda, tanpa menulis http:. Coment dengan Link Aktiv akan dihapus begitu kami temukan.