Code slide hình ảnh hoặc bài viết mới chạy ngang liên tục cho Blogspot

Hướng dẫn chèn code Slide hình ảnh hoặc bài viết mới hoặc bài viết ở 1 nhãn (Label) cố định với hiệu ứng trượt ngang tự động rất đẹp

Code slide hình ảnh hoặc bài viết mới chạy ngang

- Hướng dẫn thủ thuật:
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 ]]> và dán Code dưới đây ngay trên nó
Code:
#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/AVvXsEjADCTXxN-KLRE3q72XVMSU2Q4vtTac1nfzs754SgnAtmI6V1Wfs_1e3s6rRk0AFFcHSALWp6dy7QJQgQNMS5s1WTsFirBkDH42dkuP-4fq3BPaVCLYZu1TlzCunmSDHCsoy8dao3jErkw/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1hgTL6Bi_qkA2KO4ceHdKD7M3pfHghsodHNp3pF6sk_KIQKTr37mQVNTnX07sB2rTqf7q-wOZNtrFo86gymPc0yW4f1L42hkokgtV_oy-wk05gxRcxpbkGEKdKB7ViiNrkTWPlE4G88c/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/AVvXsEgkvMtwZcNJCVl9UOfxeddf1GUc3c2WV-ngAGzw2s8wwhr0aJf7MJMGoSiEAq4OmVlPiZCG06uQnz6M6j4g5W5sQGUR8E_8-Y_O_jqLiiAo1ixyH3ASo4QCAIszmVXtcBAk7mSfQSaKYdE/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfPyykPEoYxYzvK2X3KohWj8XGFmxYOG46TsRmhgJJ1YWpvZ_eAsy0Pz61SYbqasFc8A-VylzES663zzyeeaa8E2T7zrI8zOH6UWLpuRn1zc75CCiVgKWbMciJ7l73bWURprEHywWKMx4/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/AVvXsEhBIHP53TH5XfHIwyHBPQRBx6fz3hfVHdDgSZ8efvgALIzjpgkan8k0u_SGbddSdycLn0DZnUi59HndXKHSCl1cPIeaU0aOkcLst0cCz0yKDlxfPgTdiM7BGH1dApTfKrpDDtf19S-3BJc/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/AVvXsEidqmeR66S_10CcF7J3h-UncSGLJ7nxvTSjOUfLG0OlFSHALQAeG_-eTBN4s2103yCBvWqAla1ot13C4lmFWpBOq7z1OrcCHcb-79kwT9qNIIYsU05Av8jcAnHMj0epyzsyy3wrb3DwQdw/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 và dán code dưới đây ngay trên nó

Code:
<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/AVvXsEiWMHEorp_8CYxN8h3ul8FPBVZII-cWvej-b7_WJdLwpV6tDQcq2UOlY44mcBfhIyPI5gGLbldhuMy3ChgQHgi7sC0CyPwmdjTxqYmzhm-7saNGvixWh9zogVtiC5SEWCd1aNbxeptsAKM/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>

Tùy chỉnh theo ý bạn:
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ó
Code:
<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+"&amp;orderby=published&alt=json-in-script&amp;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+". đi nhé
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,

>> Code cố định Sidebar khi Scroll cuộn chuột lên xuống
>> Code quảng cáo Popup under javascript ẩn đằng sau trình duyệt
>> Công cụ SEO từ khóa website tốt nhất dành cho dân SEO

Nhận xét

Bài đăng phổ biến từ blog này

101 most useful websites on the internet

Hướng dẫn làm khối xếp hình lập phương lưu giữ ảnh kỷ niệm

Hướng Dẫn Sử Dụng Plesk Web Hosting chi tiết