Laman

Tạo sidebar trượt cho blogspot sử dụng Mootools

0   nhận xét

Lúc trước mình đã từng giới thiệu kiểu sidebar menu trượt sử dụng thư viện Scriptaculous. Hôm nay xin tiếp tục giới thiệu kiểu menu trượt độc đáo này nhưng sử dụng thư viện Mootools áp dụng cho Blogger.

Tác giả của kiểu menu trượt này là Andrew Sellick, bạn có thể xem bài viết giới thiệu tại đây. Sau khi nghiên cứu tôi đã thử nghiệm thành công cho blogspot và giới thiệu cách cài đặt để quý bạn đọc cùng chia sẻ.

Trước khi cài đặt, chúng ta cần tìm hiểu một số điều kiện. Trong Template chuẩn của Blogger có thể thấy phần outer-wrapper bao lấy tất cả các thành phần như header-wrapper, content-wrapper và footer-wrapper. Phần content-wrapper lại chứa main-wrapper (phần bố trí các bài viết) và sidebar. Để áp dụng thủ thuật sidebar trượt ẩn về bên phải màn hình thì phải đặt chiều rộng của phần content-wrapper bằng với chiều rộng của phần main-wrapper và đặt chiều rộng tự động cho phần sidebar.

Nào, chúng ta xem Demo và bắt đầu thực hiện như sau.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML.

Trong Template trước dòng ]]></b:skin> tìm đến đoạn code CSS liên quan đến phần bao chứa các bài viết (Blog Posts) và sidebar, xóa toàn bộ đoạn code đó và thay vào đó là đoạn code bên dưới.

#content-wrapper{ width:550px; margin: 0 auto;}
#main-wrapper {
width: 550px;
margin-top: 10px;
padding: 20px 0 20px 0;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar {
background-color: #fff;
height: auto;
position: absolute;
right: 0px;
top: 180px;
width: auto;
}
#sideBarTab{
cursor: pointer;
float: left;
height: 137px;
width: 28px;
}
#sideBarTab img{
border: none;
margin: 0;
padding: 0;
}

Bước 2. Đặt đoạn code sau đây vào trước thẻ </head>.

<script src='http://hacodeproject.googlecode.com/files/mootools.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
var isExtended = 0;
var height = 2500;
var width = 230;
var slideDuration = 500;
var opacityDuration = 1000;

function extendContract(){
if(isExtended == 0){
sideBarSlide(0, height, 1, width);
sideBarOpacity(0, 1);
isExtended = 1;
}
else{
sideBarSlide(height, 0, width, 1);
sideBarOpacity(1, 0);
isExtended = 0;
}
}

function sideBarSlide(fromHeight, toHeight, fromWidth, toWidth){
var myEffects = new Fx.Styles('sideBarContents', {duration: slideDuration, transition: Fx.Transitions.linear});
myEffects.custom({
'height': [fromHeight, toHeight],
'width': [fromWidth, toWidth]
});
}

function sideBarOpacity(from, to){
var myEffects = new Fx.Styles('sideBarContents', {duration: opacityDuration, transition: Fx.Transitions.linear});
myEffects.custom({
'opacity': [from, to]
});
}

function init(){
$('sideBarTab').addEvent('click', function(){extendContract()});
}

window.addEvent('load', function(){init()});
//]]>
</script>

Bước 3. Sau thẻ <body>, tìm đến đoạn code HTML cho phần chứa main-wrapper và sidebar rồi thay toàn bộ đoạn code đó bằng đoạn code bên dưới.

<div id='content-wrapper'>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>
</b:section>
</div>

<div id='sidebar'>
<div id='sideBarTab'>
<img alt='sideBar' src='http://bit.ly/gON0ET' title='sideBar'/>
</div>
<b:section class='sideBarContents' id='sideBarContents' preferred='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
</b:section>
</div>

<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'>&#160;</div>

</div> <!-- end content-wrapper -->

Lưu Template là OK.

* Chú ý đối với Template Simple sẳn có của Blogger thì tìm thay đoạn code:

<div class='columns-inner'>

<div class='column-center-outer'>
<div class='column-center-inner'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>
</b:section>
</div>
</div>

<div class='column-left-outer'>
<div class='column-left-inner'>
<aside>
<macro:include id='main-column-left-sections' name='sections'>
<macro:param default='0' name='num'/>
<macro:param default='sidebar-left' name='idPrefix'/>
<macro:param default='sidebar' name='class'/>
<macro:param default='true' name='includeBottom'/>
</macro:include>
</aside>
</div>
</div>

<div class='column-right-outer'>
<div class='column-right-inner'>
<aside>
<macro:include id='main-column-right-sections' name='sections'>
<macro:param default='2' name='num'/>
<macro:param default='sidebar-right' name='idPrefix'/>
<macro:param default='sidebar' name='class'/>
<macro:param default='true' name='includeBottom'/>
</macro:include>
</aside>
</div>
</div>

</div>
Comment của bạn sẽ bị xóa nếu:
- Bạn chèn thẻ liên kết (a tag).
- Nội dung gây khó chịu cho các bạn đọc khác.
- Thắc mắc không liên quan bài viết, hãy post tại Hỏi đáp.
- P/s : Comment chê Admin xấu trai cũng sẽ bị xóa không thương tiếc :D

Comment của bạn sẽ bị xóa nếu:
- Bạn chèn thẻ liên kết (a tag).
- Nội dung gây khó chịu cho các bạn đọc khác.
- Thắc mắc không liên quan bài viết, hãy post tại Hỏi đáp.
- P/s : Comment chê Admin xấu trai cũng sẽ bị xóa không thương tiếc :D

Subscribe to: Post Comments ( Atom )