Kwicks Slider for Blogger – Tạo slide trình diễn bài viết
Đăng bởi: CTG blog
Chủ Nhật, tháng 10 30, 2011
[47]
Thủ thuật: Kwicks Slider for Blogger – Tạo slide trình diễn bài viết
Nguồn: Noct

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
2. Chọn: Mẫu > Chỉnh sữa HTML

3. 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgZTWC3mukMIC303lePNa1GNeLgCl2DEhdKAzB-IOKGR4_Tctl2DRb2bkb5EPTukB_KjsWZ8WG6kA50T363GplcPPSl_NxRNYXCkJ27Z6a0X4fApw4Oz6RZ23BhIBFIfNplkEkIJPux9zW/"/></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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5Z1tNRS0kzQTadzO7N25KW81QyFB6DdYHiwibVio3-yB6Nyn4H8_bMIkMVMwqMrAc6r4rUcbBCgur-dvF2Q242Y7ZHLvPuczEDL1BXLNma18rlbM0tMQt5JO7k4BXJVuQfw6DNkRW6nAQ/"/></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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSZDypEWJMKPMbJ3gIBucQwW3tQa2HtBMoK47vYQllcmu7QE6wdzd6V9T_l6t2EN7bkcklKoWWmMzLq9kJ1KLc4bUeIsQBBM9PZXQ8nHChNoQaQMizpPPP_MTxxY4gSZVg67MUAAqkijYe/"/></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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLjxw0mumNqNmjUyJVekkk1RuOAjVXeIxdmmLEn6qcp9EqxGENWRPcgs2PYMf3SCsrZwdzIgXFOtYrdHcLGpUMusHoFEzGmOOmhkykFxzwjqVN9Zq2HoMQyLtrl267Kw442sFg0_WMmDr0/"/></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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOQRAepl9NmqBxWn3XEBY8wfwToUp9aG3giscyJVhApNdLPCan44a8Yk4Qmdp4v22pOrE9R3hIAxbCHWXJT-H0Edl6XwIMfBJfDeDG2wpXHBk_Oxcgu8vx6ivwJ-MSPWCC8UMPVj0zQwMu/"/></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)


THE END.
| Edit

7 nhận xét:

Trả lời
Quang Vũ nói...
lúc 09:28 9 tháng 12, 2011  

Blog này đẹp quá. Lang thang tìm thủ thuật mới thấy blog của bạn. Đây là blog mình. mời bạn ghé thăm nha http://sweetlove-quangvu.blogspot.com/

Trả lời
Rua nói...
lúc 17:40 9 tháng 12, 2011  

Cảm ơn lời khen Quang Vũ. Mình có ghé thăm blog bạn, rất đẹp và chuyên nghiệp (hơn mình nhiều :cuoi)

Trả lời
Phạm Anh Tú nói...
lúc 16:13 1 tháng 1, 2012  

tôi cài nó rồi mà muốn xóa đi phải làm thế nào hả bạn?

Trả lời
Rua nói...
lúc 18:30 1 tháng 1, 2012  

Thì bạn làm ngược lại các bước trên thôi.

Trả lời
khuông nói...
lúc 11:49 28 tháng 4, 2012  

mình chưa biết làm cái slidle nhưng mình làm cái docs này mời mọi người view
http://www.supertourviet.com/

Trả lời
sàn gỗ nói...
lúc 14:25 4 tháng 5, 2013  

Style của slide bài viết này đẹp quá. Mà đặc biệt là slide style win 8 mình tìm chưa thấy có nè :)

Trả lời
Unknown nói...
lúc 03:03 14 tháng 12, 2014  

cảm ơn bạn đã giúp ích rất nhiều cho mình!
http://kienxinh.blogspot.com/

Đăng nhận xét

Xem thêm [▼/▲]

Chèn thêm Emoticons vào nhận xét:
Rê chuột lên Emoticons để thấy các kí hiệu tương ứng!

==============================================
Lên đầu trang
Xuống cuối trang