"Cuộn góc Peel cho blogspot với Css&JQuery"

(Traidatmui.com) - Hôm nay mình xin chia sẻ đến các bạn một thủ thuật với hiệu ứng JQuery khá đẹp mắt. Thủ thuật này sẽ có hiệu ứng cuộn góc Peel cho trang blog của bạn bằng CSS và JQuery. Thủ thuật này được phát triển bởi tác giả của trang sohtanaka.com, thấy nó khá hay và có thể sử dụng cho blogger nên xin chia sẻ lại cách thực hiện thủ thuật này với các bạn. Cách thực hiện thủ thuật này cũng đơn giản, bạn có thể làm theo từng bước bên dưới là có thể áp dụng nó cho blog của mình.

Hình ảnh minh họa
1. Đăng nhập vào tài khoản Blogger
2. Vào thiết kế chọn chỉnh sửa HTML
3. Chèn code css bên dưới vào trước thẻ ]]></b:skin>
#pageflip {
position: relative;
}
#pageflip img {
width: 50px;
height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
z-index: 50;
right: 0; top: 0;
background: url(http://www.wallheaven.com/subscribe.png) no-repeat right top; /*màu nền bên dưới phần cuộn, nó hiển thị khi bạn rê chuột vào nó*/
text-indent: -9999px;
}

4. Chèn tiếp code bên dưới vào sau thẻ <head> hoặc trước thẻ đóng</head>
<script src="http://data-traidatmui.appspot.com/scripts/jquery.min.js" type="text/javascript"/>
<script type="text/javascript">
$(document).ready(function(){
//Page Flip on hover
$(&quot;#pageflip&quot;).hover(function() {
$(&quot;#pageflip img , .msg_block&quot;).stop()
.animate({
width: &#39;307px&#39;, //độ rộng của phần cuộn peel
height: &#39;319px&#39; //chiều cao của phần cuộn peel
}, 500);
} , function() {
$(&quot;#pageflip img&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;52px&#39;
}, 220);
$(&quot;.msg_block&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;50px&#39;
}, 200);
});
});
</script>

5. Tiếp theo bạn chèn code bên dưới vào sau thẻ <body>
<div id='pageflip'>

<a href='http://www.traidatmui.com/'><img alt='' src='http://www.wallheaven.com/page_flip.png'/></a>

<div class='msg_block'/></div>

Bạn thay phần màu đỏ đậm trong code thành đường link bạn muốn dẫn đến khi click vào phần cuộn của trang.

6. Cuối cùng save template lại.

Chúc bạn thành công.
Tham khảo từ sohtanaka.com

Xem khác cùng chủ đề

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

12/20/2010 11:04:00 CH Trả lời

Chà cái nay đơn giản mà nhìn đẹp mắt nhỉ!!
Dạo này site chú em xuất bản liên tục nhỉ!
Xin chúc mừng nhé! ;)

12/20/2010 11:08:00 CH Trả lời

Àh VDinh ơi, sao cái avatar emotion nó lại không hiển thị với admin nhỉ! nó có bị xung đột code kg nhỉ? ;;)

Admin
12/23/2010 12:40:00 SA Trả lời

Đó là do phần comment của tác giả trên blog bạn không nằm trong lớp hiển thị các biểu tượng vui đó. Bạn cho phần blog-author-comment nằm vào trong lớp comment-body thì nó sẽ hiển thị được.

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