» » Cách tạo tab nội dung cho blogspot

Cách tạo tab nội dung cho blogspot


Với thủ thuật này thì bạn có thể lưu nhiều nội dung bên trong nhưng không làm tốn không gian nhiều trên blog.Các bạn có thể xem demo tại đây


1. Đầu tiên đăng nhập vào blog của bạn

2. Vào bố cục(thiết kế) và chọn chỉnh sử HTML

3. Thêm code sau vào bên dưới thẻ <head>
<script language='javascript' src='https://dl.dropboxusercontent.com/u/95745796/dom_tab.js' type='text/javascript'/>
4. Tiếp đến bạn thêm code bên dưới vào trước thẻ ]]></b:skin>
div.domtab {
padding:0;
width:500px; /*độ rộng của tab*/
font-size:90%; /*cỡ chữ của tab*/
}
ul.domtabs
{
float:left;
width:100%;
margin:0;
list-style:none;
padding-left: 0;
}
ul.domtabs li
{
float:left;
padding:0px 1px 0px 0px;
text-align: center;
}
ul.domtabs a{
padding:5px;
display:block;
background:#999; /*màu nền của thư mục trong tab*/
color: #fff; /*màu text của thư mục trong tab*/
height:1em;
font-weight:bold;
text-decoration:none;
}

ul.domtabs a:hover{
color: #0000ff; /*màu text của thư mục trong tab khi rê chuột*/
background:#ccc; /*màu nền của thư mục trong tab khi rê chuột*/
}
div.domtab div {
clear:both;
width:auto;
padding:0 2px;
margin: 0 0 1em 0;
}

div.domtab div {display: block; clear: both;}
Bạn dựa vào các dòng chữ hướng dẫn (dòng màu xanh) và chỉnh sửa lại cho phù hợp.

5. Đến đây bạn save template lại và trở về phần tử trang, thêm 1 HTML/Javascript và thêm vào code bên dưới
<div class='domtab'><ul class='domtabs'>
<li><a href='#noidung1'>Nội dung 1</a></li>
<li><a href='#noidung2'>Nội dung 2</a></li>
<li><a href='#noidung3'>Nội dung3</a></li>

</ul>
<div style='padding:3px; border: 2px solid #ccc;'>
<a id='noidung1' name='noidung1'></a>
<div class='tab_content_1'>
Nội dung 1
</div></div>

<div style='padding:3px;display:none;border: 2px solid #ccc;'>
<a id='noidung2' name='noidung2'></a>
<div class='tab_content_2'>
Nội dung 2
</div></div>

<div style='padding:3px;display:none;border: 2px solid #ccc;'>
<a id='noidung3' name='noidung3'></a>
<div class='tab_content_3'>
Nội dung 3
</div></div>

</div>

Nguồn: Sưu tầm

Friends list