Tạo slide trình diễn bài viết cho blog
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)
Bước 2: Tìm dòng ]]></b:skin>
- Thêm vào trước nó đoạn code CSS sau:
Bước 3: Tìm thẻ đóng </head>
- Thêm vào trước nó đoạn code sau:
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ớ thayjQuery.JS bằng link mới bạn vừa up lên host)
4. Save template. (Lưu mẫu)
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
<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;
