BloonOnline GoTemplatez VersiEdan
Facebook Twitter You Tube Friendfeed
Blog Seo Intermezo

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'>
del.icio.us tags: ,
Page views this post: reader

6 komentar:

Adi Fajar said...

hmmm ... nice to try...
mau tak cobain dulu... thanks...tambah terus artikelnya boss...

donagusto said...

Akhirnya setelah semalaman bergadang label tabq jadi juga mas..maturnuhun..

agi said...

bang jaloe, tolong dong dibuat artikelnya cara bikin navigasi ala apple mac ???

Jaloee said...

@ Aghy

wadaw... iye kalau sempat akan sy coba post .

Samuel Widjaya said...

mass, saya mo blajar juga dong, YM mas apa yaa???. liat tin blog saya yang masih jelek ini ya mass... thanks http://sammywijaya.blogspot.com/

hot hardcore sex stories said...

By the time our food arrives I have already bought her threedrinks. I follow them when they come to abar on the other side of town that I know is alesbian bar.
incest sex stories archive net
adult nasty sex stories
beastiality short stories
female masturbation with cucumbers stories
just bestiality stories
By the time our food arrives I have already bought her threedrinks. I follow them when they come to abar on the other side of town that I know is alesbian bar.

Post a Comment

" Apapun Yang Dapat Anda Lakukan, Atau Ingin Anda Lakukan Mulailah

Keberanian Memiliki Kecerdasan, Kekuatan Dan Keajaiban Di Dalam-nya"

Makacih Atas Komentar-Nya

 

Copyright 2009. Home | Serba Serbi Google | XHTML | CSS Design by Catalog-Tutorial