Membuat widget tabview berdasarkan kategori - Pada posting kali ini, MBT's blog mau share tentang membuat widget tabview di blogspot. Pada umumnya, widget ini sering dijumpai di website - website ternama. Namun, anda juga bisa membuat widget ini sendiri. Widget ini mempunyai beberapa kelebihan diantaranya :
1. Mudah digunakan.
2. Pro
3. Hemat sidebar.
Seperti pada umumnya, dibalik kelebihan pasti ada kekurangan. Begitu juga dengan widget satu ini. Widget ini bisa saja membuat load blog anda bertambah/lemot. Untuk mengatasinya, saya saranka setelah memasang widget ini anda langsung mengcompress CSS blog anda di
http://cssdrive.com/index.php/main/csscompressor/.
Oke, langsung saja ke cara pembuatannya :
1. Login blogspot.
2. Klik Template, lalu menuju ke edit HTML.
3. Pada popup widow edit HTML, klik Lanjutkan dan Expand template widget. Jangan lupa gunakan CTRL dan F.
4. Cari tag
]]></b:skin>. Setelah ketemu, letakkan css berikut diatasnya.
#tabber-wrapper{width:640px;float:left;word-wrap:break-word;overflow:hidden}
ul.tab-view{float:left;list-style:none;height:32px;border-bottom:1px
solid #aaa;border-left:1px solid #aaa;width:638px;margin:0;padding:0}
ul.tab-view
li{float:left;height:31px;line-height:31px;border:1px solid
#aaa;border-left:none;overflow:hidden;position:relative;background:#eee;margin:0
0 -1px;padding:0}
ul.tab-view li
a{text-decoration:none;color:#26231c;display:block;border:1px solid
#eee;outline:none;font-weight:700;padding:0 15px}
html ul.tab-view
li.active,html ul.tab-view li.active a,html ul.tab-view li.active
a:hover{background:#eee;color:#026ab5;border-bottom:1px solid #eee}
.tab-wrapper{border:1px
solid #aaa;border-top:none;overflow:hidden;clear:both;float:left;width:638px;background:#eee;margin-bottom:15px}
.tabber{padding:10px
0}
.tabber
.column{float:left;display:inline;width:146px;margin:0 0 0 11px}
.tabber h2{font:bold
12px Arial;line-height:15px;margin:7px 0 5px}
.tabber h2
a{color:#222}
.tabber h2
a:hover{color:#026ab5}
Karena
pada blog demo yang saya gunakan lebar main-wrapper (kolom postingan)
adalah 640px
maka untuk membungkus tab view widget lebarnya harus sama, yaitu 640px. Anda bisa sesuaikan dengan
lebar main-wrapper pada template yang Anda gunakan.
Dan
untuk tab viewnya sendiri lebarnya harus dikurangi 2px (1px kanan dan kiri),
karena tab ini dibungkus dengan border setebal 1px, sehingga lebarnya
menjadi 638px.
Lebar tiap satu post disini 146px, jika pada template yang Anda gunakan lebar main-wrapper lebih kecil, maka lebar
untuk satu post ini pun juga harus diperkecil sehingga jarak antara bagian sisi
kanan dan kiri sama.
5. Langkah selanjutnya, cari kode </head>. Sudah ketemu? letakkan kode dibawah diatasnya.
<script src='https://masolis-javascript.googlecode.com/svn/trunk/tabview.js'
type='text/javascript'/>
<script
type='text/javascript'>
//<![CDATA[
imgr=new
Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhE2bqYu0UDJ_4Azf80rf17RjVBnAfsmo9o6kLmLiELIit24GItZH9o2fFov6Db1XZn1XvcUyWq9BlFKt9OrEEPRTXIl5k1XqFSA4N3p_sSUnHY5cWgHQbMT2MazvolWaesy0CWeqH6hc/s1600/no+image.jpg";showRandomImg=true;aBold=true;summaryPost=80;numposts=4;Title1="Norah Jones";Title2="Diana
Krall";Title3="Sting";Title4="Basia";Title5="Sade";Title6="Jamie
Cullum";function
removeHtmlTag(strx,chop){var s=strx.split("<");for(var
i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return
s}function
showrecentposts(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new
Array();for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var
posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var
k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var
k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split("
")[0];break}}if("content"in entry){var
postcontent=entry.content.$t}else if("summary"in entry){var
postcontent=entry.summary.$t}else var
postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var
month=[1,2,3,4,5,6,7,8,9,10,11,12];var
month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var
day=postdate.split("-")[2].substring(0,2);var
m=postdate.split("-")[1];var
y=postdate.split("-")[0];for(var
u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var
daystr=day+' '+m+' '+y;var trtd='<div class="column"><a
href="'+posturl+'"><img width="146" height="95"
src="'+img[i]+'"/></a><h2><a
href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div>';document.write(trtd);j++}}
//]]>
</script>
Keterangan,,...
Perhatikan URL script warna biru diatas, itu adalah
kode script jQuery.min.js seri terbaru yang saya gunakan untuk membuat tab
view widget. Jika pada template Anda sudah terdapat jQuery.min.js walaupun serinya berbeda, kode warna biru diatas tidak
perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada
di template, terserah mau seri berapa, kalau bisa versi yang terbaru.
Tulisan warna merah : Norah Jones, Diana Krall dan
seterusnya adalah judul untuk tab view widget, anda bisa ganti sesuai katehori
yang ingin ditampilkan pada widget tersebut. Warna biru (146 dan 95)
diatas adalah ukuran lebar dan tinggi thumbnail pada satu post kategori,
silahkan ukurannya disesuaikan.
6. Letakkan kode berikut sebelum kode </body>.
<script
type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(){$(".tabber").hide();$("ul.tab-view
li:first").addClass("active").show();$(".tabber:first").show();$("ul.tab-view
li").click(function(){$("ul.tab-view li").removeClass("active");$(this).addClass("active");$(".tabber").hide();var
activeTab=$(this).find("a").attr("href");$(activeTab).fadeIn();return
false})});
//]]>
</script>
7. Letakkan kode dibawah ini, dibawah kode <div id='main-wrapper'>.
<div
id='tabber-wrapper'>
<ul
class='tab-view'>
<li><a
href='#tab1'><script>document.write(Title1);</script></a></li>
<li><a
href='#tab2'><script>document.write(Title2);</script></a></li>
<li><a
href='#tab3'><script>document.write(Title3);</script></a></li>
<li><a
href='#tab4'><script>document.write(Title4);</script></a></li>
<li><a
href='#tab5'><script>document.write(Title5);</script></a></li>
<li><a
href='#tab6'><script>document.write(Title6);</script></a></li>
</ul><div
class='clear'/>
<div
class='tab-wrapper'>
<div
class='tabber' id='tab1'>
<script>
document.write(" <script
src=\"/feeds/posts/default/-/Norah Jones Lyrics?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script></div>
<div
class='tabber' id='tab2'>
<script>
document.write(" <script
src=\"/feeds/posts/default/-/Diana Krall?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script></div>
<div
class='tabber' id='tab3'>
<script>
document.write(" <script
src=\"/feeds/posts/default/-/Sting?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script></div>
<div
class='tabber' id='tab4'>
<script>
document.write(" <script
src=\"/feeds/posts/default/-/Basia?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script></div>
<div
class='tabber' id='tab5'>
<script>
document.write(" <script
src=\"/feeds/posts/default/-/Sade Lyrics?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script></div>
<div
class='tabber' id='tab6'>
<script>
document.write(" <script
src=\"/feeds/posts/default/-/Jamie Cullum Lyrics?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script></div>
<div
class='clear'/>
</div></div>
Tulisan warna
merah pada kode diatas adalah label atau kategori yang saya tampilkan pada tab view widget, silahkan ganti dengan label Anda sendiri dan sesuaikan dengan judul tab view pada langkah
nomer 7 diatas.
7. Langkah terakhir, klik Save template dan lihat hasilnya!.
.png)
.png "Sebelum di klik")
.png)
