MENU 
Sản phẩm-chipkool.tk.png)
Trang chủ
Nổi bậc
Tiện ích-chipkool.tk.png)
Tài khoản
Tác vụ
YOUTUBE
NHẠC
Trang chủ
Thủ thuật tự động gom các Widget trên Blogspot thành các Tab nội dung
Thứ Hai, 19 tháng 11, 2012
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
Tăng cỡ chữ
Mặc định
Giảm cỡ chữ
Đăng nhận xét mới
Lên trên
Tổng số Bình luận [ 3]
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.
12 cách xây dựng từ khóa đưa trang web, blog của bạn lên TOP:
https://www.facebook.com/tukhoahaynhat/
Đăng nhận xét