Tạo tab nội dung cho blog

[Cập nhật ngày sửa lổi 20/11].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>.

<!-- Tab noi dung --> <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>ul{left:auto;}/*[END-QCC]*/ /*[START-QCC0]*/#qm0 ul {top:100%;}#qm0 ul li:hover>ul{top:0px;left:100%;}/*[END-QCC0]*/ #qm0 { margin:0px; border-width:0px 0px 0px 1px; border-style:solid; border-color:#FA339F; <!-- Mau vien tab ben trai --> } #qm0 a { width:50px; padding:4px 40px 4px 10px; background-color:#FEC666; <!-- Mau nen tab chua duoc chon --> color:#00FBF8; <!-- Mau chu tren tab khi 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; <!-- Mau vien tab tren --> } #qm0 a:hover { color:#FE3468; <!-- Mau chu tren tab khi di chuot --> text-decoration:underline; } #qm0 li:hover>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 mac dinh --> } #qm0 div, #qm0 ul { padding:20px 15px 15px 15px; margin:-1px 0px 0px -1px; background-color:#F8F8F8; border-width:1px; border-style:solid; border-color:#FA339F; <!-- Mau vien tab noi dung --> } #qm0 div a:hover { background-color:#A2B4D0; color:#222222; border-color:#2A3B54; } #qm0 ul li:hover>a { background-color:#A2B4D0; color:#222222; border-color:#2A3B54; } #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:#2A3B54; } #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:505px; <!-- Chieu rong tab --> height:100%; color:#464646; <!-- mau van ban trong tab --> font-family:arial; font-size:12px; <!-- size van ban trong tab --> } #qm0 .qmcbox a { padding:0px; margin:0px; background-color:transparent; color:#0740F8; <!-- Mau van ban lien ket trong tab noi dung --> 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 > a { background-color:#A2B4D0; } </style> <!--[START-QZ]--><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="";qmad.bvis="";qmad.bhide="";}</script><!--[END-QZ]--> <!-- 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 = "angled"; 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 = "#ffffff"; a.tabscss_border_color = "#FA339F"; <!-- Mau vien bo goc --> a.showload_active = true; a.showload_auto_close = true; </script> <script src='http://dodat79.googlecode.com/files/Tab_noi_dung_opencube_com.js' type='text/javascript'/> <!-- Tab noi dung -->

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,

Bạn nên tải file .JS lưu trử trên host để tránh một ngày nào đó file nay không hoạt động.

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; height: 420px; width: 100%;"> <!-- Noi dung tab 1 --> <ul id="qm0" class="qmmc"> <li><a class="qm-startopen qmparent" href="javascript:void(0)">Support</a> <ul> <li> <span class="qmcbox" > <table style="border-width: 0px; width: 100%;" cellpadding="0" cellspacing="0"><tbody> Nội dung tab 1 </tbody> </table> </span> </li> </ul> </li> <!-- Noi dung tab 1 --> <!-- Noi dung tab 2 --> <li><a class="qmparent" href="javascript:void(0)">Site Map</a> <ul> <li> <span class="qmcbox" > <table style="border-width: 0px; width: 100%;" cellpadding="0" cellspacing="0"><tbody> Noi dung tab 2 </tbody> </table> </span> </li> </ul> </li> <!-- Noi dung tab 2 --> <!-- Noi dung tab 3 --> <li><a class="qmparent" href="javascript:void(0)">sssSite Map</a> <ul> <li> <span class="qmcbox" > <table style="border-width: 0px; width: 100%;" cellpadding="0" cellspacing="0"><tbody> Noi dung tab 3 </tbody> </table> </span> </li> </ul> </li> <!-- Noi dung tab 3 --> <!-- Noi dung tab 4 --> <li><a class="qmparent" href="javascript:void(0)">Add-ons</a> <ul> <li><span class="qmcbox" ><table style="border-width: 0px; width: 100%;" cellpadding="0" cellspacing="0"><tbody> Noi dung tab 4 </tbody></table> </span></li> </ul> </li> <li class="qmclear"> </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