Sistem navigasi yang baik dalam blog sangatlah diperlukan
yang jelas2 dapat mempermudah pengunjung
blog saat sedang menjelajahi isi blog kamu. Sistem navigasi ini bisa berupa
Menu, baik horizontal maupun vertikal, atau berupa post yg dengan sedemikian
rupa diubah menjadi halaman navigasi. Lalu, apa yg menarik dari Menu Horizontal
Tab ini?
Menu Horizontal bisa menjadi alternatif buat Menu Vertikal biasanya dan bisa jadi ngebuat halaman
blog jadi lebih hemat. Melihat dari pentingya keberadaan nya, Menu Horizontal Tab biasanya diletakkan di tempat yg mudah dilihat pengunjung. Di bawah Header contohnya.
1. Langkah pertama, masuk ke Layout > Edit HTML.
2. Masukkan kode di bawah ke dalam template, carannya letakkan di atas kode ]]></b:skin>
#navigation{font-size:110%;
height:2.2em;
line-height:2.2em;
margin:0 1px;
color:#999;
}
#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #ccc;
white-space:nowrap;
}
#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #999;
}
* html #navigation a {width:1%;}
#navigation a:hover{
background:#ccc;
color:#fff;
text-decoration:none;
}
height:2.2em;
line-height:2.2em;
margin:0 1px;
color:#999;
}
#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #ccc;
white-space:nowrap;
}
#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #999;
}
* html #navigation a {width:1%;}
#navigation a:hover{
background:#ccc;
color:#fff;
text-decoration:none;
}
3. Selanjutnya cari kode ini:
<b:section
class="header" id="header" maxwidgets="1"
showaddelement=”no”>
Kalo engga ketemu cari section dengan class="header".
Lalu ubah menjadi:
<b:section
class="header" id="header" maxwidgets="10" showaddelement="yes">
Ini dilakukan supaya kamu bisa memasukkan element di bawah bagian header blog kamu.
4. Lalu masuk ke Page Elements. Di bawah bagian Header, klik Add a Gadget. Pilih HTML/JavaScript
5. Masukkan kode2 ini ke dalamnya:
<div style="text-align:
center;">
<div id="navigation">
<ul>
<li class="selected">
<a href="http://x3sharefiles.blogspot.com/">Home</a></li>
<li><a href="http://x3sharefiles/search/label/LABEL" >Link 1</a></li>
<li><a href="http://x3sharefiles.blogspot.com/"> Link 2</a></li>
</ul>
</div>
</div>
<div id="navigation">
<ul>
<li class="selected">
<a href="http://x3sharefiles.blogspot.com/">Home</a></li>
<li><a href="http://x3sharefiles/search/label/LABEL" >Link 1</a></li>
<li><a href="http://x3sharefiles.blogspot.com/"> Link 2</a></li>
</ul>
</div>
</div>
6. Klik save.
Menu horizontal tab sebaiknya diisi dengan link yg bisa menjadi 'pintu2' bagi artikel lainnya. Contohnya dengan link menuju label tertentu. Dan jangan juga mengisi nya dengan terlalu banyak link, tentunya bakal bikin jadi penuh nantinya.
Pas lagi jalan” di mbah google, saya nemuin ada sebuah online tools yg bisa ngedesain menu, horizontal bisa.. vertikal . Namanya MyCSSMenu. Tools ini rasanya perlu dicoba, selain prosesnya yg mudah, pilihan menunya juga banyak.
Catatan:
Tuliksan
Yg Berwarna Merah Ubah Dengan Alamat Link Kamu ,
Tulisan
Yg Berwarna Hijau Ubah Dengan Nama Menu Yg
Kamu Inginkan..!
Terima Kasih Atas Kunjungannya ,Semoga
Artikel Di Atas Berguna........!?
Posting Komentar