Tạo slide bài viết cho blog



Kwicks Slider for Blogger

Giới thiệu: Loại slider thường thấy ở các trang Yahoo, tin tức. Nội dung trên Slider thường là các bài đăng mà bạn tâm đắc, bạn muốn hiển thị bài đăng nào trên slider này thì bạn chèn link bài đăng đó vào. Slider thường được đặt ở phần header nhằm dễ đập vào mắt khách xem, dễ thu hút sự chú ý của khách, và nhìn cũng đẹp mắt hơn. 


CÁCH THỰC HIỆN 

1. Đăng nhập Blogger Dashboard (Bảng điều khiển) 
2. Chọn: Design (Thiết kế) > Edit HTML (Chỉnh sữa HTML) 
3. Không cần đánh dấu chọn ô: Expand Widget Templates (Mở rộng mẫu tiện ích) 

4. Chèn script 

Bước 1: Yêu cầu phải có jQuery. (Có rồi thì bỏ qua)



1. Tải về máy một trong ba phiên bản jQuery sau: 1.3.1 | 1.3.2 | 1.4.3

2. Up lên host cho link direct.

- Gợi ý: Dùng host của google: http://code.google.com/
- Hướng dẫn: Here
- Sau khi up lên host, thì lấy link vừa up.

3. Tìm thẻ <head>

- Thêm vào dưới nó đoạn code sau:
(Nhớ thay jQuery.JS bằng link mới bạn vừa up lên host)

<script src='jQuery.JS' type='text/javascript'/>


4. Save template. (Lưu mẫu)


Bước 2: Tìm dòng ]]></b:skin>

- Thêm vào trước nó đoạn code CSS sau: 

/* Kwicks Slider for Blogger (1)*/
/*Khung slider chính*/
#slider{
     width:900px; /*Bề rộng khung slider
*Chỉnh bằng với tổng bề rộng các ảnh thumbnail cộng lại
*Không có hiệu lực nếu chèn slider trong 1 widget riêng biệt - Nghĩa là sẽ tự động có width tối đa*/
     height:100%; 
     margin:auto;
     padding:0px 0 0 0;
     position:relative;
}

#slider h2{display:none;}

.kwicks_container{
     width:100%;
     margin:0 auto;
}

/*Định dạng ảnh slide
 *Là hình thumbnail các ảnh xếp nhau trên slider khi chưa rê chuột vào*/
.kwicks li{
     display:block;      
     float:left;
     overflow:hidden; 
     padding:0;
     cursor:pointer;
     height:300px; /*Chiều cao ảnh*/
     width:180px; /*Bề rộng ảnh thumbnail
*5 bài viết thì có 5 thumpnail ảnh, suy ra bề rộng slider=900px*/
     z-index:2;
}

/*Màu chữ trong khung tiêu đề*/
.kwicks li a{
     color:#adadad;
     outline:none;
     display:block;
     z-index:100;
     cursor:pointer;
     text-decoration:none;
}

/*Tạo bóng đổ*/
li#kwick{
     -moz-box-shadow:0 0 10px #333;
     -webkit-box-shadow:0 0 10px #333;
      box-shadow:0 0 10px #333;
}

/*Màu chữ khi rê chuột vào tiêu đề*/
.kwicks a:hover,.kwicks #active{
     color:#FFF;
}

/*Chỉnh độ mờ nền khung tiêu đề*/
.slider{
     filter:alpha(opacity=80);
     opacity:0.8;
     -moz-opacity:0.8;
}

/*Khung tiêu đề*/
.slider{
     width:100%; /*Bề rộng khung tiêu đề*/
     height:100px; 
     background:#343434; /*Màu nền khung tiêu đề*/
     position:absolute;
     display:block;
     bottom:0;
     left:0;
     z-index:2;
     padding:5px 15px;
     font: 9pt Tahoma; /*Font chữ và kiểu chữ mô tả*/
     line-height:1em;
     cursor:pointer;
}

/*Định dạng tiêu đề*/
.sliderheading{
     display:block;
     font: 11pt Tahoma; /*Font chữ và kiểu chữ tiêu đề*/
     font-weight:bold; /*Chữ in đậm*/
     margin:2px;
}

Bước 3: Tìm thẻ đóng </head>

- Thêm vào trước nó đoạn code sau:

<!-- Kwicks Slider for Blogger (2) -->
<script type='text/javascript'>
//<![CDATA[
/*
 * jQuery Easing 1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
 * TERMS OF USE - jQuery Easing
 * Open source under the BSD License. 
 * Copyright © 2008 George McGinley Smith
*/

// t: current time, b: begInnIng value, c: change In value, d: duration
jQuery.easing['jswing'] = jQuery.easing['swing'];

jQuery.extend( jQuery.easing,
{
 def: 'easeOutQuad',
 swing: function (x, t, b, c, d) {
  //alert(jQuery.easing.default);
  return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
 },
 easeInQuad: function (x, t, b, c, d) {
  return c*(t/=d)*t + b;
 },
 easeOutQuad: function (x, t, b, c, d) {
  return -c *(t/=d)*(t-2) + b;
 },
 easeInOutQuad: function (x, t, b, c, d) {
  if ((t/=d/2) < 1) return c/2*t*t + b;
  return -c/2 * ((--t)*(t-2) - 1) + b;
 },
 easeInCubic: function (x, t, b, c, d) {
  return c*(t/=d)*t*t + b;
 },
 easeOutCubic: function (x, t, b, c, d) {
  return c*((t=t/d-1)*t*t + 1) + b;
 },
 easeInOutCubic: function (x, t, b, c, d) {
  if ((t/=d/2) < 1) return c/2*t*t*t + b;
  return c/2*((t-=2)*t*t + 2) + b;
 },
 easeInQuart: function (x, t, b, c, d) {
  return c*(t/=d)*t*t*t + b;
 },
 easeOutQuart: function (x, t, b, c, d) {
  return -c * ((t=t/d-1)*t*t*t - 1) + b;
 },
 easeInOutQuart: function (x, t, b, c, d) {
  if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
  return -c/2 * ((t-=2)*t*t*t - 2) + b;
 },
 easeInQuint: function (x, t, b, c, d) {
  return c*(t/=d)*t*t*t*t + b;
 },
 easeOutQuint: function (x, t, b, c, d) {
  return c*((t=t/d-1)*t*t*t*t + 1) + b;
 },
 easeInOutQuint: function (x, t, b, c, d) {
  if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
  return c/2*((t-=2)*t*t*t*t + 2) + b;
 },
 easeInSine: function (x, t, b, c, d) {
  return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
 },
 easeOutSine: function (x, t, b, c, d) {
  return c * Math.sin(t/d * (Math.PI/2)) + b;
 },
 easeInOutSine: function (x, t, b, c, d) {
  return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
 },
 easeInExpo: function (x, t, b, c, d) {
  return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
 },
 easeOutExpo: function (x, t, b, c, d) {
  return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
 },
 easeInOutExpo: function (x, t, b, c, d) {
  if (t==0) return b;
  if (t==d) return b+c;
  if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
  return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
 },
 easeInCirc: function (x, t, b, c, d) {
  return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
 },
 easeOutCirc: function (x, t, b, c, d) {
  return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
 },
 easeInOutCirc: function (x, t, b, c, d) {
  if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
  return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
 },
 easeInElastic: function (x, t, b, c, d) {
  var s=1.70158;var p=0;var a=c;
  if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
  if (a < Math.abs(c)) { a=c; var s=p/4; }
  else var s = p/(2*Math.PI) * Math.asin (c/a);
  return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
 },
 easeOutElastic: function (x, t, b, c, d) {
  var s=1.70158;var p=0;var a=c;
  if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
  if (a < Math.abs(c)) { a=c; var s=p/4; }
  else var s = p/(2*Math.PI) * Math.asin (c/a);
  return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
 },
 easeInOutElastic: function (x, t, b, c, d) {
  var s=1.70158;var p=0;var a=c;
  if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
  if (a < Math.abs(c)) { a=c; var s=p/4; }
  else var s = p/(2*Math.PI) * Math.asin (c/a);
  if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
  return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
 },
 easeInBack: function (x, t, b, c, d, s) {
  if (s == undefined) s = 1.70158;
  return c*(t/=d)*t*((s+1)*t - s) + b;
 },
 easeOutBack: function (x, t, b, c, d, s) {
  if (s == undefined) s = 1.70158;
  return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
 },
 easeInOutBack: function (x, t, b, c, d, s) {
  if (s == undefined) s = 1.70158; 
  if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
  return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
 },
 easeInBounce: function (x, t, b, c, d) {
  return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
 },
 easeOutBounce: function (x, t, b, c, d) {
  if ((t/=d) < (1/2.75)) {
   return c*(7.5625*t*t) + b;
  } else if (t < (2/2.75)) {
   return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
  } else if (t < (2.5/2.75)) {
   return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
  } else {
   return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
  }
 },
 easeInOutBounce: function (x, t, b, c, d) {
  if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
  return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
 }
});
//]]>
</script>

<script type='text/javascript'>
//<![CDATA[
/*
 Kwicks for jQuery 1.5.1
 Copyright (c) 2008 Jeremy Martin
 http://www.jeremymartin.name/projects.php?project=kwicks
  Licensed under the MIT license:
  http://www.opensource.org/licenses/mit-license.php
 Any and all use of this script must be accompanied by this copyright/license notice in its present form.
*/

(function($){
 $.fn.kwicks = function(options) {
  var defaults = {
   isVertical: false,
   sticky: false,
   defaultKwick: 0,
   event: 'mouseover',
   spacing: 0,
   duration: 500
  };
  var o = $.extend(defaults, options);
  var WoH = (o.isVertical ? 'height' : 'width'); // WoH = Width or Height
  var LoT = (o.isVertical ? 'top' : 'left'); // LoT = Left or Top
  
  return this.each(function() {
   container = $(this);
   var kwicks = container.children('li');
   var normWoH = kwicks.eq(0).css(WoH).replace(/px/,''); // normWoH = Normal Width or Height
   if(!o.max) {
    o.max = (normWoH * kwicks.size()) - (o.min * (kwicks.size() - 1));
   } else {
    o.min = ((normWoH * kwicks.size()) - o.max) / (kwicks.size() - 1);
   }
   // set width of container ul
   if(o.isVertical) {
    container.css({
     width : kwicks.eq(0).css('width'),
     height : (normWoH * kwicks.size()) + (o.spacing * (kwicks.size() - 1)) + 'px'
    });    
   } else {
    container.css({
     width : (normWoH * kwicks.size()) + (o.spacing * (kwicks.size() - 1)) + 'px',
     height : kwicks.eq(0).css('height')
    });    
   }

   // pre calculate left or top values for all kwicks but the first and last
   // i = index of currently hovered kwick, j = index of kwick we're calculating
   var preCalcLoTs = []; // preCalcLoTs = pre-calculated Left or Top's
   for(i = 0; i < kwicks.size(); i++) {
    preCalcLoTs[i] = [];
    // don't need to calculate values for first or last kwick
    for(j = 1; j < kwicks.size() - 1; j++) {
     if(i == j) {
      preCalcLoTs[i][j] = o.isVertical ? j * o.min + (j * o.spacing) : j * o.min + (j * o.spacing);
     } else {
      preCalcLoTs[i][j] = (j <= i ? (j * o.min) : (j-1) * o.min + o.max) + (j * o.spacing);
     }
    }
   }
   
   // loop through all kwick elements
   kwicks.each(function(i) {
    var kwick = $(this);
    // set initial width or height and left or top values
    // set first kwick
    if(i === 0) {
     kwick.css(LoT, '0px');
    } 
    // set last kwick
    else if(i == kwicks.size() - 1) {
     kwick.css(o.isVertical ? 'bottom' : 'right', '0px');
    }
    // set all other kwicks
    else {
     if(o.sticky) {
      kwick.css(LoT, preCalcLoTs[o.defaultKwick][i]);
     } else {
      kwick.css(LoT, (i * normWoH) + (i * o.spacing));
     }
    }
    // correct size in sticky mode
    if(o.sticky) {
     if(o.defaultKwick == i) {
      kwick.css(WoH, o.max + 'px');
      kwick.addClass('active');
     } else {
      kwick.css(WoH, o.min + 'px');
     }
    }
    kwick.css({
     margin: 0,
     position: 'absolute'
    });
    
    kwick.bind(o.event, function() {
     // calculate previous width or heights and left or top values
     var prevWoHs = []; // prevWoHs = previous Widths or Heights
     var prevLoTs = []; // prevLoTs = previous Left or Tops
     kwicks.stop().removeClass('active');
     for(j = 0; j < kwicks.size(); j++) {
      prevWoHs[j] = kwicks.eq(j).css(WoH).replace(/px/, '');
      prevLoTs[j] = kwicks.eq(j).css(LoT).replace(/px/, '');
     }
     var aniObj = {};
     aniObj[WoH] = o.max;
     var maxDif = o.max - prevWoHs[i];
     var prevWoHsMaxDifRatio = prevWoHs[i]/maxDif;
     kwick.addClass('active').animate(aniObj, {
      step: function(now) {
       // calculate animation completeness as percentage
       var percentage = maxDif != 0 ? now/maxDif - prevWoHsMaxDifRatio : 1;
       // adjsut other elements based on percentage
       kwicks.each(function(j) {
        if(j != i) {
         kwicks.eq(j).css(WoH, prevWoHs[j] - ((prevWoHs[j] - o.min) * percentage) + 'px');
        }
        if(j > 0 && j < kwicks.size() - 1) { // if not the first or last kwick
         kwicks.eq(j).css(LoT, prevLoTs[j] - ((prevLoTs[j] - preCalcLoTs[i][j]) * percentage) + 'px');
        }
       });
      },
      duration: o.duration,
      easing: o.easing
     });
    });
   });
   if(!o.sticky) {
    container.bind("mouseleave", function() {
     var prevWoHs = [];
     var prevLoTs = [];
     kwicks.removeClass('active').stop();
     for(i = 0; i < kwicks.size(); i++) {
      prevWoHs[i] = kwicks.eq(i).css(WoH).replace(/px/, '');
      prevLoTs[i] = kwicks.eq(i).css(LoT).replace(/px/, '');
     }
     var aniObj = {};
     aniObj[WoH] = normWoH;
     var normDif = normWoH - prevWoHs[0];
     kwicks.eq(0).animate(aniObj, {
      step: function(now) {
       var percentage = normDif != 0 ? (now - prevWoHs[0])/normDif : 1;
       for(i = 1; i < kwicks.size(); i++) {
        kwicks.eq(i).css(WoH, prevWoHs[i] - ((prevWoHs[i] - normWoH) * percentage) + 'px');
        if(i < kwicks.size() - 1) {
         kwicks.eq(i).css(LoT, prevLoTs[i] - ((prevLoTs[i] - ((i * normWoH) + (i * o.spacing))) * percentage) + 'px');
        }
       }
      },
      duration: o.duration,
      easing: o.easing
     });
    });
   }
  });
 };
})(jQuery);

$().ready(function() {
 $('.kwicks').kwicks({
  max: 600, // Bề rộng ảnh trải rộng ra khi rê chuột vào 
  duration: 800, // Tỷ lệ trượt mượt của ảnh  
  easing: 'easeOutQuint'
 });
});
//]]>
</script>

Bước 4: Cho hiện slider trên blog (cụ thể là bên dưới khung header)

- Tìm đoạn code có dạng tương tự:

<div id='header'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
</b:section>
</div>

- Hoặc có template code sẽ là:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
</b:section>
</div>

- Thêm vào sau nó đoạn code sau:

<!-- Kwicks Slider for Blogger (3) -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section id='slider' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML201' locked='true' title='Slider' type='HTML'/>
</b:section> 
</b:if>

- Đoạn code trên sẽ tạo một tiện ích HTML/Javascript mới (có tên Slider) trên blog của bạn, và được đặt bên dưới khung header.

- Hai dòng được tô đỏ là điều kiện cho slider chỉ xuất hiện ở trang chủ. Nếu muốn hiện ở mọi trang trong blog thì xóa 2 dòng này đi.

Bước 5: Save template. (Lưu mẫu)

Bước 6: Nhấn qua thẻ Page Elements (Phần tử trang)

- Ta sẽ thấy xuất hiện một khung Slider ta vừa tạo ở bước 4
- Nhấn Edit (Chỉnh sữa)
- Dán vào khung Slider đoạn code sau:

<!-- Kwicks Slider for Blogger (4) -->
<div class="kwicks_container">
<ul class="kwicks">

<li id="kwick">
<a href="LINK_bài_viết">
<span class="slider">
<span class="sliderheading">Tiêu_đề</span>Mô_tả</span>
<img width="600" height="300" src="https://lh3.googleusercontent.com/-49xPDIwYCDk/Tqu9kbjOPpI/AAAAAAAAGOk/g-gEtLBCv_Y/1.jpg"/></a></li>

<li id="kwick">
<a href="LINK_bài_viết">
<span class="slider">
<span class="sliderheading">Tiêu_đề</span>Mô_tả</span>
<img width="600" height="300" src="https://lh4.googleusercontent.com/-DEwGgnfV2Zs/Tqu9kjECkgI/AAAAAAAAGOo/cwb9DnZq7Q4/2.jpg"/></a></li>

<li id="kwick">
<a href="LINK_bài_viết">
<span class="slider">
<span class="sliderheading">Tiêu_đề</span>Mô_tả</span>
<img width="600" height="300" src="https://lh3.googleusercontent.com/-bBJ8bNKCfQw/Tqu9kr613UI/AAAAAAAAGOs/7JVeCRghnO0/3.jpg"/></a></li>

<li id="kwick">
<a href="LINK_bài_viết">
<span class="slider">
<span class="sliderheading">Tiêu_đề</span>Mô_tả</span>
<img width="600" height="300" src="https://lh5.googleusercontent.com/-voywZy_nsP0/Tqu9mmWHwII/AAAAAAAAGPE/Ha0kYJaf5lw/4.jpg"/></a></li>

<li id="kwick">
<a href="LINK_bài_viết">
<span class="slider">
<span class="sliderheading">Tiêu_đề</span>Mô_tả</span>
<img width="600" height="300" src="https://lh6.googleusercontent.com/-B_LdTPMcqFM/TqzOmWP0GgI/AAAAAAAAGR0/JHEBbwJeMF0/Blogspot.47_5.jpg"/></a></li>

</ul></div>

width="600" // Đặt bề rộng ảnh = với giá trị max: 600, (đoạn code cuối ở bước 3)
height="300" // Đặt chiều cao ảnh = với .kwicks li{... height:300px; (code ở bước 2)
Mô_tả // Tóm lược nội dung tiêu đề


Bước 7: Save. (Lưu)


* Mở rộng:

- Bạn có thể đặt vị trí Slider vào bất cứ chỗ nào trên blog. Để ý dưới thẻ <body> có rất nhiều id như: 

<div id='header'>...</div>
<div id='menubar'>...</div>
<div id='sidebar'>...</div>
<div id='navigation'>...</div>
<div id='content'>...</div>
...

- Bạn muốn đặt vị trí Slider ở trước hay sau các lớp trên thì cứ dán code ở bước 4 vào vị trí tương ứng.

- Hoặc cũng có thể tạo một widget riêng biệt và dán code ở bước 6 vào. (Cách này thì bỏ qua bước 4)

( Sưu Tầm )
Share this article :
Labels:

Post a Comment

 
Copyright © 2011. Tin công nghệ 2013 - All Rights Reserved
Thiết kế website by Nguyễn Chí Bảo