Tạo menu kiểu tab view trình chiếu slide

(Huynh Nhat Ha's Blog) -- Trên trang nhà của Elliott Wave Vietnam, bạn có thể thấy thanh menu dạng tab view trình chiếu slide theo các số 1, 2, 3, 4… rất thú vị. Kiểu menu này giúp cho blog của bạn trở nên sống động hơn. Có một số bạn đọc yêu cầu tôi hướng dẫn thủ thuật này. Do thời gian qua bận rộn nên chưa thể đáp ứng yêu cầu đó. Nay tôi sẽ tranh thủ hướng dẫn thủ thuật này cho bạn đọc tham khảo.


Bước 1: Đăng nhập vào Blogger. Vào Bố cục (Layout) – Chỉnh sửa HTML (Edit HTML). Chọn Tải xuống mẫu đầy đủ (Download Full template) để back up Template của bạn trước khi thực hiện thao tác chỉnh sửa.
Bước 2: Copy đoạn mã dưới đây rồi dán nó trước đoạn mã ]]></b:skin>.

.indentmenu{
font: bold 11px Arial;
width: 100%; /*leave this value as is in most cases*/

}

.indentmenu ul{
margin: 2px;
padding: 0;
float: left;
/* width: 80%; width of menu*/
background: transparent;
}

.indentmenu ul li{
display: inline;
}

.indentmenu ul li a{
float: left;
margin: 2px;
color: #000; /*text color*/
padding: 5px 11px;
text-decoration: none;
border: 1px solid #ccc;
}

.indentmenu ul li a:hover{
background:#ddd;
}

.indentmenu ul li a:visited{
color: white;
}

.indentmenu ul li a.selected{
color: white !important;
padding-top: 6px; /*shift text down 1px*/
padding-bottom: 4px;
border: 1px solid #000000;
background:#000000;
}

.tabcontentstyle{ /*style of tab content container*/
border: 1px solid gray;
width: 450px;
margin-bottom: 1em;
padding: 10px;
}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block !important;
}
}