Membuat TabView dibawah Postingan

tabview kali ini akan kita letakan di bawah postingan atau diatas komentar, sudah tahukan fungsi tabview? berikut cara membuatnya

Anda tidak akan pernah salah selama selalu berpegang pada kebenaran. Sharon Stone

tabview kali ini akan kita letakan di bawah postingan atau diatas komentar, sudah tahukan fungsi tabview? berikut cara membuatnya

Last Modif at July 8th, 2011

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.net

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!

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

One thought on “Membuat TabView dibawah Postingan”

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-