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

(Traidatmui.com) – 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

8 nhận xét | Viết lời bình

Phương

5/30/2011 05:45:00 CH

Trả lời

Anh ơi em thấy bên fandung.com có cái xem bài theo dạng full và list có phân trang, anh hướng dẫn cái này đi, anh giỏi lắm, cảm ơn anh trước votay

Admin

Trai Đất Mũi (admin)

6/12/2011 07:09:00 SA

Cái thủ thuật em nói bên Fandung đã có giới thiệu rồi em váo đó tham khảo nhe

nhockewell

6/17/2011 11:40:00 SA

Bạn cho mình xin code click vào link nào trong blog cũng hiện ra thêm 1 cửa sổ khác với địa chỉ do mình chỉ định nhé

6/17/2011 06:11:00 CH

Nếu muốn hiện thêm cửa sổ khi click vào link nào đó thì bạn chỉ việc thêm target="_blank" vào trong thẻ <a> là được thôi bạn. Ví dụ: <a href="Link url" target="_blank">Tên Link</a> ;;D

6/18/2011 12:22:00 SA

Ý mình là click bất cứ link nào trong blog của mình cũng sẽ bật ra kèm 1 cửa sổ.

Lý Siêu Nhân

6/18/2011 07:00:00 CH

Ý của nhockewell là: khi click vô link sẽ nhảy ra các trang mới dạng Spam quảng cáo, cái này tớ cũng chả biết...chỉ biết là phải nhét thêm Script gì gì đó,hehe (cũng chả biết nữa). Chờ admin Traidatmui.com trả lời