"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>
<script src='http://data-traidatmui.appspot.com/scripts/mootools.1.2.js' type='text/javascript'/>
<script src='http://data-traidatmui.appspot.com/scripts/mooSlide.js' type='text/javascript'/>
<script language='javascript' type='text/ecmascript'>
window.addEvent('domready',function(){
var myLogin = new mooSlide2({ slideSpeed: 1500, fadeSpeed: 500, toggler:'login', content: 'loginPanel', height:280, close: false, effects:Fx.Transitions.Bounce.easeOut , from:'top'});
//optional: AutoStart the slider on page load:
//MyLogin.run();
$('close').addEvent('click', function(e){
e = new Event(e);
myLogin.clearit();
e.stop();
});
});

</script>

» 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
<a href="#" id="login"><b>XEM TIỆN ÍCH</b></a>

<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">
<div class="left">
<h2> TIÊU ĐỀ Ở CỘT THỨ NHẤT</h2>

NỘI DUNG Ở CỘT THỨ NHẤT

</div>

<div class="sep"></div>
<div class="right">
<h2> TIÊU ĐỀ Ở CỘT THỨ 2</h2>

NỘI DUNG Ở CỘT THỨ 2

</div>

<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 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

Xem khác cùng chủ đề

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

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
6/12/2011 07:09:00 SA Trả lời

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

6/17/2011 11:40:00 SA Trả lời

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é

Admin
6/17/2011 06:11:00 CH Trả lời

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 Trả lời

Ý 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ổ.

6/18/2011 07:00:00 CH Trả lời

Ý 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

6/18/2011 09:05:00 CH Trả lời

Đúng ùi đó bạn Lý, mong admin giúp mình .... hix

7/24/2015 02:20:00 SA Trả lời

Bạn ơi bên mình có dịch vụ Đăng tin tự động lên groups trên facebook miễn phí bạn xem qua nhé. miễn phí 100%
Ngoài ra các bạn có thể đọc tin tức tại Kênh tin tức giải trí yeubao.com
Các bạn có thể truy cập link sau để xem thông tin công nghệ
Khoinguoncongnghe.net | kênh thông tin dành cho tín đồ công nghê
cám ơn bạn đã đọc
đăng tin tự động trên facebook miễn phí 100% xem tại Đăng tin tự động lên groups trên facebook miễn phí
xem thủ thuật blogspot, thủ thuật blogger, thủ thuật facebook tại thủ thuật tổng hợp facebook, blogger,coputuer
xem tin tức giới trẻ, các tin nổi bật tin tức nổi bật, tin sao, tin giới trẻ, đời sống xã hội
xem thong tin giải trí, cung hoàng đạo, tại bí mật 12 chòm sao,tâm sự,blog tâm sự

giải trí thư giã relax giải trí thư giãn relax
khám phá du lịch, bi ẩn khám phá du lịch, bí ẩn
kho video giải trí khổng lồ video đời sống xã hội, video giải trí
khởi nguồn công nghệ, xem tin tức công nghệ, tin tức internet
tin tức internet
Tin tức itc , tin tức technogoy tin tức ict

Khám phá công nghệ
khám phá

Thủ thuật công nghê thủ thuật công nghệ, tips





Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang