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