slider

Tìm Kiếm từ khóa với Google

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

Hôm nay mình xin chia sẽ cùng các bạn một thủ thuật blogspot liên quan đến Tab nội dung do traidatmui.com chia sẻ 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>



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

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

Bạn đang xem Cách tạo tab nội dung cho blogspot tại Blog Bít Tuốt Đừng quên nhấn LIKE Chia Sẻ để ủng hộ Bít Tuốt Blog nếu bài viết có ích !
Like Bít Tuốt Blog trên Facebook để ủng hộ mình nhé

«
Next
Newer Post
»
Previous
Older Post

No comments:

Leave a Reply