Bước 1:Đăng nhập vào tài khoản Blogger => Vào Mẫu (Template) => Chọn chỉnh sửa HTML (Edit HTML) => Ctrl+F (Trong khung chỉnh sử HTML) => tìm </head> => Paste đoạn code sau trước </head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript' src='http://reader-download.googlecode.com/svn/trunk/jquery-toggle-sidebar.min.js'></script>
<script type='text/javascript'>
//<![CDATA[
$(function() {
$('#sidebar-wrapper').toggleSidebar({
expand: "#main-wrapper"
});
});
//]]>
</script>- Nếu blog của bạn đã có JQuery trong mẫu rồi thì hãy xóa đoạn code màu xanh đi. Lưu ý là file JQuery phiên bản 1.7 trở lên nha. bởi vì ở đây (và từ bây giờ) không còn mặc sự kiện .click() thay vì .on("click") Nếu phiên bản JQuery bạn đang sử dụng là dưới nó, thay đổi tốt hơn với mã JQuery của bạn.
- Thẻ #sidebar-wrapper được lấy từ ID của Sidebar sẽ xuất hiện và thực hiện lệnh ẩn hiện, trong khi bộ chọn #main-wrapper là yếu tố mà cột bài viết sẽ được mở rộng và thu hẹp để trải kín vị trí do mất thanh Sidebar.
$('#sidebar-wrapper').toggleSidebar({expand:"#main-wrapper"}); - Với một số mẫu phần id này có thể khác bạn vui lòng sửa nó. Nếu không thể xác định được id của nó hãy để lại URL blog của bạn ở phần commnet ở cuối bài viết này mình sẽ chỉ giúp.Bước 2: Dán code bên dưới trước thẻ ]]></b:skin>.
#sidebar-toggler-wrapper { clear:both; position:relative;}#sidebar-toggler-wrapper a.sidebar-toggler { color:white; font:normal bold 11px/100% Arial,Sans-Serif; text-decoration:none; margin:0 0; padding:4px 10px; background-color:#123; border-left:4px solid #789; outline:none; position:absolute; bottom:0; right:0;}
#sidebar-toggler-wrapper a.active { color:black; background-color:#789; border-left-color:#123;}Bước 3: Lưu mẫu lại.2. Thu hẹp/mở rộng Sidebar cho blogger với hiệu ứng Jquery.
Bước 1: Nguyên tắc hoạt động của Accordion sidebar!
Mỗi phần tử của sidebar thường được bao bọc bởi thẻ #sidebar-wrapper (có thể khác tùy theo người thiết kế) Và tiêu đề của các widget trong đó thường nằm trong thẻ <h2> như thế này:
<div id='sidebar-wrapper'>
<h2>Blogger templates</h2>
<div class='widget-content'>
....
</div>
<h2>Blogroll</h2>
<div class='widget-content'>
....
</div>
<h2>Labels</h2>
<div class='widget-content'>
....
</div>
</div>Căn cứ vào đó mình sẽ tạo ra một sidebar với một hiệu ứng accordion có chức năng mở rộng và thu gọn nó vào. Trước hết, chúng ta cần phải biết một số các yếu tố tương tự như một hướng dẫn và nó sẽ được sử dụng để chỉnh sửa hiệu ứng accordion đoạn mã này:$(function() {
$('#sidebar-wrapper .widget-content').hide();
$('#sidebar-wrapper h2:first').addClass('active').next().slideDown('slow');
$('#sidebar-wrapper h2').click(function() {
if($(this).next().is(':hidden')) {
$('#sidebar-wrapper h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});Bước 2: Các bước để làm accordions Sidebar1. Đăng nhập vào tài khoản Blogger2. Vào Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới ngay trước thẻ </head> (Dùng Ctrl+F tìm kiếm trong mã code)
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(function() {
// Sembunyikan semua tubuh widget (tutup semua panel)
$('#sidebar-wrapper .widget-content').hide();
// Thêm lớp hoạt động 'active' trên <h2> yếu tố đầu tiên
// Sau đó thêm các yếu tố bên cạnh tác dụng .slideDown(), do đó, bảng điều khiển sẽ xuất hiện ở accordion đầu mở.
$('#sidebar-wrapper h2:first').addClass('active').next().slideDown('slow');
// Khi các yếu tố <h2> bên trong #sidebar-wrapper yếu tố được nhấp ...
$('#sidebar-wrapper h2').click(function() {
if($(this).next().is(':hidden')) {
// Ẩn tất cả các bảng được mở cho các hiệu ứng slideUp ().
$('#sidebar-wrapper h2').removeClass('active').next().slideUp('slow');
// Sau đó mở bảng điều khiển dưới phần tử này (các yếu tố đó được nhấp <h2>) có hiệu lực. SlideDown ()
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
//]]>
</script>Nếu blog của bạn đã cài thư viện Jquery rồi thì hãy xóa đoạn code màu xanh đi nha.Bước 3: Nếu không hoạt động.
Nếu nó không hoạt động có thể do id trong blog của bạn không phải #sidebar-wrapper.mình ví dụ một id khác là #sidebar-wrapper-2. Đoạn code sẽ có dạng như sau:
<div id='sidebar-wrapper-2'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='Kategori' type='Label'/>
<b:widget id='PopularPosts1' locked='false' title='Entri Populer' type='PopularPosts'/>
<b:widget id='Stats1' locked='false' title='Statistik' type='Stats'/>
<b:widget id='HTML1' locked='false' title='Komunitas' type='HTML'/>
<b:widget id='HTML2' locked='false' title='Facebook Suka' type='HTML'/>
</b:section>
</div>Hoặc bạn cũng có thể xem ID bên trực tiếp từ trang blog của bạn thông qua các Add-on phát triển ứng dụng web như: Firebug hoặc tương tự khác:
- Bạn có thể thay đổi mã #sidebar-wrapper với Id mới #sidebar-wrapper-2 để tạo ra một hiệu ứng accordion trên thanh bên.
Bước 4: Tùy chỉnh nâng cao.
Khi bạn cố gắng chạm vào tiêu đề các widget bạn sẽ thấy con trỏ có hình thức của con trỏ văn bản (chữ I). Điều đó sẽ làm cho các thuộc tính kích hoạt accordion được xem như là một cái gì đó không phải là quan trọng/không có bất cứ điều gì quan trọng (alah!). Chúng ta phải thay đổi con trỏ văn bản để con trỏ ngón tay như một con trỏ chuẩn luôn luôn xuất hiện trên tất cả các liên kết.
+ Có hai cách để thay đổi các văn bản trên con trỏ yếu tố <h2> một ngón tay trỏ. Đầu tiên, bằng cách viết trực tiếp vào mã CSS như thế này trước thẻ ]]></b:skin>.
#sidebar-wrapper h2 {
cursor:pointer;
}+ Hoặc đơn giản là dán chức năng JQuery .css() trước bộ chọn dẫn đến thành phần h2 như thế này:
$(function() {
$('#sidebar-wrapper .widget-content').hide();
$('#sidebar-wrapper h2:first').addClass('active').next().slideDown('slow');
$('#sidebar-wrapper h2').css('cursor', 'pointer').click(function() {
if($(this).next().is(':hidden')) {
$('#sidebar-wrapper h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});Các thẻ .addClass('active'), .removeClass('active') và .toggleClass('active') tất cả chỉ để đánh dấu bảng accordion đang hoạt động/mở.- Nếu bạn muốn làm chi tiêu đè trong thẻ <h2> hiện tại chuyển sang màu đỏ, thì trong mã CSS bạn chỉ có thể thêm các chọn #sidebar-wrapper h2.active và thêm thuộc tính quy định màu đỏ như thế này trước thẻ ]]></b:skin>.
#sidebar-wrapper h2.active {color:red;}Chúc thành công!....../.
Nguồn: Namkna Blog
No comments:
Post a Comment