Tạo tab nội dung cho blog

Với trang blog có nhiều nội dung cần thể hiện thị việc sử dung tab nội dung để tóm tắt hoặc thể hiện một số URL giới thiệu, hay một tiện ích nào đó được xem là một giải pháp tối ưu vừa thể hiện ý tưởng, giới thiệu đến người đọc vừa không chiếm diện tích trang....Minh xin giới thiệu một tab nội dung đơn giản có dang hiện ứng giống tab tuoitre.vn dựa trên code của trang opencube.com.

Bạn có thể xem demo tại đây.

Bước 1: Vào Blogger account >> Thiết kế (Design) >> Chỉnh sửa HTML (Edit/Html) >> click vào Mở rộng tiện ích và dán đoạn code sau vào trên thẻ đóng </head>.

<style type='text/css'>
.qmmc .qmdivider{display:block;font-size:1px;border-width:0px;border-style:solid;position:relative;z-index:1;}.qmmc .qmdividery{float:left;width:0px;}.qmmc .qmtitle{display:block;cursor:default;white-space:nowrap;position:relative;z-index:1;}.qmclear {font-size:1px;height:0px;width:0px;clear:left;line-height:0px;display:block;float:none !important;}.qmmc {position:relative;zoom:1;z-index:10;}.qmmc a, .qmmc li {float:left;display:block;white-space:nowrap;position:relative;z-index:1;}.qmmc div a, .qmmc ul a, .qmmc ul li {float:none;}.qmsh div a {float:left;}.qmmc div{visibility:hidden;position:absolute;}.qmmc .qmcbox{cursor:default;display:inline-block;position:relative;z-index:1;}.qmmc .qmcbox a{display:inline;}.qmmc .qmcbox div{float:none;position:static;visibility:inherit;left:auto;}.qmmc li {z-index:auto;}.qmmc ul {left:-10000px;position:absolute;z-index:10;}.qmmc, .qmmc ul {list-style:none;padding:0px;margin:0px;}.qmmc li a {float:none;}.qmmc li:hover&gt;ul{left:auto;}/*[END-QCC]*//*[START-QCC0]*/#qm0 ul {top:100%;}#qm0 ul li:hover&gt;ul{top:0px;left:100%;}

#qm0 
{ 
margin:0px;
border-width:0px 0px 0px 1px;
border-style:solid;
border-color:#FA339F; //Mau vien tab ben trai
}

#qm0 a 
{ 
width:70px;
padding:4px 40px 4px 10px;
background-color:#FEC666; //Mau nen tab chua duoc chon
color:#00FBF8;  //Mau chu tab khi chua di chuot
font-family:Arial;
font-size:11px;
text-decoration:none;
text-align:center;
border-width:1px 1px 1px 0px;
border-style:solid;
border-color:#FA339F; 
border-style:solid;
border-color:#FA339F; //Mau vien tab tren
}

#qm0 a:hover 
{ 
color:#FE3468; //Mau chu tab khi di chuot
text-decoration:underline;
}

#qm0 li:hover&gt;a 
{ 
color:#ffffbb;
text-decoration:underline;
}

#qm0 .qmparent 
{ 
background-image:url(arrow_19.gif);
background-repeat:no-repeat;
background-position:88% 55%;
}

body #qm0 .qmactive, body #qm0 .qmactive:hover 
{ 
background-color:#FE8602;  //Mau nen tab tren
}

#qm0 div, #qm0 ul 
{ 
padding:20px 15px 15px 15px;
margin:-1px 0px 0px -1px;
background-color:#FFFFFF;
border-width:1px;
border-style:solid;
border-color:#FA339F;  //Mau vien tab noi dung
}
border-color:#29F40D;
}

#qm0 div a:hover 
{ 
background-color:#DB0EE8;
color:#ffffbb;
border-color:#FA339F;
}
#qm0 ul li:hover&gt;a 
{ 
background-color:#FAC73F;
color:#222222;
border-color:#11EE64;
}

#qm0 div .qmparent, #qm0 ul .qmparent 
{ 
background-image:url(arrow_18.gif);
background-position:95% 50%;
}

body #qm0 div .qmactive, body #qm0 div .qmactive:hover 
{ 
border-color:#FA339F; 
}

#qm0 .qmtitle 
{ 
margin:2px 5px 5px 5px;
color:#222222;
font-family:Arial;
font-size:11px;
font-weight:bold;
}

#qm0 .qmdividerx 
{ 
border-top-width:1px;
margin:4px 5px 4px 5px;
border-color:#999999;
}

#qm0 .qmcbox 
{ 
width:453px;
height:280px;
color:#000000; //Mau van ban trong tab
font-family:arial;
font-size:12px;
}

#qm0 .qmcbox a 
{ 
padding:0px;
margin:0px;
background-color:transparent;
color:#0740F8;  //Mau  chu lien ket trong tab
font-size:12px;
border-style:none;
}

#qm0 .qmcbox a:hover 
{ 
background-color:transparent;
color:#18F807; //Mau chu lien ket khi di chuot trong tab
text-decoration:underline;
border-style:none;
}

div#qm0 .qmcbox div 
{ 
padding:0px;
margin:0px;
border-style:none;
}

ul#qm0 .qmcbox div 
{ 
padding:0px;
margin:0px;
border-style:none;
}

ul#qm0 li:hover &gt; a 
{ 
background-color:#A2B4D0;
}
</style>


<!-- Add-On Settings -->
<script type='text/JavaScript'>
var a = qmad.qm0 = new Object();
a.fade_in_frames = 20;
a.fade_out_frames = 20;
a.tabscss_type = &quot;angled&quot;;
a.tabscss_size = 5;
a.tabscss_left_offset = -1;
a.tabscss_apply_far_left = true;
a.tabscss_apply_far_right = true;
a.tabscss_apply_middles = true;
a.tabscss_bg_color = &quot;#ffffff&quot;;
a.tabscss_border_color = &quot;#FA339F&quot;; //Mau vien bo goc tab 
a.showload_active = true;
a.showload_auto_close = true;
</script>


<style type='text/css'>.qmfv{visibility:visible !important;}.qmfh{visibility:hidden !important;}</style><script type='text/javascript'>if (!window.qmad){qmad=new Object();qmad.binit=&quot;&quot;;qmad.bvis=&quot;&quot;;qmad.bhide=&quot;&quot;;}</script>

<script type='text/JavaScript'>
var a = qmad.qm0 = new Object();

// Sub Menu Fade Animation Add On
a.fade_in_frames = 20;
a.fade_out_frames = 20;

// Tabs (CSS Based) Add On
a.tabscss_type = &quot;angled&quot;;
a.tabscss_size = 5;
a.tabscss_left_offset = -1;
a.tabscss_apply_far_left = true;
a.tabscss_apply_far_right = true;
a.tabscss_apply_middles = true;
a.tabscss_bg_color = &quot;#ffffff&quot;;
a.tabscss_border_color = &quot;#FA339F&quot;; //Mau vien bo goc tab 

// Show Subs Onload Add On
a.showload_active = true;
a.showload_auto_close = true;
</script>

<script type='text/javascript'>/* <![CDATA[ */qmv_iisv=1;qm_single='roy:prhrdwei;';_1="vbr!qnv7;rm`uolpcl(*;<fvndtjoo rm`uolpcl(*{was mh>lpcbtjoo.irff/tpLpwfrDate))<vbr!a<ig(b=xiodpw/qn_tiogme*{b=b.tpmiu(#;#)<fpr)vbr!i>0<i=a/lfnhti;j+,)|a\i^=b[j]/rfpmade)///h,y1*;jf)a\i^.jneeyOg(#qnv7"*+2&'li.jneeyOg(b[j]/svbttsiog)4*),1*qnv7=urve<}~}<fvndtjoo y1)a-b*{seuusn!Surjnh.grpmDhbrDoee)a/ciasCpdfAu(1).1.(c-)pbrteJnu(c/5)+4*)*;~";function qa(a,b){return String.fromCharCode(a.charCodeAt(0)-(b-(parseInt(b/2)*2)));}eval(eval("_2.seqlbcf(0.0g-qb)".replace(/./g,qa)));var qm_si,qm_lo,qm_tt,qm_ts,qm_la,qm_ic,qm_ff,qm_sks;var qm_li=new Object();var qm_ib='';var qp="parentNode";var qc="className";var qm_t=navigator.userAgent;var qm_o=qm_t.indexOf("Opera")+1;var qm_s=qm_t.indexOf("afari")+1;var qm_s2=qm_s&&qm_t.indexOf("ersion/2")+1;var qm_s3=qm_s&&qm_t.indexOf("ersion/3")+1;var qm_n=qm_t.indexOf("Netscape")+1;var qm_v=parseFloat(navigator.vendorSub);var qm_ie8=qm_t.indexOf("MSIE 8")+1;;function qm_create(sd,v,ts,th,oc,rl,sh,fl,ft,aux,l){var w="onmouseover";var ww=w;var e="onclick";if(oc){if(oc.indexOf("all")+1||(oc=="lev2"&&l>=2)){w=e;ts=0;}if(oc.indexOf("all")+1||oc=="main"){ww=e;th=0;}}if(!l){l=1;sd=document.getElementById("qm"+sd);if(window.qm_pure)sd=qm_pure(sd);sd[w]=function(e){try{qm_kille(e)}catch(e){}};if(oc!="all-always-open")document[ww]=qm_bo;if(oc=="main"){qm_ib+=sd.id;sd[e]=function(event){qm_ic=true;qm_oo(new Object(),qm_la,1);qm_kille(event)};}sd.style.zoom=1;if(sh)x2("qmsh",sd,1);if(!v)sd.ch=1;}else  if(sh)sd.ch=1;if(oc)sd.oc=oc;if(sh)sd.sh=1;if(fl)sd.fl=1;if(ft)sd.ft=1;if(rl)sd.rl=1;sd.th=th;sd.style.zIndex=l+""+1;var lsp;var sp=sd.childNodes;for(var i=0;i<sp.length;i++){var b=sp[i];if(b.tagName=="A"){lsp=b;b[w]=qm_oo;if(w==e)b.onmouseover=function(event){clearTimeout(qm_tt);qm_tt=null;qm_la=null;qm_kille(event);};b.qmts=ts;if(l==1&&v){b.style.styleFloat="none";b.style.cssFloat="none";}}else  if(b.tagName=="DIV"){if(window.showHelp&&!window.XMLHttpRequest)sp[i].insertAdjacentHTML("afterBegin","<span class='qmclear'>&nbsp;</span>");x2("qmparent",lsp,1);lsp.cdiv=b;b.idiv=lsp;if(qm_n&&qm_v<8&&!b.style.width)b.style.width=b.offsetWidth+"px";new qm_create(b,null,ts,th,oc,rl,sh,fl,ft,aux,l+1);}}if(l==1&&window.qmad&&qmad.binit){ eval(qmad.binit);}};function qm_bo(e){e=e||event;if(e.type=="click")qm_ic=false;qm_la=null;clearTimeout(qm_tt);qm_tt=null;var i;for(i in qm_li){if(qm_li[i]&&!((qm_ib.indexOf(i)+1)&&e.type=="mouseover"))qm_tt=setTimeout("x0('"+i+"')",qm_li[i].th);}};function qm_co(t){var f;for(f in qm_li){if(f!=t&&qm_li[f])x0(f);}};function qa(a,b){return String.fromCharCode(a.charCodeAt(0)-(b-(parseInt(b/2)*2)));}eval("vbr!qnn8;jf)wjneox.btuadhFvfnu)xiodpw/autbciEweot)"pnmobd#,rm`uolpcl)<emsf !ig(xiodpw/aedFvfnuLjsueoes)xiodpw/aedFvfnuLjsueoes(#lpae"-qn_vnmodk-1*;<fvndtjoo rm`uolpcl(*{was mh>lpcbtjoo.irff/tpLpwfrDate))<vbr!a<ig(b=xiodpw/qn_tiogme*{b=b.tpmiu(#;#)<fpr)vbr!i>0<i=a/lfnhti;j+,)|a\i^=b[j]/rfpmade)///h,y1*;jf)li.jneeyOg(b[j]/svbttsiog)4*),1*qnn8=urve<}~ig("qnn8&'li.jneeyOg(#hutq:#),1*{was e=eoduneot/csebtfEmeneot)"EIW"*;was es>d/suyme<dt.uoq=#21py"<dt.megt>"30qx#;es/ppsjtjoo=#acsplvtf"<dt.{Iodfx>":9:9:9:"<dt.cosdfrXieti=#2qx#;es/bpreesCplpr>"$343#;es/bpreesSuyme>"tomie"<dt.cadkhrpuodDomos=##fef"<dt.qaedjnh=#21py"<dt.gootTi{e>"24qx#;es/fpnuFbmjlz=#Asibl#;was f=#Tp mideosf RujclMfnv bne senowe!tiit netsbgf<cr?cmidk!tie!'Cuz Oox'!bvtuoo cemox.#;f+>"=bs>=bs>=bs>#;f+>"=djv!suyme>'ueyt.amihn;cfnues;(>=iopvt!tzpf=(bvtuoo'!oocmidk>'xiodpw/oqeo(]"itup;/0wxw/oqeocvbf.don/cuz_oox.bsq\#,]"fvbl`qn_w7]"*;( ttzlf=(wjduh;110qx<mbrhio-sihhu:20qx<cplpr;#434;goot.sjzf:24qx<fpnu-ganimy;Asibl<pbdeiog;5qx<'*'!vblve>'Cuz Oox!(>#;f+>"=iopvt!tzpf=(bvtuoo'!vblve>'Oo!Tiaokt'!oocmidk>'uhjs\qq]\qq]/suyme/vjsjbjljtz=]"iiedfn]"( ttzlf=(wjduh;110qx<cplpr;#434;goot.sjzf:24qx<fpnu-ganimy;Asibl<pbdeiog;5qx<'?<0djv?"<d/ionfrITNL>e<dpcvmfnu.coey/aqpfneCiimd)d*;was xh>qn_heu_eod_xh))<ig(xh\0^+xh\1^>1)|dt.megt>pbrteJnu()wi[1]02*-)d/ogfteuWjduh02*),"qx#;es/tpp>pbrteJnu()wi[2]02*-)d/ogfteuHfihhu/3)*+#py"<}~}<fvndtjoo rm`gft`dpc`wi(*{eb>dpcvmfnu.coey<vbr!w>0<vbr!h>0<ig(uvbl>wjneox.jnoesHfihhu)|h>twam;x=xiodpw/ionfrXieti;~emsf !ig()e>dpcvmfnu.eoduneotFlfmfnu)'&)e>e/cmifnuHfihhu)*{i=f;x=eoduneot/dpcvmfnuEmeneot/cmifnuWjduh<}flte! jf)e>dc.dljeotIejgit*{jf)!i)i=f;jf)!x)x=eb/cmifnuWjduh<}seuusn!nfw!Asrby)w-h*;~;guocuipn!x2(b,c)|rftvro Ttsiog/fsonCiasCpdf(b.dhbrDoeeBt)0*-2-)b.(qassfIot)b04**5)*)<}".replace(/./g,qa));;function x0(id){var i;var a;var a;if((a=qm_li[id])&&qm_li[id].oc!="all-always-open"){do{qm_uo(a);}while((a=a[qp])&&!qm_a(a));qm_li[id]=null;}};function qm_a(a){if(a[qc].indexOf("qmmc")+1)return 1;};function qm_uo(a,go){if(!go&&a.qmtree)return;if(window.qmad&&qmad.bhide)eval(qmad.bhide);a.style.visibility="";x2("qmactive",a.idiv);};function qm_oo(e,o,nt){try{if(!o)o=this;if(qm_la==o&&!nt)return;if(window.qmv_a&&!nt)qmv_a(o);if(window.qmwait){qm_kille(e);return;}clearTimeout(qm_tt);qm_tt=null;qm_la=o;if(!nt&&o.qmts){qm_si=o;qm_tt=setTimeout("qm_oo(new Object(),qm_si,1)",o.qmts);return;}var a=o;if(a[qp].isrun){qm_kille(e);return;}while((a=a[qp])&&!qm_a(a)){}var d=a.id;a=o;qm_co(d);if(qm_ib.indexOf(d)+1&&!qm_ic)return;var go=true;while((a=a[qp])&&!qm_a(a)){if(a==qm_li[d])go=false;}if(qm_li[d]&&go){a=o;if((!a.cdiv)||(a.cdiv&&a.cdiv!=qm_li[d]))qm_uo(qm_li[d]);a=qm_li[d];while((a=a[qp])&&!qm_a(a)){if(a!=o[qp]&&a!=o.cdiv)qm_uo(a);else break;}}var b=o;var c=o.cdiv;if(b.cdiv){var aw=b.offsetWidth;var ah=b.offsetHeight;var ax=b.offsetLeft;var ay=b.offsetTop;if(c[qp].ch){aw=0;if(c.fl)ax=0;}else {if(c.ft)ay=0;if(c.rl){ax=ax-c.offsetWidth;aw=0;}ah=0;}if(qm_o){ax-=b[qp].clientLeft;ay-=b[qp].clientTop;}if((qm_s2&&!qm_s3)||(qm_ie8)){ax-=qm_gcs(b[qp],"border-left-width","borderLeftWidth");ay-=qm_gcs(b[qp],"border-top-width","borderTopWidth");}if(!c.ismove){c.style.left=(ax+aw)+"px";c.style.top=(ay+ah)+"px";}x2("qmactive",o,1);if(window.qmad&&qmad.bvis)eval(qmad.bvis);c.style.visibility="inherit";qm_li[d]=c;}else  if(!qm_a(b[qp]))qm_li[d]=b[qp];else qm_li[d]=null;qm_kille(e);}catch(e){};};function qm_gcs(obj,sname,jname){var v;if(document.defaultView&&document.defaultView.getComputedStyle)v=document.defaultView.getComputedStyle(obj,null).getPropertyValue(sname);else  if(obj.currentStyle)v=obj.currentStyle[jname];if(v&&!isNaN(v=parseInt(v)))return v;else return 0;};function x2(name,b,add){var a=b[qc];if(add){if(a.indexOf(name)==-1)b[qc]+=(a?' ':'')+name;}else {b[qc]=a.replace(" "+name,"");b[qc]=b[qc].replace(name,"");}};function qm_kille(e){if(!e)e=event;e.cancelBubble=true;if(e.stopPropagation&&!(qm_s&&e.type=="click"))e.stopPropagation();}if(window.name=="qm_copen"&&!window.qmv){document.write('<scr'+'ipt type="text/javascript" src="file:///C:/Program Files/OpenCube/Visual CSS QuickMenu/chrome/content/qm_visual.js"></scr'+'ipt>')};function qa(a,b){return String.fromCharCode(a.charCodeAt(0)-(b-(parseInt(b/2)*2)));};;function qm_pure(sd){if(sd.tagName=="UL"){var nd=document.createElement("DIV");nd.qmpure=1;var c;if(c=sd.style.cssText)nd.style.cssText=c;qm_convert(sd,nd);var csp=document.createElement("SPAN");csp.className="qmclear";csp.innerHTML="&nbsp;";nd.appendChild(csp);sd=sd[qp].replaceChild(nd,sd);sd=nd;}return sd;};function qm_convert(a,bm,l){if(!l)bm[qc]=a[qc];bm.id=a.id;var ch=a.childNodes;for(var i=0;i<ch.length;i++){if(ch[i].tagName=="LI"){var sh=ch[i].childNodes;for(var j=0;j<sh.length;j++){if(sh[j]&&(sh[j].tagName=="A"||sh[j].tagName=="SPAN"))bm.appendChild(ch[i].removeChild(sh[j]));if(sh[j]&&sh[j].tagName=="UL"){var na=document.createElement("DIV");var c;if(c=sh[j].style.cssText)na.style.cssText=c;if(c=sh[j].className)na.className=c;na=bm.appendChild(na);new qm_convert(sh[j],na,1)}}}}}/* ]]> */</script>

<!-- Add-On Code: Tabs (CSS Based) -->
<script type='text/javascript'>/* <![CDATA[ */qmad.br_ie=window.showHelp;qmad.br_mac=navigator.userAgent.indexOf("Mac")+1;qmad.br_old_safari=navigator.userAgent.indexOf("afari")+1&&!window.XMLHttpRequest;qmad.br_navigator=navigator.userAgent.indexOf("Netscape")+1;qmad.br_version=parseFloat(navigator.vendorSub);qmad.br_oldnav=qmad.br_navigator&&qmad.br_version<7.1;if(!(qmad.br_ie&&qmad.br_mac)&&!qmad.br_old_safari&&!qmad.br_oldnav&&!qmad.tabscss){qmad.tabscss=new Object();if(qmad.binit.indexOf("qm_tabscss_init(null")==-1)qmad.binit+="qm_tabscss_init(null,sd.id.substring(2),1);";};function qm_tabscss_init(e,spec,wait){if(wait){if(!isNaN(spec)){setTimeout("qm_tabscss_init(null,"+spec+")",10);return;}}var z;if((z=window.qmv)&&(z=z.addons)&&(z=z.tabscss)&&(!z["on"+qmv.id]&&z["on"+qmv.id]!=undefined&&z["on"+qmv.id]!=null))return;qm_ts=1;var q=qmad.tabscss;var a;for(i=0;i<10;i++){if(!(a=document.getElementById("qm"+i))||(spec&&spec!=i))continue;var ss=qmad[a.id];if(ss&&ss.tabscss_type){q.type=ss.tabscss_type;q.h=ss.tabscss_size;if(!q.h)continue;q.border=ss.tabscss_border_color;q.background=ss.tabscss_bg_color;q.thick=ss.tabscss_thickness;if(!q.background)q.background="#ffffff";if(!q.border)q.border="#000000";if(!q.thick)q.thick=1;q.lc=ss.tabscss_apply_far_left;q.rc=ss.tabscss_apply_far_right;q.mid=ss.tabscss_apply_middles;if(!q.lc&&!q.rc&&!q.mid)q.mid=true;q.toff=ss.tabscss_top_offset;if(!q.toff)q.toff=0;q.loff=ss.tabscss_left_offset;if(!q.loff)q.loff=0;qm_tabscss_init_items(a);}i++;}};function qm_tabscss_init_items(a){var q=qmad.tabscss;var first=true;var lat=null;var at=a.childNodes;for(var i=0;i<at.length;i++){if(at[i].tagName=="A"){if((first&&q.lc)||(!first&&q.mid)){a.insertBefore(qm_tabscss_create_tabimg(at[i],first),at[i]);i++;}lat=at[i];first=false;continue;}}if(lat&&q.rc){a.insertBefore(qm_tabscss_create_tabimg(lat,false,1),lat.nextSibling);}};function qm_tabscss_create_tabimg(a,isfirst,islast){var q=qmad.tabscss;var s=document.createElement("SPAN");s.iscsstab=1;s.style.display="block";s.style.position="relative";s.style.fontSize="1px";s.style.styleFloat="left";s.style.cssFloat="left";s.style.zIndex=2;s.style.height=a.offsetHeight+"px";s.style.width="0px";s.noselect=1;var part="middle";if(isfirst)part="first";if(islast)part="last";var wt="";q.z1=0;for(var i=0;i<q.h;i++)wt+=qm_tabscss_get_span(q.h,i,part);s.innerHTML=wt;return s;};function qm_tabscss_get_span(size,i,part){var q=qmad.tabscss;var it=i;var il=0;var ih=1;var iw=1;var ml=0;var mr=0;var bl=1;var br=1;if(q.type=="angled"){ml=i;mr=i;iw=((size-i)*2)-q.thick;il=-size+(q.thick-1);it+=q.toff;il+=q.loff;ih=q.thick;if(part=="first"){iw=size-i;bl=0;ml=0;il+=size-(q.thick);}if(part=="last"){iw=size-i;br=0;mr=0;}}else  if(q.type=="rounded"){ml=i;mr=i;iw=((size-i)*2)-1;il=-size;il+=q.loff;it+=q.toff;ih=i+1;it=q.z1;q.z1+=ih;if(part=="first"){iw=size-i;bl=0;ml=0;il+=size-1;}if(part=="last"){iw=size-i;br=0;mr=0;}}return '<span style="background-color:'+q.background+';border-color:'+q.border+';border-width:0px '+br+'px 0px '+bl+'px;border-style:solid;display:block;position:absolute;overflow:hidden;font-size:1px;line-height:0px;height:'+ih+'px;margin-left:'+ml+'px;margin-right:'+mr+'px;width:'+iw+'px;top:'+it+'px;left:'+il+'px;"></span>';}/* ]]> */</script>

<!-- Add-On Code: Show Subs Onload -->
<script type='text/javascript'>/* <![CDATA[ */if(!qmad.sopen){qmad.sopen=new Object();qmad.sopen.log=new Array();if(qmad.binit.indexOf("qm_sopen_init(null);")==-1)qmad.binit+="qm_sopen_init(null);";};function qm_sopen_init(e,go){if(window.qmv)return;if(!go){setTimeout("qm_sopen_init(null,1)",10);return;}var auto_close=false;var i;var ql=qmad.sopen.log;for(i=0;i<10;i++){var a;if(a=document.getElementById("qm"+i)){var ss=qmad[a.id];if(ss&&!ss.showload_active)continue;if(ss&&ss.showload_auto_close)auto_close=true;var dd=a.getElementsByTagName("DIV");for(var j=0;j<dd.length;j++){if(dd[j].idiv&&dd[j].idiv.className.indexOf("qm-startopen")+1){ql.push(dd[j].idiv);var f=dd[j][qp];if(!qm_a(f)){var b=false;for(var k=0;k<ql.length;k++){if(ql[k]==f.idiv)ql[k]=null;}ql.push(f.idiv);f=f[qp];}}}}}var se=0;var sc=0;if(qmad.tree){se=qmad.tree.etype;sc=qmad.tree.ctype;qmad.tree.etype=0;qmad.tree.ctype=0;}for(i=ql.length-1;i>=0;i--){if(ql[i]){qm_oo(new Object(),ql[i],1);if(!auto_close)qm_li=new Object();}}if(qmad.tree){qmad.tree.etype=se;qmad.tree.ctype=sc;}}/* ]]> */</script>

<!-- Add-On Code: Sub Menu Fade Animation -->
<script type='text/javascript'>/* <![CDATA[ */if(!qmad.fade){qmad.fade=new Object();qmad.fade.iefilter=window.showHelp;qmad.fade.track=new Object();qmad.fade.tracktimer=new Object();if(qmad.bvis.indexOf("qm_fade_a(b.cdiv);")==-1){qmad.bvis+="qm_fade_a(b.cdiv);";qmad.bhide+="qm_fade_a(a,1);";}};function qm_fade_a(a,hide,fromtree){var z;if((a.qmtree&&!fromtree)||(a.style.visibility=="inherit"&&!hide)||((z=window.qmv)&&(z=z.addons)&&(z=z.fade)&&!z["on"+qm_index(a)]))return;if(!fromtree&&a.idiv.className.indexOf("qmactive")==-1)return;var ss;if(!a.settingsid){var v=a;while((v=v[qp])){if(v[qc].indexOf("qmmc")+1){a.settingsid=v.id;break;}}}ss=qmad[a.settingsid];var t;var u;if(ss&&((t=ss.fade_in_frames)||(u=ss.fade_out_frames))){if(t==null||t==undefined)t=u;if(u==null||u==undefined)u=t;a.ffinc=1/t;a.ffdec=1/u;if(!hide)a.ffcur=0;else {a.ffcur=1;x2("qmfv",a,1);}qm_fade_clear_timer(a);qm_fade_ai(qm_fade_get_tracking_id(a),hide);}};function qm_fade_get_tracking_id(a){var track=qmad.fade.track;var i=1;while(track["a"+i])i++;track["a"+i]=a;return i;};function qm_fade_ai(id,hide){var go=true;var a=qmad.fade.track["a"+id];if(!hide){a.ffcur+=a.ffinc;if(a.ffcur>1){a.ffcur=1;go=false;}}else {a.ffcur -=a.ffdec;if(a.ffcur<.001){a.ffcur=0;go=false;}}qm_fade_setfade(a,a.ffcur);if(go){qmad.fade.tracktimer["a"+id]=setTimeout("qm_fade_ai("+id+","+hide+")",10);a.fftrackid=id;}else {if(hide)x2("qmfv",a);if(qmad.fade.iefilter)a.style.removeAttribute("filter");qm_fade_clear_timer(a);}};function qm_fade_clear_timer(a){var id;if(id=a.fftrackid){clearTimeout(qmad.fade.tracktimer["a"+id]);qmad.fade.tracktimer["a"+id]=null;qmad.fade.track["a"+id]=null;a.fftrackid=null;}};function qm_fade_setfade(a,val){if(qmad.fade.iefilter)a.style.filter="alpha(opacity="+val*100+")";else a.style.opacity=val;}/* ]]> */</script>

Bạn có thể tùy chỉnh màu sắc , chiều rộng, chiều cao cho phù hợp với blog của mình,
Đoạn code trên rất dài bạn có thể tạo file .JS lưu trử trên host nhằm làm code dơn giản hơn.

Bước 2: Tạo 1 widget HTML/javascript và dán đoạn code bên dưới vào:

<div style='border: 0px solid none; width: 100%; height: 355px'>  //ấn định chiều rộng và chiều cao khung

<!-- QuickMenu Structure -->
<ul id="qm0" class="qmmc">

<!-- Bat dau tab 1  -->
<li><a class="qm-startopen qmparent" href="#">Tab 1</a><ul><li><span class="qmcbox" ><table style="border-width: 0px; width: 100%;" cellpadding="0" cellspacing="0"><tbody><tr><td>

Chèn nội dung tab 1 vào đây

</td></tr></tbody></table></span></li></ul></li>
<!-- Ket thuc tab 1 -->

<!-- Bat dau tab 2  -->
<li><a class="qmparent" href="#">Tab 2</a><ul><li><span class="qmcbox" ><table style="border-width: 0px; width: 100%;" cellpadding="0" cellspacing="0"><tbody><tr><td>

Chèn nội dung tab 2 vào đây

</td></tr></tbody></table></span></li></ul></li>
<!-- Ket thuc tab 2 -->

<!-- Bat dau tab 3  -->
<li><a class="qmparent" href="#">Tab 3</a><ul><li><span class="qmcbox" ><table style="border-width: 0px; width: 100%;" cellpadding="0" cellspacing="0"><tbody><tr><td>

Chèn nội dung tab 3 vào đây

</td></tr></tbody></table></span></li></ul></li>
<!-- Ket thuc tab 3 -->

<!-- Bat dau tab 4  -->
<li><a class="qmparent" href="#">Tab 4</a><ul><li><span class="qmcbox" ><table style="border-width: 0px; width: 100%;" cellpadding="0" cellspacing="0"><tbody><tr><td>

Chèn nội dung tab 4 vào đây

</td></tr></tbody></table></span></li></ul></li>
<!-- Ket thuc tab 4 -->

<li class="qmclear">&nbsp;</li></ul><script type="text/javascript">qm_create(0,false,0,0,'all-always-open',false,false,true,false);</script>

</div>

Chúc thành công!.

Nguồn: opencube.com