cara buat navigasi

Blogger tanpa tombol top tabs memang terasa kurang menggairahkan bagi para usernya,untuk menghilangkan kekurangan sekaligus sebagai pelengkap blog tidak ada salahnya bila kita menambahkan tombol top tab di halaman blog kita.
Untuk menambahkan top tabs di blog,kamu bisa lihat tahapan – tahapan berikut

sebelum membuat tombol top tabs sediakan dulu tujuan link yang akan di buat link kamu
misalnya http://konsultasiblogger.blogspot.com/2009/01/tukeran-link.html
Nah itu salah satu contoh,kamu bisa mencari link kamu sendiri di blog kamu atau di blog lain yang juga merupakan hak milik kamu.
1. Kamu cari dulu kode ini ]]></b:skin>

2. tambahkan kode di bawah ini di atasnya

/* navbar

================== */

#bg_nav {
background: #000000;
width: 660px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #FFFFFF;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #333333;
border-bottom: 1px solid #333333;
overflow: hidden;
}
#bg_nav a, #bg_nav a:visited {
color: #FFFFFF;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}
#bg_nav a:hover {
color: #FFFFFF;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}
#navleft {
width: 440px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 200px;
font-size: 11px;
float: right;
margin: 0px;
padding: 6px 5px 0px 0px;
}
#navright a img {
border: none;
margin: 0px;
padding: 0px;
}

#nav {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}

#nav a, #nav a:visited {
background: #222222;
color: #FFFFFF;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px 8px 15px;
border-left: 1px solid #000000
}
#nav a:hover {
background: #6e6d6d;
color: #FFFFFF;
margin: 0px;
padding: 8px 15px 8px 15px;
text-decoration: none;
}

#nav li {
float: left;
margin: 0px;
padding: 0px;
}
#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #333333;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}
#nav li li a:hover, #nav li li a:active {
background: #666666;
padding: 7px 30px 7px 10px;
}

#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}

#nav li:hover ul {
left: auto;
display: block;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;

}

Sesuaikan panjang dengan panjang templlate anda

3. Cari lagi kode berikut

<div id=’header-wrapper’>
<b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’>
<b:widget id=’Header1′ locked=’true’ title=’test (Header)’ type=’Header’/>
</b:section>
</div>

4. Tambahkan kode berikut di bawahnya

<div id=’bg_nav’>

<div id=’navleft’>
<div id=’nav’>
<ul>
<li><a href=’http://konsultasiblogger.blogspot.comcom/’>home</a></li&gt;
<li><a href=’http://tipsgetrich.blogspot.com/’>Bimbingan</a></li&gt;
<li><a href=’http://konsultasiblogger.blogspot.com/search/label/XML%20Template’>Free Template</a></li>

</ul>
</div>
</div>

<div id=’navright’>

<form action=’http://AlamatBlogAnda.blogspot.com/search&#8217; id=’searchform’ method=’get’ name=’searchform’>
<input id=’s’ name=’q’ type=’text’ value=”/> <input id=’searchsubmit’ type=’submit’ value=’Go’/> </form>

</div>

</div><!– akhir bg_nav –>

5. Untuk memastikan coba lihat dengan pratinjau

6. Kalau sudah berhasil silahkan di simpan

selamat mencoba…..

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s