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

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>

More about →

Tạo thanh menu dọc với hiệu ứng accordion sử dụng Mootools

Hiệu ứng accordion giúp một vùng liên kết được kích chuột vào có thể xếp lại trông giống như đàn accordion. Sử dụng hiệu ứng này với sự hỗ trợ của Mootools có thể tạo một thanh menu dọc khá ấn tượng.

Xem Demo.

Sau đây là hướng dẫn cài đặt hiệu ứng:

Bước 1: Trước tiên, bạn hãy đặt toàn bộ phần code bên dưới vào phần đầu của trang HTML, nằm giữa 2 thẻ <head>, </head>.

<script type="text/javascript" src="http://www.ryanscherf.net/demos/accordion/mootools.js"></script>
<style type="text/css">
#content {
width: 220px;
margin: 0 auto;
}

#wrap {
width: 232px;
overflow: hidden;
background: #fff url("http://www.ryanscherf.net/demos/accordion/images/wrapbg.gif") repeat-y top left;
}

h3 {
padding: 10px 0 11px 15px;
margin: 0;
font-size: 12px;
font-weight: normal;
color: #222;
background: #efefef;
cursor: pointer;
border-bottom: 1px solid #fff;
text-decoration: none;
}

h3.toggler a {
color: #666;
text-decoration: none;
}

h3.toggler a:hover {
color: black;
}

div.accordion {
background: #fff url("http://www.ryanscherf.net/demos/accordion/images/accordionbg.gif") repeat-x top left;
}

div.accordion ul {
list-style-type: none;
padding: 0;
margin: 0 0 5px 0;
}

div.accordion ul li {
padding: 6px 0;
}

div.accordion ul li a {
color: #666;
text-decoration: none;
display: block;
padding: 4px 0px 4px 20px;
font-size: 90%;
}

div.accordion ul li a span {
padding-bottom: 10px;
}

div.accordion ul li a img {
border: 0;
vertical-align: bottom;
margin-right: 15px;
}

div.accordion ul li a:hover span {
text-decoration: underline;
}

#top_round {
height: 10px;
font-size: 1px; /* ie whitespace */
}

#bottom_round {
height: 10px;
font-size: 1px; /* ie whitespace */
}

.top_dark {
background: url("http://www.ryanscherf.net/demos/accordion/images/top_dark.gif") no-repeat top left;
}

.top_light {
background: url("http://www.ryanscherf.net/demos/accordion/images/top_light.gif") no-repeat top left;
}

.bottom_dark {
background: url("http://www.ryanscherf.net/demos/accordion/images/bottom_dark.gif") no-repeat top left;
}

.bottom_light {
background: url("http://www.ryanscherf.net/demos/accordion/images/bottom_light.gif") no-repeat top left;
}

.first {
padding-top: 5px;
}

.last {
padding-bottom: 5px;
}
</style>

Bước 2: Thiết lập HTML như bên dưới để đặt vào phần thân của trang HTML, nằm giữa 2 thẻ <body>, </body>.

<div id="wrap">
<div id="top_round"></div>
<div id="content">
<h3 class="toggler first" style="padding-top:5px;"><a href="#section1" onfocus="this.blur();">Section Title 1</a></h3>
<div class="accordion">
<ul>
<li><a href="#" onfocus="this.blur();"><img src="/images/image1.png" alt="" /><span>Link to other content area</span></a></li>
<li><a href="#" onfocus="this.blur();"><img src="/images/image2.png" alt="" /><span>Link to other content area</span></a></li>
<li><a href="#" onfocus="this.blur();"><img src="/images/image3.png" alt="" /><span>Link to other content area</span></a></li>
<li><a href="#" onfocus="this.blur();"><img src="/images/image4.png" alt="" /><span>Link to other content area</span></a></li>
<li><a href="#" onfocus="this.blur();"><img src="/images/image5.png" alt="" /><span>Link to other content area</span></a></li>
<li><a href="#" onfocus="this.blur();"><img src="/images/image6.png" alt="" /><span>Link to other content area</span></a></li>
<li><a href="#" onfocus="this.blur();"><img src="/images/image7.png" alt="" /><span>Link to other content area</span></a></li>
<li><a href="#" onfocus="this.blur();"><img src="/images/image8.png" alt="" /><span>Link to other content area</span></a></li>
</ul>
</div>

<h3 class="toggler"><a href="#section2" onfocus="this.blur();">Section Title 2</a></h3>

<div class="accordion">
<ul>
<li><a href="#" onfocus="this.blur();"><img src="/images/image9.png" alt="" /><span>Link to other content area</span></a></li>
<li><a href="#" onfocus="this.blur();"><img src="/images/image10.png" alt="" /><span>Link to other content area</span></a></li>
<li><a href="#" onfocus="this.blur();"><img src="/images/image11.png" alt="" /><span>Link to other content area</span></a></li>
<li><a href="#" onfocus="this.blur();"><img src="/images/image12.png" alt="" /><span>Link to other content area</span></a></li>
</ul>
</div>

<h3 class="toggler"><a href="#section3" onfocus="this.blur();">Section Title 3</a></h3>
<div class="accordion">
<ul>
<li><a href="#" onfocus="this.blur();"><img src="/images/image13.png" alt="" /><span>Link to other content area</span></a></li>
<li><a href="#" onfocus="this.blur();"><img src="/images/image14.png" alt="" /><span>Link to other content area</span></a></li>
<li><a href="#" onfocus="this.blur();"><img src="/images/image15.png" alt="" /><span>Link to other content area</span></a></li>
</ul>
</div>

<h3 class="toggler"><a href="#section4" onfocus="this.blur();">Section Title 4</a></h3>
<div class="accordion">
<ul>
<li><a href="#" onfocus="this.blur();"><img src="/images/image16.png" alt="" /><span>Link to other content area</span></a></li>
<li><a href="#" onfocus="this.blur();"><img src="/images/image17.png" alt="" /><span>Link to other content area</span></a></li>
<li><a href="#" onfocus="this.blur();"><img src="/images/image18.png" alt="" /><span>Link to other content area</span></a></li>
<li><a href="#" onfocus="this.blur();"><img src="/images/image19.png" alt="" /><span>Link to other content area</span></a></li>
<li><a href="#" onfocus="this.blur();"><img src="/images/image20.png" alt="" /><span>Link to other content area</span></a></li>
<li><a href="#" onfocus="this.blur();"><img src=" /images/image21.png" alt="" /><span>Link to other content area</span></a></li>
<li><a href="#" onfocus="this.blur();"><img src="/images/image22.png" alt="" /><span>Link to other content area</span></a></li>
<li><a href="#" onfocus="this.blur();"><img src="/images/image23.png" alt="" /><span>Link to other content area</span></a></li>
</ul>
</div>

<h3 class="toggler last"><a href="#section5" onfocus="this.blur();">Section Title 5</a></h3>
<div class="accordion"><!-- no content hack --></div>
</div>
<div id="bottom_round"></div>
</div>
</div>

Bước 3: Đặt đoạn code sau đây trước thẻ đóng </body>.

<script type="text/javascript" src="http://www.ryanscherf.net/demos/accordion/accordion.js"></script>

Chú ý ở Bước 2, bạn phải tùy chỉnh scr theo URL các file hình ảnh tương ứng của bạn.
Hiệu ứng này có thể áp dụng cho Blogger khá dễ dàng.

Theo Ryanscherf.net

More about →

Tạo hiệu ứng đổi dạng rê chuột bằng công cụ Mootools

Công cụ Mootools có nhiều ứng dụng thú vị cho việc thiết kế web. Ở đây xin giới thiệu cách thêm hiệu ứng đẹp mắt cho một danh mục tin tức khi rê chuột có sự đổi dạng và khiến cho cả vùng chọn có thể kích chuột được. Mục đích của hiệu ứng này là giúp cho một danh mục tin tức không động trở nên động và đẹp hơn.

Xem Demo.

Việc đầu tiên là thiết lập CSS và 2 file js tạo hiệu ứng rồi đặt vào phần đầu của trang HTML, giữa 2 thẻ <head>, </head>.

<style type="text/css">
/*<![CDATA[*/
#posts {
padding: 0;
margin: 0;
}
#posts li {
width: 600px;
border: 1px solid #eee;
background-color: #F9F9F9;
background-image: none;
float: left;
clear: both;
list-style: none;
margin: 0 0 5px 0;
padding: 5px;
}
#posts a {
text-decoration: none;
color: #999;
font-size: 0.85em;
}
#posts img {
display: block;
float: left;
border: 1px #ccc solid;
background: white;
padding: 3px;
margin: 0 10px 0 0;
}
#posts h1 {
padding: 5px 0 0 0;
margin: 0;
color: #CC0033;
font-family: "Times New Roman", Times, serif;
font-size: 1.2em;
}
#posts p {
margin: 0;
padding: 0 0 10px 0;
}
/*]]>*/
</style>

<script src="http://www.web-kreation.com/demos/mootools-1.2_mouseenter-mouseleave/js/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
<script src="http://www.web-kreation.com/demos/mootools-1.2_mouseenter-mouseleave/js/clickMe.js" type="text/javascript"></script>

Bạn nên tải về file mootools-1.2.1-core-yc.js và file clickMe.js rồi upload lên webhost của bạn để lấy URL, sau đó đặt vào phần scr.

Kế đến là thiết lập HTML như bên dưới rồi đặt vào phần thân của trang HTML, giữa 2 thẻ <body>, </body>.

<ul id="posts">
<li>
<img src="/images/image1.jpg" alt="" />
<h1>This is the title of the first news</h1>
<p>And this is the summary of the first news. You can use your own post to customize this part...</p>
<a href="http://ngonngulaptrinhvn.blogspot.com/" title="Read More">Read More &raquo;</a>
</li>
<li>
<img src="/images/image2.jpg" alt="" />
<h1>This is the title of the second news</h1>
<p>And this is the summary of the second news. You can use your own post to customize this part...</p>
<a href="http://ngonngulaptrinhvn.blogspot.com/" title="Read More">Read More &raquo;</a>
</li>
<li>
<img src="/images/image3.jpg" alt="" />
<h1>This is the title of the third news</h1>
<p>And this is the summary of the third news. You can use your own post to customize this part...</p>
<a href="http://ngonngulaptrinhvn.blogspot.com/" title="Read More">Read More &raquo;</a>
</li>
<li>
<img src="/images/image4.jpg" alt="" />
<h1>This is the title of the second news</h1>
<p>And this is the summary of the fourth news. You can use your own post to customize this part...</p>
<a href="http://ngonngulaptrinhvn.blogspot.com/" title="Read More">Read More &raquo;</a>
</li>
</ul>

Bạn nên chỉnh sửa URL ảnh đại diện, tiêu đề tin và nội dung tóm tắt của mỗi tin cho phù hợp với trang web của bạn.

More about →

Tạo bộ đếm ngược sử dụng Mootools

Có nhiều website như RapidShare hay 4shared chẳng hạn, thường bắt bạn đợi một khoảng thời gian định sẵn trước khi cho phép bạn tải về một phần mềm nào đó. Sử dụng công cụ MooTools có thể tạo ra plugin đếm ngược tương tự như các trang web nói trên.


Xem Demo.

Sau đây là Javascript MooTools.

var CountDown = new Class({

//implements
Implements: [Options,Events],

//options
options: {
element: 'countdown',
start: 10,
finish: 0,
startFont: '36px',
finishFont: '12px',
onComplete: $empty,
duration: 1000
},

//initialization
initialize: function(options) {
//set options
this.setOptions(options);
},

//get things started
start: function() {
this.anim();
},

//animate!
anim: function() {
this.options.element.set('text',this.options.start--);
var fx = new Fx.Tween(this.options.element,{
duration: this.options.duration,
link: 'ignore',
onComplete: function() {
if(this.options.start >= this.options.finish) {
this.anim();
} else {
this.fireEvent('complete');
}
}.bind(this)
}).start('font-size',this.options.startFont,this.options.finishFont);
}
});

/* usage */
window.addEvent('domready',function() {
var cd = new CountDown({
element: $('countdown'),
start: 12,
finish: 0,
onComplete: function() {
this.options.element.set('text','Xong rồi! Bạn đã có thể tải về phần mềm bạn cần!').setStyle('color','#090');
}
}).start();
});

Trong lớp CountDown có những tùy chọn cho phép bạn tùy chỉnh theo ý mình:
element: chứa văn bản đếm ngược
start: số bắt đầu (mặc định đến 10)
finish: số kết thúc (mặc định đến 0)
duration: thời gian giữa các số (mặc định đến 1000 hoặc 1 giây)
startFont: cỡ font chữ cho số bắt đầu
finishFont: cỡ font chữ cho số kết thúc

Một thứ quan trọng cần có là file javascript moo1.2.js đặt trước phần javascript ở trên. Bạn nên tải về moo1.2.js rồi gắn URL vào phần scr. Tóm lại bạn cần đặt tất cả chúng vào giữa 2 thẻ <head>, </head> như thế này:

<head>
<script type="text/javascript" src="/moo1.2.js"></script>
<script type="text/javascript">

var CountDown = new Class({

//implements
Implements: [Options,Events],

//options
options: {
element: 'countdown',
start: 10,
finish: 0,
onComplete: $empty,
duration: 1000
},

//initialization
initialize: function(options) {
//set options
this.setOptions(options);
},

//get things started
start: function() {
this.anim();
},

//animate!
anim: function() {
this.options.element.set('text',this.options.start--);
var fx = new Fx.Tween(this.options.element,{
duration: this.options.duration,
link: 'ignore',
onComplete: function() {
if(this.options.start >= this.options.finish) {
this.anim();
} else {
this.fireEvent('complete');
}
}.bind(this)
}).start('font-size',this.options.startFont,this.options.endFont);
}
});

window.addEvent('domready',function() {
var cd = new CountDown({
element: $('countdown'),
start: 12,
duration: 1000,
startFont: '36px',
endFont: '12px',
finish: 0,
onComplete: function() {
this.options.element.set('text','Xong rồi! Bạn đã có thể tải về phần mềm bạn cần!').setStyle('color','#090');
}
}).start();
});
</script>
</head>

Sau cùng là thiết lập HTML nơi hiển thị bộ đếm ngược:

<p><span id="countdown"></span></p>

Hy vọng đây có thể là công cụ hữu ích cho các bạn!

More about →