Bài xem nhiều nhất
Tạo slide bài viết mới trượt ngang cho blogspot
Thứ Tư, 2 tháng 10, 2013
Slider bài mới nhất trượt ngang với thumbnail ảnh cho blogspot.Cách tạo Slider bài mới nhất trượt ngang với thumbnail ảnh cho từng label trên blogspot.Code Slider bài viết mới nhất trượt ngang với thumbnail ảnh cho blogspot.
Bước 1: Đăng nhập blogspot ==> Chọn Mẫu (Template) ==> Chọn chỉnh sủa HTML (Edit HTML)
Bạn có thể down về rồi dùng Notepad++ sửa cho dễ nhé. Chú ý trước khi sửa thì bạn sao lưu ra 1 bản để khi có sai hay hỏng hóc gì còn có bản gốc nhé
Bước 2: Dán đoạn code sau lên trên thẻ ]]></b:skin>
numposts1 = 15; là số bài sẽ được gọi từ feed..
label1 = "Nổi bật"; 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.
Bước 4: Thêm đoạn code sau vào vị trí bạn muốn hiển thị
<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?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>
Tùy chỉnh:
Bước 1: Đăng nhập blogspot ==> Chọn Mẫu (Template) ==> Chọn chỉnh sủa HTML (Edit HTML)
Bạn có thể down về rồi dùng Notepad++ sửa cho dễ nhé. Chú ý trước khi sửa thì bạn sao lưu ra 1 bản để khi có sai hay hỏng hóc gì còn có bản gốc nhé
Bước 2: Dán đoạn code sau lên trên 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9xoYDRg-LLA3OEXtCo8x6s24G27tfu_TwOqhLAWTAVrsi5M1zTQFnYEN-9xfHnvMvH4TzZ0W49y2i4XGVTP-1S40bz9owa8OjWrYapxr93LWTpAj-rtDXl3ZIfSUye3TAiOcVlevIOSc/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW6FObCs5CKtduN-rjBUOKRHHxHt-SuBBgAfJ1LD33_wePoiVMpXWabNq7vyfLgbxJdk6Teq8hlbQpnQJ4v0f52SGaoBIaiGS6-Fz9lLJ19bE3pLwiU5rLaUlJBBmUas7_cN32s2Ecc5U/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/AVvXsEiQaTxGul8roFHcWsH3W8Drt5YvDqXqXYsx-YEtmh2F2qMSm3jdzkG1taNY1leQ4gGzRnTcFjJjqcjakTTVB2PrM8JxdjIvMagHuGPBcIukbsa8r5YwOsguAWefUeJ4RGuxugaqeIM72GQ/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPZwe-uARBb5vnLz2BPMim4hpQ9txERIdXax6NMGx4Nvpd5PCzfyyAug8Y0v3Vy_-8ZpaLOemIdagmk6mbsXrt6a3COIrbH7mf5nG-BBj1Dks2FcrOiMDzWpp820HUpbbVmqC-S5mhuU4/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/AVvXsEjaiyeAQKW5olTUMTRuV_VeMU2NgGoDfcCM-UK2yHPBIrzRFQjQqxiP39oDStpePewgvuaPRikcI7Fs8dFGJuBSf86AmNFFvTwxn_-pTp3UxAk1HbMu6OFMRdAK_FOmHtCtt2_jdvE7QTM/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/AVvXsEinAeuJiQtK9xUPXq2ROeZ_6A9_O9NzP4aQuzJ1eGv5Ecbka-IF27PgpAfpYiP81B9cB24TntStCPgLb0GJnp31RPdv6Eof2n1HxChCy6CfZGH6Viaj_aRRrsjGlgidsW9wmjp-t7XHDCs/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}
#carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9xoYDRg-LLA3OEXtCo8x6s24G27tfu_TwOqhLAWTAVrsi5M1zTQFnYEN-9xfHnvMvH4TzZ0W49y2i4XGVTP-1S40bz9owa8OjWrYapxr93LWTpAj-rtDXl3ZIfSUye3TAiOcVlevIOSc/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW6FObCs5CKtduN-rjBUOKRHHxHt-SuBBgAfJ1LD33_wePoiVMpXWabNq7vyfLgbxJdk6Teq8hlbQpnQJ4v0f52SGaoBIaiGS6-Fz9lLJ19bE3pLwiU5rLaUlJBBmUas7_cN32s2Ecc5U/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/AVvXsEiQaTxGul8roFHcWsH3W8Drt5YvDqXqXYsx-YEtmh2F2qMSm3jdzkG1taNY1leQ4gGzRnTcFjJjqcjakTTVB2PrM8JxdjIvMagHuGPBcIukbsa8r5YwOsguAWefUeJ4RGuxugaqeIM72GQ/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPZwe-uARBb5vnLz2BPMim4hpQ9txERIdXax6NMGx4Nvpd5PCzfyyAug8Y0v3Vy_-8ZpaLOemIdagmk6mbsXrt6a3COIrbH7mf5nG-BBj1Dks2FcrOiMDzWpp820HUpbbVmqC-S5mhuU4/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/AVvXsEjaiyeAQKW5olTUMTRuV_VeMU2NgGoDfcCM-UK2yHPBIrzRFQjQqxiP39oDStpePewgvuaPRikcI7Fs8dFGJuBSf86AmNFFvTwxn_-pTp3UxAk1HbMu6OFMRdAK_FOmHtCtt2_jdvE7QTM/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/AVvXsEinAeuJiQtK9xUPXq2ROeZ_6A9_O9NzP4aQuzJ1eGv5Ecbka-IF27PgpAfpYiP81B9cB24TntStCPgLb0GJnp31RPdv6Eof2n1HxChCy6CfZGH6Viaj_aRRrsjGlgidsW9wmjp-t7XHDCs/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}
Bước 3: Dán đoạn code sau lên trên thẻ đóng </head>
<script src='https://dl.dropboxusercontent.com/u/95745796/Slider/jquery.min.js' type='text/javascript'/>
<script src='https://dl.dropboxusercontent.com/u/95745796/Slider/carousellite.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwKs0u8p2fW52Usmx99MatAhRxRo0OQ6dRakFayAXEcrsf-7YUWKdB2UaS3IpwTeTVnYo98pa1kMU67zf9P7xRZYqI90cu5rvtauAfbINNKEuW52osNnseiwbtxTamygq1cz8oK9xZu5w/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 140;
summaryTitle = 25;
numposts1 = 15;
label1 = "Nổi bật";
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:<script src='https://dl.dropboxusercontent.com/u/95745796/Slider/carousellite.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwKs0u8p2fW52Usmx99MatAhRxRo0OQ6dRakFayAXEcrsf-7YUWKdB2UaS3IpwTeTVnYo98pa1kMU67zf9P7xRZYqI90cu5rvtauAfbINNKEuW52osNnseiwbtxTamygq1cz8oK9xZu5w/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 140;
summaryTitle = 25;
numposts1 = 15;
label1 = "Nổi bật";
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>
numposts1 = 15; là số bài sẽ được gọi từ feed..
label1 = "Nổi bật"; 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.
Bước 4: Thêm đoạn code sau vào vị trí bạn muốn hiển thị
<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?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>
Tùy chỉnh:
- 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.
- <b:if cond='data:blog.pageType != "item"'>, Không hiển thị trên trang bài viết
Tùy chỉnh hiển thị trên các trang
- Nếu bạn muốn hiển thị trên trang bài viết thì chỉ việc thay: <b:if cond='data:blog.pageType != "item"'> thành <b:if cond='data:blog.pageType = "item"'>
- Nếu bạn muốn nó hiển thi trên tất cả các trang thì chỉ việc xóa <b:if cond='data:blog.pageType != "item"'> và thẻ đóng của nó ở dưới </b:if> là ok.
Comments[ 0 ]
Đăng nhận xét