Cách Tạo Widget Nhiều Label Đẹp Cho Blogspot

Hướng Dẫn Cách Tạo Widget Nhiều Label Đẹp Cho Blogspot

Cách1: Cách tạo tab với nội dung có sẵn cho blogspot

Bước 1: Đăng nhập vào blog ==> Chọn mẫu (template) ==> Chọn chỉnh sửa HTML

Lời khuyên: Các bạn nên down toàn bộ code về rồi dùng Notepad ++ để chỉnh sửa cho dễ ,nhớ sao lưu 1 bản để phòng bị lỗi code.

Chèn code CSS bên dưới vào trước thẻ ]]></b:skin>

.pageTabs {
margin: 10px auto 0;
font-size:11px;}
ul.tabs {
margin: 0;
padding: 0 ;
float: left;
list-style: none;
height: 32px;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px;
line-height: 31px;
border: 1px solid #999;
border-left: none;
margin-bottom: -1px;
background: #e0e0e0; /* màu nền của các Tabs*/
overflow: hidden;
position: relative;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff;
outline: none;
}
ul.tabs li a:hover {
background: #eff0f1;
}
html ul.tabs li.active, html ul.tabs li.active a:hover {
background: #eff0f1;
border-bottom: 1px solid #eff0f1;
}
.tab_container {
border: 1px solid #999;
border-top: none;
clear: both;
float: left;
width: 100%; /* độ rộng của phần nội dung các Tabs*/
color:#000;
background: #eff0f1; /* màu nền của phần nội dung các Tabs*/
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
.tab_content {
padding: 5px;
font-size: 1.2em;
}
.tab_content img {
float: left;
margin: 10px 20px 20px 0;
border: 1px solid #ddd;
padding: 5px;
}
.tab_content p{
padding-bottom:10px;
}

Các bạn có thể tùy biến css để cho đẹp

Bước 2: Chèn tiếp code bên trên thẻ </head>

<script src="https://dl.dropboxusercontent.com/u/95745796/Jquery1.3.2.js" type="text/javascript"> </script>
<script type="text/javascript">$(document).ready(function(){$(".tab_content").hide();$("ul.tabs li:first").addClass("active").show();$(".tab_content:first").show();$("ul.tabs li").click(function(){$("ul.tabs li").removeClass("active");$(this).addClass("active");$(".tab_content").hide();var activeTab=$(this).find("a").attr("href");$(activeTab).fadeIn(1000)})});</script>

Bước 3: Save template lại

Bước 4: Trở về phần tử trang và thêm 1 HTML/Javascript

Thêm vào phần tử HTML/Javascript code bên dưới

</ul>

NỘI DUNG CỦA TAB 1

</div>

NỘI DUNG CỦA TAB 2

</div>

NỘI DUNG CỦA TAB 3

</div>

NỘI DUNG CỦA TAB 4

</div>

NỘI DUNG CỦA TAB 5

</div>

Chú ý:

- Số lượng tab các bạn cũng tùy biến nhé.Ở đây mình để 5 tab

- Bạn thay các tab màu đỏ thành tên hiển thị cho tiện ích của bạn. và nội dung bạn cần hiển thị nhé

Save tiện ích và tìm vị trí đặt cho phù hợp

Cách 2: Cách tạo tab nhiều tiện ích - widget cho blogspot

Bạn làm Bước 1 - Bước 2 giống như trên

Bước 3: Đặt vị trí bạn muốn thêm tab này vào.

</ul>

Code webget 1 - Code Tiện ích 1

</div>

Code widget 2 - Code Tiện ích 2

</div>

Code widget 3 - Code Tiện ích 3

</div>

Code widget 4 - Code Tiện ích 4

</div>

Code widget 5 -Code Tiện ích 5

</div>

Các tiện ích bạn có thể thêm vào phần Code webget 1 - Tiện ích 1-2-3-4-5

Tiện ích dạng HTML/Javacripts

(Bạn có thể tham khảo bài viết sau: Cách thêm widget vào vị trí bất kỳ trong blogspot)

<b:section class='sidebar' id='sidebar1' preferred='yes'><b:widget id='HTML99' locked='false' title='Bài Viết Hay' type='HTML'><b:includable id='main'>
<b:if cond='data:title != ""'><div class='title-left'><data:title/></div></b:if><div class='box-left'><data:content/></div><b:include name='quickedit'/></b:includable></b:widget></b:section>
Tiện ích dạng bài viết xem nhiều:<b:section class='sidebar123' id='sidebartab121' preferred='yes'><b:widget id='PopularPosts2' locked='false' title='Xem nhiều trong tuần' type='PopularPosts'><b:includable id='main'> <b:if cond='data:title'> <h2> <data:title/> </h2> </b:if> <div id='floatDiv'> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='data:showThumbnails == "false"'> <b:if cond='data:showSnippets == "false"'>  <a expr:href='data:post.href'> <data:post.title/> </a> <b:else/>  <div class='item-title'> <a expr:href='data:post.href'> <data:post.title/> </a> </div> <div class='item-snippet'> <data:post.snippet/> </div> </b:if> <b:else/> <b:if cond='data:showSnippets == "false"'>  <div class='item-thumbnail-only'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a> </div> </b:if> <div class='item-title'> <a expr:href='data:post.href'> <data:post.title/> </a> </div> </div> <div style='clear: both;'/> <b:else/>  <div class='item-content'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a> </div> </b:if> <div class='item-title'> <a expr:href='data:post.href'> <data:post.title/> </a> </div> <div class='item-snippet'> <data:post.snippet/> </div> </div> <div style='clear: both;'/> </b:if> </b:if> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </div> </b:includable></b:widget></b:section>

Tag : Thủ thuật blogger, widget

Uy tín - Pro

Photoshop

Tổng hợp

Template WP

Thủ thuật WP

Thủ thuật

Templates

Tổng hợp

HĐH Windows

Mạng máy tính

Facebook

Lập trình web

Mạng Internet

Phát triển Web

Bài viết liên quan

Nhận xét Bình luận

0 nhận xét "Cách Tạo Widget Nhiều Label Đẹp Cho Blogspot"