Hướng dẫn thêm hiệu ứng Highslide (phóng to) ảnh cho blogspot

 

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; }

thay lại thành 

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

Nguồn: http://thuthuatso.com/2011/07/26/huong-dan-them-hieu-ung-highslide-phong-to-anh-cho-blogspot/#ixzz1XiWPiXFt