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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_b4SkWt_SLFL__KFcGAWxYv6jamKcr95pzc33JClj6aylp2_2NdzrosQdXLXRdKtYelZ6eJ2FPvBms-85H8guS9wYmuZfw7HkNMwGrqBHwZHW2VLoCQtHqIhxkSOONCDKdwNchPRXnQc/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 ::.
Artikel Lainnya :
Tutorial Blog
- Menampilkan / Menyembunyikan Sidebar Blog
- Membuat Sebuah Link Mengarah Ke Lebih 2 URL
- Show Hide Chatbox Efek Jquery di Sidebar Blog
- Memasang Floating Share Button
- Tag H1 Untuk Judul Postingan dan Judul Blog
- Memasang Hidden Chatbox With Jquery Di Sidebar
- Memasang Hidden Chatbox Pada Sidebar Blog
- Memasang Sticky Tooltips Di Blogspot
- Tampilan Halaman Label Hanya Judul Postingan
- Tutorial Membuat S3slider Images Show
- Memasang Tombol Google +1 di Blogspot
- Membuat Recent Post With Thumbnails
- Membuat Intro Page Pada Blogspot
- Membuat Tab View Pada Blogspot
- Kode Warna HTML
- Combine Show Hide Sidebar with Tooltips
- Navigasi Breadcrumb Pada Postingan Blog
- Membuat Tooltips Pada Sebuah Objek
- Membuat Menu Navigasi Dengan Tooltips
- Membuat Page Peel Effect Pada Blogger
- Related Post With Scrool Function
- Pesan Kamu Di Atas "Poskan Komentar's Box"
- Membuat Form Komentar Admin
- Membuat Rate Widget Pada Blog
Tip n Trik
- Menampilkan Akun Google Plus Di SERP Google
- Tips Mempersingkat Alamat URL Akun Google Plus
- Hubungkan Google Plus dengan Facebook | Twitter
- Menghubungkan Google Plus ke FB dan Twitter
- Twitteran Di Dashboard Akun Google Plus
- Cara Download Semua Album Foto di Facebook
- Tips Cara Mendapatkan Sitelink Google
- Membuat Sebuah Link Mengarah Ke Lebih 2 URL
- Show Hide Chatbox Efek Jquery di Sidebar Blog
- Maksud Pesan Error Saat Mengakses Internet
- Merubah Kotak Chat Facebook ke Versi Lama
- Memasang Floating Share Button
- Googlebot Access Blog Bermasalah
- Tag H1 Untuk Judul Postingan dan Judul Blog
- Mempercepat IDM Menggunakan IDM Optimizer
- Memasang Hidden Chatbox With Jquery Di Sidebar
- Memasang Hidden Chatbox Pada Sidebar Blog
- Memasang Sticky Tooltips Di Blogspot
- Tingkatkan Traffic Blog Lewat VLog | VIVANews
- Tampilan Halaman Label Hanya Judul Postingan
- Cara Transfer Foto Dari Facebook Ke Google+
- Tips SEO Terbaru di Tahun 2011
- Tutorial Membuat S3slider Images Show
- Akhirnya, Bisa Juga Join Ke Google+
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 !!!
[[ Form Komentar Klasik ]]