Jika sebelumnya saya memposting tentang Bagaimana cara memasang Tag H1 Untuk Judul Postingan dan Judul Blog (baca : Tag H1 Untuk Judul Postingan dan Judul Blog) dan jika sobat ingin melihat artikel lama yang berhubungan dengan artikel ini tentang Membuat Menu Navigasi Dengan Tooltips, bisa dilihat di artikel Bagaimana Cara Membuat Menu Navigasi Dengan Tooltips. Nah, Untuk hari yang luar biasa bagus ini, saya akan memposting tentang bagaimana Memasang Simple Menu Navigasi Horizontal Pada Blogspot.
"Simple Menu Navigasi" |
Berikut caranya :
1. Login pada Blogger
2. Masuk ke bagian Rancangan, kemudian ke bagian Edit HTML
Back up Template dengan cara Mengklik : Download Template Lengkap
Setelah itu, beri tanda cek pada .
3. Cari kode (ctrl + f) dan letakan kode berikut tepat diatas kode ]]></b:skin>
#nav{
background: url(http://i655.photobucket.com/albums/uu271/spantibelspku/menunavigasi.png);
height: 20px;
}
#nav, #nav ul{
width: 960px;
margin:3px auto;
padding:5px 0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height: 1.5em;
text-align:center;
font-size: 16px;
margin-bottom: 7px;
}
#nav a{
display:block;
padding:2px 12px;
color:#000;
text-decoration:none;
background: none;
text-shadow: 1px 1px 4px #000;
-moz-border-radius:2px;
-o-border-radius:2px;
-khtml-border-radius:2px;
-webkit-border-radius:2px;
}
#nav a:hover{
background: url(http://4.bp.blogspot.com/_wej_zr2VzN4/TSVucAnQhgI/AAAAAAAAA4A/3ABWLnHlm7A/s1600/Line.png) no-repeat bottom;
color: #fff;
}
#nav li{
float:left;
position:relative;
padding:0px 5px;
}
#nav ul {
position:absolute;
display:none;
top:100%;
width:160px;
left:0;
background: #ccc;
-moz-border-radius:2px;
-o-border-radius:2px;
-khtml-border-radius:2px;
-webkit-border-radius:2px;
}
#nav li ul a{
width: 120px;
padding-top: 2px;
padding-bottom: 2px;
float:left;
}
#nav ul ul{
top:auto;
background: none;
}
#nav li ul ul {
left:5em;
background: #ccc;
margin:-5px 0 0 0px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}
: Gambar tersebut bisa diganti sesuai selera sobat
4. Kemudian cari kode <div id='outer-wrapper'><div id='wrap2'> biasanya kode ini terletak di bawah html tag <body> kemudian copy-paste semua kode dibawah ini, dan letakkan kodenya dibawah kode <div id='outer-wrapper'><div id='wrap2'> tersebut :
(Catatan : Jika sobat sudah pernah menggunakan menu navigasi horizontal, sobat bisa mengganti dengan kode navigasi horizontal yang lama)
<ul id='nav'>
<li><a href='/' title='Home'>Home</a></li>
<li><a href='#' title='Link1'>Navigasi 1</a></li>
<li><a href='#' title='Link1'>Navigasi 2</a></li>
<li><a href='#' title='Link1'>Navigasi 3</a></li>
<li><a href='#' title='Link1'>Navigasi 4</a></li>
</ul>
5. Silahkan edit kode tersebut sesuai kebutuhan, lalu Save pekerjaan sobat.
.:: HAPPY BLOGGING SOBAT ::.
11 comments:
hehehe simple tapi mantab :) nanti saya praktekin bro :)
gan gimana cara bikin title link keren kayak gitu?
trims atas infonya
makasih ya sob atas infonya
oia kalo ada waktu berkunjung ke blogku ya
ringan banget blog nya ...loading wus2 sukses ya :)
Mantab :)
Kereeenn bgt...
makasih bnyak infonya..!!!
untuk wordpress gimana cara nya ya gan?
mantap bang...! thanks for your share.
wah.. mantep nich atrikelnya...
makasih mas...
yakin nih gak akan kena galat?? soalnya saya pernah coba buat mempercantik blog dengan edit html dan kena galat,,,makasih gan buat infonya
:: Komentar Anda ::
Kritik dan Saran yang membangun sangat saya harapkan dari sobat semua !!!
:) :( :X =(( :-o :-/ :-* :|
8-} ~x( :-t b-( :-L x( =))
[[ Form Komentar Klasik ]]