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èn code sau 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>
<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>
<div id='codeholder'><a href="http://www.bloggersentral.com"></a></div>
Bài đăng
0 nhận xét
Posts a comment