Jumat, 23 Desember 2011

Memasang Simple Menu Navigasi Horizontal

Hello sobat blogger, apa kabar kalian sekarang ? Semoga selalu dalam keadaan sehat wal'afiat ya sob. O ya, puasanya gimana ? Semoga lancar-lancar saja hingga kini ya sobat, dan tentunya segala yang kita kerjakan di Bulan yang pernuh berkah ini diterima oleh Allah SWT, Amin ...

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.


Memasang Simple Menu Navigasi Horizontal | Khamardos Blog
"Simple Menu Navigasi"
Mungkin ini sebuah tutorial kuno namun tidak salahkan saya mempostingnya, Preview untuk hasil menu navigasi pada tutorial saya kali ini dapa sobat lihat pada gambar disamping, atau dapat melihatnya secara langsung di Demo Blog - Sharing Informasi.

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuBpw86GqHx6dYpU71S-XL6LSI8hO2stk0Hu278vj_3w3Jdr2hb_hK0Oudt5uozZ7jsp7ANpFl-vXV55ue_vuBGEHGyh9qur6LbPBMe-czWEQsCC47D7U4Ggt53Vymxmjvd-eW5mSSNpA/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;
}
 Note :           : Sesuaikan dengan ukuran lebar halaman Blog sobat.
                      : 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 ::.
Diposting oleh di
Label:

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)