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:
/* 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/AVvXsEgaygEXVdZRvt2w0LTI4A35XyrbT7Pmbm4KlsLO2h89d3yz6GYIzNN02-brTRiB2fnB07sRNAnRCYdesewhYlo8gM7WeeWiK5IfvPuu3yWUpS6mKO_607-x3JpO2PJdWO_5PVwtZ_krlmm5/"/></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/AVvXsEhLteOhgIBysFV8b94j4sqLR21thH-GPkxRaKDe98hmE1r8kZyfsUigYpq6oM-__BmYkuV9XbI2YUNhBm2uCGAcs2x_aupAbpD_QdAdrNYKe0adNTyutIfD8Ew49qv74JsEZ3l9flmamCCi/"/></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/AVvXsEiDsyVIUone5swudZztP4g-I11zEs-3STOqrXbaDWdXvphQ9a2_EL-Rl5ouj2wKSa8T9XDQ1OxlMqUHdUUcxE_soTRHOO4wyfy443YyxAOjiMBPKAe00o47EkXQ0Y_dL4rs8JR9eOBjVObZ/"/></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/AVvXsEiVtH09OFmP6hxRZX0CUyzrrSHt1Oa4ImRL1xVqa9lID1-xDh-qefypqXBRHUEd77fa1bYAbcE-RSBnmuv85kO00uxs3QW29eTL-i_0YYhdayu2vkDM-YisNoU0_MMmq5jl-TgaAfJBUGEk/"/></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/AVvXsEhv84UPC0ilqfp4wt3IUiSxnQ8piKMsgtCoyWqmeKLpUh-QlJO8mJBKnpTwkiIGweyZvZVGngC-485gbX3ozslbph87edBLGAAV-8AqUejpkgUNLivUCB51IyrUtrkl0uVjeaXqUBhCe4Lf/"/></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.
0 nhận xét:
Đăng nhận xét