4.5 151

Recent Posts By Labels Widget with Thumbnail for Blogger 2018

Posted by zerochan on October 11, 2018

Loading the translation ...

Previously I have shared animemagz anime blogger template this time I will discuss thoroughly about the recent recent posts starting from the modification of the recent posts and I also provide two scripts that are slightly different, for the source of the recent posts I took from andlogs.

The recent posts script made by danlogs is quite simple and can enlighten you in modifying again this recent posts, therefore I hope you do not delete credit danlogs to appreciate the creator who has shared this recent posts tutorial. and for the thumbnail code I take a reference from the idblanter recent posts grid. and the defer gets the idea from w3school & stackoverflow

This recent posts widget with thumbnail has also been used in the meguminovel blogger template or a theme that I recently released, you can see it directly on the demo template..

How to Install Recent Posts By Labels Widget with Thumbnail for blogger or blogspot

Recent Posts By Labels Widget With Thumbnail Responsive

1. Choose your blog
2. Click Menu Theme
3. Click Button Edit HTML
4. Search </head> code, then copy the code below just above the </head> code (use CTRL + F in editor)

<b:if cond='!data:view.isSingleItem'>
<style type='text/css'>
/*<![CDATA[*/
/* Grids inner Title */
.recent-main h2{font-size:18px;text-transform:uppercase;letter-spacing:.3px;display:flex;align-items:center;justify-content:left;margin:5px 0 15px}
.recent-main .sub{font-size:13px;border:1px solid #cecece;line-height:25px;padding:0 10px;border-radius:2px;margin-left:auto;color:#444;letter-spacing:.3px}
.recent-main .sub:hover{color:#219FDE;border-color:#219FDE}
#rcent_grid{margin-left:-5px;margin-right:-5px}
#rcent_load{display:block;margin-left:5px}
.rcent{font-family:"Roboto","Open Sans","Segoe UI",Arial,sans-serif;}
.rcent:after{content:"";display:block;clear:both}
.rcent a{text-decoration:none}
.rcent_post{float:left;width:33.333333%}
.rcent_post:hover img{transform:scale(1.05);opacity:.9;transition:all .5s;-moz-transition:all .5s;-webkit-transition:all .5s}
.rcent_inner{margin:0 5px 10px;position:relative;overflow:hidden}
.rcent_thumbnail:before{content:"";background:-webkit-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 50%,#000 100%);position:absolute;left:0;bottom:0;width:100%;height:100%;z-index:5}
.rcent_post a{width:100%;display:block}
.rcent_post img{width:100%;object-fit:cover}
.rcent_date{position:absolute;top:10px;right:10px;font-size:13px;color:#e8e8e8;text-transform:uppercase}
.rcent_title{margin:0;position:absolute;bottom:0;padding:20px;z-index:10}
.rcent_title a{color:#fff;line-height:1.5;font-size:16px}
.rcent_inner:hover .rcent_title a{color:#219FDE}
@media screen and (max-width:768px){.rcent_post{width:50%;}}
@media screen and (min-width:420px) and (max-width:520px){.rcent_post{.rcent_post .rcent_thumbnail{height:200px}}}
@media screen and (max-width:520px){.rcent_post{width:100%;}}
/*]]>*/
</style>
<script type='text/javascript'>
<b:if cond='data:view.isMobile'>var mview = '?m=1';<b:else/>var mview = '';</b:if>
//<![CDATA[

/* Recent Post Thumbnail
* @tutorial danlogs <https://bit.ly/2oPtL9y>
* @tutorial idblanter <https://bit.ly/2LQfWkm>
* @tutorial dte <https://bit.ly/2DB3aHJ>
* @tutorial yuukithemes
*/
var rcent_thumb = true,
rcent_date = true,
rcent_auth = false,
rcent_tags = false,
thumbwidth = 155,
thumbheight = 225;
function rcentbytag(e) {
for (var i = 0; i < e.feed.entry.length; i++) {
var n = e.feed.entry[i];
var cn = e.feed.entry.length;
for (var j = 0; j < n.link.length; j++) {
if (n.link[j].rel == 'alternate') {
var postUrl = n.link[j].href + mview;
break;
}
}
var l;
try {
l = n.media$thumbnail.url.replace(/\/s[0-9]+\-c/g, "\/w"+thumbwidth+"-h"+thumbheight+"-c");
} 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);
if (a != -1 && b != -1 && c != -1 && d != "") {
l = d
} else l = "https://4.bp.blogspot.com/-Ys8n-0PuWUE/W4sti1yi2UI/AAAAAAAAAWY/qsTYNxmhXVE9KZiJz3ceys9_y1cCfso5ACLcBGAs/w"+thumbwidth+"-h"+thumbheight+"-c/no_img.png";
}
var postTitle = n.title.$t,
postAuth = n.author[0].name.$t,
postCat = n.category[0].term,
postDate = new Date(n.published.$t),
postDates = postDate.getDate() + " " + ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"][postDate.getMonth()] + " " + postDate.getFullYear(),
item = '';

item += '<div class="rcent_post"><div class="rcent_inner">';
/* Thumbnail */
if(rcent_thumb == true){
item += '<a class="rcent_thumbnail" href=' + postUrl + ' style="height:'+thumbheight+'px"><img alt="' + postTitle + '" src="' + l + '"/></a>';
}
/* Title */
item += '<h3 class="rcent_title"><a href=' + postUrl + '>' + postTitle + '</a></h3>';
item += '<div class="rcent_footer">';
/* Author */
if(rcent_auth == true){item += 'By <span class="rcent_aut vcard fn">'+postAuth+'</span>';}
/* Date */
if(rcent_date == true){item += '<span class="rcent_date"><time class="updated published" title="'+postDate.toISOString()+'" itemprop="datePublished">'+postDates+'</time></span>';}
/* Label */
if(rcent_tags == true){item += '<span class="rcent_label"><a class="label" href="/search/label/' + postCat + mview + '">' + postCat + '</a></span>';}
item += '</div>';
item += '</div></div>';

document.write(item);
document.getElementById("rcent_load").innerHTML = "";

if(i != cn -1 || i === undefined){document.write("");}
}
}

//]]>
</script>
</b:if>

5. Then select the recent post position according to your wishes. I will take an example to put a recent post below the blog post.
6. Click Jump to Widget and Select Blog1
7. Add the code below right at the end of the blog Blog1 (Use Widget Method)

Note You can display recent posts by label more than one. You only need to copy the code below, and change the Widget ID HTML99 (see red mark below) so that it doesn’t error.
<b:if cond='data:view.isHomepage'>
<div class='rcent'>
<b:section class='recent-main' id='recent-main' maxwidgets='1' preferred='yes'>
<b:widget id='HTML99' locked='false' title='Recent Posts' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'>{
label: &quot;Neo%20Teacher%20Crusade&quot;,
numposts: 3,
width: 260,
height: 190,
thumb: true,
date: true,
auth: false,
tags: false
}</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:with expr:value='data:content' var='config'>
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/> <a class='sub' expr:href='&quot;/search/label/&quot;+data:config.name'>View More</a></h2>
</b:if>
<div class='widget-content'>
<div id='rcent_grid'>
<span id='rcent_load'> Loading ... </span>
<script type='text/javascript'>
var thumbwidth=<data:config.width/>,thumbheight=<data:config.height/>,rcent_thumb = <data:config.thumb/>, rcent_date = <data:config.date/>, rcent_auth = <data:config.auth/>, rcent_tags = <data:config.tags/>;
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:config.label/>?orderby=published&amp;alt=json-in-script&amp;callback=rcentbytag&amp;max-results=<data:config.numposts/>\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</div>
</b:with>
</b:includable>
</b:widget>
</b:section>
</div>
</b:if>

8. Click Save Themes

Setting Widget Recent Post By Labels Blogger

Following below is an explanation of the recent post code in the widget. please go to Layout > Edit HTML (Recent Post) to modify recent posts.

{
label: "Neo%20Teacher%20Crusade",
numposts: 3,
width: 260,
height: 190,
thumb: true,
date: true,
auth: false,
tags: false
}

Name Explanation
label Replace “Neo%20Teacher%20Crusade” with your name label post.
numposts number of posts, fill as you see fit.
width set size of image width.
height set size of image height.
thumb set false if it doesn’t want to appear. and set true if you want to appear thumbnail (default : true)
date set false if it doesn’t want to appear. and set true if you want to appear date (default : true)
auth set false if it doesn’t want to appear author. and set true if you want to appear author (default : false)
tags set false if it doesn’t want to appear label. and set true if you want to appear label (default : false)

Style Recent Post

for now I only make 4 styles that are simple.
1. Choose Style Recent Post Below.
2. Replace CSS in <[/plain] with CSS Below. Recent Post Widget with Thumbnail Grid 2
recent post blogger, recent post widget with thumbnail

CSS
/* Recent Post Thumbnail Grid 2 */
.recent-main h2{font-size:18px;text-transform:uppercase;letter-spacing:.3px;display:flex;align-items:center;justify-content:left;margin:5px 0 15px}
.recent-main .sub{font-size:13px;border:1px solid #cecece;line-height:25px;padding:0 10px;border-radius:2px;margin-left:auto;color:#444;letter-spacing:.3px}
.recent-main .sub:hover{color:#219FDE;border-color:#219FDE}
#rcent_grid{margin-left:-5px;margin-right:-5px}
#rcent_load{display:block;margin-left:5px}
.rcent{font-family:"Roboto","Open Sans","Segoe UI",Arial,sans-serif;}
.rcent:after{content:"";display:block;clear:both}
.rcent a{text-decoration:none}
.rcent_post{float:left;width:33.333333%}
.rcent_post:hover img{transform:scale(1.05);opacity:.9;transition:all .5s;-moz-transition:all .5s;-webkit-transition:all .5s}
.rcent_inner{margin:0 5px 10px;position:relative;overflow:hidden}
.rcent_thumbnail{position:relative;overflow:hidden;}
.rcent_thumbnail:before{content:"";background:-webkit-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 50%,#000 100%);position:absolute;left:0;bottom:0;width:100%;height:100%;z-index:5}
.rcent_post a{width:100%;display:block}
.rcent_post img{width:100%;object-fit:cover}
.rcent_title{margin:14px auto 10px}
.rcent_title a{color:#2B2E2F;line-height:1.5;font-size:17px}
.rcent_footer{color:#9FA2A3;font-size:13px}
.rcent_footer span{padding-right:7px}
.rcent_inner:hover .rcent_title a{color:#219FDE}
@media screen and (max-width:768px){.rcent_post{width:50%;}}
@media screen and (min-width:420px) and (max-width:520px){.rcent_post{.rcent_post .rcent_thumbnail{height:200px}}}
@media screen and (max-width:520px){.rcent_post{width:100%;}}

Recent Post Widget with Thumbnail Grid (Default)
recent post blogger, recent post widget with thumbnail

CSS
/* Grids inner Title */
.recent-main h2{font-size:18px;text-transform:uppercase;letter-spacing:.3px;display:flex;align-items:center;justify-content:left;margin:5px 0 15px}
.recent-main .sub{font-size:13px;border:1px solid #cecece;line-height:25px;padding:0 10px;border-radius:2px;margin-left:auto;color:#444;letter-spacing:.3px}
.recent-main .sub:hover{color:#219FDE;border-color:#219FDE}
#rcent_grid{margin-left:-5px;margin-right:-5px}
#rcent_load{display:block;margin-left:5px}
.rcent{font-family:"Roboto","Open Sans","Segoe UI",Arial,sans-serif;}
.rcent:after{content:"";display:block;clear:both}
.rcent a{text-decoration:none}
.rcent_post{float:left;width:33.333333%}
.rcent_post:hover img{transform:scale(1.05);opacity:.9;transition:all .5s;-moz-transition:all .5s;-webkit-transition:all .5s}
.rcent_inner{margin:0 5px 10px;position:relative;overflow:hidden}
.rcent_thumbnail:before{content:"";background:-webkit-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 50%,#000 100%);position:absolute;left:0;bottom:0;width:100%;height:100%;z-index:5}
.rcent_post a{width:100%;display:block}
.rcent_post img{width:100%;object-fit:cover}
.rcent_date{position:absolute;top:10px;right:10px;font-size:13px;color:#e8e8e8;text-transform:uppercase}
.rcent_title{margin:0;position:absolute;bottom:0;padding:20px;z-index:10}
.rcent_title a{color:#fff;line-height:1.5;font-size:16px}
.rcent_inner:hover .rcent_title a{color:#219FDE}
@media screen and (max-width:768px){.rcent_post{width:50%;}}
@media screen and (min-width:420px) and (max-width:520px){.rcent_post{.rcent_post .rcent_thumbnail{height:200px}}}
@media screen and (max-width:520px){.rcent_post{width:100%;}}

Recent Post Widget with Thumbnail List Grid
recent post blogger, recent post widget with thumbnail

CSS
/* List Grid */
.recent-main h2{font-size:18px;text-transform:uppercase;letter-spacing:.3px;display:flex;align-items:center;justify-content:left;margin:5px 0 15px}
.recent-main .sub{font-size:13px;border:1px solid #cecece;line-height:25px;padding:0 10px;border-radius:2px;margin-left:auto;color:#444;letter-spacing:.3px}
.recent-main .sub:hover{color:#219FDE;border-color:#219FDE}
#rcent_grid{margin-left:-5px;margin-right:-5px}
#rcent_load{display:block;margin-left:5px}
.rcent{font-family:"Roboto","Open Sans","Segoe UI",Arial,sans-serif}
.rcent:after{content:"";display:block;clear:both}
.rcent a{text-decoration:none}
.rcent_post{float:left;width:50%}
.rcent_post:hover img{transform:scale(1.05);opacity:.9;transition:all .5s;-moz-transition:all .5s;-webkit-transition:all .5s}
.rcent_inner{margin:0 5px 15px;position:relative;overflow:hidden}
.rcent_thumbnail{float:left;overflow:hidden;position:relative;margin-right:15px}
.rcent_thumbnail:before{content:"";background:-webkit-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 50%,#000 100%);position:absolute;left:0;bottom:0;width:100%;height:100%;z-index:5}
.rcent_post img{width:100%;object-fit:cover}
.rcent_title{margin:0 auto}
.rcent_title a{color:#373D3F;line-height:1.4;font-size:15px;display:block;margin-bottom:5px}
.rcent_title a:hover{color:#1395BA}
.rcent_date{font-size:13px;color:#A7B0B2;text-transform:uppercase}
.rcent_inner:hover .rcent_title a{color:#219FDE}
@media screen and (max-width:768px){.rcent_post{width:50%;}}
@media screen and (max-width:576px){.rcent_post{width:100%;}}
@media screen and (max-width:280px){.rcent_thumbnail{float:none;width:100%;margin:0 0 15px}.rcent_title{margin:10px auto 5px}.recent-main h2{display:block;text-align:center}.recent-main .sub{display:block;text-align:center;margin:10px auto}}

WIDGET
<b:widget-setting name='content'>{
label: &quot;Neo%20Teacher%20Crusade&quot;,
numposts: 3,
width: 95,
height: 80,
thumb: true,
date: true,
auth: false,
tags: false
}</b:widget-setting>

Recent Post (Only Title)
recent post blogger, recent post widget with thumbnail

CSS
/* List Grid */
.recent-main h2{font-size:18px;text-transform:uppercase;letter-spacing:.3px;display:flex;align-items:center;justify-content:left;margin:5px 0 15px}
.recent-main .sub{font-size:13px;border:1px solid #cecece;line-height:25px;padding:0 10px;border-radius:2px;margin-left:auto;color:#444;letter-spacing:.3px}
.recent-main .sub:hover{color:#219FDE;border-color:#219FDE}
#rcent_grid{margin-left:-5px;margin-right:-5px}
#rcent_load{display:block;margin-left:5px}
.rcent{font-family:"Roboto","Open Sans","Segoe UI",Arial,sans-serif}
.rcent:after{content:"";display:block;clear:both}
.rcent a{text-decoration:none}
.rcent_post{}
.rcent_inner{margin:0 5px;position:relative;overflow:hidden}
.rcent_title{margin:0 auto 7px;border-bottom:1px solid #E3E7E7;padding:0 0 7px}
.rcent_post:last-child .rcent_title{margin-bottom:0;border-bottom:0}
.rcent_title a{color:#373D3F;line-height:1.4;font-size:15px;display:block;}
.rcent_title a:hover{color:#1395BA}
.rcent_inner:hover .rcent_title a{color:#219FDE}

WIDGET
<b:widget-setting name='content'>{
label: &quot;Neo%20Teacher%20Crusade&quot;,
numposts: 3,
width: 95,
height: 80,
thumb: false,
date: false,
auth: false,
tags: false
}</b:widget-setting>

Minify Javascript (Optimize JS)

for those of you who want to minify the recent long post javascript code, please visit javascript-minifier.com.
1. Enter the javascript code in the Input JavaScript column then click the button Minify
2. Copy the new code in the minify output column and replace it js with old javascript recent post (in your template).
recent posts blogger, recent post widget with thumbnail

Reference
I made this article not alone, I also glanced at some references to add my insight in making this article.
- https://www.dte.web.id/2018/09/javascript-tag-kondisional-halaman-blogger.html
– https://www.danlogs.com/2013/09/blogger-json-feed-api
– https://www.idblanter.com/2016/09/membuat-grid-recent-post-berdasarkan-label.html
– https://stackoverflow.com/questions/5250412/how-exactly-does-script-defer-defer-work
– https://www.w3schools.com/tags/att_script_defer.asp
– https://www.dte.web.id/2017/09/tag-kondisional-halaman-blogger-2017.html
– https://www.dte.web.id/2018/07/custom-blogger-widget.html
– https://translate.google.com

Related Post

Comments

Waiting Load Disqus Comments ...