Item: Chèn hiệu ứng cuốn góc (Peel Away) bằng jQuery cho trang Blogspot
Rating: 9.5
Author: Bùi Tấn Đạt

Bởi: Bùi Tấn Đạt - Lúc: 17:00

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.

blogspot tips, hiệu ứng cuốn góc, peel away, thu thuat blog, thu thuat blogspot

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 width to allow for shadow and movement*/
 
#PagePeel{
 
    height:120px;
 
    overflow:hidden;
 
    position:absolute;
 
    right:0;
 
    top:0;
 
    width: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 :

<!--MBL Page Peel PRO Effect For Blogger-->
 
<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":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZXeTAlv7HR9hUsNBVR0Rp6MVcFkQneq8WK8SIShX0ksPa2xGf7J-fsvnv5ik-lgZF1Kxkd-6NEXqMRhsrzQ4a-MUkGkskfmsAL0JgljoGZErvq_Q-cBCpESiyCqoujS_zMBuf0v790U8/s1600/DottedAdvertSmall.png", "largeImageUrl":"link-hinh","peelColorStart":"#545454","peelColorEnd":"#cdcdcf","pagePeelTargetUrl":"http://www.your-ad-url.com","pagePeelActivateEvent":"hover"};
 
// ]]></script>