Cara Membuat Recent Post Berdasarkan Label Di Blog

Cara Membuat Recent Post Berdasarkan Label Di Blogger - Recent post merupakan widget yang berisi post yang terbaru. Recnet post ini sangatlah ringan jadi tidak membuat loading blog anda lama. Recent post ini sangat cocok untuk dipakai/dipasang di template magazine supaya terlihat ramai dan bagus. Widget ini akan dtampilkan 2 kolom,maksudnya 1 kolom untuk label 1 dan 1 kolom untuklabel 2. Post yang akan muncul di recent post ini maksimal namun bisa anda ubah dengan mengedt kode yang akan saya beikan.

Recent post ini disertai dengan thumbnail,namun yang membedakan recent post ini dengan recent post yang lainnya yaitu terdapat tanggal kapan post tersebut dipublikasikan. Recent post ini bisa anda tampilkan dibawah postingan,di side bar,atau juga bisa anda tampilkan di footer blog. Bagi anda yanng ingin memasang recent post ini maka silakan ikuti langkah-langkahnya dibawah ini.

Cara Membuat Recent Post By Label

Langkah 1

Silakan buka blogger → Template → Edit HTML

Langkah 2

Silakan salin kode CSS dibawah ini lalu letakkan/pastekan diatas kode ]]></b:skin> atau </style>

 

/* Recent By Label */

.recent-by-tag img {float:left;width:60px;height:60px;margin-right:10px;margin-bottom:17px}

.recent-by-tag li {clear:both;line-height:1.3em !important}

.recent-by-tag li a{list-style:none;color:#555;font-weight:bold;font-size:14px !important}

.recent-by-tag li a:hover,.recent-by-tag li:hover a{color:#f35858 !important}

.recent-by-tag li .showdates{display:inline-block;font-size:10px;font-weight:normal;margin-top:5px;color:#aaa}

Langkah 3
Salin kode HTML dibawah ini lalu letakkan diatas kode </head>
 

l<script type='text/javascript'>

var numposts = 5;

var showpostthumbnails = true;

var showpostdate = false;</script>

<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/AVvXsEilnratc9i-ip_6nPpJBzeC5L0N6UTsYIdyNfB4gh0zikecMVpxbIz1JdGw5R62jQte2W3pZCpoXW4WE2ZNvnBq0v3d4n02PvQuHWgcoYwuHIm77e7MEWWCx5aiA53VVWmXECDsbS_zEULD/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="clear">');if(showpostthumbnails==true)document.write('<a 
href="'+i+'" target ="_blank" title="'+r+'"><img class="rct-thumb"
 alt="'+r+'" 
src="'+l+'"/></a>');document.write('<strong><a 
href="'+i+'" target ="_blank" title="'+r+'" 
rel="nofollow">'+r+'</a></strong>');document.write('<br>');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>

Catatan!
Perhatikan kode yang berwarna merah,ganti angka 5 dengan jumlah artikel/post yang ingin ditampilkan

Langkah 4
Salin kode dibawah ini dan letakkan ditempat recent post ingin ditampilkanll (Bisa di sidebar,dibawah post,footer blog,dll)

<script>
var mql = window.matchMedia('screen and (min-width: 992px)');if (mql.matches){document.write("<script src=\"/feeds/posts/default/-/SEO?orderby=updated&amp;alt=json-in-script&amp;callback=rcentbytag\"><\/script>");}
</script>

Catatan!
Ganti kode berwarna merah dengan label blog yang ingin ditampilkan

Lalu klik simpan

Selesai...silakan dicek blog sobat untuk melihat hasil dari recent post yang anda buat. tulah tutorial cara membuat recent post by label id blog,semoga bisa bermanfaat bagi sobat blogger semua. See you next article!