"Hiển thị các tiện ích trên sidebar dạng list trượt bằng JQuery cho Blogspot"

(Traidatmui.com) – Trước đây mình đã có giới thiệu cùng các bạn cách hiển thị các bài viết trên blog dạng trượt khi click vào thanh tiêu đề bài viết với JQuery (bạn có thể xem tại đây). Hôm nay với cách trình diễn đó mình sẽ giúp các bạn ứng dụng cho các tiện ích (Widget) trên cột sidebar của blog. Với thủ thuật này thì các tiện ích trên cột sidebar chỉ hiển thị 1 tiện ích đầy đủ các tiện ích khác thì chỉ hiển thị tiêu đề và nội dung sẽ được ẩn đi. Khi bạn click xem nội dung của tiện ích này thì các nội dung của tiện ích khác sẽ tự động ẩn đi, với thủ thuật này bạn có thể thêm nhiều tiện ích trên blog mà không sợ phải mất nhiều không gian. Bạn có thể xem hình ảnh minh họa bên dưới để thấy rỏ hơn.

Hình ảnh minh họa
» Bắt đầu thực hiện

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 src='http://data-traidatmui.appspot.com/scripts/jquery-1.2.6.min1.js' type='text/javascript'/>
<script type='text/javascript'>
var sidebarnameacc1=&quot;sidebar&quot;;
var accordionside1=true;
var sideshow1=new Array(0,0);
</script>
<script src='http://data-traidatmui.appspot.com/scripts/accordion_sidebar.js' type='text/javascript'/>

- sidebar ở trên chính là ID của cột sidebar trong template của bạn.

5. Bạn tìm đến code bên dưới hoặc tương tự
.sidebar h2 {
background: #eee;
margin:0px;
padding:3px 10px;
}

- Trong code trên có thể phần code trong dấu { } sẽ khác, bạn chỉ cần quan tâm đến lớp .sidebar h2 phần nội dung bên trong không cần giống như trên.

6. Thay code vừa tìm được ở trên thành code bên dưới
.sidebar h2 {
background: #eee url(http://lh5.ggpht.com/_BTztXRwC9ik/TNQPad_DI_I/AAAAAAAAEu4/wtICtukiAws/arrow-square-fd1.gif) no-repeat right -51px;
font-size:12px;
font-weight:bold;
color:#000;
margin:0px;
padding:3px 10px;
text-transform:uppercase;
}
.sidebar h2.headactive {
background-position: right 5px;
}

7. Cuối cùng save template lại

☼ Mở rộng thủ thuật

Ở trên là chúng ta chỉ thao tác đối với template chỉ có 1 cột sidebar, như vậy khi muốn ứng dụng thủ thuật này cho cả 2 cột sidebar trong tempalte có 2 cột thì sao? Đó là nội dung mà mình muốn chia sẻ cùng các bạn. Khi muốn ứng dụng cho 2 cột sidebar nếu template của bạn có 2 cột thì bạn chỉ cần thay code ở bước 4 thành code bên dưới và chỉnh sửa lại cho phù hợp, các bước tiếp theo tương tự như trên.
<script src='http://data-traidatmui.appspot.com/scripts/jquery-1.2.6.min1.js' type='text/javascript'/>
<script type='text/javascript'>
var sidebarnameacc1=&quot;sidebar&quot;;
var accordionside1=true;
var sideshow1=new Array(0,0);
var sidebarnameacc2=&quot;sidebar2&quot;;
var accordionside2=true;
var sideshow2=new Array(0,0);
</script>
<script src='http://data-traidatmui.appspot.com/scripts/accordion_sidebar.js' type='text/javascript'/>

» Chỉnh code: Bạn phải xác định được ID của 2 cột sidebar, phần sidebar chính là ID cột sidebar thứ nhất và sidebar2 chính là ID của cột sidebar thứ 2, bạn hãy thay chúng thành các ID của sidebar cho phù hợp như vậy là xong save template lại để xem kết quả.

Chúc bạn thành công

Xem khác cùng chủ đề

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

4/08/2011 03:35:00 SA Trả lời

Nếu không phải dùng đến JavaScript thì tốt quá !roile

Admin
4/08/2011 06:20:00 SA Trả lời

Nếu có thủ thuật đẹp tiện ích không dùng đến Javascript và JQuery thì thật khó! Đành chịu thôi đúng hok nè! nhinne

4/09/2011 02:17:00 SA Trả lời

Thủ thuật này ko chạy trên Firefox 4.0
Nhưng Google Chrome chạy được... cũng pó chân lun

Admin
4/09/2011 02:23:00 SA Trả lời

Thủ thuật này là mình đã test ngay trên Firefox 4.0 và các trình duyệt khác. Tất cả các trình duyệt đều chạy tốt bạn ah ;)

7/24/2015 02:21: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