Login

Thêm 1 cách tạo hiệu ứng zoom cho ảnh trong Blogger

Như các bạn đã biết, vừa qua mình mới giới thiệu cách tạo hiệu ứng zoom cho ảnh trong Blogger với FancyZoom. Tuy nhiên, nhận thấy FancyZoom còn nhiều khuyết điểm nên hôm nay, mình sẽ giới thiệu 1 cách mới để tạo hiệu ứng zoom cho ảnh nhờ mã Lightbox. Mời các bạn xem qua :
  1. Đầu tiên, các bạn đăng nhập vào Blogger > Layout > Edit HTML (không cần Mở rộng mẫu tiện ích)
  2. Thêm đoạn code bên dưới vào ngay bên trên thẻ </head>
    <link href='http://boyprodx.110mb.com/lightbox.css' media='screen' rel='stylesheet' type='text/css'/>
    <script src='http://boyprodx.110mb.com/prototype.js' type='text/javascript'/>
    <script src='http://boyprodx.110mb.com/scriptaculous.js?load=effects,builder' type='text/javascript'/>
    <script src='http://boyprodx.110mb.com/lightbox.js' type='text/javascript'/>
  3. Save lại template .
Vậy là bạn đã thiết lập được tính năng zoom cho Blogger rồi đấy. Thủ thuật này tuy dùng nhiều file .js hơn thủ thuật cũ, nhưng do không thay đổi thẻ <body> nên sẽ load nhanh hơn và mượt mà hơn thủ thuật cũ. Và tất nhiên, để dùng được tính năng zoom thì bạn không dùng thẻ <img src="Link hình" /> để chèn hình nữa, mà phải dùng code sau :
<a href="Link hình" rel="lightbox" title="Tên của ảnh"><img src="Link hình" width="Chiều dài thumbnail" height="Chiều cao thumbnail" /></a>
chẳng hạn như :
<a href="http://img24.imageshack.us/img24/1162/banner2009sa2.jpg" rel="lightbox" title="Banner Blog tin học"><img src="http://img24.imageshack.us/img24/1162/banner2009sa2.jpg" width="300" height="100" /></a>

P/s : Mình đã giới thiệu xong thủ thuật tạo hiệu ứng zoom cho ảnh bằng Lightbox rồi. Bạn có thể xem thử hiệu ứng tại đây . Nếu bạn có thắc mắc, ý kiến, hãy gửi comment cho mình nhé. Mình sẽ trả lời trong thời gian nhanh nhất. Thân chào !

 
blogcongnghe © 2012 | Thiết kế bởi Tâm Nguyên