Cara Membuat Tabview Widget

Selamat Sore semuanya......kursus blog kali ini saya akan menulis artikel tentang cara membuat tabview widget untuk blog anda. Tabview ini berfungsi untuk menampilkan label, komentar terbaru, dan artikel terbaru dalam 1 widget. Berikut screen shoot tabview yang saya maksud :
Jika ingin liat contohnya sekaligus merasakan fungsinya, liat aja di bagian atas posting ini (persis seperti gambar diatas). Menarik kan....? saya mendapatkan ini dari hoctro's. Thanks a lot hoctro's for share this hack to another blogger. Pengen pasang juga tabview ini di blog anda semua...? ikuti aja langkah2 di bawah ini : 1. Setelah login di blogger, langsung menuju ke layout lalu edit HTML. 2. Sebagai keamanan silahkan download dulu template anda 3. Kalo udah, silahkan copy paste script berikut di bawah tag ]]></b:skin> sebelum tag </head>. Awas..jangan sampe salah ya...!!.


<script type='text/javascript'>
// Developed by Hoctro - All rights reserved 2007
// This credit must be included in all your derived usages.

// "cb" is intended to be a common library, where different widgets would
// utitlize the shared operations such as getTitle, getLink, etc. from a json object.
var cb = {

// search function requires these parameters:
// 1. query: a blogger address, such as "hoctro.blogspot.com",
// 2. type: type of return data, either "comments" or "posts",
// 3. start: the start-index parameter (where to start extracting data)
// 4. increment: the number of elements the json will get back. (the smaller value, the faster time to travel back)
// 5. func: the returned function the json object will feed.

search: function(query, type, start, increment, func) {
var script = document.createElement('script');
script.setAttribute('src', 'http://' + query + '/feeds/' + type + '/default?alt=json-in-script&amp;start-index='
+ start + '&amp;max-results=' + increment + '&amp;callback=' + func + '&amp;orderby=published');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
},

// searchLabel function return a result of posts w/ a label query
// it requires these parameters:
// 1. query: a blogger address, such as "hoctro.blogspot.com",
// 2. an array of labels
// 3. func: the returned function the json object will feed.
searchLabel: function(query, label, func) {
var script = document.createElement('script');
script.setAttribute('src', 'http://' + query + '/feeds/posts/default/-/' + encodeURIComponent(label) +
'?alt=json-in-script&amp;callback=' + func + '&amp;orderby=published');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
},

// getTotalResults needs the json object, and it'll return the total number of comments (or posts) of the blog.
getTotalResults: function(json) {
return json.feed.openSearch$totalResults.$t;
},

// getStartIndex gets the start index of a search inside an json object.
getStartIndex: function(json) {
return json.feed.openSearch$startIndex.$t;
},

// getLink return a href link if "name" matches the content inside "a" tags) of the link
getLink: function(entry, name) {
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == name)
alturl = entry.link[k].href;
}
return alturl;
},

// getTitle gets the title of the title of an entry of a json object.
getTitle: function(entry) {
return entry.title.$t;
},

// getContent gets the content inside an entry of a json object.
getContent: function(entry) {
return entry.content.$t;
},

// getCommentAuthor: gets the commenter name inside an entry of a json object.
getCommentAuthor: function(entry) {
return entry.author[0].name.$t;
},

// Given a json label search, this function return the decoded label.
getLabelFromURL: function(json) {
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
// The next two lines are borrowed from Ramani's Neo Template
// code. Thanks Ramani!
var label = raw.substr(raw.lastIndexOf('/')+1);
return decodeURIComponent(label);
}
}
},
txt : function (s) {
return s + " Widget by &lt;a href='http://hoctro.blogspot.com" + "'&gt;Hoctro&lt;/a&gt;";
}
};
</script>


4. Kalo udah, silahkan save dulu template anda lalu lanjutkan kembali 5. Copy paste kode berikut, persis dibawah kode yang anda copy pada langkah ke 3



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

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

<script src='http://yui.yahooapis.com/2.3.0/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>

6. Kalo udah, silahkan save lagi template anda 7. kemudian kasih tanda centang di kolom expand template widget.




8. Cari kode berikut : <div id='main-wrapper'> <b:section class='main' id='main' showaddelement='no'>. Copy paste kode berikut, persis dibawah kode diatas (yang barusan dicari)




<b:widget id='HTML11' 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>Judul</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")
+ "'&gt;" + cb.getTitle(entry) + "</li>";
}

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

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


}

var blog1 = "bloganda.blogspot.com";
var tabView1 = new YAHOO.widget.TabView('multiTab1');
var labels1 = ['Label Blog', 'Label Blog','Label Blog'];
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 copy paste kode tersebut silahkan ganti kode yang berwarna merah sesuai dengan blog anda.  

Judul --> ganti dengan judul tab view anda  
Bloganda.blogspot.com --> ganti dengan blog punya anda (tanpa "http://")  
Label --> ganti dengan nama label blog anda

Jika merasa kesulitan, silahkan tinggalkan pesan di kolom komentar, atau hubungi saya via ym (kalo sedang online). Selamat mencoba

28 komentar:

  1. kluar puler arahannye 'html 102is not parsed...,,,whateva..plz help me

    BalasHapus
  2. to : pacak utim
    Maaf...tadi saya salah ketik, silahkan ganti aja "html 102" dengan "html 11"

    terima kasih

    BalasHapus
  3. To pacak uitm

    Maaf kalo bertanya yang jelas ya...soalnya saya ga ngerti dengan pertanyaan situ

    BalasHapus
  4. iya ntr kalo dah gak sibuk tak cobain ahhh :D

    BalasHapus
  5. lam kenal.. aku coba ikuti langkah2nya malah yang muncul latest comment sama latest post...
    labelnya kok ga muncul ya..
    tulisan warna merah aku ud ganti.
    labelnya: musik,komputer,blog.
    tolong pencerahannya ya..
    www.danielmginting.blogspot.com

    BalasHapus
  6. to daniel

    kayaknya anda menghilangkan tanda kutip diantara labelnya deh.

    c:/

    ['blog','musik','komputer']

    BalasHapus
  7. Lapor ketua.... Minta ijin! Menautkan tulisan ane ke halaman ini. Menggangu nggak? Eh... Boleh nggak sekalian saya kursus disini?

    BalasHapus
  8. mas klo untuk buat widget-nya per catagori/label di sidebar gimana?
    (n/b:titip backlink juga disini ya)
    makasih

    BalasHapus
  9. @dhawuh : ganti aja, "label blog" yang berwarna merah dengan judul label blog punya kamu

    BalasHapus
  10. pengen juga cerita2 sambil belajar ama mas lewat ym tapi gmana, gmana caranya ya mas.. "sorry mas.. saya masih awam" :)

    BalasHapus
  11. petunjuk no 8 ..kode gw kok ga ada ya?! adanya

    div id='content'
    b:section class='content' id='content' showaddelement='yes'

    BalasHapus
  12. wah mas artikelnya kok mirip kayak artikel dari trick-blog.blogspot.com ya hhmmm..... :-/ tapi ga apa apa deh yang penting berguna bwat nusa dan bangsa !!!!! :D HAHAHAHAHAHAHAHAH !!!!!!!! =))

    BalasHapus
  13. kunjungi blog mlirik dari blog rang lain kelincex.blogspot.com

    BalasHapus
  14. Om, Script-nya panjang amir?
    yang kupakai di blogku ngga panjang2 loh? Maklum, seorang nubi suka puyeng liat yang panjang2 :D

    BalasHapus
  15. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  16. mantab postingannya boz...

    BalasHapus
  17. kang rohman...
    punyaku ko keluar tulisan
    More than one widget was found with id: HTML11. Widget IDs should be unique.
    itu gimana yach ?

    BalasHapus
  18. mas. saya uda coba, tapi yang muncul tidak sesuai..!

    1.label blog yg di inginkan tidak muncul
    2.hanya ada tulisan LATEST POST diatas kotak
    tabview widget.
    tanda ['] dan [,] sudah sesuai.

    mohon pengarahannya ya mas. karna sudah terlanjur di save. jadi acak2an deh..! hehehe...! thnx sebelumnya..!

    BalasHapus
  19. owh ya, ini email saya..! k3nshin86@yahoo.com

    BalasHapus
  20. wah,panjang banget jadinya....
    memberatkan blog nggak ya???

    BalasHapus
  21. salam kenal...
    wah artikelnya keren banget gan... ntar ane nyoba ah buat di blog :D , makasih gan buat infonya :)

    mampir-mampir balik ya gan :) ada eskrim nih :))

    BalasHapus
  22. kira2 gak mberatin ta gan..thank..

    BalasHapus

blogger