BREAKING NEWS

Download

Tuesday, May 22, 2007

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 ?

6 comments :

  1. I followed your step to install,

    but my "comments" tab didn't work!

    "hoctro" blogger didn't work too.

    why?

    ReplyDelete
  2. What's the phase ? I mean step 1, 2 or 3 you fail ?

    ReplyDelete
  3. salut bang.pengen nyoba.. ini buat blogspotkan??

    ReplyDelete
  4. Wah bagus sekali. Terima kasih udah ditranslate ^_^.

    ReplyDelete
  5. Artikelnya bagus kata-katanya juga menarik mudah di cerna Trims ya infonya saya tunggu artikel selanjutnya, O..iya Teman saya lagi ikut lomba Speedy Blogging Competition 2008, dimana criteria penilaiannya blog adalah harus banyak pengunjung, posting dan komentar. Boleh saya minta komentar dari teman untuk artikel di blog saya? Kalau Boleh Kunjungi blog saya, hari ini saya sudah posting artikel tolong komentarnya ya dan kalau bisa komentarnya harus berkaitan dengan artikel yang di pilih teman. Ini alamatnya blog saya : http://regedit.blog.telkomspeedy.com/ terima kasih banyak.

    ReplyDelete
  6. scrol blognya enteng gimana caranya boss

    ReplyDelete

Trimakasih dah komen lho ! Kenapa gak sekalian langganan liwat email ajah ? Kan enak tuh, gak mesti ngebrowse ke sini, tiap ada posting baru tinggal buka email udah bisa deh baca bikinblogger. Klik ajah di sini.

Langganan

Suka dengan postingan diatas ? Langganan aja lewat email, gak perlu buka internet bisa baca artikel terbaru di bikinblogger deh...caranya gimana ? Ya tinggal klik di sini
 
Copyright © 2014 Bikin Blogger Share on Blogger Template Free Download.