Tạo Widget dạng bảng nội dung 5 tab cho Blog

Tuesday, 23 February 2010

Trong bài viết này phattrienso xin hướng dẫn các bạn cách tạo một widget có 5 tab nội dung giống như hình, hoặc giống như tiện ích tab Admin ở phía trên cùng bên phải của blog phattrienso này. Tiện ích này giúp cho blog của bạn nhìn thoáng hơn và trông pro hơn, ngoài ra bằng cảm tính phattrienso thấy rằng nếu để 5 nội dung riêng biệt ra từng widget thì thời gian load blog của phattrienso chậm hơn khi tích hợp chúng vào chung một bảng 5 tab này.
DEMO:

Để cài đặt widget này bạn đăng nhập vào Blogger ; thêm một Page Element mới dạng Html/Javascript (như hình vẽ);

và dán dòng code đưới đây vào.
<></>

<script language="JavaScript" type="text/javascript"> function st2(t){ for(i=1;i<=5;i++){ ts=document.getElementById('tt'+i); tr = document.getElementById('dd'+i); ta = document.getElementById('aa'+i); if(t==i){ if(t==1) ts.className="Tab1"; if(t==2) ts.className="Tab2"; if(t==3) ts.className="Tab3"; if(t==4) ts.className="Tab4"; if(t==5) ts.className="Tab5"; ta.className="srchlinksel2"; ts.style.borderBottom="1px solid #FFFFFF"; tr.style["display"]="block"; tr.style["visibility"]="visible"; } else{ ts.className="tb2"; ta.className="srchlink2"; ts.style.borderBottom="1px solid #B5D6EF"; tr.style["display"]="none"; tr.style["visibility"]="hidden"; } } } </script>  <style type="text/css">.f10 { FONT-SIZE: 10px; FONT-FAMILY: arial } .f11 { FONT-SIZE: 11px; FONT-FAMILY: arial } .f12 { FONT-SIZE: 12px; FONT-FAMILY: arial } .f12r { FONT-SIZE: 12px; LINE-HEIGHT: 13px; FONT-FAMILY: arial } .f12n { FONT-SIZE: 12px; LINE-HEIGHT: 1.3em; FONT-FAMILY: arial } .ft11a { FONT-SIZE: 11px; LINE-HEIGHT: 13px; FONT-FAMILY: Tahoma } .fv9 { FONT-SIZE: 9px; FONT-FAMILY: verdana } .fv10 { FONT-SIZE: 10px; FONT-FAMILY: verdana } .ft11 { FONT-SIZE: 11px; LINE-HEIGHT: 14px; FONT-FAMILY: Tahoma } .fmicro9 { FONT-SIZE: 9px; FONT-FAMILY: Microsoft Sans Serif } A.srchlink:link { COLOR: #2864b4; TEXT-DECORATION: none } A.srchlink:visited { } A.srchlinksel:link { CURSOR: text; COLOR: #000000; TEXT-DECORATION: none } A.srchlinksel:visited { CURSOR: text; COLOR: #000000; TEXT-DECORATION: none } A.srchlink2:link { COLOR: #2864b4; TEXT-DECORATION: underline } A.srchlink2:visited { COLOR: #2864b4; TEXT-DECORATION: underline } A.srchlinksel2:link { CURSOR: text; COLOR: #000000; TEXT-DECORATION: none } A.srchlinksel2:visited { CURSOR: text; COLOR: #000000; TEXT-DECORATION: none } .tb2 { FILTER: progid:DXImageTransform.Microsoft.Gradient (GradientType:0,StartColorStr:'#EEF5FB',EndColorStr:'#D9E9F6');BACKGROUND-COLOR: #d9e9f6 } .tbmain2 { BACKGROUND-COLOR: #ffffff } .lfttbl { FILTER: progid:DXImageTransform.Microsoft.Gradient (GradientType:0,StartColorStr:'#DEFFC6',EndColorStr:'#B7E4A2'); BACKGROUND-COLOR: #deffc6 } .rttbl { BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef 1px solid; FILTER: progid:DXImageTransform.Microsoft.Gradient (GradientType:0,StartColorStr:'#EEF5FB',EndColorStr:'#DEEFF7'); BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid; BACKGROUND-COLOR: #eef5fb } .rttblx { BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef 1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid; BACKGROUND-COLOR: #ffffff } .rt_tbl { BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: 0px; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid; BACKGROUND-COLOR: #b0dafd } .toptbl { FILTER: progid:DXImageTransform.Microsoft.Gradient (GradientType:0,StartColorStr:'#4A84AD',EndColorStr:'#00426B'); BACKGROUND-COLOR: #00426b } .srchtbl { FILTER: progid:DXImageTransform.Microsoft.Gradient (GradientType:0,StartColorStr:'#FFFFFF',EndColorStr:'#A5DEDE'); BACKGROUND-COLOR: #a5dede } .Tab1 { FILTER: progid:DXImageTransform.Microsoft.Gradient (GradientType:0,StartColorStr:'#FEDFB3',EndColorStr:'#FFFFFF'); BACKGROUND-COLOR: #fedfb3 } .Tab2 { FILTER: progid:DXImageTransform.Microsoft.Gradient (GradientType:0,StartColorStr:'#B39DFE',EndColorStr:'#FFFFFF'); BACKGROUND-COLOR: #b39dfe } .Tab3 { FILTER: progid:DXImageTransform.Microsoft.Gradient (GradientType:0,StartColorStr:'#F6FE9D',EndColorStr:'#FFFFFF'); BACKGROUND-COLOR: #f6fe9d } .Tab4 { FILTER: progid:DXImageTransform.Microsoft.Gradient (GradientType:0,StartColorStr:'#FEAF9D',EndColorStr:'#FFFFFF'); BACKGROUND-COLOR: #feaf9d } .Tab5 { FILTER: progid:DXImageTransform.Microsoft.Gradient (GradientType:0,StartColorStr:'#9DFEA5',EndColorStr:'#FFFFFF'); BACKGROUND-COLOR: #9dfea5 } A { TEXT-DECORATION: none } A:hover { TEXT-DECORATION: underline} </style>    <table border="0" cellspacing="0" cellpadding="0" width="380"> <tbody> <tr> <td align="middle" onclick="st2('1')" height="22" id="tt1" style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef 1px solid; BORDER-LEFT: #b5d6ef 1px solid" width="70" class="Tab1"><a id="aa1" class="srchlinksel2" href="javascript:undefined"><font class="f12"><b>TAB1</b></font></a></td> <td style="BORDER-BOTTOM: #b5d6ef 1px solid" width="2"> <table border="0" cellspacing="0" cellpadding="0" width="2"> <tbody> <tr> <td width="2"></td></tr></tbody></table></td> <td align="middle" onclick="st2('2')" height="22" id="tt2" style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef 1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid" width="47" class="tb2"><a id="aa2" class="srchlink2" href="javascript:undefined"><font class="f12"><b>TAB2</b></font></a></td> <td style="BORDER-BOTTOM: #b5d6ef 1px solid" width="2"> <table border="0" cellspacing="0" cellpadding="0" width="2"> <tbody> <tr> <td width="2"></td></tr></tbody></table></td> <td align="middle" onclick="st2('3')" height="22" id="tt3" style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef 1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid" width="62" class="tb2"><a id="aa3" class="srchlink2" href="javascript:undefined"><font class="f12"><b>Tab3</b></font></a></td> <td style="BORDER-BOTTOM: #b5d6ef 1px solid" width="2"> <table border="0" cellspacing="0" cellpadding="0" width="2"> <tbody> <tr> <td width="2"></td></tr></tbody></table></td> <td align="middle" onclick="st2('4')" height="22" id="tt4" style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef 1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid" width="48" class="tb2"><a id="aa4" class="srchlink2" href="javascript:undefined"><font class="f12"><b>Tab4</b></font></a></td> <td style="BORDER-BOTTOM: #b5d6ef 1px solid" width="2"> <table border="0" cellspacing="0" cellpadding="0" width="2"> <tbody> <tr> <td width="2"></td></tr></tbody></table></td> <td align="middle" onclick="st2('5')" height="22" id="tt5" style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef 1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid" width="52" class="tb2"><a id="aa5" class="srchlink2" href="javascript:undefined"><font class="f12"><b>Tab5</b></font></a></td></tr> <tr> <td colspan="9"> <div style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: 0px; BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px; BORDER-BOTTOM: 0px" > <table border="0" cellspacing="0" cellpadding="0" width="380" height="5"> <tbody> <tr> <td height="5"></td></tr></tbody></table>    <font color="#797979" class="f10" >    Browse Items</font>   <div id="dd1" style="BORDER-RIGHT: #b5d6ef 0px solid; BORDER-TOP: 0px; DISPLAY: block; VISIBILITY: visible; BORDER-LEFT: #b5d6ef 0px solid; WIDTH: 380px; BORDER-BOTTOM: #b5d6ef 1px solid" > <table border="0" cellspacing="0" cellpadding="0" width="380"> <tbody> <tr> <td width="14"></td> <td valign="top"><font color="#16387c" class="f12n">Tab 1 Content</font></td> </tr> <tr> <td colspan="2" align="right"><font class="f10"><b> Widget by <a href="http://bloganol.blogspot.com/2008/03/5-tabbed-content-widget-for-blogger.html" target="_blank">Bloganol</a></b>   </font></td></tr> <tr> <td height="4"></td></tr></tbody></table></div></div> <div id="dd2" style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden; BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px; BORDER-BOTTOM: #b5d6ef 1px solid" > <table border="0" cellspacing="0" cellpadding="0" width="380"> <tbody> <tr> <td width="14"></td> <td valign="top"><font color="#16387c" class="f12n">Tab 2 Content</font></td></tr> <tr> <td colspan="2" align="right"><font class="f10"><b> Widget by <a href="http://bloganol.blogspot.com/2008/03/5-tabbed-content-widget-for-blogger.html" target="_blank">Bloganol</a></b>   </font></td></tr> <tr> <td height="4"></td></tr></tbody></table></div> <div id="dd3" style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden; BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px; BORDER-BOTTOM: #b5d6ef 1px solid" > <table border="0" cellspacing="0" cellpadding="0" width="380"> <tbody> <tr> <td width="14"></td> <td valign="top"><font color="#16387c" class="f12n">Tab 3 Content</font></td></tr> <tr> <td colspan="2" align="right"><font class="f10"><b> Widget by <a href="http://bloganol.blogspot.com/2008/03/5-tabbed-content-widget-for-blogger.html" target="_blank">Bloganol</a></b>   </font></td></tr> <tr> <td height="4"></td></tr></tbody></table></div> <div id="dd4" style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden; BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px; BORDER-BOTTOM: #b5d6ef 1px solid" > <table border="0" cellspacing="0" cellpadding="0" width="380"> <tbody> <tr> <td width="14"></td> <td valign="top"><font color="#16387c" class="f12n">Tab 4 Content</font></td> </tr> <tr> <td colspan="2" align="right"><font class="f10"><b> Widget by <a href="http://bloganol.blogspot.com/2008/03/5-tabbed-content-widget-for-blogger.html" target="_blank">Bloganol</a></b>   </font></td></tr> <tr> <td height="4"></td></tr></tbody></table></div> <div id="dd5" style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden; BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px; BORDER-BOTTOM: #b5d6ef 1px solid" > <table border="0" cellspacing="0" cellpadding="0" width="380"> <tbody> <tr> <td width="14"></td> <td valign="top"><font color="#16387c" class="f12n">Tab 5 Content</font></td></tr> <tr> <td colspan="2" align="right"><font class="f10"><b> Widget by <a href="http://bloganol.blogspot.com/2008/03/5-tabbed-content-widget-for-blogger.html" target="_blank">Bloganol</a></b>   </font></td></tr> <tr> <td height="4"></td></tr></tbody></table> <!-- Widget Code Ends Here –>

Trong dòng mã trên, bạn thấy: Chữ màu đỏ ví dụ như: Tab1, Tab2.. đó là tiêu đề của từng tab. Chữ màu xanh như tab1 content….là các code của từng nội dung ứng với từng tab. Bạn hãy thay thế các code đó để có được một widget hữu ích và làm cho blog của mình trong gọn gàng hơn nhé.

phattrienso dịch và ứng dụng từ nguồn: http://www.bloganol.com/