CARA PASANG RECENT POST BERDASARKAN LABEL

CARA PASANG RECENT POST BERDASARKAN LABEL

CARA PASANG RECENT POST BERDASARKAN LABEL – Tutorial cara membuat recent post bergambar di blog yang cocok untuk dipasang di footer. Hasil dari list artikel ini diurutkan berdasarkan label dan last modified setiap kategori label. Artikel pertama yang muncul pada recent post ini disertai dengan gambar dan summary isi dari artikel tersebut.

cara memasang recent post by label

Kode dari pemasangan script ini menggunakan bantuan javascript eksternal, untuk jaga-jaga sobat bisa membackup kode javascript tersebut agar tidak hilang. Untuk lebih baiknya sobat mengupload ulang kode javascript eksternal tersebut ke yourjavascript.com dan dipasang untuk blog sobat sendiri. Karena diasumsikan apabila kode javascript itu digunakan oleh banyak blog maka akan mengurangi performa loading blog sobat.

CARA MEMASANG RECENT POST BERGAMBAR

#1 Masukan kode css dibawah ini pada style css blog

img.label_thumb{float:left;border:1px solid #8f8f8f;background:#D2D0D0;margin-right:10px;height:60px;width:60px;padding:0px;border-radius: 5px;}img.label_thumb:hover{background:#f7f6f6}.label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 5px 2px 0}ul.label_with_thumbs li{min-height:65px;margin:2px 0;padding:4px 0}

#2 Pilih menu Layout > Add a Gadget > Text/ HTML kemudian masukan kode berikut ini

<script src='http://yourjavascript.com/3163841161/labelfix.js' type='text/javascript'></script>

<script type='text/javascript'>var numposts = 1;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 150;</script>
<script type="text/javascript" src="/feeds/posts/default/-/NAMA%20LABEL?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs"></script>
<script type="text/javascript">
function recentpostslist(json) {
document.write('<ul>');
for (var i = 1; i < json.feed.entry.length; i++)
{
for (var j = 1; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="http://your.blogspot.com/feeds/posts/summary/-/NAMA%20LABEL?max-results=5&amp;alt=json-in-script&amp;callback=recentpostslist"></script>

#3 setelah itu klik save, untuk menambahkan list kategori yang lainnya tinggal menambahkan kode dan mengganti tulisan yang berwarna hijau berikut ini

<script type='text/javascript'>var numposts = 1;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 150;</script>
<script type="text/javascript" src="/feeds/posts/default/-/NAMA%20LABEL?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs"></script>
<script type="text/javascript">
function recentpostslist(json) {
document.write('<ul>');
for (var i = 1; i < json.feed.entry.length; i++)
{
for (var j = 1; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="http://your.blogspot.com/feeds/posts/summary/-/NAMA%20LABEL?max-results=5&amp;alt=json-in-script&amp;callback=recentpostslist"></script>

tampilan recent post berdasarkan kategori

Pada dasarnya kode pertama dan kedua hampir sama, hanya saja pada kode pertama ada script untuk memunculkan thumbnail dan summary postingan. Untuk penambahan list kategori yang selanjutnya bisa hanya dengan menggunakan kode yang kedua, karena efek dari kode javascript eksternal tersebut juga akan berefek pada list kategori yang selanjutnya. Ini bertujuan untuk menjaga kecepatan loding blog.

Demikian artikel CARA PASANG RECENT POST BERDASARKAN LABEL semoga bisa menambah pengetahuan blogging dan bisa mempercantik tampilan blog sobat. Selain tutorial ini, sobat juga bisa mempelajari CARA MEMBUAT RANDOM POST dan CARA MEMBUAT POPULAR POST BERGERAK yang sudah sebelumnya saya posting di blog ini, Salam blogger.