Thêm tiện ích bài viết gần đây (Recent Posts) dạng trượt ngang cho Blogspot Version 1

Tên đầy đủ của thủ thuật này là: Thêm tiện ích bài viết gần đây (Recent Posts) dạng trượt ngang với ảnh thumbnail cho Blogspot (Blogger), với tiêu đề đầy đủ như vậy chắc hẳn các bạn cũng hình dung được chức năng của thủ thuật này. Nhưng thủ thuật này chủ yếu dùng để trang trí trang chủ hoặc trang tĩnh nhằm làm nổi bật những trang này.

Đọc thêm:

● Thêm tiện ích bài viết gần đây (Recent Posts) cho Blogspot dạng dọc.

● Tạo bình luận mới nhất (Recent comments) cho Blogspot.

Demo băng hình ảnh ích bài viết gần đây (Recent Posts) dạng trượt ngang cho Blogspot Version 1

☼ Giờ bắt đầu thủ thuật cùng Windows2it.

Bước 1: Vào Blog => Mẫu => Chỉnh sửa HTML. Nhấn tổ hợp phím Ctrl + F và tìm đến thẻ </b:skin>. Sau đó dán đoạn mã Code sau ở phía 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/AVvXsEiV_4ghBtxsEdspcgfRPrFsDjADfWAgtMTTjJvJ4UbJeLWQyrpCJJgLk0u5bXlwPbDNgCaGPW8UA41IjoJZQtAJyxPr4O4tYZySJ33cN0IuTOAdiHmHVW67xICFEXW5kge3z_8iGRKsDw8/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc_bhyphenhyphenwGlbgAfM5P2jKYDCd2kPgNeQQZRBv9pksZJZGJTe63wvxjTvpnH94RfEin8Aw3WDvwG0eay7hvAwcIDCopznhw-H8aKsvRktm69tyNqQjbSTGCaxwbXZ3_I0bEabAhkseOM8Jt0/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/AVvXsEhaCOU9q-U6Q8uzKhN9bXf2iKptnXgDqLLYFFVbEK89c8DFpJRkx75WrKVxYIKwUxkioSqnsMIjz2ZCsaCaM4O_ruCbFF620Mr4O_wAVACtrlJDXJxeumSn4gHAIanypb8hLHv3B-DXIm4/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGQmsHa9lAYPWlcy8M7nkOGAc3WGoXE14ORAMExPAqVSP8oFw7PvZGXGqkWQSwNeShZQKb7rvumA9N7fl0MolbX-tqASZO6YsBs4197mduzsIZMkTZVqAEGrWu8iRbVTeIKZBxcmhA1Qc/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/AVvXsEjHcQBqV5s-OfYw8OBx95-zVuWffLqM3Lq8ai2QkoD4mO5jt-xlnpJinnyIgmaSnZzCupZ1Twiy2Necco3kX5dwfnJyz5XGYxMgA7ZjM__E0Joc6FetNYhQLFlpze2oA3tQGfWURdJQEBc/s1600/next.png) center}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAABkCAAAAACap/5LAAAACXBIWXMAAAsSAAALEgHS3X78AAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAAsSURBVHjaYvzPAAMs7+FMJgaEKCM2UfoqGBKGDZgjh4QVdDBskDln5DEBAwCNEQLr2H+8AwAAAABJRU5ErkJggg==) 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}

Các thống số:

· width: 980px; height: 185px lần lượt là chiều rộng và chiều cao của Slider.

· width:145px;height:150px lần lượt là chiều rộng và chiều cao của khung chứa hình ảnh và tiêu đề.

· Bạn có thể thay đổi các Link hình ảnh Next và Preview theo ý của bạn nha.

Bước 2: Tiếp tục nhấn tổ hợp phím Ctrl + F và tìm đến thẻ </head>. Sau đó dán đoạn mã Code sau ở phía trên thẻ </head>.

<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/AVvXsEj33WKXBImncpSnb9dtNBOyLz_2MChoSI5urpLS5j8ryhtkop-tnhm9nZBJb4d0oTDcugZRBPwh_xPxqbvaIDDn0fjm-wDV_LlqJjB74HTMl_xW6_LrSDC_QyxLh9CnKeJL7a7VxKbGLYY/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>

Các thông số:

· 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ần lượt là chiều rộng và chiều cao của ảnh thumbnail.

· showRandomImg = true: là lấy ảnh thumbnail cách 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.

Bước 3: Dán đoạn code dưới đây vào nơi bạn muốn hiển thị thủ thuật này và Lưu mẫu.

<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>

Các thông số:

· Nếu muốn lấy toàn bộ các nhãn thay vì một nhãn cụ thể thì xóa phần màu đỏ đi nha.

· auto: 4000: Thời gian để cuộn 1 lần (4000 = 4 giây)

· scroll: 1: Số bài viết cuộn mỗi lần.

· speed: 800: Tốc độ cuộn (800 = 0.8 giây).

· visible: 5: Số bài viết (ảnh thumbnail và tiêu đề) hiển thị trên trang chính.

· start: 0: Bài hiển thị đầu tiên.

· circular: true: Tự động lặp lại nếu không muốn lặp lại sữa thành false.

Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều JJJ

Nguồn: maskolis.com

Backlink: Phát triển hoạt động cho vay tiêu dùng

Trong quá trình cài đặt gặp vấn đề gì cứ để lại Comment !