Tạo hiệu ứng cuốn góc (Peel Away) bằng jQuery cho Blogspot

Đăng bởi Admin | 5/12/13 | 0 nhận xét

Hôm nay, mình xin giới thiệu với các bạn cách tạo hiệu ứng cuốn góc (Peel Away) bằng jQuery cho blog, giúp các bạn chèn nó vào ngay trong trang Blogspot của mình.

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 :

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

/*=======================================================    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 :

1 2 3 4 5 6 7 8 9

<!--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/AVvXsEixWPq4ERB7oUEqh3Ul4fV90KVdirhvtIj6O90fFsjCxRvmJj86rssShx9iY2vcNcnUBBkfxr6WlCMDVOsgOwEIxw0sglUO6w8Rpn-G8yh3xmryzqEi-5eHpSS8xtw5vzSab1PC88UOklo/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 !

                                                                                                             Nguồn: thuthuatweb.net