How To Create a Recent Post Design Material Based on Labels on the Blogger Blog

in Blogger published on April 06, 2020 Views: 1 comment

Create a Recent Post Design Material Based on Labels on the Blog

Hello Sayem Tutorial , again I will share tutorials from your request, which are Material Design Recent Post based on labels. The recent post design I have actually installed on one of the Safelink Material Design templates, just that the Safelink template is a regular recent post, for this tutorial I modified the recent post to be a recent post based on the label.

This recent post is useful for blogs that discuss many topics or categories, with recent posts based on this label visitors will more easily access articles with the category they are looking for. This Recent Post will be optimized directly to templates that have a wrapper size of 1100px , for other templates with different wrapper sizes, you will need a little adjustment on the width of the li.recent-posts .

DEMO

If you are interested in installing it, please follow the tutorial below:

The first step you should do is install the CSS below right above the code ]]></b:skin> or </style> that is in the HTML Template edit

/* Recent Post Material Design by SAYEMTUTORIAL.BLOGSPOT.COM */
li.recent-posts:hover{box-shadow:0 2px 2px 0 rgba(0,0,0,0.14), 0 5px 10px 0 rgba(0,0,0,0.12), 0 5px 10px -5px rgba(0,0,0,0.2)}
.recenthd,li.recent-posts{box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 2px 2px 0 rgba(0,0,0,.24);background:#fff;border-radius:3px;overflow:hidden}
a.gorecent{float:right;font-size:11px;padding:5px 10px;margin:-4px}
.recenthd h2{display:inline-block;text-transform:uppercase;font-size:15px;margin:0}
.recenthd svg{float:left;margin-right:10px}
.recenthd{padding:15px;text-align:left;margin-bottom:10px}ul#recent-posts{margin:0;padding:0}
li.recent-posts:nth-child(12),li.recent-posts:nth-child(4),li.recent-posts:nth-child(8){margin-right:0}
li.recent-posts{transition:all .3s ease-in-out;list-style:none;padding:0;margin-bottom:20px;text-align:center;width:260px;max-width:100%;float:left;height:260px;margin-right:20px}
.title_post a{color:#515151}li.recent-posts a:hover{color:#111}
.title_post{height:30px;overflow:hidden;padding:10px;line-height:1.4;font-size:13.4px}
.recent-posts img{height:190px;width:100%}
a.gorecent{text-transform:uppercase;line-height:1.5;font-size:11px;font-weight:700;color:#fff;border:none;padding:7px 15px 7px;border-radius:5px;background:#1976d2;cursor:pointer;outline:0;box-shadow:0 2px 2px 0 rgba(154,154,154,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.12);margin-right:7px}
@media screen and (max-width:768px){.howtouse{width:39%}#safe-wrapper{width:auto;padding:18px;margin:-100px 0 0}li.recent-posts{width:45.6%}}
@media screen and (max-width:480px){li.recent-posts{width:100%}}

The second step, please put my Javascript below right above the code </body>

<script type='text/javascript'>
//<![CDATA[
// Recent Post Settings
var recentpost_url = "https://sayemtutorial.blogspot.com";
var numPosts = 8;
var recentpost_label = "Game";
// Recent Post
function recentPosts(e){if(document.getElementById("recent-posts")){for(var t,s,r=e.feed.entry,n="",a=document.getElementById("recent-posts"),l=0;l<numPosts;l++){for(var c=0;c<numPosts;c++)if("alternate"==r[l].link[c].rel){s=r[l].link[c].href;break}"media$thumbnail"in r[l]?u=r[l].media$thumbnail.url.replace(/.*?:\/\//g,"//").replace(/\/s[0-9]+\-c/g,"/s300"):u="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsHozRfbW1pOX17lqjKiz_fNhLzBS7OfuV75GmCw7WeWw9KQXd2f_c_BrPDV_wYdy0nAoizmHjtVmFSvUCQcwRzHrUVRL1h0Z8zG3RdCo0D5fwbcGRFd4h6HELgwr2hkUO0XYEJkTLkaU/s90/nothumb_large.png";var t=r[l].title.$t;n+='<li class="recent-posts"><a href="'+s+'" title="'+t+'" target="_blank"><img src="'+u+'" alt="'+t+'"></a><div class="title_post"><a href="'+s+'" title="'+t+'" target="_blank">'+t+"</a></div></li>"}a.innerHTML=n}}var rcp=document.createElement("script");rcp.src=recentpost_url+"/feeds/posts/default/-/"+recentpost_label+"?orderby=published&alt=json-in-script&max-results="+numPosts+"&callback=recentPosts",document.getElementsByTagName("head")[0].appendChild(rcp);
// Recent Post Title
var titlerecentpost = document.getElementById("xtitlex");
titlerecentpost.innerHTML='<div class="recenthd"><svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-1 9H9V9h10v2zm-4 4H9v-2h6v2zm4-8H9V5h10v2z"/></svg><h2>'+recentpost_label+'</h2><a class="gorecent" href="'+recentpost_url+'/search/label/'+recentpost_label+'" title="Recent Post" target="_blank">View More</a></div>';
//]]>
</script>

Save Template.

It should be noted, so that the widget can run make sure recentpost_url and your blog url use the same http or https .

Next, please go to Layout> Add Widget> HTML / Javascript
Enter the code below where you want, you can also create a b: a new section below the menu code in the HTML template edit.

Save.

For setting this widget it's also very easy:

"https://sayemtutorial.blogspot.com" replace it with your blog URL
"8" replace with the number of posts you want displayed
"Game" replace with label name

That's all the tutorials I can share this time, hopefully it's useful for my friend. 😊