• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

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

0
25/01/2011

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>

{0 bình luậnAdd yours ?}

Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn