Thủ thuật blogspot - Dautoblog

Tabbed Navigation CSS và Jquery Đẹp Cho Blogspot

Tabbed Navigation CSS và Jquery Đẹp Cho Blogspot
Đây là Tab chuyển hướng nội dung dùng khi bài viết có nhiều nội dung cần trình bầy mà ta không muốn bài viết quá dài.Hoặc ta có thể đặt nó làm 1 tiện ích trong đó ta đặt các nút chia sẻ hay trang fanpage...Code Tabbed này là của tác giả TROLL VL(Chắc ai cũng đều biết) tôi chỉ chỉnh sửa đôi chút về CSS cho nó bắt mắt hơn(chả biết đâu lại phù hợp với những Blog Thơ tình:D)

Xem thử

DEMO

áp dụng vào blogspot
Tùy theo nhu cầu sử dụng dạng chuyển hướng nội dung này mà ta có thể chọn lựa 1 trong 2 cách sau đây:
CÁCH 1:Can thiệp vào template(dùng nhiều)
Bước 1
Ta đặt đoạn CSS dưới đây vào trước thẻ ]]></b:skin>
#tabdtc{margin:0 0 15px}
ul#tebslectdtc,ul#tebslectdtc li{padding:0;margin:0;list-style:none;overflow:hidden}
ul#tebslectdtc li{float:left}
ul#tebslectdtc a{display:block;margin:0 5px 0 0;line-height:20px;padding:0 10px;background:text-decoration: none;
color: #D7D7D7;
display: inline-block;
padding: 5px;
font-size:15px;
font-family:Times, sans-serif;
font-weight:bold;
text-transform:uppercase;
margin:0px;
background: #4C4648; /* old browsers */
background: -moz-linear-gradient(top, #4C4648 0%, #474344 52%, #2F2D2E 100%);
background: linear-gradient(top, #4C4648 0%, #474344 52%, #2F2D2E 100%);
-pie-background: linear-gradient(top, #4C4648 0%, #474344 52%, #2F2D2E 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4C4648), color-stop(52%,#474344), color-stop(100%,#2F2D2E));
border:dashed 3px #CFA840;
padding: 5px;
-moz-border-radius: 3px;
-webkit-border-radius: 0px;
border-radius: 3px;
text-shadow: 0 -1px 0 #000000;
-moz-box-shadow: 0 4px 10px -5px #000000;
box-shadow: 0 4px 10px -5px #000000;
-webkit-box-shadow: 0 4px 10px -5px #000000;;border-radius:3px 3px 0 0;font-weight:bold}
ul#tebslectdtc li.active a,ul#tebslectdtc a:hover{background:#E6E6E6;color:black;}
#sidedtc{
padding:10px;
font-family: Times, sans-serif;/* Kiểu(font) chữ nội dung */
font-size:22px;/* Cỡ chữ nội dung */
color:#ffffff;/*Màu chữ nội dung*/
background: #bbb;
background: -moz-linear-gradient(top, #bbb 0%, #aaa 84%, #999 100%);
background: linear-gradient(top, #bbb 0%, #aaa 84%, #999 100%);
-pie-background: linear-gradient(top, #bbb 0%, #aaa 84%, #999 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bbb), color-stop(84%,#aaa), color-stop(100%,#999));
-moz-box-shadow: 0 0 12px 1px #000000 inset;
-webkit-box-shadow: 0 0 12px 1px #000000 inset;
box-shadow: 0 0 12px 1px #000000 inset;
border:solid 20px #4C4648;/* Đường viền Tab chứa nội dung */
outline: 4px dashed #CFA840;/*Hoa văn trang trí Tab nội dung*/
outline-offset: -20px; /*Vị trí hoa văn so với đường viền Tab*/
border-radius:0 3px 3px;}

Bước 2
Đặt trước thẻ </head>
Đoạn code sau:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
//<![CDATA[
$(function(){$("#tebslectdtc li:first").addClass("active");$("#sidedtc > div").hide();$("#sidedtc > div:first").show();$("#tebslectdtc a").click(function(){$("#tebslectdtc li").removeClass("active");$(this).parent().addClass("active");var a=$(this).attr("href");$("#sidedtc > div:visible").hide();$(a).fadeToggle(1000);return false})});
//]]>
</script>

Nếu blog đã có thư viện Jquery thì bỏ đi phần bôi màu hồng
Bước 3
Khi post bài hay khi thêm 1 tiện ích ta dùng đoạn HTML sau:
<div id="tabdtc">
<div class="tab-menu-dtc">
<ul id="tebslectdtc">
<li class="tab1z">
<a href="#xtabx1">Tab 1</a>
</li>
<li class="tab2z">
<a href="#xtabx2">Tab 2</a>
</li>
</ul>
</div>
<div id="sidedtc">
<div class="widget1xx" id="xtabx1">
Nội dung tab 1
</div>
<div class="widget1xx" id="xtabx2">
Nội dung tab 2
</div>
</div>
</div>

Trong phần nội dung khi xuống dòng thì dùng thẻ <br/> còn đối với blog dùng enter để xuống dòng thì cứ enter thôi.
CÁCH 2
Với Blog thỉnh thoảng mới sử dụng ta có thể gộp tất cả code vào trong bài viết với code sau:
<style type="text/css">
#tabdtc{margin:0 0 15px}
ul#tebslectdtc,ul#tebslectdtc li{padding:0;margin:0;list-style:none;overflow:hidden}
ul#tebslectdtc li{float:left}
ul#tebslectdtc a{display:block;margin:0 5px 0 0;line-height:20px;padding:0 10px;background:text-decoration: none;
color: #D7D7D7;
display: inline-block;
padding: 5px;
font-size:15px;
font-family:Times, sans-serif;
font-weight:bold;
text-transform:uppercase;
margin:0px;
background: #4C4648; /* old browsers */
background: -moz-linear-gradient(top, #4C4648 0%, #474344 52%, #2F2D2E 100%);
background: linear-gradient(top, #4C4648 0%, #474344 52%, #2F2D2E 100%);
-pie-background: linear-gradient(top, #4C4648 0%, #474344 52%, #2F2D2E 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4C4648), color-stop(52%,#474344), color-stop(100%,#2F2D2E));
border:dashed 3px #CFA840;
padding: 5px;
-moz-border-radius: 3px;
-webkit-border-radius: 0px;
border-radius: 3px;
text-shadow: 0 -1px 0 #000000;
-moz-box-shadow: 0 4px 10px -5px #000000;
box-shadow: 0 4px 10px -5px #000000;
-webkit-box-shadow: 0 4px 10px -5px #000000;;border-radius:3px 3px 0 0;font-weight:bold}
ul#tebslectdtc li.active a,ul#tebslectdtc a:hover{background:#E6E6E6;color:black;}
#sidedtc{
padding:10px;
font-family: Times, sans-serif;/* Kiểu chữ nội dung */
font-size:22px;/* Cỡ chữ nội dung */
color:#ffffff;/*Màu chữ nội dung*/
background: #bbb;
background: -moz-linear-gradient(top, #bbb 0%, #aaa 84%, #999 100%);
background: linear-gradient(top, #bbb 0%, #aaa 84%, #999 100%);
-pie-background: linear-gradient(top, #bbb 0%, #aaa 84%, #999 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bbb), color-stop(84%,#aaa), color-stop(100%,#999));
-moz-box-shadow: 0 0 12px 1px #000000 inset;
-webkit-box-shadow: 0 0 12px 1px #000000 inset;
box-shadow: 0 0 12px 1px #000000 inset;
border:solid 20px #4C4648;/* Đường viền Tab chứa nội dung */
outline: 4px dashed #CFA840;/*Hoa văn trang trí tab */
outline-offset: -20px; /*Vị trí hoa văn so với đường viền tab */
border-radius:0 3px 3px;}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
//<![CDATA[
$(function(){$("#tebslectdtc li:first").addClass("active");$("#sidedtc > div").hide();$("#sidedtc > div:first").show();$("#tebslectdtc a").click(function(){$("#tebslectdtc li").removeClass("active");$(this).parent().addClass("active");var a=$(this).attr("href");$("#sidedtc > div:visible").hide();$(a).fadeToggle(1000);return false})});
//]]>
</script>
<div id="tabdtc">
<div class="tab-menu-dtc">
<ul id="tebslectdtc">
<li class="tab1z">
<a href="#xtabx1">Tab 1</a>
</li>
<li class="tab2z">
<a href="#xtabx2">Tab 2</a>
</li>
</ul>
</div>
<div id="sidedtc">
<div class="widget1xx" id="xtabx1">
Nội dung tab 1
</div>
<div class="widget1xx" id="xtabx2">
Nội dung tab 2
</div>
</div>
</div>

Chữ TAB 1, TAB 2 và nhiều hơn nữa bạn có thể ghi theo yêu cầu cụ thể(ghi ngắn gọn thôi)
Trong phần nội dung ta sử dụng các thẻ:<i>...</i>,<b>..</b>,<center>..</center>...để tạo các kiểu chữ và xác định vị trí nội dung.
Nếu muốn khung chứa nội dung nằm phía trên,phần click chuyển Tab nằm dưới khung nội dung:
DEMO
Ta thay đổi vị trí của phần HTML đi một chút như sau:
<div id="tabdtc">
<div id="sidedtc">
<div class="widget1xx" id="xtabx1">Nội dung tab 1</div>
<div class="widget1xx" id="xtabx2">Nội dung tab 2</div>
</div>
<div class="tab-menu-dtc">
<ul id="tebslectdtc">
<li class="tab1z"><a href="#xtabx1">Tab 1</a></li>
<li class="tab2z"><a href="#xtabx2">Tab 2</a></li>
</ul>
</div>
</div>

Chúc thành công!
Comments blogger

Không có nhận xét nào :