Trong các loại mã nguồn như wordpress có rất nhiều các plugin hỗ trợ chức năng phóng to ảnh, nhưng đối với blogspot thì cái này quả là ít ỏi. Hôm nay thuthuatso.com xin chia sẻ với các bạn cách tạo hiệu ứng phóng to ảnh khi click chuột là ảnh trong bài viết. Để thực hiện việc này các bạn cần Download Highslide from the Highslide download page và unzip
Nếu các bạn có 1 domain và host thì mở highslide.css và highslide-ie.css (Lưu ý không dùng word để sửa) tìm và thay đổi đường dẫn cho đầy đủ. Ví dụ như sau
a.highslide-full-expand { background: url(graphics/fullexpand.gif) no-repeat; display: block; margin: 0 10px 10px 0; width: 34px; height: 34px; }
a.highslide-full-expand { background: url(tendomain.com/highslide/graphics/fullexpand.gif) no-repeat; display: block; margin: 0 10px 10px 0; width: 34px; height: 34px; }
Làm tiếp tục với tất cả các link ảnh trong 2 tập CSS trên. Up toàn bộ folder
highslide lên host
Bây giờ các bạn vào Bảng điều khiển Blogger => Thiết kế => Edit HTML => tìm và thêm đoạn code sau lên trước </head>
<!-- Start Highslide stuff --> <script src='http://domain.com/highslide/highslide-full.js' type='text/javascript'></script> <link href='http://domain.com/highslide/highslide.css' rel='stylesheet' type='text/css'/> <!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="http://domain.com/highslide/highslide-ie6.css" /> <![endif]--> <script type='text/javascript'> //<![CDATA[ hs.graphicsDir = 'http://domain.com/highslide/graphics/'; hs.wrapperClassName = 'borderless'; hs.align = 'center'; hs.dimmingOpacity = 0.65; hs.transitions = ['expand', 'crossfade']; hs.fadeInOut = true; // close button hs.registerOverlay({ html: '<div onclick="return hs.close(this)" title="Close"></div>', position: 'top right', fade: 2 // fading the semi-transparent overlay looks bad in IE }); hs.isUnobtrusiveAnchor = function(el) { if (el.href && /.(jpg|gif|png)$/.test(el.href) && !el.onclick) { el.className = 'highslide'; // for the zoom-in cursor el.title = 'Click to enlarge'; // for title return 'image'; } }; //]]> </script> <style type='text/css'> pre { background: white; padding: 5px; font-size: 10.9px; } </style> <!-- End Highslide stuff -->
Các bạn nên lấy code tại đây thuthuatso.com/wp-content/uploads/Highslide.txt và nếu không có domain và host riêng các bạn lấy code trực tiếp trong đó paste vào trước thẻ </head> và lưu lại là được.
Trong đó thay lại domain.com thành tên domain mà các bạn đã up folder lên
Demo: phanmem.thuthuatso.com/
Chúc các bạn thành công
