Monday, July 23, 2007

Tutorial CSS 2: membuat link navigasi horisontal

Sebuah halaman tentu akan terlihat bagus, canggih, dengan tampilan yang lain dari sekedar tampilan HTML standar. Membuat karya lain dari yang lain, sesuai dengan pribadi dan seleranya mungkin menjadi keinginan sebagian orang. Juga untuk navigasi (navigasi bar), bisa modelnya, warnanya, besarnya, dan lain-lain.

Kita akan membuat sebuah navibar horisontal sedergana, nanti tergantung pada masing-masing untuk menambah dengan variasi sesuai selera masing-masing.(personal sense).

untuk membuatnya, pertama kali kita harus membuat style untuk navibar:
.navibar
{
PADDING-TOP: 10px;padding-right:0px; padding-bottom: 10px; padding-left:10px;
margin-left:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
background-color:green;
}

style di atas akan kita gunakan untuk memformat div navibar.

untuk membuat tampilan link horisontal kita akan menggunakan list
Kode list

<ul>
<li><a href="url">list 1</a></li>
<li><a href="url">list 1</a></li>
<li><a href="url">list 1</a></li>
<li><a href="url">list 1</a></li>

.....
</ul>


kita akan meletakkan list di atas di dalam div navibar:

<div class="navibar"">
kode list di atas
</div>

kita perlu mengatur style untuk ul

.navibar ul /*karena terletak di dalam div navibar)*/
{
margin:0;
padding:0;
}

.navibar li
{
display:inline;
margin-left:2px;
}

.navibar a
{
border:1px solid #ffffff;
padding:9px 5px 9px 5px;
COLOR:#003366;
text-decoration:none;
}

.navibar a:visited
{
color: green;
}

.navibar a:hover {
padding:9px 5px 9px 5px;
COLOR:#FFFF33;
background-color:#003366;
}

tampilannya akan seperti ini



SELAMAT MENCOBA.

sumedi
jakarta, indonesia
bagi yang mau bertanya, bisa lewat guestbook, atau comment


6 comments:

Anonymous said...

Matur nuwun mazz tipnya :)
Ampuh

Anonymous said...

Untuk class UL ato ID Ul dikasih background kelihatnnya lebih mantap, dengan efek tambahan di a:hover class juga

meds said...

Wah, mas Pogung. affiliate master. Selama ini hanya tahu dari blognya mas Cosa. terimakasih telah mampir. Juga dengan masukannya. Sangat berguna.

salam sukses.

kanada kurniawan said...

wah mas artikelnya menarik, tapi maklum saya awam banget tentang yang beginian, jadi mau tanya nulis ".navibar" nya dimana mas

Anonymous said...

trimakasih tipsnya mas, cuman kalau kita sudah download template, trus navigasi tertulis "editme" "editme", nah mengubah itu sekaligu memberikan linknya bagaimana yah mas..?
Trims banyak.

meds said...

u kanada, memasang .navibar ya di style css, kalau di new blogger terdapat dalam c:data.

u torashmam, editme ya tinggal edit saja. login ke blogger, edit elemen yang ada edit me-nya, edit url yang akan dimasukkan, seperti blogroll.