Tiện ích này giúp tiết kiệm không gian website/blog khi có nhiều bài đăng cùng một chuyên mục, thích hợp cho những trang báo chí, website/blog bán hàng...
Chèn đoạn script sau trước thẻ </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/AVvXsEidN48MxRbQjXbOwrJ8OjykJCxInOXwCoj5zxLI5MSVH43-RYY2b2gINrcpKxCUDmCJONx90RmRU7XDJ0f4kL_gyrM5mToFgsOGiF9Sglsj-91QouPWeybpZDYW5_QhMS3iKDKg0Q3F_xM/s1600/no+image.jpg";showRandomImg=true;aBold=true;summaryPost=200;summaryPost1=60;summaryTitle=20;numposts1=6;numposts3=6;numposts2=5;numposts=15;Title1="Adventure";Title2="Action";Title3="Bike Game";Title4="Dress-Up";Title5="Strategy";Title6="Sport Game";function showrecentposts11(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 class="column_img" src="'+img[i]+'"/></a><h2><a href="'+posturl+'">'+posttitle+'</a></h2></div>';document.write(trtd);j++}}
//]]>
</script>
<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/AVvXsEidN48MxRbQjXbOwrJ8OjykJCxInOXwCoj5zxLI5MSVH43-RYY2b2gINrcpKxCUDmCJONx90RmRU7XDJ0f4kL_gyrM5mToFgsOGiF9Sglsj-91QouPWeybpZDYW5_QhMS3iKDKg0Q3F_xM/s1600/no+image.jpg";showRandomImg=true;aBold=true;summaryPost=200;summaryPost1=60;summaryTitle=20;numposts1=6;numposts3=6;numposts2=5;numposts=15;Title1="Adventure";Title2="Action";Title3="Bike Game";Title4="Dress-Up";Title5="Strategy";Title6="Sport Game";function showrecentposts11(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 class="column_img" src="'+img[i]+'"/></a><h2><a href="'+posturl+'">'+posttitle+'</a></h2></div>';document.write(trtd);j++}}
//]]>
</script>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='ads1-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/-/Headphone?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts11\"><\/script>");
</script></div>
<div class='tabber' id='tab2'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/Loa%20máy%20tính?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts11\"><\/script>");
</script></div>
<div class='tabber' id='tab3'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/Phát%20Wifi?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts11\"><\/script>");
</script></div>
<div class='tabber' id='tab4'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/Pin%20Nokia?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts11\"><\/script>");
</script></div>
<div class='tabber' id='tab5'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/Giảm%20giá%20mới?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/-/health?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts11\"><\/script>");
</script></div>
<div class='clear'/>
</div></div>
</div>
</b:if>
<div id='ads1-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/-/Headphone?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts11\"><\/script>");
</script></div>
<div class='tabber' id='tab2'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/Loa%20máy%20tính?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts11\"><\/script>");
</script></div>
<div class='tabber' id='tab3'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/Phát%20Wifi?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts11\"><\/script>");
</script></div>
<div class='tabber' id='tab4'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/Pin%20Nokia?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts11\"><\/script>");
</script></div>
<div class='tabber' id='tab5'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/Giảm%20giá%20mới?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/-/health?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts11\"><\/script>");
</script></div>
<div class='clear'/>
</div></div>
</div>
</b:if>
<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>
//<![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>
Và cuối cùng là css
#tabber-wrapper{background:#ededed;width:730px;float:left;word-wrap:break-word;overflow:hidden;margin:0 0 10px;border:5px solid #a7b1be}
ul.tab-view{float:left;list-style:none;height:32px;width:728px;margin:0;padding:0;font:12px Arial}
ul.tab-view li{float:left;height:31px;line-height:31px;overflow:hidden;position:relative;margin:0 0 -1px;padding:0}
ul.tab-view li a{text-decoration:none;color:#111;display:block;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{color:#000;background:#a7b1be}
.tab-wrapper{border-top:none;overflow:hidden;clear:both;float:left;width:728px;margin-bottom:10px}
.tabber{padding:10px 0 0}
.tabber .column{float:left;display:inline;width:133px;height: 140px;margin:0 2px 0 9px}
.tabber .column_img{border:1px solid #a7b1be;width:133px;height:95px}
.tabber h2{font:11px Arial;line-height:15px;margin:0 0 5px;text-align:center}
.tabber h2 a{color:#444}
.tabber h2 a:hover{color:#1a4d86}
ul.tab-view{float:left;list-style:none;height:32px;width:728px;margin:0;padding:0;font:12px Arial}
ul.tab-view li{float:left;height:31px;line-height:31px;overflow:hidden;position:relative;margin:0 0 -1px;padding:0}
ul.tab-view li a{text-decoration:none;color:#111;display:block;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{color:#000;background:#a7b1be}
.tab-wrapper{border-top:none;overflow:hidden;clear:both;float:left;width:728px;margin-bottom:10px}
.tabber{padding:10px 0 0}
.tabber .column{float:left;display:inline;width:133px;height: 140px;margin:0 2px 0 9px}
.tabber .column_img{border:1px solid #a7b1be;width:133px;height:95px}
.tabber h2{font:11px Arial;line-height:15px;margin:0 0 5px;text-align:center}
.tabber h2 a{color:#444}
.tabber h2 a:hover{color:#1a4d86}
_RurutomiVanduc_