"Thủ thuật tự động gom các Widget trên Blogspot thành các Tab nội dung"


Traidatmui.com – 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.

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)
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

Tham khảo bloggersentral.com

Xem khác cùng chủ đề

20 nhận xét | Viết lời bình

3/01/2012 08:20:00 SA Trả lời

sao e làm nó ko hiện ra ạ, A qua giúp e với www.chodoanluanvan.com

Admin
3/01/2012 04:46:00 CH Trả lời

@ doanluanvan: Thủ thuật này buộc bạn phải code code ở bước 6 được đặt trong một tiện ích HTML/Javascript và nằm trên các tiện ích cần gom thì nó mới gom được bạn. Không được xóa bất kỳ chi tiết nào ở code trong bước 6 nhe bạn.

3/16/2012 09:09:00 CH Trả lời

không thành công
http://thuthuat-mya5class.blogspot.com/

5/16/2012 06:06:00 CH Trả lời

Bạn ơi, cái này thực hiện như bạn hướng dẫn rồi mà k thành công. Bạn có thể vào blog mình xem giúp với nhé. http://k3nvil.blogspot.com

Admin
5/16/2012 06:18:00 CH Trả lời

Bạn xem lại đã add code ở bước 6 chưa nhé

5/19/2012 06:19:00 CH Trả lời

thủ thuật sai rồi

Admin
5/19/2012 10:01:00 CH Trả lời

Sai chỗ nào vậy bạn?

5/29/2012 11:03:00 CH Trả lời

mình đã thêm đúng như trên vẫn không hiện ra bạn ơi...........

Admin
5/30/2012 03:01:00 SA Trả lời

Site bạn đã thực hiên là site nào vậy bạn?

7/11/2012 08:11:00 CH Trả lời

tôi test trên 5 blog . vẫn chả được

Admin
7/11/2012 11:25:00 CH Trả lời

Cho mình xem qua site bạn đã thực hiện, có thể bạn thiếu code ở bước 6. Code đó bắt buộc phải có và nằm trong tiện ích HTML/Javascript bạn ah

4/03/2013 01:27:00 SA Trả lời

Không được bạn ah, mình làm lại nhiều lần cũng không được

Admin
4/03/2013 01:32:00 SA Trả lời

Anh làm không thành công có thể đã có sự xung đột code Jquery.min.1.5.1.js. Anh nên tìm và loại bỏ bớt Jquery nên để lại 1 bản mới nhất.

4/03/2013 10:40:00 CH Trả lời

Ok Cảm ơn em! a không hiểu nhiều lắm về code, thanks

4/04/2013 01:04:00 SA Trả lời

ok Code chuẩn đấy chứ. thanks!

4/04/2013 01:41:00 SA Trả lời

Nếu anh muốn có 2 hoặc 3 cái như thế thì sao?

3/16/2014 12:49:00 SA Trả lời

Thực hiện như bạn hướng dẫn nhưng không thành công.

Admin
3/16/2014 08:01:00 SA Trả lời

Bạn nhớ đặt code ở bước 6 đúng vị trí nhé

3/20/2014 06:44:00 SA Trả lời

Mình đã làm đầy đủ các bước như bạn hướng dẫn nhưng không thành công.

7/24/2015 02:17:00 SA Trả lời

Bạn ơi bên mình có dịch vụ Đăng tin tự động lên groups trên facebook miễn phí bạn xem qua nhé. miễn phí 100%
Ngoài ra các bạn có thể đọc tin tức tại Kênh tin tức giải trí yeubao.com
Các bạn có thể truy cập link sau để xem thông tin công nghệ
Khoinguoncongnghe.net | kênh thông tin dành cho tín đồ công nghê
cám ơn bạn đã đọc
đăng tin tự động trên facebook miễn phí 100% xem tại Đăng tin tự động lên groups trên facebook miễn phí
xem thủ thuật blogspot, thủ thuật blogger, thủ thuật facebook tại thủ thuật tổng hợp facebook, blogger,coputuer
xem tin tức giới trẻ, các tin nổi bật tin tức nổi bật, tin sao, tin giới trẻ, đời sống xã hội
xem thong tin giải trí, cung hoàng đạo, tại bí mật 12 chòm sao,tâm sự,blog tâm sự

giải trí thư giã relax giải trí thư giãn relax
khám phá du lịch, bi ẩn khám phá du lịch, bí ẩn
kho video giải trí khổng lồ video đời sống xã hội, video giải trí
khởi nguồn công nghệ, xem tin tức công nghệ, tin tức internet
tin tức internet
Tin tức itc , tin tức technogoy tin tức ict

Khám phá công nghệ
khám phá

Thủ thuật công nghê thủ thuật công nghệ, tips





Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang