Tiện ích bài đăng gần đây cho Blogspot

Tiện ích bài đăng gần đây cho Blogspot gồm một số mẫu tùy chọn có thể thay đổi các yếu tố như màu sắc kích thước Thumbnail cho phù hợp với Blog/Website.

Tiện ích bài đăng gần đây cho Blogspot
Tiện ích bài đăng gần đây cho Blogspot gồm một số mẫu tùy chọn có thể thay đổi các yếu tố như màu sắc kích thước Thumbnail cho phù hợp với Blog/Website.
Blog > Bố cục > Thêm tiện ích > HTML/Javascript > Dán đoạn code bên dưới vào và lưu lại
Thay thuthuatblogspot.xyz bằng link tùy chọn
Mẫu 1
<script style="text/javascript" src="https://dl.dropboxusercontent.com/s/ttp90hst4ppi2mt/Tien-ich-bai-dang-gan-day-cho-Blogspot-recent-posts-widget.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = false;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;
</script>
<script  src="https://www.thuthuatblogspot.xyz/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<style type="text/css">
img.recent-post-thumb {width:50px;height:50px;float:right;margin: 5px  -5px 0px 0px; border-radius: 100%; padding: 3px;background: #fff}
.recent-posts-container {font-family: 'Ubuntu Condensed', sans-serif;  float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px  0px;padding: 0;font-size:12px;}
ul.recent-posts-container {list-style-type: none; background: #fff;padding: 0px; }
ul.recent-posts-container li:nth-child(1n+0) {background: #F49A9A; width: 95%}
ul.recent-posts-container li:nth-child(2n+0) {background: #FCD092; width: 90%}
ul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E; width: 85%;}
ul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0; width: 80%;}
ul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF; width: 75%;}
ul.recent-posts-container li {padding:5px 10px;min-height:50px; list-style-type: none; margin: 0px 5px -5px 5px; color: #777;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color: green; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #444; font-weight: bold;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #222;}
.recent-posts-details {padding: 5px 0px 5px; }
</style>
Mẫu2
<script style="text/javascript"  src="https://dl.dropboxusercontent.com/s/ttp90hst4ppi2mt/Tien-ich-bai-dang-gan-day-cho-Blogspot-recent-posts-widget.js">gt;</script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;</script>
<script  src="https://www.thuthuatblogspot.xyz/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<style type="text/css">
img.recent-post-thumb  {padding:2px;width:65px;height:65px;float:left;margin: 0px 10px 10px;  background: #fff; border: 1px solid #69B7E2;}
.recent-posts-container {font-family: 'Oswald', sans-serif;  float:  left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding:  0;font-size:12px;}
ul.recent-posts-container li {padding:6px 0px;min-height:65px; list-style-type: none; margin-bottom: 5px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}
ul.recent-posts-container li:before {content:  counter(countposts,decimal);counter-increment: countposts;z-index:  2;position:absolute; left: 15px; font-size: 13px;font-weight:  bold;color: #fff;background: #69B7E2;padding: 4px 10px; border-radius:  100%;}
.post-date {color:black; font-size: 0px; }
.recent-posts-container a { text-decoration:none; }
.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #2aace3;}
.recent-posts-details {margin: 5px 0px 0px 92px; }
.recent-posts-details a{ color: #777;}
</style>
Mẫu 3
<script style="text/javascript"  src="https://dl.dropboxusercontent.com/s/ttp90hst4ppi2mt/Tien-ich-bai-dang-gan-day-cho-Blogspot-recent-posts-widget.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = false;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script  src="https://www.thuthuatblogspot.xyz/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<style type="text/css">
img.recent-post-thumb {padding: 2px;  width:35px;height:35px;float:right;margin: -14px 0px 0px 5px; border:  1px solid #cea5ac; border-radius: 10%;}
.recent-posts-container {font-family: 'Oswald', sans-serif;  float:  left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding:  0;font-size:12px;}
ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin: 0px 10px 5px 40px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}
ul.recent-posts-container li:before {content:  counter(countposts,decimal);counter-increment: countposts;z-index:  2;position:absolute; left: 5px; font-size: 16px;color: white;background: #00a7ad;padding: 9px 14px; border: 1px solid  #efefef;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover{color: #4DACE3;}
.post-date {color:green; font-size: 11px; }
.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #5C4D4D; font-weight: bold;}
.recent-post-title { margin: 5px 0px; }
.recent-posts-details {border-top: 4px solid #00ad5f; margin-top: 5px; padding-top: 5px;}
.recent-posts-details a{ color: #888;}
a.readmorelink {color: #4DACE3;}
</style>
Mẫu 4
<div style="padding: 0px 25px 0px 10px;">
<script style="text/javascript"  src="https://dl.dropboxusercontent.com/s/ttp90hst4ppi2mt/Tien-ich-bai-dang-gan-day-cho-Blogspot-recent-posts-widget.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script  src="https://www.thuthuatblogspot.xyz/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"   rel="nofollow"></script>
<style type="text/css">
img.recent-post-thumb {width:50px;height:50px;float:right;margin: -4px  -35px 0px 0px; border: 4px solid #FCD6CB; border-radius: 100%;}
.recent-posts-container {font-family: 'Gloria Hallelujah', cursive;   float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px  0px;padding: 0;font-size:12px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none; background: #fff; }
ul.recent-posts-container li:before {content:  counter(countposts,decimal);counter-increment: countposts;z-index:  2;position:absolute; left: 1px; font-size: 16px;color:  #616662;background: #FCD6CB;padding: 9px 14px; border-radius: 100%;  margin-top: 15px;}
ul.recent-posts-container li {padding:5px 0px 5px 15px;min-height:50px;  list-style-type: none; margin: -2px 5px 5px 5px;  border-top: 2px solid  #FCD6CB;}
ul.recent-posts-container {border: 2px solid #FCD6CB; }
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #616662; }
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: green; }
.recent-posts-details {padding-bottom: 5px; }
a.readmorelink {color: #4DACE3;}
</style>
</div>
Mẫu 5
Với mẫu này nên sử dụng Google Photo làm ảnh Thumbnail để hiển thị ảnh bài viết!
<style scoped="" type="text/css">
ul.rcentside *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box }ul.rcentside{font-size:11px}ul.rcentside,ul.rcentside li{margin:0;padding:0;list-style:none;position:relative }ul.rcentside{width:100%;height:500px }ul.rcentside li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none }ul.rcentside li:nth-child(1),ul.rcentside li:nth-child(2),ul.rcentside li:nth-child(3),ul.rcentside li:nth-child(4){display:block }ul.rcentside img{border:0;width:100%;height:auto}ul.rcentside li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0 }ul.rcentside li:nth-child(2){left:0;top:50% }ul.rcentside li:nth-child(3){left:50.5%;top:50% }ul.rcentside li:nth-child(4){width:100%;left:0;top:75% }ul.rcentside .overlayx,ul.rcentside li{transition:all .4s ease-in-out }ul.rcentside .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://1.bp.blogspot.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x }ul.rcentside .overlayx,ul.rcentside img{margin:3px}ul.rcentside li:nth-child(1).overlayx{background-position:50% 25% }ul.rcentside .overlayx:hover{opacity:.1 }ul.rcentside a4{position:absolute;bottom:10px;left:10px;right:10px;z-index:2;color:#fff;font-weight:700;margin:0;padding:10px;line-height:1.5em;font-weight:normal;overflow:hidden;transition:all .3s}ul.rcentside li:hover a4{bottom:30px}ul.rcentside li:nth-child(1)a4,ul.rcentside li:nth-child(4)a4{font-size:150% }ul.rcentside .label_text{position:absolute;bottom:0;left:20px;z-index:2;color:#fff;font-size:90%;opacity:0;transition:all .3s}ul.rcentside li:hover .label_text{bottom:20px;opacity:1}ul.rcentside li:nth-child(2).autname,ul.rcentside li:nth-child(3).autname{display:none }.buttons{margin:5px 0 0 }.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative }.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50% }.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px }
</style>
<div id="featuredpostside"></div>
<script type='text/javascript'>
function FeaturedPostSide(a){(function(e){var h={blogURL:"",MaxPost:4,idcontaint:"",ImageSize:100,interval:5000,autoplay:false,loadingClass:"loadingxx",pBlank:"https://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var d=h.MaxPost*200;g.html('<div class="sliderx"><ul class="rcentside"></ul></div><div class="buttons"><a href="#" class="prevx">prev</a><a href="#" class="nextx">next</a></div>');var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'"><div class="overlayx"></div><img class="random" src="'+u+'"/><a4>'+k+'</a4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingClass)};var c=function(){e(h.idcontaint+" .nextx").click()};var b=function(){e.get((h.blogURL===""?window.location.protocol+"//"+window.location.host:h.blogURL)+"/feeds/posts/summary"+(h.tagName===false?"":"/-/"+h.tagName)+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.idcontaint+" .prevx").click(function(){e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));return false});e(h.idcontaint+" .nextx").click(function(){e(h.idcontaint+" .sliderx li:last").after(e(h.idcontaint+" .sliderx li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));e(h.idcontaint+" .sliderx").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingClass)},d)};e(document).ready(b)})(jQuery)};
//<![CDATA[
FeaturedPostSide({
  blogURL: "https://www.thuthuatblogspot.xyz",
  MaxPost: 8,
  idcontaint: "#featuredpostside",
  ImageSize: 300,
  interval: 5000,
  autoplay: true,
  tagName: false
});
//]]>
</script>

COMMENTS

ADS
Name

Arlethdesign,1,Blogger Template,108,Idntheme,62,Landing Page,1,Responsive Blogger Template,2,Sitemap,10,Sora Templates,1,Template AMP,3,Template Ảnh,2,Template Anime,3,Template Blog,1,Template Blogspot,108,Template Chia Sẻ Tài Liệu,1,Template Facebook,3,Template Phim,1,Template Tạp Chí,2,Template Tin Tức,2,Thủ Thuật Blogspot,120,Tool,11,
ltr
item
Thủ Thuật Blogspot: Tiện ích bài đăng gần đây cho Blogspot
Tiện ích bài đăng gần đây cho Blogspot
Tiện ích bài đăng gần đây cho Blogspot gồm một số mẫu tùy chọn có thể thay đổi các yếu tố như màu sắc kích thước Thumbnail cho phù hợp với Blog/Website.
https://dl.dropboxusercontent.com/s/rvqmj09bprp4je4/Tien-ich-bai-dang-gan-day-cho-Blogspot.png
Thủ Thuật Blogspot
https://www.thuthuatblogspot.xyz/2020/02/Tien-ich-bai-dang-gan-day-cho-Blogspot.html
https://www.thuthuatblogspot.xyz/
https://www.thuthuatblogspot.xyz/
https://www.thuthuatblogspot.xyz/2020/02/Tien-ich-bai-dang-gan-day-cho-Blogspot.html
true
3499987058798930668
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content