"Tạo 3D Tab chứa nhiều tiện ích cho Blogspot"

(Traidatmui.com) - Khi trên blog bạn có nhiều tiện ích thì câu hỏi cần đặt ra là làm sao để có thể thêm nhiều tiện ích mà vẫn tiết kiệm được không gian trên blog? Điều này rất cần thiết vì nó sẽ ảnh hưởng đến tốc độ load trang của bạn. Và một trong những cách tiết kiệm đó, bạn có thể làm theo hướng dẫn bên dưới. Thủ thuật này mình sẽ giới thiệu đến các bạn một thủ thuật tạo Tabs với nhiều tiện ích, cùng với hiệu ứng bằng JQuery. Bạn có thể xem LIVE DEMO bên dưới để thấy rỏ hơn.

Hình ảnh minh họa
» Bắt đầu thủ thuật

1. Đăng nhập tài khoản Blogger
2. Vào phần thiết kế (hay bố cục)
3. Chọn chỉnh sửa HTML
4. Chèn code CSS bên dưới vào trước thẻ ]]></b:skin>
.pageTabs {
margin: 10px auto 0;
font-size:11px;}
ul.tabs {
margin: 0;
padding: 0 ;
float: left;
list-style: none;
height: 32px;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px;
line-height: 31px;
border: 1px solid #999;
border-left: none;
margin-bottom: -1px;
background: #e0e0e0; /* màu nền của các Tabs*/
overflow: hidden;
position: relative;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff;
outline: none;
}
ul.tabs li a:hover {
background: #eff0f1;
}
html ul.tabs li.active, html ul.tabs li.active a:hover {
background: #eff0f1;
border-bottom: 1px solid #eff0f1;
}
.tab_container {
border: 1px solid #999;
border-top: none;
clear: both;
float: left;
width: 100%; /* độ rộng của phần nội dung các Tabs*/
color:#000;
background: #eff0f1; /* màu nền của phần nội dung các Tabs*/
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
.tab_content {
padding: 5px;
font-size: 1.2em;
}
.tab_content img {
float: left;
margin: 10px 20px 20px 0;
border: 1px solid #ddd;
padding: 5px;
}
.tab_content p{
padding-bottom:10px;
}

5. Chèn tiếp code bên dưới ngay sau thẻ <head>
<script src="http://data-traidatmui.appspot.com/scripts/Jquery1.3.2.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){$(".tab_content").hide();$("ul.tabs li:first").addClass("active").show();$(".tab_content:first").show();$("ul.tabs li").click(function(){$("ul.tabs li").removeClass("active");$(this).addClass("active");$(".tab_content").hide();var activeTab=$(this).find("a").attr("href");$(activeTab).fadeIn(1000)})});
</script>

6. Save template lại
7. Trở về phần tử trang và thêm 1 HTML/Javascript
8. Thêm vào phần tử HTML/Javascript code bên dưới
<ul class="tabs">
<li><a href="#tab1">TAB1</a></li>
<li><a href="#tab2">TAB2</a></li>
<li><a href="#tab3">TAB3</a></li>
<li><a href="#tab4">TAB4</a></li>
<li><a href="#tab5">TAB5</a></li>
</ul>

<div class="tab_container">
<div id="tab1" class="tab_content">
NỘI DUNG CỦA TAB 1
</div>

<div id="tab2" class="tab_content">
NỘI DUNG CỦA TAB 2
</div>

<div id="tab3" class="tab_content">
NỘI DUNG CỦA TAB 3
</div>

<div id="tab4" class="tab_content">
NỘI DUNG CỦA TAB 4
</div>

<div id="tab5" class="tab_content">
NỘI DUNG CỦA TAB 5
</div>

</div>

» Chỉnh code:
- Bạn thay các tab màu đỏ thành tên hiển thị cho tiện ích của bạn.
- Các dòng màu xanh là nội dung hiển thị tương ứng với các Tab, bạnh ãy thay thành các tiện ích tương ứng với các tab.

9. Save tiện ích và tìm vị trí đặt cho phù hợp

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

Xem khác cùng chủ đề

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

4/13/2011 02:32:00 SA Trả lời

- Bạn thay các tab màu đỏ thành tên hiển thị cho tiện ích của bạn.
- Các dòng màu xanh là nội dung hiển thị tương ứng với các Tab, bạnh ãy thay thành các tiện ích tương ứng với các tab.

anh ơi đoạn này em không hiểu ,đoạn màu xanh cho cái gì vậy:(( cho ví dụ cụ thể nha thank anh nhìu:P

Admin
4/13/2011 03:17:00 SA Trả lời

Phần màu xanh là tùy em muốn trong tab đó chứa nội dung gì. Ví dụ ở TAB 1, em muốn có nội dung là "Rất vui bạn đã ghé thăm Website, chúc bạn vui" như vậy thì em đặt đoạn này ở phần "NỘI DUNG CỦA TAB 1". Em có thể thực hiện các bước trên hoàn tất (Giữ nguyên mọi thứ) thì em ẽ thấy được phần đó hiển thị ở đâu hoặc có thể xem DEMO ở trên. Thân!

4/13/2011 03:56:00 SA Trả lời

ý của em la thay cái "chữ màu xanh"="code" như thế nào,ví dụ em muốn đặt nội dung đó là những bài viết mới nhất thì em phải cho gì vào HTML thay thế cho đoạn chữ màu xanh đó
cám ơn anh nhìu

Admin
4/13/2011 04:16:00 SA Trả lời

Tùy vào từng tiện ích cụ thể em ah, em chỉ cần xác định được code HTML nào hiển thị nội dung thì em đặt vào vị trí màu xanh ở trên. Thân! lonmeo

4/13/2011 04:30:00 SA Trả lời

thank anh nhìu:D

4/13/2011 04:38:00 SA Trả lời

anh ơi tiện cho em hỏi làm như thế nào để phân khúc một blog ra thành như của anh vậy,tức là làm giao diện thành từng mục nhỏ
như là cái của anh thành
1.thủ thuật blog......
2.thủ thuật máy tính......
3.girl xinh......
......
nhìn của anh giống hệt như giao diện của dân trí,tiện giúp em đc ko,hoặc có link nào hướng dẫn thì pate vào đây dùm em nhá,thanks:D

Admin
4/13/2011 07:51:00 SA Trả lời

Em xem bài viết giống trang VNE tại đây và hiển thị bài viết giống trang Dân Trí tại đây :)

4/13/2011 09:15:00 SA Trả lời

thank you so much:))

4/13/2011 11:21:00 SA Trả lời

đầu tiên là em cám ơn bác rất rất nhiều về chỉ bảo của bác nhưng em đang gặp 1 lôĩ là em áp dụng cái giao diện của dân trí khi dùng trình duyệt firefox thì khi để chuột tại vị trí gần cuối tab thì ảnh và chữ nó nhảy loạn cả lên(hay có thể hiểu là lúc ẩn và hiện chữ bị ẩn thì nó nhảy lên như cào cào ấy.mong bác chỉ giáo giúp.còn khi dùng trình duyệt IE thi ok.cám ơn anh nhìu

Nặc danh
4/14/2011 10:57:00 SA Trả lời

menu này hay nè

6/06/2012 09:01:00 CH Trả lời

Mình đã like fan facebook traidatmui, mời bạn sang like fan bên mình http://tanchau123.blogspot.com battay

Admin
6/06/2012 09:27:00 CH Trả lời

Ok like rồi bạn ah

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