How to create Recent Post in Grid by Label

December 20, 2017 Post a Comment

Hi! MyShorTTips here...

Btw, this post, with Blogger Tips Category, I Would like to tell you How to Create Recent Post in Grid Mode by Label or Category.

Ok .. Here we GO!

In this time we will discuss how to make a recent post in the form of Grid with Based on the label .. So this will appear box horizontally / horizontally. Ok just right yes, no need to length ..

First step please go to Blogger > Layout
Add or Edit HTML / Javascript Widget and please you enter the script below







<script>
document.write("<script src=\"/feeds/posts/default/-/Desain?orderby=updated&alt=json-in-script&callback=rcentbytag\"><\/script>");
</script>

Please note that the script above is the script of the caller which label you will display in Grid form.

Please change your Design to Label that you want to show in recent post.

Step Two please go to HTML and Javascript box again...

Then enter the javascript code below just above the code






<script type="text/javascript">
var numposts = 6;
var showpostthumbnails = true;
var showpostdate = false;
</script><br />
<script type="text/javascript">
//<![CDATA[
function rcentbytag(e){document.write('<ul class="recent-by-tag">');for(var t=0;t<numposts;t++){var n=e.feed.entry[t];var r=n.title.$t;var i;if(t==e.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if(n.link[o].rel=="replies"&&n.link[o].type=="text/html"){var u=n.link[o].title;var f=n.link[o].href}if(n.link[o].rel=="alternate"){i=n.link[o].href;break}}var l;try{l=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);if(a!=-1&&b!=-1&&c!=-1&&d!=""){l=d}else l="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizyiw4mi6Q3Y1SQd7jYf6yBcRvacTfu3czfVfEjHO90dj1U87T4bDCV1Ja90Xnr9IVbPMoCOo3SvNnFho8rXHO4z1A0SkiDu4iZShnL7fa3RQOk1QatCNVD8SX4Fytc-WxDM0HsppjP9RN/s70-c/KM+Icon.png"}var p=n.published.$t;var v=p.substring(0,4);var m=p.substring(5,7);var g=p.substring(8,10);var y=new Array;y[1]="Januari";y[2]="Februari";y[3]="Maret";y[4]="April";y[5]="Mei";y[6]="Juni";y[7]="Juli";y[8]="Agustus";y[9]="September";y[10]="Oktober";y[11]="November";y[12]="Desember";document.write('
<li class="recentlist">');if(showpostthumbnails==true)document.write('<a href="'+i+'" target ="_blank" title="'+r+'"><img class="rct-thumb" alt="'+r+'" src="'+l+'"/></a>');document.write('<b><a href="'+i+'" target ="_blank" title="'+r+'" rel="nofollow">'+r+'</a></b>');document.write('
');document.write('<a class="btndown" href="'+i+'" target ="_blank">Enter</a>');var x="";var T=0;if(showpostdate==true){x='<span class="showdates">'+x+g+" "+y[parseInt(m,10)]+" "+v+"</span>";T=1}document.write(x);document.write("</li>
");if(t!=numposts-1)document.write("")}document.write("</ul>
")}
//]]>
</script>

If you want to change the Text "Enter", please change the Enter Text with the Text Button you want.

The third step is to choose Style ... here we include there are 2 styles that you can use and compare yourself which one you like .. remember .. choose one aja ya ..

Please Copy and Put above /B:SKIN
Just go to Themes > Edit HTML and Choose this code to put above on B:SKIN, you can searching for that code, just find using ctrl+f (find) and type that /B:SKIN , enter!

Recent Post in Grid by Label Style 2

  
/* Grid Recent Post by Label */

ul.recent-by-tag{overflow:hidden;padding:0 15px}

.recent-by-tag img{width:80px;height:80px;margin-left:10px;margin-bottom:5px}

.recent-by-tag li{width:100px;margin-bottom:10px;margin-right:12px;text-align:center;list-style:none;padding:11px 18px;float:left;line-height:1.3em!important}

.recent-by-tag li a{list-style:none;color:#111;font-weight:700;font-size:12px!important;overflow:hidden;display:block;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

.recent-by-tag .btndown{color:#88c425;font-weight:400;text-transform:uppercase;padding:2px 4px;font-size:11px!important;border:1px solid #88c425}

.recent-by-tag .btndown:hover{color:#fff;background:#88c425}

@media screen and (max-width:640px) {ul.recent-by-tag{padding:0;margin-left:10px}}

@media screen and (max-width:480px) {ul.recent-by-tag{margin-left:0}}

If you finish to put that code,

just save your template and preview your blog now.

Hope this knowledge can be useful to beautify your Blog.

Regards.

MyShortTips

Widget Atas Posting

How to create Recent Post in Grid by Label

Recent Post in Grid by Label Style 1

Recent Post in Grid by Label Style 2

Post a Comment for "How to create Recent Post in Grid by Label"