Cara Membuat Tab View Widget Kategori Keren Banget

Cara Membuat Tab View Widget Kategori Keren Banget – Tutorial yang kita baha kali ini  ialah bagaimana cara membuat tab view widget kategori yang merupakan hasil karya maskolis yang merupakan salah satu blogger terbaik Indonesia.


Widget tab view ini hampir sama dengan recent post atau artikel terbaru, akan tetapi recent post ini ditampilkan berdasarkan label atau kategori, bahkan tampilannya pun lebih terlihat menarik dan elegan karena ditambah sentuhan tab view.

Cara memasang widget ini pada blog

1. Login ke blogger atau klik disini»
2. Pilih template »  edit HTML
3. Tekan Ctrl+F kemudian cari code ]]></b:skin>
4. Copy paste code di bawah ini dan letakkan code ]]></b:skin>

Code 1

Letakkan code berikut di atas code ]]></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}

Catatan: Tulisan yang berwarna merah merupakan lebar widget tab view. Silahkan tentukan dengan lebar blog anda.

5. Copy code di bawah ini dan letakkan di atas code </head>

Code 2

Letakkan code berikut di atas code </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/013120251122/tabview.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicFSfy5dlMyEPrd5dH9mRGAhvD0DOqNN9oPiP1egSRgd-hLTsjXYVSRAWFhXG0HqeOuq8gblyWjCwnQ56hiGDVC6_o9XjazXgPLi-3oGGhLHOXhyphenhyphenSKafly9ab8OTAV6XL1-5gF20kZLHo/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>

Catatan: Tulisan yang berwarna merah adalah judul untuk tab view

6. Copy paste code di bawah ini dan letakkan di atas code </body>

Code 3

Letakkan code berikut di atas code </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. Copy paste code di bawah ini dan letakkan di bawah code <div id='main-wrapper'>

Code 4

Letakkan code berikut di bawah code <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(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Norah Jones Lyrics?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script></div>
<div class='tabber' id='tab2'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Diana Krall?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script></div>
<div class='tabber' id='tab3'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Sting?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script></div>
<div class='tabber' id='tab4'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Basia?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script></div>
<div class='tabber' id='tab5'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Sade Lyrics?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script></div>
<div class='tabber' id='tab6'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Jamie Cullum Lyrics?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script></div>
<div class='clear'/>
</div></div>

Catatan: Tulisan yang berwarna merah merupakan kategori yang akan ditampilkan pada widget tab view.

Ditulis oleh Karimunjawa Backpacker, Saturday, May 18, 2013 - Rating: 4.5

Judul : Cara Membuat Tab View Widget Kategori Keren Banget
Deskripsi : Cara Membuat Tab View Widget Kategori Keren Banget – Tutorial yang kita baha kali ini  ialah bagaimana cara membuat tab view widget kate...

Bagikan ke

Facebook Google+ Twitter