Widget bảng nội dung 5 tab cho Blogger

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.

<></>

<!-- widget by Bloganol.blogspot.com --> <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> <!-- CSS Begin //--> <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> <!-- CSS End //--> <!-- Widget Code Ends Here --> <!-- widget by Bloganol.blogspot.com --> <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" ><!-- Main Headlines Begin //--> <table border="0" cellspacing="0" cellpadding="0" width="380" height="5"> <tbody> <tr> <td height="5"></td></tr></tbody></table> &nbsp;&nbsp; <font color="#797979" class="f10" > <!-- wmlheadline begin --> <!-- TDate Begin --> <!-- Date Begin --> Browse Items</font> <!-- Date End --> <!-- TDate End --> <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> &nbsp; </font></td></tr> <tr> <td height="4"></td></tr></tbody></table></div><!-- Main Headlines End //--></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" ><!-- News Begin //--> <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> &nbsp; </font></td></tr> <tr> <td height="4"></td></tr></tbody></table><!-- News End //--></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" ><!-- Business Begin //--> <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> &nbsp; </font></td></tr> <tr> <td height="4"></td></tr></tbody></table><!-- Business End //--></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" ><!-- Movies Begin //--> <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> &nbsp; </font></td></tr> <tr> <td height="4"></td></tr></tbody></table><!-- Movies End //--></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" ><!-- Sports Begin //--> <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> &nbsp; </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/

Share on Facebook Share on Twitter Share on Google Plus

About Chinhnd

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.