Slide trượt ngang cho bài đăng theo nhãn

Đáp ứng nhu cầu của bạn đọc hôm nay mình sẽ chia sẻ cách tạo slide trượt ngang cho bài đăng theo nhãn. Bài này mình có tham khảo tại http://www.maskolis.com một web hướng dẫn nhiều thủ thuật rất hay mà mình hay ghé thăm. Nào chúng ta bắt đầu nhé!

Demo

Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.

#carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}
#carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1I4sz1p2YxQoPfsAad4p86vCtaTJ73rYJEkv9ZEbfT_JYCF4hDuOlDEr_DPHMkvu86V0hNZBMw-iURXDKLATE15pAo_yysy__JXvElQBpPCvDQHtU4Rxqso3NaORoaZ8885Olx1pIwrE/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWLF07Wan1DmDT5pyow0ETF3qeVsHaPA53sW7tC9cbCWVWJL50gU3jNo7Kp5UXIeaUQ3TeV_cGwrFOxpnodxzs6DIQrC0OLxchR-CPPPGYwvjYt5w6AWTj68k_3glOGCYcFN1_kSF0uvc/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}
#carousel #previous_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd6EXV0UyL9NF1Vq_CIN_Wa3EkV3TOhyUGnX-i13i7Gwf0KydcKOCPZXRRyuizzFjg5ceIPCYirq2KMhbLn6sAIx2xUQmOLYUPLvTk-9xFCVK6ScrbkwspIzf1uJWbOSIFo4XbeTpCgm0/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVjmN9nVAFbpUOuT1z2SbMNAumooZx0tEEWYJ5frRS36a2ltmtuM3K9TahizUeMGLA_MaGocHYGnOHofbttvHn8Zg7E0U8gpoLw1uL-JgtoYXKnBI18Q487F16ceEEOtxm6MDvT5M439w/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}
#carousel #next_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0hAYVdQhovbhxVaDNVSwihBpQrKEAExP7YBQ_GiGBEpwY-ITrPbk6BpiTCRD_GR-q103fpWSE4MGffOnSZkkYXAX4-ExICHf0paP7D79ALavB1lNyRCc8SEg0z3Wbc0H-yTTi-lH74ZE/s1600/next.png) center}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1mEVob6CJSpqolH1alaIgQt-LVcJ_JNOcbdpdFJv4e_2z_xZz6iG87ssKP5FMVdhfwUQT9OlmjTTVSBRGVqUOcrJd3E-8AbzqTWP5-R_B6XrPsa67ukNXECzoOjqSs4anZooyQlwcrkI/s1600/main.png) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;margin:0 4px 20px 7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
#carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}
#carousel ul li a.slider_title{color:#222;display:block;margin-top:5px}
#carousel ul li a.slider_title:hover{color:#cd1713}
#carousel a img{display:block;background:#fff;margin-top:0}

Tùy chỉnh lại chiều cao và chiều rộng cho phù hợp với blog cảu bạn.

 Bước 2: Thêm đoạn mã sau ngay trên thẻ đóng </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'/>
<script src='http://dxhbook.googlecode.com/files/carousellite.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(e,t){var n=e.split("<");for(var r=0;r<n.length;r++){if(n[r].indexOf(">")!=-1){n[r]=n[r].substring(n[r].indexOf(">")+1,n[r].length)}}n=n.join("");n=n.substring(0,t-1);return n}function showrecentposts(e){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0;img=new Array;document.write("<ul>");for(var t=0;t<numposts1;t++){var n=e.feed.entry[t];var r=n.title.$t;var i;var o;if(t==e.feed.entry.length)break;for(var u=0;u<n.link.length;u++){if(n.link[u].rel=="alternate"){o=n.link[u].href;break}}for(var u=0;u<n.link.length;u++){if(n.link[u].rel=="replies"&&n.link[u].type=="text/html"){i=n.link[u].title.split(" ")[0];break}}if("content"in n){var f=n.content.$t}else if("summary"in n){var f=n.summary.$t}else var f="";postdate=n.published.$t;if(j>imgr.length-1)j=0;img[t]=imgr[j];s=f;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!="")img[t]=d;var l=[1,2,3,4,5,6,7,8,9,10,11,12];var h=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var p=postdate.split("-")[2].substring(0,2);var v=postdate.split("-")[1];var m=postdate.split("-")[0];for(var g=0;g<l.length;g++){if(parseInt(v)==l[g]){v=h[g];break}}var y=p+" "+v+" "+m;var w='<li class="car"><div class="thumb"><a href="'+o+'"><img width="145" height="100" class="alignnone" src="'+img[t]+'"/></a></div><p><a class="slider_title" href="'+o+'">'+r+"</a></p></li>";document.write(w);j++}document.write("</ul>")}imgr=new Array;imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitXslEm3UwuM6E45PqETv0k3FqJRQwlrANA8vCwDBA0uzQLmEBkmeIvA06vpxalsHfAUTw86qfrgHUhILmObZMy74RzLFWBOUkboH75kSQYbNVrucGEYh0-44R7SseLT230JWfSMHJYMk/s1600/no+image.jpg";showRandomImg=true;aBold=true;summaryPost=140;summaryTitle=25;numposts1=10;label1="Widget"//]]>
</script>

Lưu ý:
- Nếu trong template của bạn đã có file jQuery thì không cần thêm nữa
- numposts1=10 chính là số bài đăng bạn muốn hiển thị tại slide.
  label1="Widget" hãy thay bằng tên nhãn bạn muốn hiển thị.

Bướ 3: Dán vào sau <div id='main-wrapper'> đoạn mã (chú ý sẽ tùy thuộc vào template mà tên khác nhau)

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script>  
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
(function($) {     $(document).ready(function(){
$(&quot;#carousel .container&quot;).jCarouselLite({
    auto:4000,
    scroll: 1,
    speed: 800,  
    visible: 5,
    start: 0,
    circular: true,
    btnPrev: &quot;#previous_button&quot;,
    btnNext: &quot;#next_button&quot;
    });
    })})(jQuery)  
</script>
</b:if>

Kết thúc thủ thuật, thật dễ dàng để tạo một slide cho bài đăng theo nhãn phải không nào. Nếu vẫn còn khó khăn trong khâu thực hiện hãy để lại nhận xét cuối bài đăng này. Hy vọng thủ thuật sẽ hữu ích cho bạn.