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&start-index='
+ start + '&max-results=' + increment + '&callback=' + func + '&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&callback=' + func + '&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 < 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 < 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 <a href='http://hoctro.blogspot.com" + "'>Hoctro</a>";
}
};
</script>
// 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&start-index='
+ start + '&max-results=' + increment + '&callback=' + func + '&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&callback=' + func + '&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 < 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 < 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 <a href='http://hoctro.blogspot.com" + "'>Hoctro</a>";
}
};
</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'
>
</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 <= nPost) ?
json.feed.entry.length : nPost;
for (var i = 0; i < numberPost; i++) {
var entry = json.feed.entry[i];
text += "<li>" + "<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 = "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 < 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 < 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
xdpt buat..sedeh nye...
BalasHapuskluar puler arahannye 'html 102is not parsed...,,,whateva..plz help me
BalasHapusto : pacak utim
BalasHapusMaaf...tadi saya salah ketik, silahkan ganti aja "html 102" dengan "html 11"
terima kasih
tq .nice to meet u
BalasHapuskalo de 11 gimana?
BalasHapusxjd la mas...
BalasHapusTo pacak uitm
BalasHapusMaaf kalo bertanya yang jelas ya...soalnya saya ga ngerti dengan pertanyaan situ
iya ntr kalo dah gak sibuk tak cobain ahhh :D
BalasHapuslam kenal.. aku coba ikuti langkah2nya malah yang muncul latest comment sama latest post...
BalasHapuslabelnya kok ga muncul ya..
tulisan warna merah aku ud ganti.
labelnya: musik,komputer,blog.
tolong pencerahannya ya..
www.danielmginting.blogspot.com
to daniel
BalasHapuskayaknya anda menghilangkan tanda kutip diantara labelnya deh.
c:/
['blog','musik','komputer']
Lapor ketua.... Minta ijin! Menautkan tulisan ane ke halaman ini. Menggangu nggak? Eh... Boleh nggak sekalian saya kursus disini?
BalasHapusggggg coba diulu yahccc
BalasHapusmas klo untuk buat widget-nya per catagori/label di sidebar gimana?
BalasHapus(n/b:titip backlink juga disini ya)
makasih
@dhawuh : ganti aja, "label blog" yang berwarna merah dengan judul label blog punya kamu
BalasHapuskeren nih Mas//
BalasHapuspengen juga cerita2 sambil belajar ama mas lewat ym tapi gmana, gmana caranya ya mas.. "sorry mas.. saya masih awam" :)
BalasHapuspetunjuk no 8 ..kode gw kok ga ada ya?! adanya
BalasHapusdiv id='content'
b:section class='content' id='content' showaddelement='yes'
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 !!!!!!!! =))
BalasHapuskunjungi blog mlirik dari blog rang lain kelincex.blogspot.com
BalasHapusOm, Script-nya panjang amir?
BalasHapusyang kupakai di blogku ngga panjang2 loh? Maklum, seorang nubi suka puyeng liat yang panjang2 :D
Komentar ini telah dihapus oleh pengarang.
BalasHapusmantab postingannya boz...
BalasHapuskang rohman...
BalasHapuspunyaku ko keluar tulisan
More than one widget was found with id: HTML11. Widget IDs should be unique.
itu gimana yach ?
mas. saya uda coba, tapi yang muncul tidak sesuai..!
BalasHapus1.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..!
owh ya, ini email saya..! k3nshin86@yahoo.com
BalasHapuswah,panjang banget jadinya....
BalasHapusmemberatkan blog nggak ya???
salam kenal...
BalasHapuswah artikelnya keren banget gan... ntar ane nyoba ah buat di blog :D , makasih gan buat infonya :)
mampir-mampir balik ya gan :) ada eskrim nih :))
kira2 gak mberatin ta gan..thank..
BalasHapus