Membuat Tab Navigasi menggunakan SpryTabbedPanels ~ starspot

Thursday, November 17, 2011

Membuat Tab Navigasi menggunakan SpryTabbedPanels

3:59 AM starspot user No comments

Saat ini Tab navigasi menjadi populer dalam membangun blog. Biasanya Tab Navigasi digunakan untuk menghemat penggunaan area blog, apalagi buat blog yang memiliki halaman sempit untuk menampilkan semua konten-konten tambahan. Tab Navigasi akan membuat blog tampil segar dan sedikit unik karena terdiri dari Tab-tab yang bisa diklik dan saya yakin hampir semua pengunjung akan akrab dengan fungsi tab-tab seperti ini.

Atau lihat pada kolom komentar blog ini.

Inspirasi:

Keshav Arora dalam tulisannya yg berjudul: Building Tabbed Navigation using SpryTabbedPanels.
Berikut cara singkatnya:

Kode CSS

Simpan kode CSS berikut di style.css pada editor theme wordpress kamu:

.TabbedPanels { margin: 0px; padding: 0px; clear: both; width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/ } .TabbedPanelsTabGroup { margin: 0px; padding: 0px; } .TabbedPanelsTab { position: relative; top: 1px; float: left; padding: 4px 10px; margin: 0px 1px 0px 0px; font: bold 0.7em sans-serif; background-color: none; list-style: none; border-left: solid 1px #0EA0B2; border-bottom: solid 1px #0EA0B2; border-top: solid 1px #0EA0B2; border-right: solid 1px #0EA0B2; -moz-user-select: none; -khtml-user-select: none; cursor: pointer; } .TabbedPanelsTabHover { background-color: #CCC; } .TabbedPanelsTabSelected { background-color: #EEE; border-bottom: 1px solid #EEE; } .TabbedPanelsTab a { color: black; text-decoration: none; } .TabbedPanelsContentGroup { clear: both; border-left: solid 1px #0EA0B2; border-bottom: solid 1px #0EA0B2; border-top: solid 1px #0EA0B2; border-right: solid 1px #0EA0B2; background-color: none; } .TabbedPanelsContent { padding: 4px; } .TabbedPanelsContentVisible { } /* Vertical Tabbed Panels */ .VTabbedPanels .TabbedPanelsTabGroup { float: left; width: 10em; height: 20em; background-color: #EEE; position: relative; border-top: solid 1px #999; border-right: solid 1px #999; border-left: solid 1px #CCC; border-bottom: solid 1px #CCC; } .VTabbedPanels .TabbedPanelsTab { float: none; margin: 0px; border-top: none; border-left: none; border-right: none; } .VTabbedPanels .TabbedPanelsTabSelected { background-color: #EEE; border-bottom: solid 1px #999; } .VTabbedPanels .TabbedPanelsContentGroup { clear: none; float: left; padding: 0px; width: 30em; height: 20em; }

Kode HTML

Kode HTML dibawah bisa kamu letakkan dimana saja, baik di single.php, sidebar.php, atau Text Widget Sidebar.

<div class="TabbedPanels" id="TabbedPanels1">   <ul class="TabbedPanelsTabGroup">    <li class="TabbedPanelsTab">tab 1</li>    <li class="TabbedPanelsTab">tab 2</li>    <li class="TabbedPanelsTab">tab 3</li>    </ul>   <div class="TabbedPanelsContentGroup">    <div class="TabbedPanelsContent">isi tab 1</div>    <div class="TabbedPanelsContent">isi tab 2</div>    <div class="TabbedPanelsContent">isi tab 3</div>    </div>  </div> <script type="text/javascript">  var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1"); </script>

SpryTabbedPanels.js

Yang terakhir yang kita butuhkan adalah SpryTabbedPanels.js dari Adobe Lab. Kamu bisa download filenya disini. Upload ke server, kemudian simpan di bawah <head> di header.php seperti kode dibawah ini:
<script src="http://nama_domain_kamu/SpryTabbedPanels.js" type="text/javascript"></script>
Atau jika kamu tidak mau repot untuk meng-upload file SpryTabbedPanels.js tersebut di server hosting kamu, cukup simpan kode berikut setelah <head> di header.php:
<script src="http://alamindawa.com/code/tabbed/SpryTabbedPanels.js" type="text/javascript"></script>
Menjawab pertanyaan mantanXUPJ21WDU: Bagaimana membuat tab pada kolom komentar seperti di blog ini:
Di single.php pada editor theme wordpress kamu cari kode ini atau kira-kira mirip dengan ini:

<?php

if(comments_open( get_the_ID() ))  {

comments_template('', true);

}

?>

Saya hanya menghapus kode ini, dan menggantinya dengan kode HTML yang telah saya tuliskan diatas, kemudian pada isi tab 1 saya masukan lagi kode tersebut, sehingga masuk di tab Komentar.
Lebih lengkapnya kode Tab Navigasi kolom komentar alamindawa.com seperti ini:

<div class="TabbedPanels" id="TabbedPanels1">   <ul class="TabbedPanelsTabGroup">    <li class="TabbedPanelsTab">Komentar</li>    <li class="TabbedPanelsTab">Komentar Facebook</li>    <li class="TabbedPanelsTab">Artikel lain yang berhubungan</li>   </ul>   <div class="TabbedPanelsContentGroup">    <div class="TabbedPanelsContent"><?php                 if(comments_open( get_the_ID() ))  {                     comments_template('', true);                 }             ?></div>    <div class="TabbedPanelsContent"><center><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:comments href="<?php the_permalink() ?>" num_posts="5" width="500"></fb:comments></center></div>    <div class="TabbedPanelsContent"><div style="width: 100%; height: 200px; background- text-align: left; border: 0px solid 00000; overflow: auto; padding:   4px;"> <ul>   <?php do_action(     'related_posts_by_category',     array(         'orderby' => 'RAND',         'order' => 'DESC',         'limit' => 100,         'echo' => true,         'before' => '<li>',         'inside' => '',         'outside' => '',         'after' => '</li>',         'rel' => 'nofollow',         'type' => 'post',         'message' => 'No matches'       )     ) ?> </ul></div></div>    </div>  </div> <script type="text/javascript">  var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1"); </script>

Keterangan:
Line 8-12: Kode tab Komentar
Line 13: Kode tab Komentar Facebook. Ganti dengan form komentar facebook blog kamu.
Line 14-34: Kode tab Artikel Lain yang berhubungan. Tentang ini saya sudah pernah menulisnya di sini
Silahkan kirimkan komentar jika ada yang ingin ditanyakan..!

Posted in: tutorial

starspot

Twitter

Thursday, November 17, 2011