Apa yang dimaksud Navigasi Blog ?
Haaa... mungkin diantara sobat ada yang masih belum tau apa yang dimaksud navigasi blog yang saya tulis di artikel ini ? Lihat aja deh gambar dibawah ini :
Apa Manfaat dan Fungsi Navigasi Blog ?
Manfaat dan Fungsi Navigasi blog adalah untuk memudahkan pengunjung blog mencari artikel atau konten yang dibutuhkannya. Navigasi blog juga menjadi salah satu point penting dalam SEO ( Search engine Optimisation )Langkah Membuat Navigasi Blog
Ada dua cara membuat tab navigasi horisontal dibawah header.Cara satu dengan fitur membuat tab halaman page dariblogger , yang caranya bisa lihat disini : Tab navigasi Horisontal Halaman Page Blogger
Cara kedua adalah cara manual yang lebih fleksibel untuk pengaturan tampilan sesuai kehendak kita.
Untuk membuat Navigasi blog Horisontal ini , saya menggunakan contoh template SIMPLE Josh Peterson .
Blogger Template Style
Name: Simple
Designer: Josh Peterson
URL: www.noaesthetic.com
1. Buka dashbor blogger anda pada tampilan blogger lama, dengan pengaturan bahasa umum ke bahasa Indonesia.Lihat disini cara mengatur tampilan dashbor blogger .
2. Klik Tab "Rancangan".
3.Pilih Tab EDIT HTML
4. Kemudian untuk jaga-jaga, silahkan klik link Download Template Lengkap , lalu simpan di hardisk komputer .
5. Setelah membackup template lama, lalu centang kotak Expand Template Widget
6. Klik CTRL + F pada keyboard anda utk mencari kode </header>
gambar dibawah ini screenshot saat saya berada di browser mozilla Firefox.
7. Setelah ketemu tag </header> , copy kode dibawah ini , dan pastekan dibawah tag header tsb.
<!-- univmenucontainer -->
<div id='univmenucontainer'>
<div id='menu'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#' title='ganti'>About Us</a></li>
<li><a href='#' title='ganti'>Download</a>
<ul class='subnav-2'>
<li><a href='#' title='Ebook'>Ebook</a>
</li>
<li><a href='#' title='ganti'>Software</a>
</li>
</ul>
</li>
<li><a href='#' title='ganti'>Sitemap</a></li>
<li><a href='#' title='ganti'>Produk</a></li>
<li><a href='#' title='ganti'>Belum Ada</a></li>
</ul>
</div>
</div>
<!-- /univmenucontainer -->Ganti tanda " # " pada kode diatas dengan URL link lengkap , misalnya URL halaman Page , atau URL postingan blog yang ingin ditampilkan di Tab navigasi blog anda.
Contoh URL lengkap : http://templatepertama1.blogspot.com/p/about.html
Ganti title nya sesuai dengan Link yg anda tampilkan
Ganti keterangan TEXT : About ; Ebook,SOftware dll dgn Text sesuai dengan link yg ingin ditampilkan.
Contoh lengkap : misalnya pada navigasi About Us :
<li><a href='http://templatepertama1.blogspot.com/p/about.html' title="Kenalan dulu yuk">About Us</a></li>8. Setelah anda mem paste kode HTML utk navigasi ,lalu cari lagi dengan tekan CTRL+F pada keybord anda kode tag : ]]></b:skin>
9. Setelah ketemu, lalu copy kode CSS dibawah ini , dan pastekan diatas kode ]]></b:skin> tadi .
Kode CSS pengatur Navigasi Horisontal :
/* Navigasi horrisontal --*/
#univmenucontainer{
height:26px;
display:block;
margin:5px 0;padding:2px;
font: 14px "Century gothic",verdana, Arial, sans-serif;
font-weight:normal;background:#000444;
}
#menu ,#menu ul {
height:24px;
margin: 0 1px;
padding: 0;
list-style: none;
height:24px;
}
#menu a {
color: #B3DBEF;
display: block;
font-weight: normal;
padding: 4px 5px;
background:#000222;
border-left:1px solid #666;
}
#menu a:hover {
background:#999;
color: #222;
display: block;
text-decoration: none;
background:#0fffff;
border:0.5px solid #666;
}
#menu li {
float: left;
margin:0;
padding: 0;
}
#menu li li {
float: left;
margin: 0px 0px 0px 5px;
padding: 0px;
width: 130px;
background:#aaa;
border:1px solid #666;
}
#menu li li a, #menu li li a:link, #menu li li a:visited {
background:#0fffff;
width: 120px;
float: none;
margin: 0px;
padding: 2px 10px 2px 10px;
color:#000;
}
#menu li li a:hover, #menu li li a:active {
background:#0fffff;
border:0.5px solid #666;
width: 120px;
float: none;
margin: 0px;
padding: 2px 10px 2px 10px;
color:#06415F;
}
#menu li ul {
position: absolute;
width: 10em;
left: -999em;
z-index:1;
}
#menu li:hover ul {
left: auto;
display: block;
}
#menu li:hover ul, #menu li.sfhover ul {
left: auto;
}10. Kalau sudah di paste, langkah terakhir adalah tekan SAVE template
Nahhh demikiaanlah artikel Cara Membuat Navigasi Horisontal ini saya berikan yang semoga berguna untuk anda..
