Membuat Tab View/SlideShow

Apakah anda pernah mengunjungi situs http://kompas.com? salah satu situs surat kabar di indonesia yang cukup terkenal. Coba anda perhatikan ke seblah kiri atas situs tersebut, di sana terdapat menu tab yang biasa di sebut dengan “Tab View” karena jika tabnya di klik akan berpindah ke isi menu tersebut (coba buktikan, klik saja tab nya), namun sedikit berbeda dari biasanya karena menu tersebut bisa menampilkan isi dari menu tersebut secara bergantian atau bahasa yang biasa di gunakan adalah “Slide Show”. Dapat di ambil kesimpulan bahwa menu tersebut mempunyai dua fungi yaitu sebagai “Tab View” serta “Slide Show”.

Sedikit tertarik terhadap menu tersebut agar bisa di implementasikan pada template blogger, dan akhirnya ternyata bisa juga. Untuk melihat contoh, silahkan anda kunjungi salah satu blog kang rohman , silahkan perhatikan ke pojok kiri atas, di sana ada menu yang mirip dengan yang di situs kompas bukan (sengaja tidak di buat sama persis).

Bagi anda yang tertarik membuat Menu Slide Show Tab View, silahkan ikuti langkah-langkah berikut :

Langkah #1

Login ke blogger dengan ID anda.

Klik Tata Letak.

Klik tab Edit HTML.

Copy kode di bawah ini, lalu paste persis di atas kode ]]>

.indentmenu{
font: bold 11px Arial;
width: 100%; /*leave this value as is in most cases*/

}
.indentmenu ul{
margin: 2px;
padding: 0;
float: left;
/* width: 80%; width of menu*/
background: transparent;
}

.indentmenu ul li{
display: inline;
}

.indentmenu ul li a{
float: left;
margin: 2px;
color: #000; /*text color*/
padding: 5px 11px;
text-decoration: none;
border: 1px solid #ccc;
}

.indentmenu ul li a:hover{
background:#ddd;
}

.indentmenu ul li a:visited{
color: white;
}

.indentmenu ul li a.selected{
color: white !important;
padding-top: 6px; /*shift text down 1px*/
padding-bottom: 4px;
border: 1px solid #000000;
background:#000000;
}

.tabcontentstyle{ /*style of tab content container*/
border: 1px solid gray;
width: 450px;
margin-bottom: 1em;
padding: 10px;
}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block !important;
}
}

Download dulu SCRIPT ini, copy lalu paste persis di atas kode </head>

Klik tombol SIMPAN TEMPLATE.

Langkah pertama selesai.

Jika sudah santai, ayo kita lanjut ke langkah berikutnya.

Langkah #2

Klik tab Elemen Halaman.

Klik Tambah Gadget

Klik tombol plus (+) Untuk HTML/JavaScript.

Copy lalu paste kode berikut pada kolom yang tersedia :

<div style="float:left;margin:0px 10px 0px 0px;padding:0px;height:200px;">

<div id="pettabs" class="indentmenu">

<ul>

<li><a href="#" class="selected" rel="tab1">HOME</a></li>

<li><a href="#" rel="tab2">PROFIL</a></li>

<li><a href="#" rel="tab3">SEMBARANG</a></li>

<li><a href="#" rel="tab4">TIPSKU</a></li>

</ul>

<br style="clear: left"/>

</div>

<div style="width:320px;text-align:justify;padding: 5px; margin-bottom:1em">

<div id="tab1" class="tabcontent">

<a href="http://www.toejoeh124.co.cc/">

<p><h3><a href="http://www.toejoeh124.co.cc/">Halaman Depan Blog Ku berisi ARtikel tentang Caving yakni .....</a></h3></p>

<div style="overflow:auto;width:325px;height:100px;padding:10px;border:1px solid #eee">
1. <a href="http://toejoeh124.blogspot.com/2008/11/introduksi-speleologi.html">Introduksi Speleologi</a>
<br/>

2. <a href="http://toejoeh124.blogspot.com/2008/11/etika-penelusuran-goa.html">Etika Penelusuran Gua</a>
<br/>

3. <a href="http://toejoeh124.blogspot.com/2008/11/konservasi-goa.html">Konservasi Gua</a>
<br/>

4. <a href="http://toejoeh124.blogspot.com/2008/11/dampak-penelusur-terhadap-goa.html">Dampak Penelusuran</a>
<br/>

5. <a href="http://toejoeh124.blogspot.com/2008/11/peralatan-penelusuran-gua.html">Alat Penelusuran Gua</a>
<br/>

6. <a href="http://toejoeh124.blogspot.com/2008/12/hilangkan-streez-lewat-caving-1.html">strEEZ dan CAVING</a>
<br/>

7. <a href="http://toejoeh124.blogspot.com/2008/12/tabel-pemetaan.html">Tabel Pemetaan</a>
<br/>

[....]

</div></a></div>

<div id="tab2" class="tabcontent">

<a href="http://profil124.blogspot.com/">

<p><h3><a href="http://profil124.blogspot.com/">Profil Ku PLUS Ruang Chat bagi teman2 yang Belum Punya alamat YM </a></h3></p>

<div style="width:320px;text-align:justify;padding: 5px; margin-bottom:1em">
<object id="pingbox2t9t3q0y8quÃ¢-0" data="http://wgweb.msg.yahoo.com/badge/Pingbox.swf" width="320" height="320" type="application/x-shockwave-flash"><param value="http://wgweb.msg.yahoo.com/badge/Pingbox.swf" name="movie"/><param value="always" name="allowScriptAccess"/><param value="wid=1eoCdeSqVmcBfKHGqUeve1hXbj4-" name="flashvars"/></object></div>

</a></div>

<div id="tab3" class="tabcontent">

<a href="http://artikel124.blogspot.com/">

<p><h3><a href="http://artikel124.blogspot.com/">artikel lain di blog ku</a></h3></p>

<div style="overflow:auto;width:325px;height:100px;padding:10px;border:1px solid #eee">

<a href="http://artikel124.blogspot.com/2008/12/seandainya-hatimu-adalah-sebuah-system.html">surat CINTA</a>
<br/>

<a href="http://artikel124.blogspot.com/2008/12/mohon-menjadi-perhatian-ini-penting.html">penutupan BANK</a>
<br/>

<a href="http://artikel124.blogspot.com/2008/12/tipe-cewek-ngga-gaptek-tapi.html">cewek KOMPUTERISASI</a>
<br/>

<a href="http://artikel124.blogspot.com/2008/12/seks-dalam-istilah-komputer.html">seks & KOMPUTER</a>
<br/>

<a href="http://artikel124.blogspot.com/2008/12/kebersamaan-sangat-berarti.html">arti KEBERSAMAAN</a>
<br/>

<a href="http://artikel124.blogspot.com/2008/12/huruf-depan-nama-anda.html">arti Nama anda</a>
<br/>

<a href="http://artikel124.blogspot.com/2008/12/buat-kamu-yang.html">kamu yang....</a>
<br/>
<a href="http://artikel124.blogspot.com/2008/12/mouse-tanpa-mouse.html">mouse tanpa mouse</a>
<br/>
<a href="http://artikel124.blogspot.com/2008/12/apakah-anda-jatuh-cinta.html">LOVE or NOT</a>
<br/>
<a href="http://artikel124.blogspot.com/2008/12/memahami-virus-komputer.html">Memahami VIRUS Komputer</a>
<br/>
</div>

</a></div>

<div id="tab4" class="tabcontent">
<a href="http://tips124.blogspot.com/">

<p><h3><a href="http://tips124.blogspot.com/">Tips yang aku gunakan di Blog Ku</a></h3></p>

<div style="overflow:auto;width:325px;height:100px;padding:10px;border:1px solid #eee">
1. <a href="http://tips124.blogspot.com/2008/12/cara-nulis-html-code-di-blog.html">posting code HTML</a>
<br/>
2. <a href="http://tips124.blogspot.com/2008/12/read-more-di-blog.html">buat READ MORE di blog</a>
<br/>
3. <a href="http://tips124.blogspot.com/2008/12/pasang-status-ym.html">status YM di blog</a>
<br/>
4. <a href="http://tips124.blogspot.com/2008/12/exel-di-blog.html">exel diblog</a>
<br/>
5. <a href="http://tips124.blogspot.com/2008/12/google-translate.html">aplikasi Translate</a>
<br/>
6. <a href="http://tips124.blogspot.com/2008/12/hapus-link-subscribe.html">Hilangkan link subscribe</a>
<br/>
6. <a href="http://tips124.blogspot.com/2008/12/tanggal-hijriah.html">pasang tanggal hijriah</a>
<br/>
7. <a href="http://tips124.blogspot.com/2008/12/pasang-jam-di-blog.html">pasang JAM</a>
<br/>
8. <a href="http://tips124.blogspot.com/2008/12/buat-link-di-blog.html">pasang LINK</a>
<br/>
9. <a href="http://tips124.blogspot.com/2008/12/pasang-pingbox.html">pasang Pingbox</a>
<br/>

[...]</div>

</a></div>
</div>

<script type="text/javascript">

var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(3000)

</script></div>

Klik tombol SIMPAN TEMPLATE.
Selesai. Silahkan lihat hasilnya.

Kode-kode di atas bisa anda modifikasi agar sesuai dengan keinginan yang sesuai dengan template yang anda pakai.

Sedikit keterangan agar lebih memudahkan anda dalam memodifikasi kode ini.

Pada langkah pertama, ada deretan kode CSS, kode tersebut bisa anda kreasikan sendiri agar menghasilkan bentuk deretan tab yang cantik.

Perhatikan kode berikut :

<div style="float:left;margin:0px 10px 0px 0px;padding:0px;height:200px;">

<div id="pettabs" class="indentmenu">

<ul>

<li><a href="#" class="selected" rel="tab1">HOME</a></li>

<li><a href="#" rel="tab2">PROFIL</a></li>

<li><a href="#" rel="tab3">SEMBARANG</a></li>

<li><a href="#" rel="tab4">TIPSKU</a></li>

</ul>

<br style="clear: left"/>

</div>

Kode ini adalah deretan tab dengan urutan tab seperti ini : HOME, PROFIL, SEMBARANG, TIPS. Ini bisa anda ubah dengan apa yang anda mau. Misal Recent Comments, Recen Post, Shoutbox, atau apa saja sesuai keinginan. Untuk mengatur tinggi dari widget tersebut, anda tinggal mengganti nilai height:350px; menjadi nilai yang lain. Misal : height:400px;

Perhatikan juga yang ini :

<div style="width:320px;text-align:justify;padding: 5px; margin-bottom:1em">

Kode tersebut adalah untuk mengatur isi dari menu tersebut, ini tentunya bisa anda ubah sesuai dengan keinginan anda, Misal :

width:320px : ini untuk mengatur lebar, ubah dengan nilai yang sesuai keinginan. Contoh : width:300px.

text-align:justify : ini untuk mengatur perataan tulisan, ganti dengan yang anda inginkan. Contoh : text-align:left, text-align:right.

Perhatikan kode berikut :

<script type="text/javascript">

var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(2000)

</script>

Untuk mengatur lamanya waktu perpindahan dari satu tab ke tab yang lain, anda tinggal mengganti nilai 2000 menjadi nilai yang lain. Misal : 2100. Semakin besar nilainya maka semakin lama pindah.

Kode dalam “Slide Show Tab View” di atas memuat artikel-rtikelku, silahkan di ganti sesuai keinginan, itu hanya contoh untuk memberikan sugesti terhadap anda.

kalo mo lihat hasilnya klik CONTOH dalam blog ku!!!!

Selamat mencoba!

BLOGGOA

Tuesday, January 20, 2009