1. Tạo tab nội dung cho blogspot
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://traidatmui-tips.googlecode.com/files/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;
2. 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
Nguồn : http://htentertainment.blogspot.com/2011/10/tao-tab-noi-dung-cho-
blogspot.html
Posted in: Thủ thuật blog
![Tạo tab nội dung cho blogspot
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://traidatmui-tips.googlecode.com/files/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;](https://image.slidesharecdn.com/totabnidungchoblogspot-121220080000-phpapp02/85/T-o-tab-n-i-dung-cho-blogspot-1-320.jpg?cb=1355992602)
