Tạo Tabbed Navigation CSS3 đẹp cho Blogger

Đăng bởi Admin | 1/1/14 | 0 nhận xét

Trong bài viết này sẽ hướng dẫn bạn làm thế nào để thêm CSS3 tab chuyển hướng cho các blogger.Bạn có thể thêm nó vào blogger như widget. Nếu bạn muốn thêm vào như trang fan hâm mộ, các nút xã hội hoặc các mã số để nút cá nhân, bạn có thể thêm nó bằng cách thay thế mô tả. Tiện ích này chỉ sử dụng CSS3 và hỗ trợ HTML

Demo

Thêm CSS3 Tabbed Navigation cho Blogger

1. Đăng nhập vào tài khoản blogger và nhấp thả xuống.

2. Bây giờ chọn " Mẫu "Cũng giống như dưới đây.

3 Bây giờ bạn có thể xem trực tiếp trên blog, Click vào Chỉnh sửa HTML 
4. Tìm thẻ này bằng cách sử dụng tổ hợp phím Ctrl + F     ]]></b:skin> .
5. Dán mã dưới đây trước thẻ   ]]></b:skin> :

/* The CSS Code for the tabs menu */
#btabcontainer{
margin:0 auto;
width:280px;
margin-top:4%;
}
.btab-container {
position: relative;
width: 100%;
z-index:0;
}
.btab-container > div {
display: inline;
}

.btab-container > div > a {
position: relative !important;
text-decoration: none;
color: #D7D7D7;
display: inline-block;
padding: 4px 14px;
font-size:15px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight:bold;
text-transform:uppercase;
margin:2px;
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 2px #CFA840;
padding: 4px 14px;
-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;
}
.btab-container > div:not(:target) > a {
}
.btab-container > div:target > a {
background: none repeat scroll 0 0 #948a81;
text-shadow: 0 1px 0 #4C4648;
}
.btab-container > div > div {
background: #4C4648;
background: -moz-linear-gradient(top, #4C4648 0%, #474344 84%, #2F2D2E 100%);
background: linear-gradient(top, #4C4648 0%, #474344 84%, #2F2D2E 100%);
-pie-background: linear-gradient(top, #4C4648 0%, #474344 84%, #2F2D2E 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4C4648), color-stop(84%,#474344), color-stop(100%,#2F2D2E));
-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;
z-index: -2;
top: 50px;
padding: 20px;
border:solid 6px #4C4648;
outline: 2px dashed #CFA840;
outline-offset: -8px;
min-height:250px;
position:absolute;
}
.btab-container > div:not(:target) > div {
position: absolute;
}

.btab-container > div:target > div {
position: absolute;
z-index: 3 !important;
}
div.tab-content{
padding-bottom: 70px;
padding-left: 20px;
padding-right: 20px;
}
.btab-content img{
margin:0 auto;
display:block;
padding-bottom: 20px;
padding-top: 10px;
}

6. Tới blogger và nhấp vào Layout 
7. Bấm vào Thêm tiện ích và chọn "HTML / Javascript 
8. Dán mã dưới đây:

<div id="btabcontainer">
<div class="tab-container">

<div id="c1">
<a href="#c1" title="First">First</a>
<div class="tab-content">
<h3>This is the first tab</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. porttitor est et rhoncus.Nam ipsum leo, ornare ac volutpat suscipit, convallis eu metus ipsum nunc.</p>
</div>
</div>

<div id="c2">
<a href="#c2" title="Second">Second</a>
<div class="tab-content">
<h3>Add as many tabs as you like</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. porttitor est et rhoncus. Nam ipsum leo, ornare ac volutpat suscipit, convallis eu metus. ipsum nunc.</p>

</div>
</div>

<div id="c3">
<a href="#c3" title="Third">Third</a>
<div class="tab-content">
<h3>5 Preset Styles &amp; Color Themes</h3>
<p>Consectetur adipiscing elit. porttitor est et rhoncus. Nam ipsum leo, ornare ac volutpat suscipit, convallis eu metus. ipsum nunc.</p>
</div>
</div>
</div>
</div>


Bạn có thể thay đổi mô tả và nút tên ( phần màu đỏ và xanh) theo ý của bạn. 
9. Bây giờ lưu của bạn HTML / Javascript.
Hy vọng  CSS3 Tabbed Navigation này giúp thêm một số tiện ích cho blog của bạn.
                                                                                     Theo: bloggertrix.com