Hai sobat
blogger ! Oke , kali ini saya akan berbagi ilmu tutorial blogging yang cukup
keren sobat . Sesuai judulnya, kali ini saya akan membuat menu navigasi yang
pernah saya pakai di blog ini atau bisa lihat sendiri pada gambar yang saya
pasang diatas. Menu navigasi ini telah saya modifikasi sedemikian rupa sehingga
menjadikannya keren dan elegan.. Bagaimana ? tertarik untuk membuatnya ?
langsung saja kalau begitu kita simak dan bahas tutorialnya bersama-sama.
1.) Baca Basmallah dulu yahhh
2.) Masuk ke akun blogger sobat
3.) Masuk ke Dashboard > Template > Edit Html > Lanjutkan
4.) Centang tanda Expand Template Widget
5.) Lalu cari kode ]]></b:skin>
6.) Jika sudah ketemu, masukkan kode dibawah ini tepat diatas kode ]]></b:skin>
2.) Masuk ke akun blogger sobat
3.) Masuk ke Dashboard > Template > Edit Html > Lanjutkan
4.) Centang tanda Expand Template Widget
5.) Lalu cari kode ]]></b:skin>
6.) Jika sudah ketemu, masukkan kode dibawah ini tepat diatas kode ]]></b:skin>
Kode
menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Arial", Arial;
font-size:14px;
font-weight:bold;
}
.menu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
font-size:14px;
font-weight:bold;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#333333 url("http://i47.tinypic.com/qp53sw.jpg") bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #2580a2 url("http://i49.tinypic.com/13zbc53.jpg") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
background:url('http://i45.tinypic.com/nvxxqg.jpg') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a{
background:none;
}
.menu li ul a{
display:block;
height:35px;
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:#2580a2 url('http://i50.tinypic.com/66elwh.jpg') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Arial", Arial;
font-size:14px;
font-weight:bold;
}
.menu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
font-size:14px;
font-weight:bold;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#333333 url("http://i47.tinypic.com/qp53sw.jpg") bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #2580a2 url("http://i49.tinypic.com/13zbc53.jpg") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
background:url('http://i45.tinypic.com/nvxxqg.jpg') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a{
background:none;
}
.menu li ul a{
display:block;
height:35px;
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:#2580a2 url('http://i50.tinypic.com/66elwh.jpg') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}
7.) Simpan Template
8.) Buka Tata Letak > Tambah Gadget > Html/Javascript
9.) Masukkan kode berikut di form Konten yang tersedia
8.) Buka Tata Letak > Tambah Gadget > Html/Javascript
9.) Masukkan kode berikut di form Konten yang tersedia
<div class="menu"><ul><li><a
href="http://rizaldipriantama.blogspot.com"> Beranda </a></li><li><a href="http://rizaldipriantama.blogspot.com/trick "> Trik
Komputer</a><ul><li><a
href=" # "> Hacker</a></li><li><a href="# "> Software </a></li><li><a
href=" # "> Hardware</a></li><li><a href="# "> Internet </a></li></ul></li><li><a
href="#">Blogger</a><ul><li><a href="#"> Trik</a></li><li><a
href="#">Tips </a></li></ul></li><li><a
href="#">Contacs me</a></li></ul></div>
11.) Ganti # dengan URL yang akan dituju
Ganti Menu Link dengan nama yang akan ditampilkan dalam
menu utama.
Ganti
Sub-menu Link dengan nama yang akan menjadi menu
yang berada di bawah menu utama
12.) Simpan dan lihat hasilnya.
Sekian dulu postingan tentang Cara Membuat Menu, semoga
bermanfaat bagi pembaca.
(thanks to : http://rizaldipriantama.blogspot.com/
)
“Sebagai apresiasi terhadap
penulis, silahkan komentar di blog ini”
Tidak ada komentar:
Posting Komentar
Silahkan Berkomentar Untuk Pengembangan Blog