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

 

Stones - click to enlarge

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(http://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 class="closebutton" 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 http://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
Chúc các bạn thành công

Read More