Hướng dẫn cách 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;
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.
Share this post
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

2 nhận xét

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
© 2012 CAO HOÀI TRUNG - Chia sẻ kiến thức Internet Marketing Online
Designed by CAO HOÀI TRUNG | Học Marketing online miễn phí | Học ban hang online miễn phí | Nội dung học seo web tại TPHCM | Bán Tỏi đen cô đơn lý sơn
Posts RSSComments RSS
Back to top