Sử Dụng JQuery Và Hiệu Ứng Zoom Hình Ảnh Cho Blogspot

DEMO:

• 
• 
• 
• 
• 

Đăng nhập Bảng điều khiển --> Thiết kế --> Chỉnh sửa HTML
Tìm đoạn "]]></b:skin>" ( Crl+F)
Dán đoạn code sau vào trước nó:

ul.thumb { float: left; list-style: none; margin: 0; padding: 10px; width: 360px; } ul.thumb li { margin: 0; padding: 5px; float: left; position: relative; /* Set the absolute positioning base coordinate */ width: 110px; height: 110px; } ul.thumb li img { width: 100px; height: 100px; /* Set the small thumbnail size */ -ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */ border: 1px solid #ddd; padding: 5px; background: #f0f0f0; position: absolute; left: 0; top: 0; } ul.thumb li img.hover { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjufs_jVNYbKIdPegm6RBfkzOXaUd_amO1PcXL5hT9ZsUM15RdKyjt925EOKQSTs5-qljE7GvWemu_gSXvxmnQLosaJS-1FzgX857tytEh-A38VZL6TXjmRK35JImxOGmkQJOz6XKb7IW34/) no-repeat center center; border: none; }

Các bạn có thể chỉnh sửa code width: 360px; là độ rộng của gallery ảnh cho phù hợp với blog của bạn
Tìm thẻ </head>

và dán trước nó đoạn code sau:

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/><script type='text/javascript'>$(document).ready(function(){ //Larger thumbnail preview $("ul.thumb li").hover(function() { $(this).css({'z-index' : '10'}); $(this).find('img').addClass("hover").stop() .animate({ marginTop: '-110px', marginLeft: '-110px', top: '50%', left: '50%', width: '174px', height: '174px', padding: '20px' }, 200); } , function() { $(this).css({'z-index' : '0'}); $(this).find('img').removeClass("hover").stop() .animate({ marginTop: '0', marginLeft: '0', top: '0', left: '0', width: '100px', height: '100px', padding: '5px' }, 400); }); //Swap Image on Click $("ul.thumb li a").click(function() { var mainImage = $(this).attr("href"); //Find Image Name $("#main_view img").attr({ src: mainImage }); return false; }); }); </script>

Chọn : Lưu mẫu

Kế đến bạn dùng đoạn code sau đây để post hình cho Blog của bạn:

<ul class="thumb"><li><a href="#"><img src="Link ảnh 1" alt="" /></a></li><li><a href="#"><img src="Link ảnh 2" alt="" /></a></li><li><a href="#"><img src="Link ảnh 3" alt="" /></a></li><li><a href="#"><img src="Link ảnh 4" alt="" /></a></li></ul>

Lưu ý: Phần code này dùng để post trong Bài viết nhé, dán link ảnh của bạn vào Link ảnh theo thứ tự từng ảnh 1,2,3,4. Trường hợp nhiều ảnh thì bạn có thể copy từ <li> đến </li> và dán tiếp theo