Cách chèn hiệu ứng cuốn góc (Peel Away) bằng jQuery cho trang Blogspot

Trong bài viết Tạo hiệu ứng cuốn góc (Peel Away) cho trang WordPress, mình đã giới thiệu cho các bạn một thủ thuật để làm hiệu ứng này. Tuy nhiên, hôm nay mình sẽ chỉ thêm một cách nữa làm bằng jQuery, và đặc biệt là giúp các bạn chèn nó vào ngay trong trang Blogspot của các bạn.

Bước 1 : Vào Blogger.com >> Template >> Edit HTML  sau đó tìm đoạn chữ sau : ]]></b:skin> , sau đó chèn đoạn css sau bên trên đoạn chữ vừa tìm được :

/*=======================================================
   MBL Page Peel PRO Effect For Blogger
  =======================================================*/

.admin-bar #PagePeel{top:27px;}

/*Extra 20px height and awidth to allow for shadow and movement*/
#PagePeel{
    height:120px;
    overflow:hidden;
    position:absolute;
    right:0;
    top:0;
    awidth:120px;
    z-index:9999;
}

#PagePeel svg{
    overflow: hidden;
    position: absolute !important;
    right: 0;
    top: 0;
}

#PagePeel .pointCursor:hover{cursor:pointer;}

#mycontent { position:relative; margin-left:30px; }

Bước 2 : Sau khi chèn xong, các bạn tiếp tục tìm kiếm thẻ </head> rồi copy đoạn javascript sau
và past ngay trên thẻ này :

 

<script type="text/javascript" src="https://googledrive.com/host/0B0WJjcJEFNziazIzXzlhMlhtWlU"></script><script type="text/javascript" src="https://googledrive.com/host/0B0WJjcJEFNziMmk4anpFWnRPWHc"></script>
<script type="text/javascript" src="https://googledrive.com/host/0B0WJjcJEFNzidExmT1JpWV9xNmc"></script></pre>
<div id="mycontent">Peel Away Effect By <a href="http://www.thuthuatweb.net">thuthuatweb.net</a></div>
<pre>
<script type="text/javascript">// <![CDATA[
var PagePeelProParams = {"smallImageUrl":"http://3.bp.blogspot.com/-8R2exm5kGEs/UP1mU6NRXaI/AAAAAAAAMNw/ale8VHoC3Aw/s1600/DottedAdvertSmall.png", "largeImageUrl":"link-hinh","peelColorStart":"#545454","peelColorEnd":"#cdcdcf","pagePeelTargetUrl":"http://www.your-ad-url.com","pagePeelActivateEvent":"hover"};
// ]]></script>

Trong đoạn javascript trên , có 2 đường dẫn bạn cần phải thay thế :

– Một là : link-hinh – Các bạn nên thay thế bằng hình ảnh của các bạn , nhớ là kích thước nên đặt là 500 x 500 px.

– Hai là : http://www.your-ad-url.com : Thay bằng link mà bạn muốn trở tới khi click vào banner.

Sau khi thay xong, các bạn lưu lại và kiểm tra kết quả là xong.

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

Chuyên Mục: Blogspot

Bài viết được đăng bởi webmaster