Cách tạo Slider bài mới nhất theo nhãn cho Blogspot ~ I Biết ?

Cách tạo Slider bài mới nhất theo nhãn cho Blogspot . Slider Blogspot hiển thị bài viết mới nhất theo nhãn (label) cho Blogspot, Hướng dẫn cách tạo Slider bài mới nhất theo nhãn cho Blogspot

Chào các bạn hôm nay Ibiet Blogspot xin chia sẻ with you how to make a Slider có ảnh and tiêu đề mô tả bài viết mới nhất theo nhãn cho blogspot of you. Điều đặc biệt of this is trượt tự động chuyển its bài viết theo 1 thời gian cố định and displays số bài đăng ra theo nhãn you wish to display trên trang chủ directory.

Chú ý: Đây là 1 thủ thuật blogspot possible nói is nâng cao dành for the ai có 1 chút kiến thức về mã blogspot + CSS

Cách tạo Slider bài mới nhất theo nhãn cho Blogspot

- To be created trượt như ý đúng vị trí cần set you should xác định cho mình 1 vị trí tren trang chủ trước nhé rồi sử dụng CSS for you can configure đúng vụ trí and sizes you expected it shows.

Bước 1: Đăng nhập blogspot ==> Template = > Edit HTML (chỉnh sửa HTML)
Chú ý: mình khuyên các bạn be xuống toàn bộ mã blogpsot of you về rồi dùng Notepad ++ to correct. You should copy 1 bản gốc to its own ra to avoid trường hợp mã lỗi ko khôi phục lại been

Bạn sao chép mã đoạn below and will trên đoạn mã ]]> </ b: skin> các bạn tùy chỉnh kích cỡ in css cho phù hợp nhé

.slide-wrapper {padding: 0 auto; margin: 0 auto; width: auto; float: left;
word-wrap: break-word; overflow: hidden;}
.slide {color: # 666666; line-height: 1.3em;}
ul {.slide list-style: none; margin: 0 0 0; padding: 0 0 0;}
.slide li .widget {margin: 0px 0px 6px 0px;} / * ==== * / #slider {background-color: # e2e2e2; background-image: -moz-linear gradient (hàng đầu, # f6f6f6 0, # e2e2e2 100% ); background-image: -ms-linear gradient (hàng đầu, # f6f6f6 0, # e2e2e2 100%); background-image: -o-linear gradient (hàng đầu, # f6f6f6 0, # e2e2e2 100%); background-image: -webkit-gradient (tuyến tính, trên bên trái, phía dưới bên trái, màu sắc-stop (0, # f6f6f6), màu sắc-stop (100%, # e2e2e2)); background-image: -webkit-linear gradient (hàng đầu, # f6f6f6 0, # e2e2e2 100%); background-image: linear gradient (xuống dưới, # f6f6f6 0, # e2e2e2 100%); border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border: 1px solid # 999; box-shadow: 0 0 4px # 888; -moz-box-shadow: 0 0 4px # 888; -webkit-box-shadow: 0 0 4px li li h3 p {color: #FFF; font-size: 12px; padding-top: 5px; display: block; margin: 0} ul.slider-chính-wapper li h3 a {color: #FFF; font-size: 16px ; line-height: 25px; margin: 0} ul.slider-chính-wapper li li {position: absolute; top: 0; left: 0; float: kế thừa} ul.slider-chính-wapper li li h5 {color: # 333; font: 11px Arial; margin: 0; padding: 5px 10px 0 0} .slider-navigator li div {background-color: # e2e2e2; background-image: -moz-linear gradient (top , # fff 0, # e2e2e2 100%); background-image: -ms-linear gradient (hàng đầu, # fff 0, # e2e2e2 100%); background-image: -o-linear gradient (hàng đầu, # fff 0, # e2e2e2 100%); background-image: -webkit-gradient (tuyến tính, trên bên trái, phía dưới bên trái, màu sắc-stop (0, # fff), màu sắc-stop (100%, # e2e2e2)); background-image: -webkit-linear gradient (hàng đầu, # fff 0, # e2e2e2 100%); background-image: linear gradient (xuống dưới, # fff 0, # e2e2e2 100%) màu: # 444; text-shadow: 1px 1px 1px #fff; height: 56px; position: relative; margin: 0px 0px 3px 10px; padding: 0 5px; border: 1px solid # c0c0c0;} .slider-navigator li.active div, .slider-navigator li: hover div {color: # 0178d3; border: 1px solid # 999} .slider-navigator li img { border: 1px #ddd rắn; height: 44px; width: 60px; float: left; margin: 5px 5px 5px 0} .slider-navigator li.active img {border: 1px solid #eee} .slider-navigator h5 li.active {color: # 0178d3}

Bước 2: Tìm thẻ đóng </ head> rồi sao chép mã đoạn below lên trên it

<Script src = 'http: //ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type = 'text / javascript' />
<script src = 'http: // yourjavascript .com / 24211643151 / jquery.easing.js 'type =' text / javascript '/>
<script type = 'text / javascript'>
// <[CDATA [! (function ($) { var loại = ['DOMMouseScroll' , 'con lăn chuột']; $ .event.special.mousewheel = { thiết lập: function () { if (this.addEventListener) for (var i = types.length; i;) this.addEventListener (loại [- i], xử lý, false); khác this.onmousewheel = xử lý; }, teardown: function () { if (this.removeEventListener) for (var i = types.length; i;) this.removeEventListener (loại [- i], xử lý , false); khác this.onmousewheel = null; } }; $ .fn.extend ({ mousewheel: function (fn) { trở lại fn this.bind ("xoay chuột", fn): this.trigger ("xoay chuột")? ; }, unmousewheel: function (fn) { return this.unbind ("xoay chuột", fn); } }); chức năng xử lý (sự kiện) { var args = [] .slice.call (arguments, 1), delta = 0 , returnValue = true; event = $ .event.fix (sự kiện || window.event); event.type = "xoay chuột"; if (event.wheelDelta) delta = event.wheelDelta / 120; if (event.detail) delta = -event.detail / 3; // Thêm sự kiện và đồng bằng vào phía trước của các đối số args.unshift (sự kiện, đồng bằng); trở lại $ .event.handle.apply (this, args); } }) (jQuery); / ** *version $ Id: $ Revision *package jquery * lofslidernewssubpackage *copyright Copyright (C) Tháng 1 năm 2010 LandOfCoder.com <emai: landofcoder@gmail.com>. Tất cả quyền được bảo lưu. *website http://landofcoder.com *license Plugin này là dual-cấp phép theo Giấy phép GNU General Public License và MIT * / // Tài liệu JavaScript (function ($) { $ .fn.lofJSidernews = function (cài đặt) { return this.each (function () { // lấy ví dụ của lofSiderNew. $ .lofSidernews mới (điều này, thiết lập); }); } $ .lofSidernews = function (obj, cài đặt) { này. settings = { hướng: '', mainItemSelector: 'li', navInnerSelector: 'ul', navSelector: 'li', navigatorEvent: 'click', wapperSelector: '.slider-chính-wapper', khoảng thời gian: 4000, tự động: đúng , // liệu để tự động chơi các slideshow maxItemDisplay: 5, startItem: 0, navPosition: 'thẳng đứng', navigatorHeight: 60, navigatorWidth: 210, Độ dài: 600, navItemsSelector: '.slider-navigator li', navOuterSelector: '.slider -navigator-bên ngoài ', isPreloaded: true, nới lỏng: 'easeInOutQuad' } $ .extend (this.settings, cài đặt || {}); this.nextNo = null; this.previousNo = null; this.maxWidth = this.settings .mainWidth || 600; this.wrapper = $ (obj) .find (this.settings.wapperSelector); this.slides = this.wrapper.find (this.settings.mainItemSelector); if (! this.wrapper.length | ! | this.slides.length) return; // thiết lập chiều rộng của wapper if (this.settings.maxItemDisplay> this.slides.length) { this.settings.maxItemDisplay = this.slides.length; } this.currentNo = isNaN ( this.settings.startItem) || this.settings.startItem> this.slides.length 0: this.settings.startItem; this.navigatorOuter = $ (obj) .find (this.settings.navOuterSelector); this.navigatorItems = $ (obj) .find (this.settings.navItemsSelector); this.navigatorInner = this.navigatorOuter.find (this.settings.navInnerSelector); if ('ngang' this.settings.navPosition ==) { this.navigatorInner.width (this.slides.length * this.settings.navigatorWidth); this.navigatorOuter.width (this.settings.maxItemDisplay * this.settings.navigatorWidth); this.navigatorOuter.height (this.settings.navigatorHeight); } else { này .navigatorInner.height (this.slides.length * this.settings.navigatorHeight); this.navigatorOuter.height (this.settings.maxItemDisplay * this.settings.navigatorHeight); this.navigatorOuter.width (this.settings.navigatorWidth); } this.navigratorStep = này .__ getPositionMode (this.settings.navPosition); this.directionMode = này .__ getDirectionMode (); if (this.settings.direction == 'opacity') { this.wrapper.addClass ('trượt-opacity '); $ (this.slides) .css ('opacity', 0) .eq (this.currentNo) .css ('opacity', 1); } else { this.wrapper.css ({'trái': ' - '+ this.currentNo * this.maxSize +' px ',' width ':( this.maxWidth) * this.slides.length}); } if (this.settings.isPreloaded) { this.preLoadImage (this.onComplete) ; } else { this.onComplete (); } } $ = $ .lofSidernews.fn .lofSidernews.prototype; $ .lofSidernews.fn.extend = $ = $ .lofSidernews.extend .extend; $ .lofSidernews.fn.extend ( { Startup: function (obj, wrapper) { seft = này; this.navigatorItems.each (function (index, item) { $ (item) Tích vào (function () { seft.jumping (index, true); seft.setNavActive (chỉ số, item); }); $ (item) .css ({'chiều cao': seft.settings.navigatorHeight, 'width': seft.settings.navigatorWidth}); }) this.registerWheelHandler (this.navigatorOuter, điều này ); this.setNavActive (this.currentNo); if (typeof this.settings.buttons && (this.settings.buttons) == "đối tượng") { this.registerButtonsControl ('click', this.settings.buttons, this) ; } if (this.settings.auto) this.play (this.settings.interval, 'next', true); trở lại này; }, onComplete: function () { setTimeout (function () {$ ('. preload' ) .fadeOut (900); }, 400); this.startUp (); }, preLoadImage: function (gọi lại) { var tự = này; var hình ảnh = this.wrapper.find ('img'); var count = 0; images.each (function (index, image) { nếu {(image.complete!) image.onload = function () { count ++; if (count> = images.length) { self.onComplete (); } } image.onerror = function () { count ++; if (count> = images.length) { self.onComplete (); } } } else { count ++; if (count> = images.length) { self.onComplete (); } } }); }, navivationAnimate: function (currentIndex) { nếu (currentIndex <= this.settings.startItem || currentIndex - this.settings.startItem> = this.settings.maxItemDisplay-1) { this.settings.startItem = currentIndex - this.settings.maxItemDisplay + 2; if (this.settings .startItem <0) this.settings.startItem = 0; if (this.settings.startItem> this.slides.length-this.settings.maxItemDisplay) { this.settings.startItem = this.slides.length-this.settings. maxItemDisplay; } } this.navigatorInner.stop () animate (. nới lỏng: 'easeInOutQuad'}); }, setNavActive: function (index, item) { if ((this.navigatorItems)) { this.navigatorItems.removeClass ('hoạt động'); $ (this.navigatorItems.get (index)) .addClass ('hoạt động'); this.navivationAnimate (this.currentNo); } }, __getPositionMode: function (vị trí) { if (vị trí == 'ngang') { return ['trái', this.settings.navigatorWidth]; } trở lại ['top', this.settings.navigatorHeight]; }, __getDirectionMode: function () { switch (this.settings.direction) { case 'opacity': this.maxSize = 0; trả lại ['opacity', 'opacity']; mặc định: this.maxSize = this.maxWidth; trả lại ['trái', 'width']; } }, registerWheelHandler: function (element, obj) { element.bind ('xoay chuột', function (sự kiện, đồng bằng) { var dir = delta> 0 'Up': '? Down ', vel = Math.abs (đồng bằng); if (delta> 0) { obj.previous (true); } else { obj.next (true); } return false; }); }, registerButtonsControl: function (eventHandler , đối tượng, tự) { for (var hành động trong các đối tượng) { switch (action.toString ()) { case 'tiếp': đối tượng [hành động] Tích vào (function () {self.next (true)}); break; trường hợp 'trước': đối tượng [hành động] Tích vào (function () {self.previous (true)}); break; } } trở lại này; }, onProcessing: function (sử dụng, bắt đầu, kết thúc) { this.previousNo = này .currentNo + (this.currentNo> 0 -1: this.slides.length-1?); this.nextNo = this.currentNo + (this.currentNo <this.slides.length-1 1: 1- this.slides .length); trở lại này; }, finishFx: function (thủ công) { if (hướng dẫn) this.stop (); if (dẫn && this.settings.auto) { this.play (this.settings.interval, 'bên cạnh' , true); } this.setNavActive (this.currentNo); }, getObjectDirection: function (bắt đầu, kết thúc) { return eval ("({'" + this.directionMode [0] + "': -" + (điều này. currentNo * start) + "})"); }, fxStart: function (index, obj, currentObj) { if (this.settings.direction == 'opacity') { $ (this.slides) .stop () sinh động. ({opacity: 0}, {Độ dài: this.settings.duration, nới lỏng: this.settings.easing}); . $ (this.slides) .eq (index) .stop () animate ({opacity: 1}, {Độ dài: this.settings.duration, nới lỏng: this.settings.easing}); } else { this.wrapper.stop () animate (obj, {Độ dài: this.settings.duration, nới lỏng: this.settings.easing. }); } return này; }, nhảy: function (không có, tay) { this.stop (); if (this.currentNo == không) return; var obj = eval ("({'" + this.directionMode [ 0] + "': -" + (this.maxSize * không) + "})"); this.onProcessing (null, sử dụng, 0, this.maxSize) .fxStart (không có, obj, this) .finishFx (thủ công ); this.currentNo = không; }, tiếp theo: function (sử dụng, item) { this.currentNo + = (this.currentNo <this.slides.length-1)? 1: (1 - this.slides.length); this.onProcessing (item, sử dụng, 0, this.maxSize) .fxStart (this.currentNo, this.getObjectDirection (this.maxSize), this) .finishFx (thủ công); }, trước đó: chức năng (sử dụng, item) { this.currentNo + = this.currentNo> 0? -1: This.slides.length - 1; this.onProcessing (item, hướng dẫn sử) .fxStart (this.currentNo, this.getObjectDirection (this.maxSize), this) .finishFx (thủ công); }, chơi: function (chậm trễ , hướng, chờ đợi) { this.stop (); if (chờ) {này [hướng] (false); } var tự = này; this.isRun = setTimeout (function () {tự [hướng] (true);}, sự chậm trễ); }, dừng lại: function () { if (this.isRun == null) return; clearTimeout ( this.isRun); this.isRun = null; } }) }) (jQuery) //]]> </ script> <script type = 'text / javascript'> // <[CDATA [! imgr = new Array ( ); imgr [0] = = True; aBold = true; summaryPost = 70; summaryTitle = 20; numposts = 10; chức năng removeHtmlTag (strx, chop) { var s = strx.split ("<"); for (var i = 0; i <s. chiều dài; i ++) { if (! s [i] .indexOf (">") = - 1) { s [i] = s [i] .substring (s [i] .indexOf (">") + 1, s [i] .length); } } s = s.join (""); s = s.substring (0, chop-1); trở lại s; } showrecentposts function (json) { j = (showRandomImg)? Math.floor ((imgr.length + 1) * Math.random ()): 0; img = new Array (); for (var i = 0; i <numposts; i ++) { var entry = json.feed.entry [i]; . var posttitle = entry.title $ t; var pcm; var posturl; if (i == json.feed.entry.length) phá vỡ; for (var k = 0; k <entry.link.length; k ++) { if (entry.link [k] .rel == 'thay thế') { posturl = entry.link [k] .href; break; } } for (var k = 0; k <entry.link.length; k ++) { if (entry.link [k] .rel == 'trả lời' && entry.link [k] .type == 'text / html ") { pcm = entry.link [k] .title.split (" ") [0]; break; } } if ("nội dung" trong entry) { var postcontent = entry.content $ t;.} khác nếu ("Tóm tắt" trong entry) { var postcontent = entry.summary $ t. } khác var postcontent = ""; ghi lùi = entry.published $ t;. if (j> imgr.length-1) j = 0; img [i] = imgr [j]; s = postcontent; a = s.indexOf ("<img"); b = s.indexOf ("src = \" ", a); c = s.indexOf (" \ "", b + 5); d = s.substr (b + 5, cb-5); if (! (a = - 1) && (b = - 1) && (c = - 1) && (d = "")!) img [i] = d; // cmtext = (text = "không"!)? '<I> <font color = "' + acolor + '"> (' + pcm + '' + văn bản + ') </ font> </ i>': ''; var tháng = [1,2,3,4, 5,6,7,8,9,10,11,12]; var month2 = ["Jan", "tháng hai", "Mar", "Tháng tư", "May", "Jun", "Tháng bảy", " Tháng Tám "," Tháng chín "," Tháng Mười "," Tháng mười một "," Tháng mười hai "]; var day = postdate.split ("-") [2] .substring (0,2); var m = postdate.split (" - ") [1]; var y = postdate.split ("-") [0]; for (var u2 = 0; u2 <month.length; u2 ++) { if (parseInt (m) == tháng [u2] ) { m = month2 [u2]; break; } } var daystr = ngày + '' + m + '' + y; var trtd = '<li style = "position: relative;"> <div class = "imgauto"> <a href = "" + posturl +' "> <img width =" 405 "height =" 298 "class =" "src =" "+ img [i] + '" /> </a> </ div> <h3> <a href = "' + posturl + '">' + posttitle + '</a> <p>' + daystr + '/' + pcm + 'comments </ p> </ h3> </ li>'; document.write (trtd); j ++; } } chức năng showrecentposts1 (json) { j = (showRandomImg)? Math.floor ((imgr.length + 1) * Math.random ()): 0; img = new Array (); for (var i = 0; i <numposts; i ++) { var entry = json.feed.entry [i]; . var posttitle = entry.title $ t; var pcm; var posturl; if (i == json.feed.entry.length) phá vỡ; for (var k = 0; k <entry.link.length; k ++) { if (entry.link [k] .rel == 'thay thế') { posturl = entry.link [k] .href; break; } } for (var k = 0; k <entry.link.length; k ++) { if (entry.link [k] .rel == 'trả lời' && entry.link [k] .type == 'text / html ") { pcm = entry.link [k] .title.split (" ") [0]; break; } } if ("nội dung" trong entry) { var postcontent = entry.content $ t;.} khác nếu ("Tóm tắt" trong entry) { var postcontent = entry.summary $ t. } khác var postcontent = ""; ghi lùi = entry.published $ t;. if (j> imgr.length-1) j = 0; img [i] = imgr [j]; s = postcontent; a = s.indexOf ("<img"); b = s.indexOf ("src = \" ", a); c = s.indexOf (" \ "", b + 5); d = s.substr (b + 5, cb-5); if (! (a = - 1) && (b = - 1) && (c = - 1) && (d = "")!) img [i] = d; // cmtext = (text = "không"!)? '<I> <font color = "' + acolor + '"> (' + pcm + '' + văn bản + ') </ font> </ i>': ''; var tháng = [1,2,3,4, 5,6,7,8,9,10,11,12]; var month2 = ["Jan", "Feb", "Mar", "Tháng tư", "May", "Jun", "Tháng bảy", " Tháng Tám "," Tháng chín "," Tháng Mười "," Tháng mười một "," Tháng mười hai "]; var day = postdate.split ("-") [2] .substring (0,2); var m = postdate.split (" - ") [1]; var y = postdate.split ("-") [0]; for (var u2 = 0; u2 <month.length; u2 ++) { if (parseInt (m) == tháng [u2] ) { m = month2 [u2]; break; } } var daystr = ngày + '' + m + '' + y; var trtd = '<li> <div> <img width = "60" height = "44" class = "alignnone" src = "' + img [i] + '"/> <h5>' + posttitle + '</ h5> </ div> </ li>'; document.write (trtd); j ++; } } //]]> </ script>

Chú ý: numposts = 10; is số bài viết will be displayed các bạn change you want to theo ý nhé

Bước 3. Tạo 1 Witget dạng HTML / Javascript cấu hình theo đúng chỗ you would like to show

you want to add 1 witget thì thêm mã sau vào phần in you have cấu hình bằng css

<B: section class = 'bên' id = 'sidebar1' ưa thích = 'yes'>
<b: widget id = 'HTML3' locked = 'false' title = '' type = 'HTML'>
<b: includable id = 'chính'>
<b: if cond = 'data: blog.url == data: blog.homepageUrl'>
<- chỉ tiêu đề hiển thị nếu nó không trống ->!
<b: if cond = dữ liệu ': tiêu đề ! = & quot; & quot; '>
<h2 class = "title"> <data: Tiêu đề /> </ h2>
</ b: if>
<div class = 'widget nội dung'>
<data: Nội dung />
</ div>
<b: include name = 'QuickEdit' />
</ b: if>
</ b: includable>
</ b: widget>
</ b: section>

Bước 4: Thêm đoạn mã sau vào witget HTML / Javascript bạn vừa tạo
(Các bạn test thử xem you want it shows ra sao các bạn may have it sao chép vào Tiện ich HTML / Javascipts bất kỳ)

<Div class = 'lof-chính-wapper' id = 'trượt'>
<div class = 'trượt-chính-ngoài'>
<ul class = 'trượt-chính-wapper'>
<script>
document.write ("< script class = 'trượt-navigator-ngoài'> <ul class = 'trượt-navigator'> <script> document.write ("<script 405, navigatorWidth: 200, maxItemDisplay: 5, nới lỏng: 'easeInOutQuad', tự động: true, isPreloaded: false }); }); </ script>

Chú ý: Phần Nhãn is tên Label (nhãn) của you wish to display bài viết bạn sửa theo ý bạn nhé

Mọi thắc mắc vui lòng các bạn bình luận Phía below to be giải đáp nhé. If thấy hữu ích thì nhấn Like, +1 for ủng hộ mình nhé.

Chúc các bạn thành công!