TopBottom

Berlangganan Artikel

Facebook Twitter Google Buzz Digg Yahoo! Bookmarks Google Bookmarks Technorati

Enter your email address:

Delivered by FeedBurner

Membuat Horizontal Navigasi

Posted by Bahtiar Ahmad Syukur at Minggu, 24 Januari 2010
Share this post:
Ma.gnolia DiggIt! Del.icio.us Yahoo Furl Technorati Reddit

  1. Silahkan login ke blogger dengan ID anda
  2. Klik Tata Letak.
  3. Klik tab Edit HTML.
[tataletak10.png]

4.Cari Kode kode ]]></b:skin>
5.Copy paste kode berikut persis di atas 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;
}

6.Tuju bagian bawah, lalu cari seperti berikut ini :
<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>

7.Copy paste code berikut persis di bawah kode yang tadi :
<div id='bg_nav'>

<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://gakadajudulnya.blogspot.com/'>Home</a></li>
<li><a href='http://gakadajudulnya.blogspot.com/search/label/Tutorial%20Blogger'>Tips Blog</a></li>
<li><a href='http://gakadajudulnya.blogspot.com/search/label/Tips%20Cinta'>Tips Cinta</a></li>
<li><a href='http://gakadajudulnya.blogspot.com/search/label/Free'>Free Download </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 -->

Keterangan:
Yang Berwarna Merah Harap Diganti Sesuai Keinginan Anda
Yang Berwarna Biru: Nama Link

Yang Harus Diganti:

8.Klik tombol SIMPAN TEMPLATE.
9.Selesai.

Jangan Bosan-bosan mengunjungi blog gakadajudulnya.blogspot.com karena banyak informasi terupdate,dan jangan malu-malu untuk berkomentar.
Share
Share/Save/Bookmark

Artikel Menarik:



0 komentar:

:a: :b: :c: :d: :e: :f: :g: :h: :i: :j: :k: :l:
Posting Komentar

Posting Komentar

Semakin banyak anda berkomentar, semakin banyak backlink yang anda dapatkan dan tentu saja Search Engine akan semakin cinta terhadap blog anda.