Thông
thường trên một blog/web có chứa rất nhiều tiện ích ở sidebar,
footer... nếu bạn đặt tiện ích theo kiểu thông thường, tức là các tiện
ích đặt nối tiếp nhau thì sẽ làm cho trang blog của bạn trở nên dài và
load khá chậm. Cách để bạn có thể khắc phục chính là bạn gom các tiện
ích là và đặt chúng thành từng tab, điều này sẽ giúp site của bạn ngắn
gọn và người dùng dễ dàng xem được các tiện ích trên blog của bạn thông
qua các tab đó. Chủ đề về tạo Tab chứa nội dung thì mình trước đây đã
chia sẻ cùng các bạn một số bài, tuy nhiên các thủ thuật trước thì
thường nội dung của từng tab lại được thêm vào trong thẻ <div>
</div>. Thủ thuật hôm nay mình chia sẻ cùng các bạn cách tạo các
Tab nội dung từ những tiện ích có sẵn trên blog của bạn. Nói dễ hiểu là
thủ thuật này sẽ tự động gom các tiện ích có sẵn trên blog của bạn chỉ
cần bạn chỉ định số lượng tiện ích cần gom và điều kiện là các tiện ích
có tiêu đề thì mời có thể gom vào trong tab.
» Bắt đầu thủ thuật
1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào sau thẻ <head>
6. Thêm 1 HTML/Javascript và thêm vào code bên dưới
Chúc bạn thành công!
Hình ảnh minh họa
» Bắt đầu thủ thuật
1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào sau thẻ <head>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/Jquery.min.1.5.1.js"></script>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/bloggertabs0.1_min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#codeholder').bloggerTabber ({
tabCount : 3 //số tab bạn muốn gom
});
});
</script>
<style type='text/css'>
.tabber {
padding: 0px !important;
border: 0 solid #687979;}
.tabber h2 {
float: left;
color:#333;
margin: 0 1px 0 0;
font-size: 12px;
padding: 3px 5px;
border: 1px solid #ccc;
margin-bottom: -1px;
overflow: hidden;
position: relative;
background: #fff;
cursor:pointer;
-moz-border-radius:5px 5px 0 0;
border-radius:5px 5px 0 0;}
html .tabber h2.active {
background: #eee;
border-bottom: 1px solid #eee;}
.tabber .widget-content {
border: 1px solid #ccc;
padding: 10px;
clear:both;
background: #eee;
margin:0;}
</style>
5. Save template lại và trở về phần tử trang (Page Elements)<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/bloggertabs0.1_min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#codeholder').bloggerTabber ({
tabCount : 3 //số tab bạn muốn gom
});
});
</script>
<style type='text/css'>
.tabber {
padding: 0px !important;
border: 0 solid #687979;}
.tabber h2 {
float: left;
color:#333;
margin: 0 1px 0 0;
font-size: 12px;
padding: 3px 5px;
border: 1px solid #ccc;
margin-bottom: -1px;
overflow: hidden;
position: relative;
background: #fff;
cursor:pointer;
-moz-border-radius:5px 5px 0 0;
border-radius:5px 5px 0 0;}
html .tabber h2.active {
background: #eee;
border-bottom: 1px solid #eee;}
.tabber .widget-content {
border: 1px solid #ccc;
padding: 10px;
clear:both;
background: #eee;
margin:0;}
</style>
6. Thêm 1 HTML/Javascript và thêm vào code bên dưới
<div id='codeholder'><a href="http://www.bloggersentral.com"></a></div>
Bạn nhớ đặt tiện ích này trước các tiện ích mà bạn muồn gom lại vào tab và các tiện ích muốn gom nên đặt liên tiếp kế nhau.
Chúc bạn thành công!
Nguồn: Traidatmui.com
2 nhận xét | Viết lời bình
Chào bạn Minh!
Mình đã thực hiện thử theo hướng dẫn nhưng không "gom" được nó vẫn như cũ thôi. Bạn kiểm tra lại Code xem sao?
Thân chào bạn!
Không gom được AD ơi.