Pernahkah anda meliat blog yang pada kolom paling atas banyak sekali tulisan seperti Home, About Me, Tutorial Blog, Daftar Isi dan sebagainya, nah untuk itu bila anda berminat membuat menu navigasi maka lebih baik anda membuat satu blog percobaan, agar jika terjadi kesalahan tidak merusak blog utama anda, nanti setelah lancar dan bisa mengerjakan nya dapat langsung di praktek kan pada blog utama
- Silahkan login ke blogger dengan ID anda
- Masuk pada Dasbor
- Klik Rancangan
- Kemudian Klik Edit HTML
- Kemudian sebelum melakukan langkah selanjutnya lebih baik klik Download Template Lengkap (Antisipasi jika ada kesalahan atau ingin kembali pada blog semula)
- Setelah di downloud template lengkap maka ceklis
- Cari Kode kode ]]></b:skin>
/* 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;
}
Lalu cari Kode yang mirip kode seperti berikut ini (Mirip, bukan sama)
<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>
Saya sarankan Fokuskan pada kode <div id='header-wrapper'>
Jika sudah ketemu Copy paste code berikut persis di bawah kode yang barusan anda cari tepatnya di bawah kode </div>
<div id='bg_nav'>
<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://www.nama blog anda.blogspot.com/'>home</a></li>
<li><a href='http://www.nama blog anda.blogspot..com/'>My Blog</a></li>
<li><a href='http://ww.nama blog anda.blogspot.com/'>Makalah</a></li>
<li><a href='http://www.nama blog anda.blogspot.com/'>puisi </a></li>
</ul>
</div>
</div>
<div id='navright'>
</div>
</div><!-- akhir bg_nav -->
Kemudian Klik tombol SIMPAN TEMPLATE.
Selesai.
Gantilah link http://www.nama blog anda.blogspot.com dengan link artikel di blog anda, kalau bentuk navigasi tadi tidak sesuai dengan bentuk blog anda, anda bisa mengeditnya untuk menyesuaikan dengan blog anda
0 komentar:
Posting Komentar