Tiện ích co dãn độ rộng của blog bằng JQuery

(Luat1x1 ) – Bài viết hôm nay mình chia sẻ cùng các bạn một tiện ích cũng khá hay dành cho Blogspot, đó là tiện ích giúp người xem blog có thể tùy biến độ rộng của trang blog bạn. Họ có thể muốn xem trang blog của bạn ở dạng lớn (Toàn màn hình máy tính) hoặc nhỏ hơn hoặc ở độ rộng mặc định của trang bạn. Đó là công dụng của tiện ích này, có thể mở rộng trang và thu hẹp trang của bạn tùy theo độ rộng mà bạn cài đặt trước đó.

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 mở rộng mẫu tiện ích (Expand Widget Templates)
5. Chèn code bên dưới vào trước thẻ </head>

<script src="http://traidatmui.googlecode.com/files/Jquery.1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
function setPageWidth(){
var currentWidth = jQuery('#outer-wrapper').css('width');
if (currentWidth=="100%") newWidth = "1100px";
else if (currentWidth=="950px") newWidth = "100%";
else newWidth = "950px";

if(jQuery.browser.msie){
jQuery("#outer-wrapper").css('width',newWidth);
}
else jQuery("#outer-wrapper").animate({width: newWidth}, 333).fadeIn("slow");
jQuery.cookie('pageWidth', newWidth);
};
jQuery(document).ready(function(){
jQuery("#layoutcontrol a").click(function() {
switch (jQuery(this).attr("class")) {
case 'setLiquid' : setPageWidth();
}
return false;
});

});
</script>

- Bạn cần xác định ID trang mà bạn muốn cài đặt độ rộng tùy chỉnh này, ở đây mình sử dụng cho #outer-wrapper, tùy theo mỗi trang mỗi khác bạn phải xác định đúng id và thay 3 id trên.
- Phần 1100px chính là độ rộng mà trang co lại lần thứ nhất (tức là khi mở rộng bạn click vào nút setwidth nó sẽ trả về độ rộng này, bạn click lần nữa nó mới về độ rộng mặc định trang)
- Phần 950px là độ rộng mặc định của trang bạn, bạn thay cho phù hợp

Lưu ý: Để có thể dãn trang đồng nhất các phần trên blog thì các phần khác trên blog như main, sidebar... phải được đặt độ rộng ở với đơn vị %, nếu độ rộng bạn chọn đơn vị px thì khi dãn trang các phần này sẽ không dãn theo, như vậy sẽ rất mất thẩm mỹ.

6. Tìm đến code bên dưới

<div class='post-header-line-1'/>

7. Chèn code bên dưới vào ngay sau code vừa tìm được

<b:if cond='data:blog.pageType == "item"'>
<div style='float:right; margin: 0px 0px 0px 0px;'><span id='layoutcontrol'><a class='setLiquid' href='javascript:void(0);'> <img align='top' border='0' src='https://lh4.googleusercontent.com/-yK810-2aryg/Tm7mCWwsV0I/AAAAAAAAA1k/lWyROh9YNBY/rfgdg.png'/></a></span> </div>
</b:if>

Đó là vị trí mình đặt góc trên bên phải của nội dung bài viết, bạn cũng có thể đặt ở những vị trí khác mà bạn muốn.

8. Cuối cùng save template lại và test thử nhé

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