Cập nhật 2026: Giao diện mới và hướng đi mới ! Xem chi tiết →

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

Hoàng Nhân Khôi Thứ Hai, 15 tháng 2, 2016
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:



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


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

Bài Viết Liên Quan

Bình Luận (38)

Unknown
Unknown lúc 19:30 19 tháng 2, 2016
hay quá cảm ơn bạn mình đã add được vào blog của mình rồi http://www.thichdesign.com/
Hoàng Nhân Khôi
Hoàng Nhân Khôi lúc 20:35 19 tháng 2, 2016
:) __ :)
Suối nguồn cuộc sống
Suối nguồn cuộc sống lúc 04:52 20 tháng 2, 2016
Những thể loại đi SEO câu view thế này bảo đúng cũng đúng mà bảo sai cũng không sai! Thật chả biết xử trí thế nào!
Hoàng Nhân Khôi
Hoàng Nhân Khôi lúc 04:56 20 tháng 2, 2016
mình đây cũng bó tay :(
Unknown
Unknown lúc 06:34 26 tháng 2, 2016
làm hết như trên rùi, nhưng khung nó lệch về bên trái, với lại chèn được hình ảnh vào thôi, làm vậy như là tạo album ảnh vậy
Unknown
Unknown lúc 06:34 26 tháng 2, 2016
làm hết như trên rùi, nhưng khung nó lệch về bên trái, với lại chèn được hình ảnh vào thôi, làm vậy như là tạo album ảnh vậy
Hoàng Nhân Khôi
Hoàng Nhân Khôi lúc 09:35 26 tháng 2, 2016
lệch bên trái thì bạn Cọi lại đoạn CSS mặc định trong Blog của bản ... Chằn được cả phần tiêu đề mà bạn ,,, Blog bạn đâu cho mình quá tí mới dễ dàng giúp bạn được :)
TaiDenRoi
TaiDenRoi lúc 04:16 25 tháng 4, 2016
sao nó chỉ hiện cái khung thôi còn phần ở giữa trống trơn vậy bạn?
TaiDenRoi
TaiDenRoi lúc 04:31 25 tháng 4, 2016
làm thế thì được gì nhỉ? khi họ vào trang web này cái họ quan tâm là bài post này chứ ai thèm vào cái link bạn comment làm gì?
Hơn nữa. khi bạn tìm kiếm trên các công cụ tìm kiếm, chẳng hạn như google thì kết quả từ khóa tên blog của bạn biết đâu nằm trong blog này và người tìm kiếm lại vào blog của window it sao. như thế chả khác nào đi backlink giúp blog windowsit :) mình nghĩ vậy k biết có đúng không :) Bạn admin vào giúp mình giải thích v có đúng k
Hoàng Nhân Khôi
Hoàng Nhân Khôi lúc 06:53 25 tháng 4, 2016
Vậy đơn giản là bạn đã thực hiện ở bước nào rùi ... DEMO mình làm rất oke. Blog bạn đâu cho mình xem qua tí
Admin
Admin lúc 12:03 17 tháng 5, 2016
làm k dc @
Hoàng Nhân Khôi
Hoàng Nhân Khôi lúc 13:29 17 tháng 5, 2016
Bác thấy em để Demo ko ??? V~ Cho xem cái trang của bác
Hoàng Nhân Khôi
Hoàng Nhân Khôi lúc 21:10 31 tháng 5, 2016
Họ làm như vậy ,,, >>>tạo đa dạng tên miền trỏ về site của họ góp phần nào đó tăng chỉ số PA. Ngoài ra google vẫn index các link này bình thường và cũng nhận link này là 1 backlink.
Unknown
Unknown lúc 07:47 25 tháng 7, 2016
Mình đã làm rất kỹ mà chỉ ra dc cái khung thoi, chan thật.
Hoàng Nhân Khôi
Hoàng Nhân Khôi lúc 19:08 25 tháng 7, 2016
Site bạn đâu cho mình xem thử (bạn phải đang thực hiện thuật này), mình mới giúp bạn được, chứ bạn nói vậy thì làm sao giúp đây !!
Unknown
Unknown lúc 08:54 29 tháng 7, 2016
minh làm ko chỉ được cái khung trắng: giúp mình với http://centanathuthiem2.blogspot.com/
Hoàng Nhân Khôi
Hoàng Nhân Khôi lúc 10:10 29 tháng 7, 2016
Mình đã tìm trên trang blog của bạn hình như bạn chưa viết một bài nào hết (toàn là bạn gắn link dẫn về trang khác) vậy làm sao nó hiển (ít nhất bạn phải viết vài bài thì nó mới hiện chứ !!!)
Unknown
Unknown lúc 18:30 31 tháng 7, 2016
no lien ket the nao ak ban
Unknown
Unknown lúc 18:53 31 tháng 7, 2016
mình làm rồi. nó vẫn hình trắng trơn
Hoàng Nhân Khôi
Hoàng Nhân Khôi lúc 20:32 31 tháng 7, 2016
Blog bạn viết có 1 bài nó hiện thì một bài thì đúng rồi!! mà bạn bảo nó vẫn hình trắng trơn là sao. Thật sự mình ko hiểu bạn muốn nó hiển thị "thứ gì" nữa :(
Văn Thắng Đặng
Văn Thắng Đặng lúc 03:20 13 tháng 8, 2016
Mình làm cho Văn Thắng Blog không được bạn à :(
Hoàng Nhân Khôi
Hoàng Nhân Khôi lúc 03:47 13 tháng 8, 2016
Bạn có làm đâu ... mình kiểm tra code có thấy gì đâu :P
Quản trị viên
Quản trị viên lúc 04:22 26 tháng 9, 2016
TÌnh hình rất chi là tình hình, bây giờ googledrive không còn cho lưu file javascrip nữa, bạn có cách nào chia sẻ mọi người với.
Thank bạn nhé.
Quản trị viên
Quản trị viên lúc 04:23 26 tháng 9, 2016
TÌnh hình rất chi là tình hình, bây giờ googledrive không còn cho lưu file javascrip nữa, bạn có cách nào chia sẻ mọi người với.
Thank bạn nhé.
Hoàng Nhân Khôi
Hoàng Nhân Khôi lúc 22:45 26 tháng 9, 2016
Có nhiều trang thế còn tốt hơn googledrive nữa mà bạn chặn hạng:

1. https://github.com (mình đang dùng cái rất tốt)

2. https://www.openshift.com/

3.http://xtgem.com/
Unknown
Unknown lúc 16:52 4 tháng 2, 2017
Add vào có ảnh hưởng nhiều đến load trang ko bác
iv24h
iv24h lúc 06:50 4 tháng 4, 2017
Code của Windows2IT rất hay hay rất bổ ích. Rất tương thích với blogspot, còn những trang khác viewsuorce rồi copy && paste vào blog toàn là lỗi XML làm mình Hư blog cả mấy lần.
Mình rất ủng hộ blog của bạn... Mình sẽ Quảng Cáo Marketing Web chia sẻ của bạn đến tất cả cộng đồng web blog VN.
iv24h
iv24h lúc 06:52 4 tháng 4, 2017
HU vọng bạn WINDOWS2IT kết nối với mình trên Facebook : https://facebook.com/AnhTrangSonate.beethoven
Hoàng Nhân Khôi
Hoàng Nhân Khôi lúc 00:24 19 tháng 4, 2017
ko ảnh hưởng bao nhiêu đâu bạn :)
Hoàng Nhân Khôi
Hoàng Nhân Khôi lúc 00:25 19 tháng 4, 2017
Ô, thanks bạn rất nhiều :)
Hoàng Nhân Khôi
Hoàng Nhân Khôi lúc 00:26 19 tháng 4, 2017
liên kết fecebook của bạn ko khả dụng :) !!
tructhang
tructhang lúc 09:06 17 tháng 5, 2017
em làm r mà kh thấy hiện :(
bac giang
bac giang lúc 21:11 19 tháng 5, 2017
demo lỗi
Unknown
Unknown lúc 18:34 11 tháng 11, 2017
Nhận xét này đã bị tác giả xóa.
Unknown
Unknown lúc 18:38 11 tháng 11, 2017
Chào bạn, bạn giúp mình sữa lỗi này nhé, slide của mình hiển thị bài viết không được chính xác về chiều rộng bạn ơi.
http://www.phunudep24h.net
Hoàng Nhân Khôi
Hoàng Nhân Khôi lúc 20:41 11 tháng 11, 2017
là sao mình ko hiểu ý bạn lắm .. vô trang bạn có thấy bất thường gì đâu
Bảo Ngọc Vlogs
Bảo Ngọc Vlogs lúc 23:56 22 tháng 7, 2019
hay lắm bạn vì bạn đã chia sẻ nội dung rất hữu ích bạn cho mình xin link web mình nha PUBG Mobile, Thủ thuật pubg, tạo tên game kí tự đặc biệt
เว็บสล็อต 928sports โบนัสแตกไม่ยั้ง
เว็บสล็อต 928sports โบนัสแตกไม่ยั้ง เกมออนไลน์ชั้นหนึ่งที่ทวีปเอเชีย เพลิดเพลินกับรางวัลเป็นอย่างมากที่ pg slot มีแต่ได้กับได้ ไม่เกินจริง เล่นบันเทิงใจได้เงินจริง

Đăng nhận xét