Cửa sổ xuất hiện trước blog khi click vào link với hiệu ứng Mootools

2 thg 3, 2012

Hôm nay chúng ta sẽ thực hiện một thủ thuật sử dụng mootools làm hiệu ứng, thủ thuật này sẽ giúp bạn có thể tạo một cửa sổ thông báo hay chứa một tiện ích nào đó. Với hiệu ứng mootools, tiện ích này sẽ xuất hiện theo kiểu nhảy từ trên xuống cùng hiệu ứng Bounce trông đẹp mắt hơn. Tiện ích này chỉ xuất hiện khi người dùng cần đến nó, bình thường thì nó sẽ được ẩn đi điều này sẽ không làm ảnh hưởng nhiều đến không gian blog của bạn. Bạn có thể xem hình ảnh hay demo bên dưới để thấy rỏ hơn.

Hình ảnh minh họa

» Bắt đầu thủ thuật

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 code bên dưới vào sau thẻ <head>

» Chỉnh code: Thông số (1500) chính là tốc độ trình diễn của tiện ích; (500) là tốc độ của hiệu ứng nhanh hay chậm; (280) đây là chiều cao của tiện ích, bạn chỉnh sửa cho phù hợp với nội dung của bạn hiển thị trong tiện ích này.

5. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>

.mooSlide {
background: #F1F2F3 url(https://lh5.googleusercontent.com/_9-sNIAfGhKg/TZmfilF9Q_I/AAAAAAAAAMs/zb1znnOLKQ8/bg.png) repeat-y;
padding: 0PX;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.2em;
margin: 0 auto;
text-align: left;
font-size: 12px;
display: none;
width: 550px; /*độ rộng của tiện ích*/
color:#666;
border-bottom:2px solid #ccc;
}
.mooSlide a {
text-decoration: underline;
}
.mooSlide h2 {
font-size: 14px;
padding: 3px;
margin-bottom: 5px;
text-align: center;
background: #CCC; /*màu nền tiêu đề của tiện ích*/
color:#000;
}

#top {
display: block;
clear: both;
height: 26px;
width: 100%;
background: url(https://lh3.googleusercontent.com/_9-sNIAfGhKg/TZmWLOIl6GI/AAAAAAAAAMY/54F9z8RQ4EE/top_bg.jpg) repeat-x 0 0;
}
#top .top_left {
display: block;
clear: left;
float: left;
height: 26px;
width: 9px;
background: url(https://lh5.googleusercontent.com/_9-sNIAfGhKg/TZmWLaDezbI/AAAAAAAAAMU/q_sfPEiUiMc/top_left.jpg) no-repeat 0 0;
}
#top .loginClose {
float: right;
width: 18px;
height: 26px;
}
.loginClose a {
display: block;
width: 100%;
height: 100%;
background: url(https://lh5.googleusercontent.com/_9-sNIAfGhKg/TZmWKb6Cz2I/AAAAAAAAAL4/tPQ7EpsflQ0/button_close.jpg) no-repeat -18px 0;
border: none;
text-decoration: none;
}
.loginClose a:hover {
background-position: 0 0;
}
.top_right {
display: block;
clear: right;
float: right;
height: 26px;
width: 10px;
background: url(https://lh4.googleusercontent.com/_9-sNIAfGhKg/TZmWLaIlVYI/AAAAAAAAAMc/IKYv9lzim-8/top_right.jpg) no-repeat right 0;
}

.mooSlide .left {
width: 48%;
float: left;
padding:5px 5px 5px 5px;
}
.mooSlide .right {
width: 48%;
float: right;
padding:5px 5px 5px 5px;
}
.mooSlide .sep {
width: 2px;
height: 180px;
margin-top:15px;
float: left;
background: url(https://lh5.googleusercontent.com/_9-sNIAfGhKg/TZmWLP3fyoI/AAAAAAAAAMQ/QoHdHbrotrk/sep.jpg) repeat-y 0 0;
}

6. Save template lại và trở về phần tử trang (Page Elements)
7. Thêm 1 HTML/Javascript và chèn vào nó code bên dưới

Bạn chỉnh sửa tiêu đề hay nội dung cho phù hợp với blog của mình.

8. Cuối cùng save tiện ích lại

» Mở rộng thủ thuật

Ở đây mình xin chia sẻ code để giúp bạn tạo form đăng nhập (Login) hay ghi danh (Register) có sử dụng hiệu ứng này. Nếu trên site bạn có tiện ích giúp người dùng đăng ký hay đăng nhập thì sử dụng code bên dưới cho blog của mình sẽ trông đẹp hơn. Bạn có thể xem LIVE DEMO

Hình ảnh minh họa

a. Thay code CSS ở bước 5 thành code bên dưới

.mooSlide {
background: #F1F2F3 url(https://lh5.googleusercontent.com/_9-sNIAfGhKg/TZmfilF9Q_I/AAAAAAAAAMs/zb1znnOLKQ8/bg.png) repeat-y;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.2em;
margin: 0 auto;
text-align: left;
font-size: 0.85em;
display: none;
width: 550px;
color:#666;
}

.mooSlide a {
text-decoration: underline;
}
.mooSlide h1 {
font-size: 1.6em;
padding-top: 10px;
margin-top: 10px;
}
.mooSlide h1.padlock {
background: url(https://lh6.googleusercontent.com/_9-sNIAfGhKg/TZmWLNGQO9I/AAAAAAAAAMM/-uGcGuCwBjc/padlock.jpg) no-repeat 0 bottom;
padding-left: 25px;
}

/*box*/
#top {
display: block;
clear: both;
height: 26px;
width: 550px;
background: url(https://lh3.googleusercontent.com/_9-sNIAfGhKg/TZmWLOIl6GI/AAAAAAAAAMY/54F9z8RQ4EE/top_bg.jpg) repeat-x 0 0;
}
#top .top_left {
display: block;
clear: left;
float: left;
height: 26px;
width: 9px;
background: url(https://lh5.googleusercontent.com/_9-sNIAfGhKg/TZmWLaDezbI/AAAAAAAAAMU/q_sfPEiUiMc/top_left.jpg) no-repeat 0 0;
}
#top .loginClose {
float: right;
width: 18px;
height: 26px;
}
.loginClose a {
display: block;
width: 100%;
height: 100%;
background: url(https://lh5.googleusercontent.com/_9-sNIAfGhKg/TZmWKb6Cz2I/AAAAAAAAAL4/tPQ7EpsflQ0/button_close.jpg) no-repeat -18px 0;
border: none;
text-decoration: none;
}
.loginClose a:hover {
background: url(https://lh5.googleusercontent.com/_9-sNIAfGhKg/TZmWKb6Cz2I/AAAAAAAAAL4/tPQ7EpsflQ0/button_close.jpg) no-repeat 0 0;
}
.top_right {
display: block;
clear: right;
float: right;
height: 26px;
width: 10px;
background: url(https://lh4.googleusercontent.com/_9-sNIAfGhKg/TZmWLaIlVYI/AAAAAAAAAMc/IKYv9lzim-8/top_right.jpg) no-repeat right 0;
}
#bottom {
display: block;
clear: both;
width: 550px;
height: 15px;
background: url(https://lh4.googleusercontent.com/_9-sNIAfGhKg/TZmWKMx-nLI/AAAAAAAAALs/1DxJDpkhI34/bottom_bg.jpg) repeat-x 0 bottom;
}
#bottom .bottom_left {
display: block;
clear: left;
float: left;
height: 15px;
width: 9px;
background: url(https://lh6.googleusercontent.com/_9-sNIAfGhKg/TZmWKM9Ew4I/AAAAAAAAALw/AElE4fr025Y/bottom_left.jpg) no-repeat 0 bottom;
}
#bottom .bottom_right {
display: block;
clear: right;
float: right;
height: 15px;
width: 10px;
background: url(https://lh4.googleusercontent.com/_9-sNIAfGhKg/TZmWKCWuNXI/AAAAAAAAAL0/64an2ZtR9tw/bottom_right.jpg) no-repeat right bottom;
}
/* Content */
.mooSlide .wrapper {
background: url(https://lh6.googleusercontent.com/_9-sNIAfGhKg/TZmWK4BFyfI/AAAAAAAAAME/RSbxAliHv-Q/middle_left.jpg) repeat-y 0 0;
width: 550px;
}

.mooSlide .content {
background: url(https://lh3.googleusercontent.com/_9-sNIAfGhKg/TZmWK-ziO6I/AAAAAAAAAMI/PkiyOLmvLVw/middle_right.jpg) repeat-y right 0;
width: 550px;
}

.mooSlide .left {
width: 240px;
float: left;
padding-left: 20px;
}
.mooSlide .right {
width: 245px;
float: left;
padding-left: 20px;
}
.mooSlide .sep {
width: 2px;
height: 180px;
margin-top: 25px;
float: left;
background: url(https://lh5.googleusercontent.com/_9-sNIAfGhKg/TZmWLP3fyoI/AAAAAAAAAMQ/QoHdHbrotrk/sep.jpg) repeat-y 0 0;
}

/*form*/
.mooSlide form {
margin: 0 0 10px 0;
height: 26px;
}

.mooSlide label {
float: left;
padding-top: 8px;
clear: both;
display: block;
width: 230px;
}

.mooSlide input {
border: 1px #ccc solid;
background: white;
margin-right: 5px;
margin-top: 4px;
height: 16px;
float: left;
clear: both;
display: block;
}

.mooSlide input:focus {
border: #999 1px solid;
}
.mooSlide input.rememberme {
border: none;
background: transparent;
margin: 0;
padding: 0;
}
.mooSlide input.button_login {
width: 84px;
height: 22px;
cursor: pointer;
border: none;
margin-top: 10px;
background: transparent url(https://lh4.googleusercontent.com/_9-sNIAfGhKg/TZmWKSMFDMI/AAAAAAAAAL8/t6RMpMCD4Xg/button_login.jpg) no-repeat 0 0;
}
.mooSlide input.button_login:hover {
background: transparent url(https://lh4.googleusercontent.com/_9-sNIAfGhKg/TZmWKSMFDMI/AAAAAAAAAL8/t6RMpMCD4Xg/button_login.jpg) no-repeat 0 -22px;
}
.mooSlide input.button_register {
width: 84px;
height: 22px;
cursor: pointer;
border: none;
margin-top: 10px;
background: transparent url(https://lh6.googleusercontent.com/_9-sNIAfGhKg/TZmWKuReXbI/AAAAAAAAAMA/YM20sD8thfU/button_register.jpg) no-repeat 0 0;
}
.mooSlide input.button_register:hover {
background: transparent url(https://lh6.googleusercontent.com/_9-sNIAfGhKg/TZmWKuReXbI/AAAAAAAAAMA/YM20sD8thfU/button_register.jpg) no-repeat 0 -22px;
}

b. Thay code bước 7 thành code bên dưới

<div class="mooSlide" id="loginPanel">
<div id="top">
<div class="top_left"></div>
<div class="top_right"></div>

<div class="loginClose"><a href="#" id="close"></a></div>
</div>

<div class="wrapper">
<div class="content">
<form action="#" class="left" method="post">
<h1 class="padlock">Member Login</h1>
<label for="log"><b>Username: </b></label>

<input id="log" name="log" size="29" type="text" value=""/>
<label for="pwd"><b>Password:</b></label>
<input id="pwd" name="pwd" size="29" type="password"/>
<label><input checked="checked" class="rememberme" id="rememberme" name="rememberme" type="checkbox" value="forever"/> <small> Remember me | <a href="#">Lost your password?</a></small></label>
<input class="button_login" name="submit" type="submit" value=""/>
</form>

<div class="sep"></div>

<form action="#" class="right" method="post">
<h1>Not a Member? Sign Up!</h1>
<label for="signup"><b>Username: </b></label>
<input id="signup" name="signup" size="29" type="text" value=""/>
<label for="email"><b>Email:</b></label>
<input id="email" name="email" size="29" type="text"/>

<input class="button_register" name="submit" type="submit" value=""/>
</form>

<br class="endOfSection"/>
</div>
</div>

<div id="bottom">
<div class="bottom_left"></div>
<div class="bottom_right"></div>

</div>
</div>

Bạn chỉnh sửa lại phần form cho phù hợp là xong.

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

Địa chỉ bài viết: http://www.traidatmui.com/2011/05/cua-so-xuat-hien-truoc-blog-khi-click.html#ixzz1nt0QuJHt
Nguồn: TRAIDATMUI.com