Label Tab Ala hoctro Dan hackosphere

Setelah kemarin menulis artikel tentang Label Cloud Tampa JavaScript, sekarang saya akan  menulis alternatif lain untuk menampilkan  Label, yakni  dalam bentuk Tab Horizontal. yang diletakan posisi ideal na di bagian header, baik itu atas ,di bawah atau di samping header.
ilustrasi gam:

 

Untuk memasang atau menampilkan label seperti gambar di atas yang perlu kita  lakukan, langkah-langkahnya seperti berikut ini. 

Langkah Pertama : Menyimpan atau Memasukan kode Css menu.

Buka blog kita, dalam halaman Template buka tab Edit Html. kemudian cara kode ini.

]]></b:skin>

Setelah ketemu letakan atau masukan  di atas ]]></b:skin> tersebut.
kode css menu ini.

/*- Menu Tabs F--------------------------- */

    #tabsF {
      float:left;
      width:100%;
      background:#efefef;
      font-size:93%;
      line-height:normal;
      border-bottom:1px solid #666;
      }
    #tabsF ul {
    margin:0;
    padding:10px 10px 0 50px;
    list-style:none;
      }
    #tabsF li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsF a {
      float:left;
      background:url("http://jaloee.googlepages.com/tableftF.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabsF a span {
      float:left;
      display:block;
      background:url("http://jaloee.googlepages.com/tabrightF.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#666;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsF a span {float:none;}
    /* End IE5-Mac hack */
    #tabsF a:hover span {
      color:#FFF;
      }
    #tabsF a:hover {
      background-position:0% -42px;
      }
    #tabsF a:hover span {
      background-position:100% -42px;
      }

ilustrasi gam :

 

Langka Kedua : Menambah Halaman Untuk Bagian Header.

Kemudian cari dan ganti angka di baris kode ini.

<b:section class="header" id="header" maxwidgets="1" showaddelement="no">

di ganti menjadi .( dari 1 menjadi 2. dari No menjadi Yes ): lihat tulisan yang di pertebal.

<b:section class="header" id="header" maxwidgets="2" showaddelement="yes">

 SIMPAN TEMPLATE

 

Langkah Ketiga : Menambah Elemen Label.

Setelah beres dengan pekerjaan di atas. masukan atau simpan kode di bawah ini.

<b:widget id='Label10' locked='false' title='' type='Label'>
  <b:includable id='main'>
    <div id='tabsF'>
    <ul>
    <li><a expr:href='data:blog.homepageUrl'><span>Home</span></a></li>
      <b:loop values='data:labels' var='label'>
        <li><a expr:href='data:label.url +
"?max-results=100"'><span><data:label.name/></span></a></li>
      </b:loop>
    </ul>
    <!-- <b:include name='quickedit'/> -->
    </div>
  </b:includable>
</b:widget>

Letakan di antara kode di bawah ini.

<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='2' showaddelement='Yes'>
<b:widget id='Header1' locked='true' title='SHOTOSHOP SATU (Header)' type='Header'/>

Letakan di sini

</b:section>
    </div>

Cara Lain Dari Hackosphere

Label Tab  di atas merupakan cara yang dilakuan oleh Hoctro, yang memasukan semua nama label . Sedangkan cara kedua yang di lakukan oleh blog na hackosphere membatasi jumlah label yang akan kita jadikan Label Tab-nya. - artinya kita bisa mensetting  dan mengatur jumlahnya.

 

Caranya setelah melakukan pada langkah yang kedua di atas pada langkah ketiganya masukan kode berikut ini.

<b:widget id='Label2' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<div id='tabsF'>
<ul>
<li><a expr:href='data:blog.homepageUrl'><span>Home
</span></a></li>
<script type='text/javascript'>
var labelnum = 0;
<b:loop values='data:labels' var='label'>
if (labelnum++ &lt; 5) {
document.write("<li><a expr:href='data:label.url +
"?max-results=100"'><span><data:label.name/></span></a></li>");
}
</b:loop>
</script>
</ul>
</div>
</b:includable>
</b:widget>

Jika kita ingin menambah jumlah label yang akan di tampilkan ganti angka 5 di kode tersebut dengan jumlah yang kita inginkan.

Dan JIka kita ingin meng-index label  menurut jumlah yang terbanyak. ganti saja dalam elemen label  dari Alfabetik menjadi Berdasarkan Frekuensi. 

 

Pilihan Model Tab Menu.

Jika kita kurang suka dengan model tampilan Css menu-nya. kita dapat memilih dan mendonlotnya di sini. atau lihat dulu tampilannya di sini.

yang perlu kita lakukan, jika kita misalnya memilih model  TabsG maka ganti kode ini.

<div id='tabsF'>

menjadi :

<div id='tabsG'>

Technorati tags: Label Tabs, Tutorial New Blogger

del.icio.us tags: Label Tabs, Tutorial New Blogger

Page views this post: reader