"Tạo tab nội dung cho blogspot"

(Traidatmui.com) – Hôm nay mình xin chia sẽ cùng các bạn một thủ thuật liên quan đến Tab nội dung. 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. Tab này sẽ cho phép bạn xem nhiều nội dung bên trong bằng cách click vào các thư mục mà bạn muốn xem, các nội dung chỉ hiển thị theo tùy chọn của bạn. Khi một nội dung này hiển thị thì nội dung khác sẽ được ẩn đi. Bạn có thể xem demo bên dưới sẽ hiểu rỏ hơn.

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='http://data-traidatmui.appspot.com/scripts/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>

Chỉnh sửa code:
- Bạn hãy chú ý các dòng text màu đỏ trong code, chúng phải là giống nhau tương ứng ở từng nội dung.
- Bạn thay các text màu xanh lá đậm trong code thành tên thư mục mà bạn muốn tạo.
- Và những dòng màu xanh dương đậm chính là phần chứa nội dung tương ứng với từng thư mục.

Ở đây mình chỉ tạo tab có 3 nội dung cơ bản, bạn có thể tạo thêm nhiều nội dung khác theo ý của mình.

Chúc bạn thành công

Xem khác cùng chủ đề

7 nhận xét | Viết lời bình

9/22/2011 10:10:00 SA Trả lời

nhiều bài trả có link xem demo gì cả, đừng nói là click vào cái Bidvertiser đấy nhá

5/31/2012 07:43:00 SA Trả lời

Để thử coi sao!

Nặc danh
3/23/2013 05:39:00 SA Trả lời

Bạn cho mình hỏi muốn bỏ đi cái border của khung nội dung tab thì làm cách nào

Admin
3/23/2013 06:48:00 SA Trả lời

Trong code ở bước 5 đều có thuộc tính border: 2px solid #ccc; bạn chỉ cần xóa nó đi là được.

3/24/2014 11:45:00 CH Trả lời

aD CHO HỎI TÁP NỘI DUNG NÀY LÀ KHI MÌNH POST BÀI ĐÚNG KHÔNG, HAY LÀ 1 WIDGET

Admin
3/25/2014 04:09:00 SA Trả lời

Nội dung là bạn đặt vào các phần Nội dung 1, Nội dung 2...

4/11/2016 09:24:00 CH Trả lời

Hi bạn,

Mình làm theo hướng dẫn nhưng click vào các tab nội dung 2 và 3 không tác dụng.
Nếu sửa code xóa "display:none;" thì nó lại hiển thị ra thành 1 hàng nhưng click được.
Xem lại giúp mình với :
Link test thử : http://game4csm.blogspot.com/p/blog-page_10.html#noidung1

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang