Hôm nay:

BÀI VIẾT- BÀI LUẬN- GHI CHÚ

Xem tất cả Các bài luận- viết »

ĐỜI SỐNG CƠ ĐỐC

Xem tất cả Đời sống Cơ Đốc»

CHUYÊN MỤC HỎI ĐÁP

Xem tất cả Câu hỏi đáp »

.
Hội Thánh Kiền Bái » » Tạo Tab Nội Dung Cho Blogspot

Tạo Tab Nội Dung Cho Blogspot

Đăng bởi Bùi Qúy Đôn | Thứ Sáu, 4 tháng 10, 2013

In bài
Cỡ chữ: +A =A -A






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://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.

Tạo Tab Nội Dung Cho Blogspot, Tạo Tab Nội Dung Cho Blogspot, Tạo Tab Nội Dung Cho Blogspot Tạo Tab Nội Dung Cho Blogspot Tạo Tab Nội Dung Cho BlogspotTạo Tab Nội Dung Cho Blogspot  Tạo Tab Nội Dung Cho Blogspot  Tạo Tab Nội Dung Cho Blogspot



Nguồn: TRAIDATMUI


Mọi đóng góp về bài vở xin liên hệ tới chúng tôi qua email: luaphucamhp@yahoo.com


Trang Hoithanhkienbai Blog: Một trang chia sẻ cho bạn về niềm tin nơi Thượng Đế trong Đức Chúa Giê-xu Christ: Tin tức, dưỡng linh, đời sống, hôn nhân, vvv..


Share this article :
Blogger Comments ( 0 )
Facebook Comments( )
Google Comments

0 Ý Kiến- Bình Luận- Nhận Xét :

Đăng nhận xét



NỘI QUY ĐĂNG NHẬN XÉT
» Hội Thánh Kiền Bái Blog cảm ơn bạn đã giành chút thời gian để đọc bài viết.
» Nếu có thắc mắc hay góp ý, bạn hãy để lại một nhận xét. Nhớ ĐỪNG ẨN DANH vì đây là điều TỐT để gây dựng Cơ Đốc.
» Nếu thấy bài viết hay hãy chia sẻ với những người thân, bạn bè biết.
» Vui lòng đăng những nhận xét, bình luận phải lịch sự và gõ tiếng Việt có dấu .
Những lời comment thiện ý của bạn sẽ giúp trang Hoithanhkienbai Blog ngày một phát triển! Thank you!!!

SỨC KHỎE- ÐỜI SỐNG

Xem tất cả Sức khoẻ đời sống »

SẮC ÐẸP

Xem tất cả Sắc đẹp »

GIA CHÁNH

Xem tất cả Gia chánh »

MẸ & BÉ

Xem tất cả Mẹ và bé »