Kamis, 02 Februari 2017

Cara Membuat Recent Post Berdasarkan Label Di Blog

Tags

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="http://2.bp.blogspot.com/-giova1ZCh-A/Uzq6L8QTJNI/AAAAAAAAAJc/USXictTq_xs/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!

15 komentar

Mantaf gan berguna banget buat ane yg masih pemula ngeblog. Ane bookmarks dulu.

Keren gan.. Ijin coba..BTW cara buat kotak CATATAN!!! kaya anggasave gimana?

wah jadi referensi baru nihh, mantap dah. makasih tutorialnya gan, sukses selalu buat blognya

ijin terapkan gan, sangat bermanfaat sekali gan

makasih bang, sangat berguna buat bloger pemula seperti saya

Wah kayaknya perlu terpasang juga nih di blog, selain populer post...

sangat bermanfaat sekali, bisa dicoba pada blog saya nih

cara membuat sitemap yang terbaru ada nggak??

mantab nih tutornya..
lanjut terus kak bikin tutorial yang bermanfaat.

Ada mas silakan dicari disearch box,keyword : sitemap

Akan saya buatkan tutornya mas


EmoticonEmoticon