Saturday, 5 September 2020

How to Creating Recent Post / Post by Label on Blog

How to Creating Recent Post / Post by Label on Blog

How to Creating Recent Post / Post by Label on Blog
Saturday, 5 September 2020

On the first day of February, I will provide a tutorial on 'How to Make a Recent Post Widget on a Blog' as well as 'Making a Post by Label Widget on a Blog' this recent post or post by label using a gallery style or model. for example as shown below.

I took this model from Arlina's blog, ok before we go straight to the point, please see the Demos first.

Immediately, the application stage.

1. Login to Blogger
2. select Themes / Themes> Edit HTML
3. Copy the CSS below, and save it above </head>


<style type='text/css'>
/* Galeri Label Post */
.recent-galeri{padding:0;clear:both}
.recent-galeri:after{content:"";display:table;clear:both}
.recent-galeri .gallerytem{display:block;float:left;position:relative;margin:0 auto 15px auto;overflow:hidden;padding:0;text-align:center;width:100%;box-shadow:0 2px 8px rgba(0,0,0,0.05);border-radius:10px}
.recent-galeri .gallerytem:last-child{margin:0 auto}
.recent-galeri .gallerytem a{position:relative;float:left;margin:0;overflow:hidden;text-decoration:none;width:100%}
.recent-galeri .gallerytem .ptitle{background:rgba(255,255,255,0.97);display:inline-block;clear:left;font-size:14px;line-height:1.3em;position:absolute;bottom:15px;left:15px;right:15px;color:#888;padding:15px;word-wrap:break-word;text-align:center;backface-visibility:hidden;box-shadow:0 8px 10px -5px rgba(0,0,0,0.15);border-top:2px solid #a4b0be;transition:all .2s;border-radius:10px;}
.recent-galeri .gallerytem:hover .ptitle{background:rgba(255,255,255,0.56);color:#222;border-top-color:#cc0000}
.recent-galeri a img{background:#fdfdfd;float:left;margin:auto;text-align:center;width:100%;transition:all .3s;border-radius:10px;height:auto;}
</style>

4. Then, Copy the JS below, and save it above </head> as well

<script type='text/javascript'>
//<![CDATA[
// Post label galeri
function myargrid(a){for(var t=a.feed.entry||[],e=['<div class="recent-galeri">'],i=0;i<t.length;++i){for(var l=t[i],r=l.title.$t,n=l.media$thumbnail?l.media$thumbnail.url:"https://4.bp.blogspot.com/-XQARxtj3cwk/VhKQr6dmTBI/AAAAAAAADJc/Tww7zM8jllc/s1600/default.png",s=n.replace("/s72-c/","/w"+myar_thumbs_wid+"-h"+myar_thumbs_hei+"-c/"),h=l.link||[],c=0;c<h.length&&"alternate"!=h[c].rel;++c);var d=h[c].href,m='<img src="'+s+'" width="'+myar_thumbs_wid+'" height="'+myar_thumbs_hei+'"/>',p=myar_title?'<span class="ptitle">'+r+"</span>":"",g='<a href="'+d+'" title="'+r+'">'+m+p+"</a>";e.push('<div class="gallerytem">',g,"</div>")}e.push("</div>"),document.write(e.join(""))};var myar_thumbs_wid = 300; 
var myar_thumbs_hei = 190; 
var myar_title = true; 
//]]>
</script>

5. If so, save the template then go to Layout / Layout.
6. Add Gadgets> select HTML / JavaScript.
7. Enter the script below to add the latest article widget / Recent Post / Latest Post.

<script src="/feeds/posts/summary?max-results=3&amp;alt=json-in-script&amp;callback=myargrid"></script>

8. If you want to add a Post by Label widget, enter the script below.

<script src="/feeds/posts/default/-/NamaLabel?max-results=3&amp;alt=json-in-script&amp;callback=myargrid"></script>

Replace the Label Name with the label name on your blog.

* Note
Number 3 shows the number of articles / posts displayed. Please replace that number with the number of articles you want to display.

9. Save and view your blog.

If you experience problems / are confused about the explanation I made, please leave your questions in the comments column.

Ok, maybe this is the discussion about Creating Recent Posts or Post by Label on the blog. Thank you
How to Creating Recent Post / Post by Label on Blog
4/ 5
Oleh

Comments