Thủ thuật blog - Tạo slide trình diễn bài viết
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuT3Gfap6IO5u296XqhJfiYR_jYOm22mt2P928MqdYuzkkjEzOs_M_kNppglQN0CkFM5S1Ye_iA02x_Mgatok7ewc5LPh40mOIJD5QCkIkLyKKYY7nPgDGuiwodnkjXNigTG2g1ihOsRJg/"/></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/AVvXsEjN5GXw-_VvAh3VLkCsWUabJN30scirhI7pj8hQDbwDy3y-ycmU3bd_q3Ad7nopkIteFjOtH_II7g0R2uIryqGq9KIlSQG6_63rdn18hnzvo7J47QjsCocxmAPW-M1T6-CC1FLI8jX0RaPj/"/></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/AVvXsEiJzJnX-p-viWDCDgkyp9DKM20DxCzwe8ZWA4f67BSCLjY_P0X0Syi12v2E2wpKhEvOA6fTojCJ30g_aIBRaeuwwVC3F2UU7zBlfbP0NKo7f6vN_5y7ouhcwCOze6ehCVmC_10KHX03ZLpH/"/></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/AVvXsEgOZGj6pDajvdqotgjVh719ib-sW4f-BxYqCIDEPsK4R1i_ljHYcoKlaLyT6-XPy40EDmT7M-k6efI4fOWTsiUioshyphenhyphenmpDrIAtHTXAhUwXcxulP39aScqcMPoU1cVAgc31mm4ebLyVECdgO/"/></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/AVvXsEifbEdOYb4bQ94ELBvJs4Z1HAPhJ1Pt5iEEFlOcRa0Jm4HhcdMMTNO3ELKlmnCIEmoNIj_1BFeMYjbUq8JuPSXG7KWg6-gwS639wl95jA7mWqVNstziKrwi9jBNt7Kz3ftvoUuvilMRryw2/"/></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 từ : http://caytamgui.blogspot.com
THE END.
.jpg "hiệu ứng sao rơi")
