Membuat tombol Top Tabs
Selasa, 27 Januari 2009Blogger 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.Bila kamu belum tahu tombol top tabs gambar berikut mungkin bisa menjelaskan
gambar di atas menerangkan tentang tombol navigator yang berada di atsa blog yang biasa terdapat di bawah header blog.Ternyata menambahkan top tabs di blog juga bisa menambah trafik di blog selain itu bisa juga sebagai link untuk menuju ke blog lain yang telah kamu buat.
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.
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>
<li><a href='http://tipsgetrich.blogspot.com/'>Bimbingan</a></li>
<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' 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.....
Posted in
Blogging stuff
|
salam kenal mas....http://kendhin.890m.com/emoticon/bigsmile.gif