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

Điểm 4.6/5 dựa vào 87 đánh giá

(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

3 nhận xét

  1. 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é! ;)

    Trả lờiXóa
  2. À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ỉ? ;;)

    Trả lờiXóa
  3. Đó 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.

    Trả lờiXóa