Slide bài viết mới chạy ngang cho Blogspot

Có rất nhiều thủ thuật blogspot đã chia sẻ các tạo các slide cho blog, hôm nay mình xin chia sẻ cùng mọi người một thủ thuật làm đẹp cho blog của các bạn đó là slide chạy ngang hiển thị các bài viết mới. Với slide này, hiệu ứng của nó là chạy gang tự động hiển thị các bài bạn vừa tạo rất đẹp,

jquery chạy ảnh ngang bài viết mới nhất cho blogger

Slide bài viết mới chạy ngang cho Blogspot

Demo: các bạn tham khảo bài viết: Sữa chua nếp cẩm

1. Vào bảng điều khiển Blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)

2. (Ctrl + F )Tìm đến ]]></b:skin> và dán ngay trên nó đoạn code sau

#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/AVvXsEihSzR6Ko6TcIW1FPU7cWKxKxKoBn4eKPwy8e6od04uXl8A_TX7O_Fldt1TjG-DIA6UUz8a-JcBs5VoDfJTbpHVyFFYtELIKJ7XrWNa2lHblRMAMgHJaQnQdabadu8TDNXz-VBLXgLU9-Q/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBLZj3Temo0HFWYf49bHG0MU4_E_4We2_iPmx-XcWwg8TCK7V0mmfc_Wfj79pn3mhv1OPCIWcAvgagieYBLPYPRD3uemogIuRE5CYM9mMGvfntXQY_DJ5kmEmxljnG0_FoephlDlYiLac/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/AVvXsEgEkUMABG79HWdQZmQs-wr22JHq4vEB24JJlAK_VzcNnooaJTUvrOuvPDamVtHpzxRnptXOvTHrH5OP5MHMa3oWBb_abBTKAc_ooo8fPzo7FkumB2S2klUAKm3c7FQboNhRSrHi8hpFgd4/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmXuKqHyWFel4s9cm4PlCIOBZtAVc3AIkqMEpdLvZBrMNx0RcxZ8xNopx-larAeHXLEB_vb5XMad7RgjiISI5XjXGdXLIA9unQORV2jfKibQo5BpOsS9BdvD8uY8qRL-jTvS4Z3BAkN38/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/AVvXsEiuoLjUN2hDcnvkqDUWvOpL9P_X2V7IuFwSPY9OnR3RqI0Ts-b-xP16uTzd2FLCbWTYFJikHJDKRnbed5iIkUviUBM7L6P8x3Kh2bcgsm-4CBuf4iJ_oAFT6BFngtI0h8n7XPBqHSZhhhs/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/AVvXsEjac_S6de9G2p2fErdEYohx3Nfa3SBoPXy4VTcyogNvtSfAkSnzw_ipQa5gblooFU8m6_13gtXfAI-zbg3KIgrDzRdNYJpRAXIYi385_0Lj4gK6KfZ7LMWe66MaxLBzmYu4SXywYgR5hN0/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}

3. Tìm tới </head> và dán code dưới đây ngay trên nó

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/265232511102/carousellite.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjar3YK-WuDO_dU2kUi_0zQD4BKSCFL8Pex-PL_4Yot0mf1j1SubFgliMqCwfe-lI3XV0Xqkk_sqLb9I_agA1LrjaPo8ADcvErAfJ26RnGLlTv1xAR40PAVpGUt0wHvlVL-GPono6D_6kg/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>

Trong đó

numposts1 = 15; là số bài sẽ được gọi từ feed..
label1 = "news"; là tên của nhãn muốn gọi.
summaryPost = 140; là số ký tự mô tả
summaryTitle = 25; là số ký tự phần tiêu đề ngay bên dưới hình ảnh.
width="145" height="100" là chiều rộng và chiều cao của ảnh thumbnail.
showRandomImg = true; là lấy ảnh thumbnail ngẫu nhiên trong bài viết. Nếu muốn lấy ảnh đầu tiên thì hãy sửa true thành false.

4. Tìm đến <div id='main-wrapper'> và dán code dưới đây ngay dưới nó

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

Trong đó tùy chỉnh:

Nếu muốn lấy bài viết mới thì xóa phần /-/"+label1+"
auto:4000,
scroll: 1, số bài viết cuộn mỗi lần.
speed: 800, Thời gian chuyển ảnh (tính bằng phần nghìn giây).
visible: 5, Số bài viết (ảnh thumbnail và tiêu đề) hiển thị trên trang chính.
start: 0,
circular: true,

Nguồn tham khảo: http://www.itviet360.com/

Xem bài viết trên phiên bản di động

Tag: Thủ thuật

Template Blogspot Việt - Của người Việt

Tin Tức Cập Nhật

Slide bài viết mới chạy ngang cho Blogspot

Tham khảo Thêm