Cara Menampilkan Posting Terbaru Label Tertentu di Sidebar Blog

Cara Menampilkan Posting Terbaru Label Tertentu di Sidebar Blog – ADA dua cara memasang, memunculkan, atau menampilkan widget posting terbaru dengan Label atau Kategori Tertentu di Sidebar Blog. Pertama, menggunakan gadget Feed bawaan blogger. Kedua, menggunakan kode HTML/Javascript.

#1 – Cara Memasang Posting Terbaru dengan Feed.

Feed adalah widget bawaan blogger yang memungkinkan kita memasang daftar posting dari blog kita sendiri maupun blog lain.

Kita bisa manfaatkan widget Feed ini untuk memasang posting terbaru label tertentu, maupun semua label.

1. Tata Letak > Tambah Gadget > pilih Feed

2. Masukkan URL blog Anda:

– Untuk label tertentu: http://namablogAnda.blogspot.com/feeds/posts/default/-/nama label

– Untuk Semua Label: http://namablogAnda.blogspot.com/feeds/posts/default

3. Klik Continue

4. Ubah Judul Widget dengan Posting Terbaru

5. Save!

#2 – Cara Memasang Posting Terbaru dengan Kode Script.

Jika cara di atas gagal, biasanya karena ada kode yang mengapit kode </body> di dalam template seperti ini: <!–</body>–></body> maka gunakan kode script.

Bisa juga dengan menghapus kode <!–</body>–></body> tersebut dan ganti dengan kode </body> saja.

Ini cara memasang widget posting terbadu di sidebar blog dengan kode:

1. Pilih Tata Letak > Tambah Gadget > HTML/JavaScript

2. Isi Judul dengan Posting Terbaru

3. Copy Paste kode berikut ini ke kolom Content:

Kode Untuk Kategori Tertentu:

<script style=”text/javascript”>
var numposts = 5;
var standardstyling = true;
</script>
<script type=’text/javascript’>function showrecentposts(json) {
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == ‘alternate’) {
posturl = entry.link[k].href;
break;
}}
posttitle = posttitle.link(posturl);
if (standardstyling) document.write(‘<li>’);
document.write(posttitle);}
if (standardstyling) document.write(‘</li>’);}</script>
<ul><script src=”/feeds/posts/default/-/namalabel?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=500″></script> </ul>

Contoh Untuk Label Android:

Kode untuk Posting Terbaru Semua Label:

<script style=”text/javascript”>
var numposts = 5;
var standardstyling = true;
</script>
<script type=’text/javascript’>function showrecentposts(json) {
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == ‘alternate’) {
posturl = entry.link[k].href;
break;
}}
posttitle = posttitle.link(posturl);
if (standardstyling) document.write(‘<li>’);
document.write(posttitle);}
if (standardstyling) document.write(‘</li>’);}</script>
<ul><script src=”/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=500″></script> </ul>

Contoh Untuk Semua Label:

PAKE GAMBAR/FOTO THUMBNAIL?

Ini kodenya:

<style>
img.recent_thumb {padding:1px;width:72px;height:72px;border:0; float:left;margin:0 10px 5px 1px;}.recent_posts_with_thumbs {float: right;width: 100%;min-height: 72px;margin: 5px 10px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {min-height: 80px;background:none;padding:5px 0;background:none;}.recent_posts_with_thumbs a {text-decoration:none;font-weight:700;font-size: 12px;}.recent_posts_with_thumbs strong {font-size:10px;}i {font-style: normal;font-weight: 400;font-size: 11px;}
</style>
<script>
function showrecentpostswiththumbs(json) {document.write(‘<ul class=”recent_posts_with_thumbs”>’); for (var i = 0; i < numposts; i++) {var entry = json.feed.entry[i];var posttitle = entry.title.$t;var posturl;if (i == json.feed.entry.length) break;for (var k = 0; k < entry.link.length;k++){
if(entry.link[k].rel==’replies’&&entry.link[k].type==’text/html’){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if (entry.link[k].rel == ‘alternate’) {posturl = entry.link[k].href;break;}}var thumburl;try {thumburl=entry.media$thumbnail.url;}catch (error)
{
s=entry.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!=””)){
thumburl=d;} else thumburl=’http://lh4.ggpht.com/_IjrRiI_bVb0/TOCYn1fMjII/AAAAAAAAF24/5Fvv-HJqh74/loading-2.gif’;
}
var postdate = entry.published.$t;var cdyear = postdate.substring(0,4);var cdmonth = postdate.substring(5,7);var cdday = postdate.substring(8,10);var monthnames = new Array();monthnames[1] = “Jan”;monthnames[2] = “Feb”;monthnames[3] = “Mar”;monthnames[4] = “Apr”;monthnames[5] = “May”;monthnames[6] = “Jun”;monthnames[7] = “Jul”;monthnames[8] = “Aug”;monthnames[9] = “Sep”;monthnames[10] = “Oct”;monthnames[11] = “Nov”;monthnames[12] = “Dec”;document.write(‘<li class=”clearfix”>’);
if(showpostthumbnails==true)
document.write(‘<img class=”recent_thumb” src=”‘+thumburl+'”/>’);
document.write(‘<b><a href=”‘+posturl+'” target =”_top”>’+posttitle+'</a></b><br>’);
if (“content” in entry) {
var postcontent = entry.content.$t;}
else
if (“summary” in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = “”;
var re = /<S[^>]*>/g;
postcontent = postcontent.replace(re, “”);
if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write(‘<i>’);
document.write(postcontent);
document.write(‘</i>’);}
else {
document.write(‘<i>’);
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(” “);
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + ‘…’);
document.write(‘</i>’);}
}
var towrite=”;var flag=0;
document.write(‘<br><strong>’);
if(showpostdate==true) {towrite=towrite+monthnames[parseInt(cdmonth,10)]+’-‘+cdday+’ – ‘+cdyear;flag=1;}
if(showcommentnum==true)
{
if (flag==1) {towrite=towrite+’ | ‘;}
if(commenttext==’1 Comments’) commenttext=’1 Comment’;
if(commenttext==’0 Comments’) commenttext=’No Comments’;
commenttext = ‘<a href=”‘+commenturl+'” target =”_top”>’+commenttext+'</a>’;
towrite=towrite+commenttext;
flag=1;
;
}
if(displaymore==true)
{
if (flag==1) towrite=towrite+’ | ‘;
towrite=towrite+'<a href=”‘+posturl+'” class=”url” target =”_top”>Read more»»</a>’;
flag=1;
;
}
document.write(towrite);
document.write(‘</strong></li>’);
if(displayseparator==false)
if (i!=(numposts-1))
document.write(‘<hr color=”#d9f1fa” size=0.5>’);
}document.write(‘</ul>’);
}
</script>
<script>
var numposts = 5;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 90;
</script><script src=”/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs”>
</script><div class=”clear”/></div>

Label Dengan Thumbnail:

Cara Menampilkan Posting Terbaru Label Tertentu di Sidebar Blog

2 thoughts on “Cara Menampilkan Posting Terbaru Label Tertentu di Sidebar Blog”

Tinggalkan Balasan Batalkan balasan