Choose Your Language
English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified

Add to Google Reader or Homepage

Myartikel

@BANNER
MyBaner


Senin, 30 Mei 2011

Membuat Menu Horizontal di Blogger

Menu Horizontal merupakan kumpulan beberapa link yang biasa nya di letakan di bawah header.
menu horizontal berfungsi untuk sebagai salah satu navigasi dalam blog agar memberikan layanan kemudahan shortcut link bagi pengunjung blog kita.






Ok.. jika birminat langsung ikuti lingkah - langkah di bawah ini untuk membuat Menu Horizontal

-> Login ke account blogger kamu masing - masing
-> Pilih Tata letak -> edit HTML -> centang Expand tempalte widget nya

sedikit saran.. agar jika nantinya kalau terjadi kesalahan sebaiknya terlebih dahulu kamu mendownload semua script template kamu, caranya klik tulisan Download template lengkap

-> next cari code ]]></b:skin> "untuk mempermudah dalam pencarian code na kamu dapat menggunakan (Ctrl+F)dan Copas code berikut ini tepat di atasnya




/* navbar
================== */

#bg_nav {
background: #ffffff;
width: 850px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #000000;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #000000;
border-bottom: 1px solid #ffffff;
overflow: hidden;
}
#bg_nav a, #bg_nav a:visited {
color: #000000;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}

#bg_nav a:hover {
color: #000000;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}

#navleft {
width: 500px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 220px;
font-size: 11px;
float: right;
margin: 0px;
padding: 3px 5px 0px 0px;
}
#navright a img {
border: none;
margin: 0px;
padding: 3px 5px 0px 0px;
}

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

#nav a, #nav a:visited {
background: #ffffff;
color: #000000;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px 8px 15px;
border-left: 1px solid #ffffff;
}
#nav a:hover {
background: #c06000;
color: #000000;
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: #ffffff;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}
#nav li li a:hover, #nav li li a:active {
background: #c06000;
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;
}



Catatan :

1. Kamu dapat mengatur code yang berwarna hijau agar sesuai dengan template blog kamu

2. Code warna merah adalah untuk warna ,, kamu dapat mengaturnya agar lebih sesuai dengan blog kamu.
untuk lebih detail dalam code warna HTML kamu dapat mengunjungi http://html-color-codes.info/

-> Kemudian cari embali code seperti di bawah 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'/>



... dan seterusnya ...


</b:section>
</div>



-> Copas code berikut ini tepat di bawah code yang berwarna hijau dan merah (sesuaikan dengan template blog kamu)




<div id='bg_nav'>



<div id='navleft'>

<div id='nav'>

<ul>

<li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>


<li><a href='http://Link_yang_dituju'>Add Link</a></li>

<li><a href='http://Link_yang_dituju'>Add Link</a></li>

<li><a href='http://Link_yang_dituju'>Add Link</a></li>


<li><a href='http://Link_yang_dituju'>Add Link</a></li>

</ul>

</div>

</div>



<div id='navright'>




<form action='http://Alamat_Blog_Kamu.blogspot.com/search' id='searchform' method='get' name='searchform'> <input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Cari'/>

</form>



</div>



</div><!-- akhir bg_nav -->


-> Jika sudah jangan lupa di simpen







SEKIAN & TERIMAKASIH
SALAM DARI NB !
lintasberita

5 komentar

Anonim

Eѵеryonе loνes іt ωhen inԁiviԁuаlѕ get
tοgethеr anԁ share vіeωs.
Greаt blog, continuе thе goоd work!


My ρage: www.forexbroker.info
Here is my web site ; vapornine

Terimakasih Komentar Sahabat buat Artikel Ini... by Admin Diri ku
Anonim

Нoωԁy! This iѕ my fiгst visit to your blog!
We are a team of volunteers and starting а new inіtiative in a сommunity in the
ѕame nіche. Үour blog provided us
benefісіаl informаtion to woгk on.
Yοu hаve done a marνellous job!

my web page ... more followers on twitter
Have a look at my weblog ... your instagram url

Terimakasih Komentar Sahabat buat Artikel Ini... by Admin Diri ku
Anonim

Hi! I know this іs kind of off topic but І waѕ wondering if you knеw where I could
find а cаptсha рlugin for my сomment form?
I'm using the same blog platform as yours and I'm having trouble finding one?
Τhаnkѕ a lot!
Also see my page - get-Plus-followers.com

Terimakasih Komentar Sahabat buat Artikel Ini... by Admin Diri ku
Unknown 12 Januari 2013 pukul 12.55

visit in http://ngedongbareng.blogspot.com/2011/06/cara-membuat-kotak-komentar-dengan.html
<- for Anonim by Admin ..terimakasih

Terimakasih Komentar Sahabat buat Artikel Ini... by Admin Diri ku
Anonim

I truly love your site.. Great colors & theme. Did you make this amazing
site yourself? Please reply back as I'm planning to create my very own website and would like to find out where you got this from or exactly what the theme is called. Thanks!

Here is my web-site: natural joint relief

Terimakasih Komentar Sahabat buat Artikel Ini... by Admin Diri ku

Posting Komentar