How to Creating Recent Post / Post by Label on Blog - BLOGHINT

How to Creating Recent Post / Post by Label on Blog

Encrypting your link and protect the link from viruses, malware, thief, etc! Made your link safe to visit.


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

0 Response to "How to Creating Recent Post / Post by Label on Blog"

Post a comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel