• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Cài đặt Accordion Slider tự động cho nhãn

14
30/09/2011

Gần đây mình có thử nghiệm một plugin gọi là liteAccordion của tác giả Nicola Hibbert dành cho website để tạo hiệu ứng đàn xếp. Mình đã nghiên cứu và áp dụng tự động thành công cho blogspot, tạo hiệu ứng đàn xếp trượt theo chiều ngang với bài viết mới nhất theo nhãn tích hợp thành một slider thật mượt mà.



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.

  1. <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'/>
  2. <script type='text/javascript'>
  3. //<![CDATA[
  4. /*************************************************
  5. *
  6. * project: liteAccordion - horizontal accordion plugin for jQuery
  7. * author: Nicola Hibbert
  8. * url: http://nicolahibbert.com/horizontal-accordion-jquery-plugin
  9. * demo: http://www.nicolahibbert.com/demo/liteAccordion
  10. *
  11. * Version: 1.1.3
  12. * Copyright: (c) 2010-2011 Nicola Hibbert
  13. *
  14. /*************************************************/
  15. ;(function($) {
  16. $.fn.liteAccordion = function(options) {
  17. // defaults
  18. var defaults = {
  19. containerWidth : 940,
  20. containerHeight : 320,
  21. headerWidth : 48,
  22. firstSlide : 1,
  23. onActivate : function() {},
  24. slideSpeed : 800,
  25. slideCallback : function() {},
  26. autoPlay : false,
  27. pauseOnHover : false,
  28. cycleSpeed : 6000,
  29. theme : 'basic', // basic, light*, dark, stitch*
  30. rounded : false,
  31. enumerateSlides : false
  32. },
  33. // merge defaults with options in new settings object
  34. settings = $.extend({}, defaults, options),
  35. // define key variables
  36. $accordion = this,
  37. $slides = $accordion.find('li'),
  38. slideLen = $slides.length,
  39. slideWidth = settings.containerWidth - (slideLen * settings.headerWidth),
  40. $header = $slides.children('h2'),
  41. // core utility and animation methods
  42. utils = {
  43. getGroup : function(pos, index) {
  44. if (this.offsetLeft === pos.left) {
  45. return $header.slice(index + 1, slideLen).filter(function() { return this.offsetLeft === $header.index(this) * settings.headerWidth });
  46. } else if (this.offsetLeft === pos.right) {
  47. return $header.slice(0, index + 1).filter(function() { return this.offsetLeft === slideWidth + ($header.index(this) * settings.headerWidth) });
  48. }
  49. },
  50. nextSlide : function(slideIndex) {
  51. var slide = slideIndex + 1 || settings.firstSlide;
  52. // get index of next slide
  53. return function() {
  54. return slide++ % slideLen;
  55. }
  56. },
  57. play : function(slideIndex) {
  58. var getNext = utils.nextSlide((slideIndex) ? slideIndex : ''), // create closure
  59. start = function() {
  60. $header.eq(getNext()).click();
  61. };
  62. utils.playing = setInterval(start, settings.cycleSpeed);
  63. },
  64. pause : function() {
  65. clearInterval(utils.playing);
  66. },
  67. playing : 0,
  68. sentinel : false
  69. };
  70. // set container heights, widths, theme & corner style
  71. $accordion
  72. .height(settings.containerHeight)
  73. .width(settings.containerWidth)
  74. .addClass(settings.theme)
  75. .addClass(settings.rounded && 'rounded');
  76. // set tab width, height and selected class
  77. $header
  78. .width(settings.containerHeight)
  79. .height(settings.headerWidth)
  80. .eq(settings.firstSlide - 1).addClass('selected');
  81. // ie :(
  82. if ($.browser.msie) {
  83. if ($.browser.version.substr(0,1) > 8) {
  84. $header.css('filter', 'none');
  85. } else if ($.browser.version.substr(0,1) < 7) {
  86. return false;
  87. }
  88. }
  89. // set initial positions for each slide
  90. $header.each(function(index) {
  91. var $this = $(this),
  92. left = index * settings.headerWidth;
  93. if (index >= settings.firstSlide) left += slideWidth;
  94. $this
  95. .css('left', left)
  96. .next()
  97. .width(slideWidth)
  98. .css({ left : left, paddingLeft : settings.headerWidth });
  99. // add number to bottom of tab
  100. settings.enumerateSlides && $this.append('<b>' + (index + 1) + '</b>');
  101. });
  102. // bind event handler for activating slides
  103. $header.click(function(e) {
  104. var $this = $(this),
  105. index = $header.index($this),
  106. $next = $this.next(),
  107. pos = {
  108. left : index * settings.headerWidth,
  109. right : index * settings.headerWidth + slideWidth,
  110. newPos : 0
  111. },
  112. $group = utils.getGroup.call(this, pos, index);
  113. // set animation direction
  114. if (this.offsetLeft === pos.left) {
  115. pos.newPos = slideWidth;
  116. } else if (this.offsetLeft === pos.right) {
  117. pos.newPos = -slideWidth;
  118. }
  119. // check if animation in progress
  120. if (!$header.is(':animated')) {
  121. // activate onclick callback with slide div as context
  122. if (e.originalEvent) {
  123. if (utils.sentinel === this) return false;
  124. settings.onActivate.call($next);
  125. utils.sentinel = this;
  126. } else {
  127. settings.onActivate.call($next);
  128. utils.sentinel = false;
  129. }
  130. // remove, then add selected class
  131. $header.removeClass('selected').filter($this).addClass('selected');
  132. // get group of tabs & animate
  133. $group
  134. .animate({ left : '+=' + pos.newPos }, settings.slideSpeed, function() { settings.slideCallback.call($next) })
  135. .next()
  136. .animate({ left : '+=' + pos.newPos }, settings.slideSpeed);
  137. }
  138. });
  139. // pause on hover
  140. if (settings.pauseOnHover) {
  141. $accordion.hover(function() {
  142. utils.pause();
  143. }, function() {
  144. utils.play($header.index($header.filter('.selected')));
  145. });
  146. }
  147. // start autoplay, call utils with no args = start from firstSlide
  148. settings.autoPlay && utils.play();
  149. return $accordion;
  150. };
  151. })(jQuery);
  152. //]]>
  153. </script>
  154. <script>
  155. //<![CDATA[
  156. $('#one').liteAccordion({
  157. onActivate : function() {
  158. this.find('figcaption').fadeOut();
  159. },
  160. slideCallback : function() {
  161. this.find('figcaption').fadeIn();
  162. },
  163. autoPlay : true,
  164. pauseOnHover : true,
  165. theme : 'dark',
  166. rounded : true,
  167. enumerateSlides : true
  168. }).find('figcaption:first').show();
  169. //]]>
  170. </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 += "&hellip;"
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.

{14 bình luậnAdd yours ?}

10:56:00, 30 thg 9, 2011

Ui! Mình bóc tem bài này :5)

Reply
12:53:00, 30 thg 9, 2011

Nặng quá' bác Hà ơi. :B)

Reply
14:00:00, 30 thg 9, 2011

@D.N.H Các script và CSS có thể nén rồi đưa vào file ngoài sẽ giảm bớt độ nặng.

Reply
19:23:00, 30 thg 9, 2011

hoành tráng thật :D,thanks

Reply
20:26:00, 30 thg 9, 2011

Cũng hay hay!Bác H giỏi thật blog toàn thủ thuật hay..... :5)

Reply
21:00:00, 30 thg 9, 2011

trông mượt phết nhưng mỗi tội nặng

Reply
00:46:00, 1 thg 10, 2011

có nghiệp với blogger ghê :) kính 1 ly :G)

Reply
08:37:00, 1 thg 10, 2011

Cảm ơn bạn, đây là cái mình đang rất cần, mình sẽ áp dụng ngay. Cảm ơn bạn lần nữa

Hoi Thao

Reply
21:12:00, 1 thg 10, 2011

@www.ChơiBlog.TK Hôm nay đã chính thức fix xong cái comment phân cấp đã hoạt động được trên IE các bạn à.

Reply
22:06:00, 1 thg 10, 2011

Đẹp, hay nhưng nặng và hơi loằng ngoằng :D

Reply
15:38:00, 2 thg 10, 2011

Bác Hà làm nó nhẹ và load mượt như cái Temp Newscast của Noct thì quá tuyệt.:G)

Reply
11:31:00, 12 thg 10, 2011

hay.nhưng có vẻ hơi nặng bác Hà ơi
phim tam ly:K)

Reply
13:53:00, 12 thg 10, 2011

Nhìn code ở bước 3 mà thấy chóng cả mặt :4)

Reply
19:24:00, 12 thg 10, 2016

tuyệt vời ffufhf v uhfafih

tử vi 12 cung hoàng đạo


Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn