Tạo widget Bài Viết Mới Nhất với Avatar bo tròn tuyệt đẹp
/ lúc / 38 bình luận
Ra mắt BSW Community - trang đăng bài tự do dành cho bạn, thoải mái trao đổi, đặt câu hỏi, thắc mắc, viết bài viết mới hay thậm chí rao vặt, buôn bán. Click trải nghiệm ngay!
Hello xin chào các bạn, chào mừng các bạn đã trở lại với blog Bác Sĩ Windows.
Nếu các bạn có để ý thì sẽ thấy ở trong Group của BSW có Widget "Bài Viết Mới Nhất" này. Hôm nay mình rảnh nên chia sẽ các bạn Widget nhỏ này.
Tạo widget Bài Viết Mới Nhất với Avatar bo tròn tuyệt đẹp

Các bước thực hiện

Bước 1. Vào phần Bố cục, tạo một widget HTML/Javascript.
Bước 2. Dán toàn bộ code này vào:
<div class='widget-content'>
<style>#recent-posts img{float: left; margin-right: 10px; border: 0; width: 45px; height: auto; border-radius: 50%; filter: brightness(90%)}
</style>
<div id='recent-posts'>
<script type='text/javaScript'>
var rcp_numposts=7;
var rcp_snippet_length=70;
var rcp_info='no';
var rcp_comment='Nhận xét';
var rcp_disable='Tắt Nhận xét';
function recent_posts(json){var dw='';a=location.href;y=a.indexOf('?m=0');dw+='<ul>';for(var i=0;i<rcp_numposts;i++){var entry=json.feed.entry[i];var rcp_posttitle=entry.title.$t;if('content'in entry){var rcp_get_snippet=entry.content.$t}else{if('summary'in entry){var rcp_get_snippet=entry.summary.$t}else{var rcp_get_snippet="";}};rcp_get_snippet=rcp_get_snippet.replace(/<[^>]*>/g,"");if(rcp_get_snippet.length<rcp_snippet_length){var rcp_snippet=rcp_get_snippet}else{rcp_get_snippet=rcp_get_snippet.substring(0,rcp_snippet_length);var space=rcp_get_snippet.lastIndexOf(" ");rcp_snippet=rcp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rcp_commentsNum=entry.thr$total.$t+' '+rcp_comment}else{rcp_commentsNum=rcp_disable};if(entry.link[j].rel=='alternate'){var rcp_posturl=entry.link[j].href;if(y!=-1){rcp_posturl=rcp_posturl+'?m=0'}var rcp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rcp_thumb=entry.media$thumbnail.url}else{rcp_thumb="https://png.icons8.com/nolan/540/user-male-circle.png"};}};dw+='<li>';dw+='<img alt="'+rcp_posttitle+'" src="'+rcp_thumb+'"/>';dw+='<div><a target="blank" href="'+rcp_posturl+'" rel="nofollow" title="'+rcp_snippet+'">'+rcp_posttitle+'</a></div>';if(rcp_info=='yes'){dw+='<span>'+rcp_postdate.substring(8,10)+'/'+rcp_postdate.substring(5,7)+'/'+rcp_postdate.substring(0,4)+' - '+rcp_commentsNum+'</span>';};dw+='<div style="clear:both"></div></li>';};dw+='</ul>';document.getElementById('recent-posts').innerHTML=dw;};document.write('<script type=\"text/javascript\" src=\"http://www.bacsiwindows.com/feeds/posts/default?alt=json-in-script&max-results='+rcp_numposts+'&callback=recent_posts\"><\/script>');
</script>
</div>
</div>
Bước 3. Lưu tiện ích. Nhớ chỉnh lại link blog bạn để phù hợp với blog của bạn.

Lời kết

Đây là widget giúp độc giả của các bạn có thể xem các bài viết mới nhất của các bạn tốt nhất. Đặc biệt rất cần thiết và tiện lợi cho những Forum nào có trang chủ như Bác Sĩ Windows. Chúc các bạn thành công.
Source code: Duy Pham

BÌNH LUẬN VỀ BÀI VIẾT (38)

avatar
🔰☣ Lê Thanh Phong☣🔰⚜️

Hay quá :*

TRẢ LỜI

Bạn đang dùng code recent posts mình viết nên vui lòng ghi nguồn khi phát hành lại.

TRẢ LỜI
avatar
Nguyễn Trọng Trung

hay quá

TRẢ LỜI
avatar
Star Cường IT ­

Ok bác.

TRẢ LỜI
avatar
Star Cường IT ­

Cảm ơn em.

TRẢ LỜI
avatar
Trường Nguyễn

Sao không hiện tên người viết bài nhờ

TRẢ LỜI
avatar
Còi Offical

- Hay !!!

TRẢ LỜI
avatar
Star Cường IT ­

Blog cùi quá :v

TRẢ LỜI
avatar
Trường Nguyễn

TRẢ LỜI
avatar
Ngọc Tính IT

đẹp quá

TRẢ LỜI
avatar
Huỳnh Hoài Bảo

Đẹp :v

TRẢ LỜI
avatar
Phú Cường Blogger

Bài này cường viết à? k hiện tên cứ tưởng ông trường

TRẢ LỜI
avatar
Trường Nguyễn

Ừ Cường viết đó. Để tí sửa lại code tác giả nó không hiện.

TRẢ LỜI
avatar
Trường Nguyễn

https://media.tenor.co/images/c47123d8c726a90ed380243c90cdb8f9/tenor.gif

TRẢ LỜI
avatar
Trường Nguyễn

Cảm ơn em ;)

TRẢ LỜI
avatar
Trường Nguyễn

:3

TRẢ LỜI
avatar
Star Cường IT ­

:v Đúng rồi, sửa tên tác giả đi :3

TRẢ LỜI
avatar
Trường Nguyễn

Viết bài xong lưu nháp đi Cường, đừng xuất bản liền.

TRẢ LỜI
avatar
Star Cường IT ­

Tui viết bài cũng như ông viết thôi :3

TRẢ LỜI
avatar
Trường Nguyễn

Ừm thì nói vậy đó. Còn thích thì xuất bản luôn cũng được =_=

TRẢ LỜI
avatar
Star Cường IT ­

Oki :))

TRẢ LỜI
avatar
z0mbie win

hay qué :D

TRẢ LỜI
avatar
Trường Nguyễn

:D)

TRẢ LỜI
avatar
Star Cường IT ­

Bác sĩ ơi, blog sờ ta cường it chưa có https, cớ sao người lại để https để không zô đc starcuongit.com :((

TRẢ LỜI
avatar
Trường Nguyễn

Bác sĩ đã fix link cho sờ ta cường nhé :v

TRẢ LỜI
avatar
Niệm Style Blog

đọc bình luận của 2 thanh niên này mắc cười vãi :v

TRẢ LỜI
avatar
Trường Nguyễn

Còm men cu te vãi đoái :vv

TRẢ LỜI
avatar
Trường Nguyễn

Chữ cộng tác viên đẹp vồn :v

TRẢ LỜI

Cái bài này nên để là Avatar hay thumbnail mới đúng nhỉ??

TRẢ LỜI
avatar
Trường Nguyễn

Đúng thì phải là thumbnail, ta Cường viết sai cmnr kìa!!

TRẢ LỜI

E nghĩ khi vào bài viết thì nên ẩn sidebar và cho phần post rộng ra sẽ đẹp hơn

TRẢ LỜI
avatar
Trường Nguyễn

Vậy hả, hiện tại bấm vào hình con mắt bên sidebar được đó em.

TRẢ LỜI

Trang chủ blog khi kéo xuống dưới cùng trống trải quá a ơi, hay a cho sidebar cố định luôn đi!!

TRẢ LỜI
avatar
Trường Nguyễn

Ừm e, anh cũng định thêm sticky widget đây!

TRẢ LỜI

Trời lạnh nhìn trống vắng quá còn thêm lạnh

TRẢ LỜI
avatar
Star Cường IT ­

Quên :v cứ tưởng widget comment :v

TRẢ LỜI
avatar
Star Cường IT ­

Star Cường IT noname :v

TRẢ LỜI
avatar
Trường Nguyễn

:v

TRẢ LỜI

THAM GIA TRANH TOP BÌNH LUẬN NGAY!

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy).

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

Bạn có thể dùng ảnh động hoặc mã hóa code HTML để bình luận.