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++ < 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'>
Postingan
