Tin mới

Advertisement

Binance

24 tháng 5, 2013

Slider bài viết mới trượt ngang cho Blog

InstaFxCopy

Cách đây không lâu mình đã giới thiệu với các bạn trình diễn bài viết theo nhãn trượt ngang ( Xem tại đây) ->>>Hôm nay là Slider bài viết mới trượt ngang đẹp cho blog của bạn.

Ảnh minh họa

http://3.bp.blogspot.com/-RbbeHzrAS6Y/T5UW6Eu2OSI/AAAAAAAAF9U/NqLmUCUcERA/s1600/slider+carousel.gif



Các bước tiến hành:
1. Đăng nhập Blog
2.Chỉnh sửa HTML
3. Chèn code bên dưới vào trước thẻ ]]></b:skin> 

#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(http://2.bp.blogspot.com/-i9rfuXWNIjo/T5LAemTP3XI/AAAAAAAAArY/r7FcfxzgZpk/s1600/scroller-bg.png) repeat center} #carousel #previous_button{position:absolute;width:49px;height:185px;background:url(http://3.bp.blogspot.com/-APGScJbAlLM/T5LDZ9LDgkI/AAAAAAAAAr4/vGy7EquPGME/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc} #carousel #previous_button:hover{background:url(http://3.bp.blogspot.com/-4wNqeM6eRvY/T5LGCrdA9iI/AAAAAAAAAsE/4rjwULz47WU/s1600/prev.png) center} #carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(http://1.bp.blogspot.com/-pSHFy8ff1R0/T5LDZHkHIzI/AAAAAAAAArw/PCfZ762nK3E/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc} #carousel #next_button:hover{background:url(http://2.bp.blogspot.com/-vSaPjyDhEMI/T5LGB-g1_lI/AAAAAAAAAsA/wyUPBLWY15E/s1600/next.png) center} #carousel ul{width:100000px;position:relative;margin-top:10px} #carousel ul li{background:#fff url(http://3.bp.blogspot.com/-NsKF7TyEX7I/T418sIGTo7I/AAAAAAAAAnc/OdQmhV73piY/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 độ rộng và chiều cao cho thích hợp)

4. Tiếp theo dán code bên dưới trước thẻ 
</head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.jstype='text/javascript'/> <script src='http://yourjavascript.com/265232511102/carousellite.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ imgr = new Array(); imgr[0] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg"; showRandomImg = true; aBold = true; summaryPost = 140; summaryTitle = 25; numposts1 = 15; label1 = "news"; function removeHtmlTag(strx,chop){ var s = strx.split("<"); for(var i=0;i<s.length;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); return s; } function showrecentposts(json) { j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0; img = new Array(); document.write('<ul>'); for (var i = 0; i < numposts1; i++) { var entry = json.feed.entry[i]; var posttitle = entry.title.$t; var pcm; var posturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { posturl = entry.link[k].href; break; } } for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') { pcm = entry.link[k].title.split(" ")[0]; break; } } if ("content" in entry) { var postcontent = entry.content.$t;} else if ("summary" in entry) { var postcontent = entry.summary.$t;} else var postcontent = ""; postdate = 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,c-b-5); if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d; //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : ''; var month = [1,2,3,4,5,6,7,8,9,10,11,12]; var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]; 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)==month[u2]) { m = month2[u2] ; break; } } var daystr = day+ ' ' + m + ' ' + y ; var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="145" height="100" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';
document.write(trtd); j++; } document.write('</ul>'); } //]]> </script>

5. Dán code bên dưới trước  <div id='main-wrapper'>
<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>


Tùy chỉnh:
- Các bạn chú ý đoạn code /-/&quot;+label1+&quot;        

+( Hiển thì theo nhãn)                                                                                                        
+Xóa đi nếu bạn muốn hiển thị cho cả Blog

- scroll: 1,            : số bài viết cuộn lên
    speed: 800,    : thời gian chuyển
    visible: 5,        : Số bài hiển thị
6. Lưu lại và xem kết quả


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

1 nhận xét:

  1. Bài viết rất hay và mình đã áp dụng thành công! Cám ơn Viet nhe! ah bạn vào mail đi nhé!

    Trả lờiXóa