The Newest Way to Make Recent Posts Based on Labels with Images on the BLOGGER

July 04, 2021 Post a Comment

Recent Post Widget By Label with Image - Recent post is a widget that displays the latest articles on a blog. From some of the literature that I have studied, recent posts themselves have many functions, including the most popular of which is to make it easier for visitors to find posts from the newest to the oldest posts, meaning that I can conclude this Recent Post as Display Posts based on Time, because The posts are sorted from most recent.

That's the point in my opinion at my Indonesian Blog, RahmanCyber NET.

Then actually to make Recent Posts, I've already discussed in old posts, with the same material materi , How to make Recent Post Grid

But it's been a very long time, so I'm just updating it in this post, with a more complex discussion of how to create a Recent Post Widget Based on Labels with Images in the latest Blogger 2020 Display, you can apply it to Blog Posts or Widgets, meaning you don't need to go Template Editor Settings.

If your friends are still beginners and don't know in detail about how Blogger is and how to create a blog, you can learn in my previous discussion about Newest View Blogger Tutorial 2020 from Basic.

You also need to know Blogger history , Yes, of course, as a user, you need to know the forerunner of the founding of Blogger. Who is the inventor? Before Purchased by Google.

Recent Post by Label Widget Collection with Image

Just go ahead, visitor, here are some Recent Posts by Labels with Images that you can choose according to your respective tastes.

Recent Post Widget with Background Block by Label using Image

This second widget is still Recent Post with a colorful design, with a view that can be seen as a pile of blocks, because the recent posts are stacked in piles.

To install it, you just need to Copy Paste the Code Widget Recent Post this colorful block display

Tampilan widget recent post by label block warna warni

Recent Post Widget Results with Background Block based on Labels using Image Add caption



 <style type="text/css">
img.recent-post-thumbnail{float:right;height:50px;width:50px;margin:5px -5px 0px 0px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:3px;background: #fff}
ul.recent-posts-wrap {background: #fff;list-style-type: none; margin: 5px 0px 5px 0px; padding: 0px;font:12px 'Ubuntu Condensed', sans-serif;}
ul.recent-posts-wrap li:nth-child(1n+0) {background: #FCD092; width: 94%}
ul.recent-posts-wrap li:nth-child(2n+0) {background: #FFE0B4; width: 94%}
ul.recent-posts-wrap li:nth-child(3n+0) {background: #FFF59E; width: 94%;}
ul.recent-posts-wrap li:nth-child(4n+0) {background: #E1EFA0; width: 94%;}
ul.recent-posts-wrap li:nth-child(5n+0) {background: #B1DAEF; width: 94%;}
ul.recent-posts-wrap li {padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #777;}
.recent-posts-wrap a { text-decoration:none; }
.recent-posts-wrap a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;font-weight: bold;color: #444;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #222;}
.recent-posts-details {padding: 5px 0px 5px; }
</style>
<script type="text/javascript">
function showrpwiththumbs(t){document.write('<ul class="recent-posts-wrap">');for(var e=0;e<posts_number;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEierf8ywGPtxuQ-ISkF3R1Xjstu6isCA53SO4CB9PmFNTlgcBp7DsZywI0c5Rnr2loJeC4tfcCzPweHOmzlHCqt086eERfLuEehYU6F0LrqOnh2ryESl2Q4hNi7diec1LpelTLt14hANkUi/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="recent-posts-list">'),1==showpostswiththumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumbnail" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<br><div class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==insidereadmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcomments&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
</script>
<script type="text/javascript">
var posts_number = 7;
var showpostswiththumbs = true;
var insidereadmorelink = true;
var showcomments = false;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;
</script>
<script src="/feeds/posts/default/-/bahas blogger?orderby=published&alt=json-in-script&callback=showrpwiththumbs"></script>
<a style="font-size: 9px; color: #CECECE;margin-top:10px;" href="https://www.rahmancyber.net" rel="nofollow">Recent Posts Label</a>
<link href='https://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />

The image above is intentionally displayed to let you know, that this script can also be installed in your blog posts, whether dynamic or static / page.

After that it is somewhat the same as the one above, what you need to change from the Recent Post Widget above is "var post_no = 7" you can change the value "7" which is there with the number of posts you want to display. In the labeling section "/feeds/posts/default/-/discuss blogger?" you can change "discuss blogger" with the post label that you have made on your blog, for example "Technology" make sure you pay attention to the uppercase and lowercase letters because it can cause it not to appear .... the point must be in accordance with the name of the label you want to display.

How to Install Recent Post Widget in Sidebar

This is a bonus, right... so it's actually really easy, all you have to do is go to the layout

then you choose add widget,

after that please select the HTML / JAVASCRIPT

Then Copy Paste the Code in the post above, choose the design that suits your taste... then if it's in the Save..

Please see the results.

Closing Recent Post Widget by Label

Visitor, I hope that's the tutorial, the above is a Recent Post Widget that can not only beautify the appearance of your blog, it can also make it easy for visitors to navigate, for the script above, everything is internal, except the font from GoogleApis.

Hope it can be useful and Stay Creative!

oh yes.. there are 2 pictures used in the project above... so the function is to display if there is no picture in your post..

So it's only 2 pictures above... ^_^

MyShortTips

Widget Atas Posting

The Newest Way to Make Recent Posts Based on Labels with Images on the BLOGGER

Recent Post by Label Widget Collection with Image

Recent Post Widget with Layered Random Color Background by Label with Image

Recent Post Widget with Background Block by Label using Image

Recent Post Flat Widget based on Labels with Image

Recent Post GRID GALLERY Widget based on Label only Thumbnail Image

Recent Post Thumbnail Widget Rounded By Label

How to Install Recent Post Widget in Sidebar

Closing Recent Post Widget by Label

Post a Comment for "The Newest Way to Make Recent Posts Based on Labels with Images on the BLOGGER "