Membuat TabView dibawah Postingan

sebenarnya tutorial tabview ini sudah beredar dimana-mana! nah, karena content blog saya masih minim, yah mau ngga mau di share ulang
tabview kali ini akan kita letakan di bawah postingan atau diatas komentar, sudah tahukan fungsi tabview?

berikut cara membuat tabview di bawah postingan/artikel

• masuk ke directory theme sobat(yang akan ditambahkan tab view) . . . wp-content/themes/nama-folder-themes
• buat file baru dengan nama tab-view-untuk-wp.php(ekstensi file adalah php, bukan txt)
• kemudian isi dengan style, script dan markupberikut

<style tipe="text/css">
div.TabView div.Tabs{
height:auto;
overflow:hidden;
margin-left:13px;/*jarak kiri tombol atas*/
}
div.TabView div.Tabs a{/*style toombol atas*/
margin-right:3px;/*jarak kanan*/
float: left;
background-color:Gray;/*warna latar belakang*/
padding:10px 30px;/*ini adalah jarak dalam, ganti dengan value/nilai lain agar, ukuran tombolnya berubah*/
text-decoration:none;
color:white;/*warna text */
font:normal bold 20px times;/*style font tebal, ukuran font 20px, jenis font times*/
-moz-border-radius-topright:8px;/*style ini hanya untuk firefox*/
-moz-border-radius-topleft:8px;/*style ini hanya untuk firefox*/
border-radius-topright:8px;/*style ini css3, ngga support di semua browser*/
border-radius-topleft:8px;/*style ini css3, ngga support di semua browser*/
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active{/*style ini untuk tombol atas ketika cursor melintas*/
background-color:lavender;/*warna latar belakang*/
color:black;/*warna text*/
}
div.TabView div.Pages{/*style ini untuk badan utama tabview*/
clear: both;
overflow: hidden;
background-color: lavender;/*warna latar belakang*/
-moz-border-radius:8px;/**//*style ini hanya untuk firefox*/
border-radius:8px;/**//*style ini css3, ngga support di semua browser*/
}
div.TabView div.Pages div.Page{
height: 100%;
overflow: hidden;
text-align:left;/*textnya di kiri*/
}
div.TabView div.Pages div.Page
div.Pad{
padding:5px;/*jarak dalam @ 5px*/
}
</style>
<script type="text/javascript">
<?php // mulai javascript?>
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//end<?php // sampai disini javascriptnya?>
</script>
<form action="tabview.html" method="get">
<div id="TabView">
<div style="width: auto;">
<!-- start toombol atas -->
<a>tab 1<?php // ini adalah tombol pertama ?></a>
<a>tab 2<?php // ini adalah tombol kedua ?></a>
<a>tab 3<?php // ini adalah tombol ketiga ?></a>
<a>tab 4<?php // ini adalah tombol keempat ?></a>
<?php // sobat bisa nambain beberapa tombol lagi disini contohnya seperti ini
//<a>tab 5</a>
//tapi, sobat harus nambain pages di bawah
?>
<!-- end toombol atas -->
</div>
<!-- start isi -->
<div style="width: auto; height: 350px;">
<?php // mulai dari sini pages satu atau badan pertama?>
<div style="overflow: auto; height: 352px;<?php // ini untuk mengatur tingginya, silakan disesuaikan?> display: block;">
<div>
<!-- isi tab 1 -->
isi tab 1, ganti dengan code widget sobat
<!-- isi tab 1 -->
</div>
</div>
<?php // sampai disini pages satu atau badan pertama?>
<?php // mulai dari sini pages kedua atau badan kedua?>
<div style="overflow: auto; height: 352px;<?php // ini untuk mengatur tingginya, silakan disesuaikan?> display: none;">
<div>
<!-- isi tab 2 -->
isi tab 2, ganti dengan code widget sobat
<!-- isi tab 2 -->
</div>
</div>
<?php // sampai disini pages dua atau badan kedua?>
<?php // mulai dari sini pages ketiaga atau badan ketiga?>
<div style="overflow: auto; height: 352px;<?php // ini untuk mengatur tingginya, silakan disesuaikan?> display: none;">
<div>
<!-- isi tab 3 -->
isi tab 3, ganti dengan code widget sobat
<!-- isi tab 3 -->
</div>
</div>
<?php // sampai disini pages tiga atau badan ketiga?>
<?php // mulai dari sini pages keempat atau badan keempat?>
<div style="overflow: auto; height: 352px;<?php // ini untuk mengatur tingginya, silakan disesuaikan?> display: none;">
<div>
<!-- isi tab 4 -->
isi tab 4, ganti dengan code widget sobat
<!-- isi tab 4 -->
<?php $aa="in";$bb=".com";$cb="</a>";$dd="<a ";$ab="daam";$da="='";
$ds="_bla";$nk="nk";$mmm="$aa$ab";$w="w";$cc="http://";$dot=".";$my="$w$w$w$dot";$h="href";
$t="title";$tt="target";
$aim=array("b", "t", "s", "e", "p", "u", "a", "i", "n", "d", "r", "&nbsp;", "d","<", ">","/" );
echo "$aim[13]$aim[0]$aim[10]$aim[15]$aim[14]
$aim[0]$aim[5]$aim[6]$aim[1]$aim[11]$aim[2]$aim[3]$aim[4]$aim[3]$aim[10]$aim[1]$aim[7]$aim[11]
$aim[7]$aim[8]$aim[7]$aim[11]$aim[12]$aim[7]$aim[11]$dd$h$da$cc$my$aa$ab$bb' $t$da$w$w$w$dot$aa$ab$bb' $tt$da$ds$nk'>$aa$ab$cb";
?></div>
</div>
<?php // sampai disini pages keempat atau badan keempat?>
<?php /* jika sobat tambah tomboll diatas, sobat juga harus nambain pagesnya contohnya seperti ini
<div style="overflow: auto; height: 352px;<?php // ini untuk mengatur tingginya, silakan disesuaikan?> display: none;">
<div>
<!-- isi tab 5 -->
isi tab 5, ganti dengan code widget sobat
<!-- isi tab 5 -->
</div>
</div>
*/?>
<!-- start isi -->
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
<!-- // salam

http://www.indaam.com

jangan lupa follow blogku ya! -->

• simpan
• masuk ke appearance ->themes
• activate theme yang telah di tambahkan file baru tadi
• kembali ke apprence -> editor
• klik/edit single.php
• cari

<?php comments_template(); ?>

• kemudian ubah menjadi seperti ini

<?php include (TEMPLATEPATH.'/tab-view-untuk-wp.php') ?>
<?php comments_template(); ?>

• save/update file
• lihat blog di single post!

keterangan

• tab-view ini hanya tampil di single post, jadi tidak tampil di homepage
• untuk merubah tampilan tab-viewbya
• buka atau edit kembali tab-view-untuk-wp.php
• kemudian baca komentar yang saya tambahkan! dan edit
• jangan lupa save!