Cara Membuat Tab View Widget Kategori

Cara Membuat Tab View Kategori seperti pada blog ini - Ehemm.. Maaf pada sahabat blogger karena slama ini, saya lama banget ngeposting postingan ane yang baru, ya karena kesibukan di sekolah sekarang + saya ikut lomba film, jadi kesibukan di tambah dengan hari raya Kuningan di Bali. Bagi yang merasa orang Bali, saya ucapkan Selamat Hari Raya Galungan ma Kuningan. Eh, koq jdi curhat gini ya.. Hehe.. uda sekarang saya bakal ngasi tau sobat, Trik atau Cara Membuat Tab Viem Kategori

Yang Seperti byasa sobat liat kan yang berbentuk tiga, lalu hanya berisi postingan terbaru, comment, ato yang laenny.. Tetapi tertulis ataupun berwidget. Sekarang saya bakal ngasi tau cara buatnya. Nih screenshotnya :
Dalam widget diatas menampilkan 5 kategori yang masing-masing telah dinamai dengan per kategori 5 postingan seperti gambar diatas.

Langsung saja cara pembuatannya :
1. Seperti biasa, login ke Blogger
2. Masuk ke Rancangan >> Edit HTML >> Expand Widget Template
3. Untuk melindungi dari kerusakan, coba back up template anda terlebih dahulu
4. Cari kode ]]></b:skingt; lalu letakkan kode 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}

           Nb : width:640px adalah lebar widget tersebut. Pergunakan lebar main wrapper di blog sobat masing-masing
                   width:638px kenapa 638? karena widget ini dibungkus oleh border yang setebal 1px kanan dan kiri, jadi harus dikurangi 2 menjadi 638
                   width:146px adalah lebar tiap satu post. Jika pada blog sobat menggunakan lebar main wrapper yang lebih kecil, yang ini harus disesuaikan agar jarak kiri dan kanan menjadi teratur

5. Masih di Edit HTML, kini cari kode </head> lalu post kan kode berikut diatasnya

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<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/AVvXsEhMs6JuBp6pjSBKQTRw6nynD-BdOwk_DajSOXpZ3USb7XqqVPbqqI_OHr0X0vk9W0DV2Mi6xzV9AlRP73lfDlE88uN-2i5PfGx1I5kOnqraJnd_GeduuGehaYTku4xoPRdox2doMYWZRrM/s1600/no+image.jpg";showRandomImg=true;aBold=true;summaryPost=80;numposts=4;Title1="GALERRY";Title2="MOBILE";Title3="SPORT";Title4="WIDGET";Title5="TUTORIAL";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&quot; src="'+img[i]+'"/></a><h2><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div>';document.write(trtd);j++}}
//]]>
</script>

   Nb : Biru adalah script jQuery.min.js Jika sudah ada pada blog sobat, jangan ditaruh lagi
                   Merah adalah judul yang akan ditampilkan pada Widget Tab View
                   Hijau adalah lebar dan tinggi thumbnail gambar pada satu kategori
6. Kemudian masuk ke </body> pastekan kode berikut diatasnya

<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.1. Jika anda ingin meletakkannya sebelum postingan anda, cari dulu kode <div id='main-wrapper'> lalu letakkan kode berikut 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>
</ul><div class='clear'/>
<div class='tab-wrapper'>
<div class='tabber' id='tab1'>
<script>
document.write(" <script src="/feeds/posts/default/-/Galeri?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/-/Mobile?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/-/Sport?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/-/Widget?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/-/Tutorial Blog?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts"></script>");
</script></div>
<div class='clear'/>
</div></div>

Nb : Tanda yang bercetak tebal adalah nama kategori yang ada pada blog sobat.

7.2. Jika anda ingin meletakkannya setelah postingan anda, cai kode berikut (jika tak ada, cari yang persis)

<div class='clear'> </div>

</div>

Jika sudah ketemu. pastekan kode yang tadi diatas kode yang diatas

8. Terakhir, save template

Jika mendapat kesulitan, sampaikan pada kotak komentar

Cara Membuat Tab View Widget Kategori

2 Comment