TabView Widget - Pengantar

This hack is courtesy of Hoctro, translated to Indonesian by Bikinblogger

Hallo boss,

Sekarang gua punya maenan baru nih, yakni tab widget - nggunain labels sebage tabs, mirip kayak Yahoo! widget ini.

Yahoo! widget....

Dengan pertolongan oom Yahoo! TabView widget, maka kita bisa menghemat waktu ngulik.

elu bisa tengok di blog gua noh :

punya gua ,keren kan ?

Kalo elu pengen masang ginian di blog elu, ikutilah petunjuk berikut.

Langkah 1: Nginstal the core Javacript library object

Pertama,ikutin instruksi2 dari tulisan ini: Bagaimana memodifikasi blogger template, khusus di bagian C.2 (untuk langkah nomer 1 & 2) dan B.4 (untuk langkah nomer 3).

Berikutnya, installin the Javacsript Core Library versi yang terbaru.

Langkah 2: Menginstall Yahoo! Tab View requirements

Cut dan paste kode dibawah tepat setelah langkah pembikinan kode di nomer 1 tadi (jadi kode-kode ini masih ada sebelum tag penutup </head>.). Coba lihat instruksi di sini kalo lu masih binun.

 
<link href='http://yui.yahooapis.com/2.2.2/build/tabview/assets/tabview.css' rel='stylesheet' type='text/css'/>

<script src='http://yui.yahooapis.com/2.2.2/build/yahoo-dom-event/yahoo-dom-event.js' type='text/javascript'/>
<script src='http://yui.yahooapis.com/2.2.2/build/element/element-beta-min.js' type='text/javascript'/>
<script src='http://yui.yahooapis.com/2.2.2/build/tabview/tabview-min.js' type='text/javascript'/>



<style type='text/css'>

.yui-content {
padding:1em; /* pad content container */
}

.yui-navset .yui-content {
border:1px solid #ccc;
}
.yui-navset .yui-nav .selected a, .yui-navset .yui-nav a:hover {
background-color:#fff;
}

.yui-navset .yui-nav li a {
background:#e5e5e5 url(http://developer.yahoo.com/yui/examples/tabview/img/round_4px_trans_gray.gif) no-repeat;
}
.yui-navset .yui-nav li a em {
background:transparent url(http://developer.yahoo.com/yui/examples/tabview/img/round_4px_trans_gray.gif) no-repeat top right;
padding:0.5em;
}

/* top oriented */

.yui-navset-top .yui-nav { margin-bottom:-1px; } /* for overlap, based on content border-width */
.yui-navset-top .yui-nav li a {
border-bottom:1px solid #ccc;
}

.yui-navset-top .yui-nav .selected a { border-bottom:0; }
.yui-navset-top .yui-nav .selected a em { padding-bottom:0.6em; } /* adjust height */
</style>

Langkah 3: Nginstal widget

Tambahin kode dibawah ini diantara dua tag "b:widget", save template elu, ya udah elu hampir selesai.

 
<b:widget id='HTML102' locked='false' title='MultiTab Widget' type='HTML'>
<b:includable id='main'>
<div class='widget-content'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'
></h2>
</b:if>
<div id='doc'>
<div>
<h2>Hoctro's Place</h2>
<div class='yui-navset' id='multiTab1'/>
</div>

<!--
<div>
<h2>Hackosphere</h2>
<div class='yui-navset' id='multiTab2'/>
</div>
-->

</div>
<div id='103'/>
</div>

<script type='text/javascript'>
// Developed by Hoctro - All rights reserved 2007
// This credit must be included in all your derived usages.
var p1 = document.createElement('h6');
document.getElementById('103').appendChild(p1);
p1.innerHTML = cb.txt('TabView');

function listOneTab(json, tabView, title, act) {
var label = '';
var text = '';
var nPost = 10;

if (title == "")
label += cb.getLabelFromURL(json);
else
label += title;

text += "<div id='" + label + "'><ul>";

var numberPost = (json.feed.entry.length &lt;= nPost) ?
json.feed.entry.length : nPost;

for (var i = 0; i &lt; numberPost; i++) {
var entry = json.feed.entry[i];
text += "<li>" + "&lt;a href='" + cb.getLink(entry, "alternate")
+ "'>" + cb.getTitle(entry) + "</li>";
}

text += '</ul></div>';

tabView.addTab( new YAHOO.widget.Tab({
label: label,
content: text,
active : act
}));


}

var blog1 = "hoctro.blogspot.com";
var tabView1 = new YAHOO.widget.TabView('multiTab1');
var labels1 = ['JSON Hacks', 'Label Hacks','Free Templates'];
function listTab1(json) {
listOneTab(json, tabView1, "", false);
}
function listLatestPostsTab1(json) {
listOneTab(json, tabView1, "Latest Posts", true);
}
function listLatestCommentsTab1(json) {
listOneTab(json, tabView1, "Latest Comments", false);
}

// Activating calls!

// Latest Posts
cb.search( blog1, "posts", 1, 25, 'listLatestPostsTab1');

// Latest Comments
cb.search( blog1, "comments", 1, 25, 'listLatestCommentsTab1');

// Preferred Labels
for (var i=0; i &lt; labels1.length; i++)
if (labels1[i]) cb.searchLabel(blog1, labels1[i], 'listTab1');

/*
var blog2 = "hackosphere.blogspot.com";
var tabView2 = new YAHOO.widget.TabView('multiTab2');
var labels2 = ['Neo','Widgets', "Blogger Power"];
function listTab2(json) {
listOneTab(json, tabView2, "", false);
}
function listLatestPostsTab2(json) {
listOneTab(json, tabView2, "Latest Posts", true);
}
function listLatestCommentsTab2(json) {
listOneTab(json, tabView2, "Latest Comments", false);
}
// Activating calls!
// Latest Posts
cb.search( blog2, "posts", 1, 25, 'listLatestPostsTab2');

// Latest Comments
cb.search( blog2, "comments", 1, 25, 'listLatestCommentsTab2');

// Preferred Labels
for (var i=0; i &lt; labels2.length; i++)
if (labels2[i]) cb.searchLabel("hackosphere.blogspot.com", labels2[i], 'listTab2');

*/
</script>
</b:includable>
</b:widget>

Setelah elu nginstal sesuai tiga langkah diatas, elu tinggal ngubah hal-hal dibawah ini seperti yang bisa elu temuin kodenya di langkah nomer 3' :

a. Buat mengganti judulnya, lihat perintah ini:

<h2>Hoctro's Place</h2>

b. Lu ganti deh label tabs biar cocok ama blog elu:

var labels1 = ["JSON Hacks", "Label Hacks",
"Free Templates", "Notable Hacks"];

c. Ganti nilai angka dibawah dari angka 10 ke berapapun nilai yang elu pengenin, ini bakal bikin berapa banyak judul tulisan elu per tab

var nPost = 10;

d. kemudian ganti deh nama blog gua dengan nama blog elu

blog1 = "hoctro.blogspot.com";

Gua udah nggunain blog dibawah ini buat testing, disitu elu bisa lihat judul2 artikel tepat diatas area artikel utama:

http://hoctro-multipletabs.blogspot.com/

Buat bloggers tingkat lanjut yang mau ngulik CSS, "Langkah 2" berisi informasi bagaimana caranya. Kalo bisa sih berkonsultasilah dengan the Yahoo! TabView widget tutorials serta contoh2nya buat variasi lain.


Catatan temping:
Gua barusan bikin update temping, untuk memasukkan artikel dan komentar terbaru dari blog manapun yang elu pinginin secara otomatis, serta memungkinkan elu untuk narok sebanyak mungkin tab views. Coba dilihat bagian nomer 2 dari tutorial TabView di bagian tentang bagaimana menambahkan view baru. Jika elu sukses nambahin TabView sebelum hari Sabtu tanggal 19 Mei 07, coba elu ulangin lagi tiga langkah itu sekali lagi.

Untuk menambahkan tabview yang laen seperti widget di gambar bawah ini, coba elu lihat di tutorial bagian 2.

multi viewtab....

Bagaimana ? Asyik kan ?