(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
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="sidebar";
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKVZCJyKWEcTZwjUHDZVfANQ1IwoUzEUnr4_x85I20yfOdFv0ST0r2ToFaW4KzMZsz7MF6uAvXHZSlZSI8eg2stWNyy3mVS37m2ABXDjDq1Gu3G0R4iV55EiFizXHCliG2OE8L-vFRE_Cu/) 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="sidebar";
var accordionside1=true;
var sideshow1=new Array(0,0);
var sidebarnameacc2="sidebar2";
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
0 nhận xét:
Đăng nhận xét