09 Agustus 2011

Pin It

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(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;
}
 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 ::.

Share To lintasberita.com | Khamardos Blog

Bagikan Jika Artikel ini menarik, Diharapkan agar memberikannya kepada teman2 anda di Facebook

Artikel Lainnya :

11 comments:

Klik Untuk Lihat Komentar

Yudy Ananda on 9 Agustus 2011 pukul 17.43 mengatakan...

hehehe simple tapi mantab :) nanti saya praktekin bro :)

Aldy on 9 Agustus 2011 pukul 18.08 mengatakan...

gan gimana cara bikin title link keren kayak gitu?

agus on 12 Agustus 2011 pukul 21.56 mengatakan...

trims atas infonya

Trading on 20 Agustus 2011 pukul 00.45 mengatakan...

makasih ya sob atas infonya
oia kalo ada waktu berkunjung ke blogku ya

adetruna on 22 Agustus 2011 pukul 16.39 mengatakan...

ringan banget blog nya ...loading wus2 sukses ya :)

Unknown on 28 September 2011 pukul 21.47 mengatakan...

Mantab :)

chute on 29 September 2011 pukul 08.23 mengatakan...

Kereeenn bgt...
makasih bnyak infonya..!!!

Inspiring News on 22 November 2011 pukul 20.43 mengatakan...

untuk wordpress gimana cara nya ya gan?

Anonim mengatakan...

mantap bang...! thanks for your share.

idebagus on 5 Januari 2012 pukul 18.08 mengatakan...

wah.. mantep nich atrikelnya...

makasih mas...

Obat Herbal Diabetes Melitus on 15 Februari 2012 pukul 14.23 mengatakan...

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 ::

Silahkan isi Komentar anda pada Form Komentar dibawah ini !!!
Kritik dan Saran yang membangun sangat saya harapkan dari sobat semua !!!

NO SPAM PLEASE !!!

Senyum :)) tunggu :)] centil ;)) kedip ;;) unjuk gigi :D hai ;) week - Jelek :p menangis :((
smile :) gawat :( Love - cinta :X briken love - patah hati =(( ooo - ounght :-o bingung :-/ kiss - cium :-* nothing :|
Gila - stres 8-} pusing ~x( takut :-t tenju - pukul b-( marah :-L marah kali x( sangat lucu =))

[[ Form Komentar Klasik ]]

Jika Anda Ingin Berlangganan Artikel Dari Situs Ini,
Silahkan Ketik Email Anda Pada Form Di Bawah Ini :

 
Copyright © 2009 Support by Web Hosting Indonesia - IDCloudhost | Tweaking by Mufied