Kembali ke tutorial tab view widget per kategori, widget ini menampilkan 4 post
dengan thumbnail dalam tiap satu label atau kategori, untuk lebih jelasnya
silahkan lihat gambar di atas, dan klik demo biar lebih jelas.
Langsung saja pada cara membuatnya :
1) Pertama
Anda meesti login ke blogger dengan akun Anda.
2) Kedua
pilih blog yang ingin anda tambahkan slider ini.
3) Setelah
itu masuk ke template >> Edit HTML, kemudian centang expand
widget templates.
4) Untuk
berjaga-jaga jika terjadi kesalahan dalam pengeditan nantinya, sebaiknya backup
dulu template.
5) Setelah
semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :
#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.
6) Langkah
selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas
kode </head> :
<script
src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'
type='text/javascript'/>
<script
src='https://johny-ember.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/AVvXsEiocRk85ptPJEUsNDmVLkHZDvZ9XjiveCFvAcQrf3GGDDIRqUF0ymDyfbb5P-m5pZnnTpXbUUwc7ekvvbzPL6QiMqABbvYqSapmJihnUVAqciWOJRUrbHLTgZKTndGYoQAOPSGl-QGIR4E/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 hijau diatas, itu adalah kode script jQuery.min.js seri
terbaru yang saya gunakan untuk membuat tab view widget. Jika pada template
Anda sudah terdapatjQuery.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.
7) Kemudian
masukkan 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>
8) Langkah
selanjutnya adalah bagaimana cara menempatkan tab view widget tersebut pada
blog kita.
Jika
Anda ingin meletakkan pada bagian atas sebelum post seperti pada demo, cari
kode <div id='main-wrapper'> ,
kemudian letakkan kode berikut ini dibawahnya :
<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 6 diatas. Dan jika Anda ingin menampilkan widget
ini di bawah postingan, letakkan kode tersebut diatas kode berikut ini (jika
tidak ada cari yang mirip) :
<!--
spacer for skins that want sidebar and main to be the same height-->
<div
class='clear'> </div>
</div>
<!-- end content-wrapper -->
9) Terakhir, save
templates dan lihat hasilnya.
Jika masih ada yang kurang jelas silahkan kunjungi Mas kolis. Selamat mencoba dan semoga bermanfaat.
.jpg)
.PNG)
.jpg)
