DEMO
Để cài đặt tiện ích bạn hãy thực hiện theo các bước sau đây:
Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML (không chọn mở rộng mẫu tiện ích). Đặt đoạn code sau đây vào trước thẻ </body>. Đoạn code này chính là thư viện jQuery giúp tạo hiệu ứng đàn xếp.
- <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'/>
- <script type='text/javascript'>
- //<![CDATA[
- /*************************************************
- *
- * project: liteAccordion - horizontal accordion plugin for jQuery
- * author: Nicola Hibbert
- * url: http://nicolahibbert.com/horizontal-accordion-jquery-plugin
- * demo: http://www.nicolahibbert.com/demo/liteAccordion
- *
- * Version: 1.1.3
- * Copyright: (c) 2010-2011 Nicola Hibbert
- *
- /*************************************************/
- ;(function($) {
- $.fn.liteAccordion = function(options) {
- // defaults
- var defaults = {
- containerWidth : 940,
- containerHeight : 320,
- headerWidth : 48,
- firstSlide : 1,
- onActivate : function() {},
- slideSpeed : 800,
- slideCallback : function() {},
- autoPlay : false,
- pauseOnHover : false,
- cycleSpeed : 6000,
- theme : 'basic', // basic, light*, dark, stitch*
- rounded : false,
- enumerateSlides : false
- },
- // merge defaults with options in new settings object
- // define key variables
- $accordion = this,
- slideWidth = settings.containerWidth - (slideLen * settings.headerWidth),
- // core utility and animation methods
- utils = {
- if (this.offsetLeft === pos.left) {
- } else if (this.offsetLeft === pos.right) {
- }
- },
- nextSlide : function(slideIndex) {
- var slide = slideIndex + 1 || settings.firstSlide;
- // get index of next slide
- return function() {
- return slide++ % slideLen;
- }
- },
- play : function(slideIndex) {
- var getNext = utils.nextSlide((slideIndex) ? slideIndex : ''), // create closure
- start = function() {
- };
- utils.playing = setInterval(start, settings.cycleSpeed);
- },
- pause : function() {
- clearInterval(utils.playing);
- },
- playing : 0,
- sentinel : false
- };
- // set container heights, widths, theme & corner style
- $accordion
- // set tab width, height and selected class
- $header
- // ie :(
- return false;
- }
- }
- // set initial positions for each slide
- var $this = $(this),
- $this
- // add number to bottom of tab
- });
- // bind event handler for activating slides
- var $this = $(this),
- pos = {
- newPos : 0
- },
- // set animation direction
- if (this.offsetLeft === pos.left) {
- pos.newPos = slideWidth;
- } else if (this.offsetLeft === pos.right) {
- pos.newPos = -slideWidth;
- }
- // check if animation in progress
- if (!$header.is(':animated')) {
- // activate onclick callback with slide div as context
- if (e.originalEvent) {
- if (utils.sentinel === this) return false;
- settings.onActivate.call($next);
- utils.sentinel = this;
- } else {
- settings.onActivate.call($next);
- utils.sentinel = false;
- }
- // remove, then add selected class
- // get group of tabs & animate
- $group
- .animate({ left : '+=' + pos.newPos }, settings.slideSpeed, function() { settings.slideCallback.call($next) })
- }
- });
- // pause on hover
- if (settings.pauseOnHover) {
- utils.pause();
- }, function() {
- });
- }
- // start autoplay, call utils with no args = start from firstSlide
- settings.autoPlay && utils.play();
- return $accordion;
- };
- //]]>
- </script>
- <script>
- //<![CDATA[
- $('#one').liteAccordion({
- onActivate : function() {
- },
- slideCallback : function() {
- },
- autoPlay : true,
- pauseOnHover : true,
- theme : 'dark',
- rounded : true,
- enumerateSlides : true
- //]]>
- </script>
Bước 2. Tìm thẻ <div id='content-wrapper'> (thẻ này chứa phần Main và phần Sidebar) rồi đặt trước nó bằng đoạn code bên dưới (tạo phần này để bố trí hiển thị Slider):
<div id='crosscol-wrapper'>
<b:section class='crosscol' id='crosscol' preferred='yes'>
</b:section>
</div>
Lưu Template.
Bước 3. Vào Page Elements. Thêm một tiện ích HTML/Javascript ở phần crosscol vừa tạo ở Bước 2 rồi đặt vào phần nội dung tiện ích bằng đoạn code bên dưới:
<link rel="stylesheet" href="http://www.nicolahibbert.com/demo/liteAccordion/css/liteaccordion.css" type="text/css"/>
<style type="text/css">
.prs {width:745px;}
.prs_pagi_label {background-color:#F0F0F0;float:left;height:120px;margin:0 2px;outline:1px solid #404951;padding:5px;position:relative;width:135px;}
.prs_pagi_label img {background-color:#000;float:left;height:55px;margin:0 8px 0 0;width:55px;}
.prs_pagi_label img.notxt {display:block;floatnone;height:90px;margin:0 auto;width:90px;}
.prs_pagi_label p {color:#888;font-size:11px;line-height:1;}
.prs_pagi_label h6 {bottom:10px;font-family:Artifika,Arial,serif;font-size:11px;font-weight:normal;line-height:1;position:absolute;text-align:center;width:140px;}
.prs_pagi_label h6 a {color:#006699;}
.pr_navi_label {clear:both;color:#BBB;font-family:Tahoma;font-size:18px;margin:0 auto;padding-top:10px;text-align:center;width:243px;}
.pr_navi_label a {color:#BBB !important;display:block;font-family:Tahoma;font-size:18px;padding:5px 10px;}
.pr_navi_label a:hover {color:#FFF !important;}
.pr_navi_label span {padding:5px 10px;}
.pr_navi_label span.deshabilitado {color:#666 !important;}
.pr_navi_label .next {float:right;}
.pr_navi_label .previous {float:left;}
.pr_navi_label .first {text-align:center;}
</style>
<script type='text/javascript'>
//<![CDATA[
// Label Post Accordion Slider for Blogspot by www.thuthuatblogger.info
var post_per_page = 10;
var list_label=new Array();
list_label[0]="Tên nhãn 1";
list_label[1]="Tên nhãn 2";
list_label[2]="Tên nhãn 3";
list_label[3]="Tên nhãn 4";
var pr_flagfirst=new Array();
pr_flagfirst[0]=0;pr_flagfirst[1]=0;pr_flagfirst[2]=0;pr_flagfirst[3]=0;
var url_prev=new Array();
var url_next=new Array();
function knowwhat(json) {
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'self') {
if(json.feed.link[k].href.indexOf("Tên nhãn 1")!=-1) {num_label = 0;}
if(json.feed.link[k].href.indexOf("Tên nhãn 2")!=-1) {num_label = 1;}
if(json.feed.link[k].href.indexOf("Tên nhãn 3")!=-1) {num_label = 2;}
if(json.feed.link[k].href.indexOf("Tên nhãn 4")!=-1) {num_label = 3;}
}
}
return num_label;
}
function showpagelabel(json) {
var entry, posttitle, posturl, postimg, postcontent, postcat;
var strx_out = "";
num_label = knowwhat(json);
url_prev[num_label] = "";
url_next[num_label] = "";
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'previous') {
url_prev[num_label] = json.feed.link[k].href;
}
if (json.feed.link[k].rel == 'next') {
url_next[num_label] = json.feed.link[k].href;
}
}
for (var i = 0; i < post_per_page; i++) {
if (i == json.feed.entry.length) { break; }
entry = json.feed.entry[i];
posttitle = getJSONtitle(entry);
posturl = getJSONurl(entry);
postcat = entry.category[0].term;
postcontent = getJSONcontent(entry,100);
postimg = getJSONthumbnail(entry);
strx_out += "<div class='prs_pagi_label'>";
strx_out += "<a href='" + posturl + "' target='_blank'>";
if(postcat=="Tên nhãn 2" || postcat=="Tên nhãn 3") {
strx_out += "<img class='notxt' alt='' src='" + postimg + "' />";
} else {
strx_out += "<img alt='' src='" + postimg + "' />";
}
strx_out += "</a>";
if(postcat=="Tên nhãn 1" || postcat=="Tên nhãn 4") {
strx_out += "<p>" + postcontent + "</p>";
}
strx_out += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>";
strx_out += "</div>";
}
document.getElementById("prs" + String(num_label)).innerHTML = strx_out;
strx_out = "";
if(url_prev[num_label]) {
strx_out += "<a href='javascript:navi_pagi_label(" + num_label + ",-1);' class='previous'>Prev</a>";
} else {
strx_out += "<span class='disabled previous'>Prev</span>";
}
if(url_next[num_label]) {
strx_out += "<a href='javascript:navi_pagi_label(" + num_label + ",1);' class='next'>Next</a>";
} else {
strx_out += "<span class='disabled next'>Next</span>";
}
strx_out += "<a href='javascript:navi_pagi_label(" + num_label + ",0);' class='first'>First</a>";
document.getElementById("pr_navi_label" + String(num_label)).innerHTML = strx_out;
}
function navi_pagi_label(num_label, direction) {
var p, parameters;
if(direction==-1) {
p = url_prev[num_label].indexOf("?");
parameters = url_prev[num_label].substring(p);
} else if (direction==1) {
p = url_next[num_label].indexOf("?");
parameters = url_next[num_label].substring(p);
} else {
parameters = "?start-index=1&max-results=" + post_per_page + "&orderby=published&alt=json-in-script"
}
parameters += "&callback=showpagelabel";
if(pr_flagfirst[num_label]==1) {
var that = document.getElementById("LABELTEMPORAL" + String(num_label));
var father = that.parentNode;
father.removeChild(that);
}
document.getElementById("prs" + String(num_label)).innerHTML = "";
document.getElementById("pr_navi_label" + String(num_label)).innerHTML = "";
var archivefeeds = "http://huynh-nhat-ha.blogspot.com/feeds/posts/default/-/" + list_label[num_label] + parameters; // thay huynh-nhat-ha bằng tên blogspot của bạn
var nouvo = document.createElement('script');
nouvo.setAttribute('type', 'text/javascript');
nouvo.setAttribute('src', archivefeeds);
nouvo.setAttribute('id', 'LABELTEMPORAL' + String(num_label));
document.getElementsByTagName('head')[0].appendChild(nouvo);
pr_flagfirst[num_label] = 1;
}
function getJSONtitle(entry,res) {
var t = entry.title.$t;
if(res) {
t = t.substring(0,res);
}
return t;
}
function getJSONurl(entry) {
var url;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
url = entry.link[k].href;
break;
}
}
return url;
}
function getJSONcontent(entry,res) {
var c = "";
if ("content" in entry) {
c = entry.content.$t;
} else if ("summary" in entry) {
c = entry.summary.$t;
}
if(res) {
c = removeHtmlTag(c,res);
}
return c;
}
function getJSONthumbnail(entry) {
var s, a, b, c, d;
var theimg = "";
s = entry.content.$t;
a = s.indexOf("<img");
b = s.indexOf("src=\"",a);
c = s.indexOf("\"",b+5);
d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) {
theimg = d;
} else {
var cat = entry.category[0].term;
if(cat=="Tên nhãn 1"){theimg = "URL_ảnh đại diện_nhãn1"}
if(cat=="Tên nhãn 2"){theimg = "URL_ảnh đại diện_nhãn2"}
if(cat=="Tên nhãn 3"){theimg = "URL_ảnh đại diện_nhãn3"}
if(cat=="Tên nhãn 4"){theimg = "URL_ảnh đại diện_nhãn4"}
}
return theimg;
}
function removeHtmlTag(strx,chop) {
var r = strx.split("<");
for(var i=0;i<r.length;i++){
if(r[i].indexOf(">")!=-1){
r[i] = r[i].substring(r[i].indexOf(">")+1,r[i].length);
}
}
r = r.join("");
var sss = "", p;
var r2 = r.split(" ");
for(var i=0;i<r2.length;i++){
p = sss + r2[i] + " "
if(p.length>=chop) {break;}
sss = p;
}
sss += "…"
return sss;
}
onload=function() {navi_pagi_label(0,0);navi_pagi_label(1,0);navi_pagi_label(2,0);navi_pagi_label(3,0);}
//]]>
</script>
<div id="one" class="accordion">
<ol>
<li>
<h2><span>Tên nhãn 1</span></h2>
<div class='slide-inner'>
<div class="prs" id="prs0"></div>
<div class="pr_navi_label" id="pr_navi_label0"></div></div>
</li>
<li>
<h2><span>Tên nhãn 2</span></h2>
<div class='slide-inner'>
<div class="prs" id="prs1"></div>
<div class="pr_navi_label" id="pr_navi_label1"></div></div>
</li>
<li>
<h2><span>Tên nhãn 3</span></h2>
<div class='slide-inner'>
<div class="prs" id="prs2"></div>
<div class="pr_navi_label" id="pr_navi_label2"></div></div>
</li>
<li>
<h2><span>Tên nhãn 4</span></h2>
<div class='slide-inner'>
<div class="prs" id="prs3"></div>
<div class="pr_navi_label" id="pr_navi_label3"></div></div>
</li>
</ol>
<noscript>
<p>Please enable JavaScript to get the full experience.</p>
</noscript>
</div>
Trong đoạn code trên thì đoạn script chính có sự tương đồng với script dùng trong thủ thuật Tiện ích Bài viết liên quan mới nhất cho nhãn trên sidebar (bạn có thể đọc lại bài viết để tìm hiểu thêm). Ở đây mình gán thêm ảnh dại diện riêng cho từng nhãn. Bạn cần tùy biến những phần được đánh dấu đỏ, lần lượt thay thế các tên nhãn áp dụng Slider.
