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 :
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.
}
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
. Tapi...kayaknya ngga lama lagi mungkin saya akan mencabut iklan adsense di blog ini. Soalnya takut juga di banned 
. Cuma kalo misalnya anda bener2 pengen pasang adsense di blog anda yang memang berbahasa indonesia, gampang kok....ikutin aja trik berikut :
