Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Horizontal List


Seperti bentuk list yang lain, horizontal list hanya berbeda karena list tersusun dalam deret horizontal, dimana dalam satu deret/baris bisa terdiri dari beberapa buah list. Anda bisa memanfaatkannya untuk memasang link, baik berupa lin menu ataupun link yang lain. Untuk menambah link, anda perlu membuat list baru mengikuti list yang sudah ada. Tambahkan tag "a" serta beberapa variable kelengkapannya agar lebih maksimal dalam penggunaan.

Kode CSS :
#GRhorzlist{
      margin:0;
      margin-left:0px;
      padding:0;
      list-style-type:none;
      float:left;
}
#GRhorzlist li{
      display:inline-block;
      font-size:11px;
      font-family:Verdana;
      font-weight:bold;
      list-style-type:none;
      height:30px;
      line-height:30px;
      background:#555;
      padding:0 6px;
}
#GRhorzlist li:hover{
      background:#777;
}
#GRhorzlist li a{
      color:#eee;
      text-decoration:none;
      text-shadow:1px 1px 1px #000;
}
#GRhorzlist li a:visited{
      color:#999;
}
#GRhorzlist li:hover a{
      color:#f00;
}
xHTML :
<ul id="GRhorzlist">
      <li><a href="URL-List_Item-1" id="current">Item-1</a></li>
      <li><a href="URL-List_Item-2">Item-2</a></li>
      <li><a href="URL-List_Item-3">Item-3</a></li>
      <li><a href="URL-List_Item-4">Item-4</a></li>
      <li><a href="URL-List_Item-5">Item-5</a></li>
      <li><a href="URL-List_Item-6">Item-6</a></li>
</ul>
<div style="clear:both;"></div>

Catatan/Keterangan :
  1. Untuk menyimpan kode, silahkan buka Special Tutorials pada menu sebelah kiri.
  2. Untuk menambah list baru, buat kode baru seperti berikut :
    <li><a href="URL-List_Item-7">Item-7</a></li>
  3. Jika diperlukan tambahkan beberapa variable pelengkap link seperti:
    <li><a href="URL-List_Item-7" target="_blank" title="Link Title">Item-7</a></li>

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:



Update »Ngahad PON, Maret, 25, 2012

» Happy Blogging - gubhugreyot «

Bila tak pegal di tangan
silahkan tulis sebuah komentar!

gubhug reyot

 
GR | Edited by | gubhug reyot