Home » » Cara Membuat Menu Horizontal yang Simpel

Cara Membuat Menu Horizontal yang Simpel

Redi Apri Handoko | 08.34 | 0 comments
Jika sobat ingin membuat menu horizontal untuk menampilkan beberapa kumpulan artikel maka cobalah trik yang satu ini. Menu horizontal dapat sobat tampilkan di header maupun di footer. Untuk itu langsung saja kita buat menu horizontalnya...

1. Login ke blogger.
2. Masuk ke Rancangan dan klik pada Edit HTML
3. Klik Expand widget template
4. Back up dulu template sobat
5. Cari kode ini: ]]></b:skin>
6. Kopi kode dibawah ini dan paste diatas kode ]]></b:skin>

/* -- Horizontal Menu Blogtrikdantips -- */
#horizontal-menu-blogtrikdantips {
float:left;
width:100%;
font-size:12px;
border-bottom:1px solid #2763A5; /* Bottom Line */
line-height:normal;
}

#horizontal-menu-blogtrikdantips ul {
margin:0;
padding:10px 10px 0 50px; /*Menu Position */
list-style:none;
}

#horizontal-menu-blogtrikdantips li {
display:inline;
margin:0;
padding:0;
}

#horizontal-menu-blogtrikdantips a {
float:left;
background: url("http://2.bp.blogspot.com/-ZHmnP8zb4gw/T5LHtBeFg8I/AAAAAAAADIs/rfQqFhpwuj4/s320/blackleft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}

#horizontal-menu-blogtrikdantips a span {
float:left;
display:block;
background: url("http://1.bp.blogspot.com/-bjmP5GpAPMw/T5LH9OMcjJI/AAAAAAAADI4/dlVjPxEUHLA/s320/blackright.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#fff;
}

#horizontal-menu-blogtrikdantips a span {float:none;}
#horizontal-menu-blogtrikdantips a:hover {
background-position:0% -42px;
}

#horizontal-menu-blogtrikdantips a:hover span {
background-position:100% -42px;
}


7. Jika sobat ingin memasang menu tersebut dibawah header maka cari kode <div id="content-wrapper">
8. Kopi kode dibawah ini dan paste sebelum kode <div id="content-wrapper">
<div id="horizontal-menu-blogtrikdantips">
<ul>
<li><a href="http://blogtrikdantips.blogspot.com"><span>Home</span></a></li>
<li><a href="http://blogtrikdantips.blogspot.com"><span>Contact</span></a></li>
<li><a href="http://blogtrikdantips.blogspot.com"><span>Profile</span></a></li>
<li><a href="http://blogtrikdantips.blogspot.com"><span>Gallery</span></a></li>
</ul>
</div>
9. Ganti url diatas dengan url menu sobat, serta ganti juga judul menu. Untuk menambah menu baru sobat tinggal tambahkan tag lt
10. Simpan template sobat lalu lihat hasilnya!

Untuk melihat DEMO klik DISINI
Berbagi Dengan Teman:

Posted by : Redi A.H ~ / Tutorial windows, SEO , Info gadget, Download game

Artikel Cara Membuat Menu Horizontal yang Simpel Di posting oleh Redi A.H pada 2 Jul 2009. Terima kasih atas kunjungannya. Kritik dan saran dapat disampaikan via kontak atau komentar. Jika diperlukan Artikel ini bisa disebarluaskan melalui blog sobat, hanya mohon sebutkan sumbernya dengan tautan link aktif ke postingan ini. Terimakasih. Happy blogging!!!

0 comments:

Posting Komentar

Terimakasih atas kunjungan anda semua, sebelumnya mohon maaf kami tidak menerima komentar yang berbau tentang pornografi.
TERIMAKASIH atas partisipasinya.

 
Site Meter :
Copyright © 2011. Tutorial Windows 7 - All Rights Reserved
Proudly powered by Blogger
Thank You For Google