Cara Memasang Posting Terbaru Plus Gambar di Sidebar Blog  Cara Memasang Posting Terbaru Plus Gambar di Sidebar Blog & Recent Post Per Label
Cara Memasang Posting Terbaru Plus Gambar di Sidebar Blog & Recent Post Per Label

Berikut ini cara memasang widget posting terbaru plus gambar thumbnail di sidebar atau footer blog.

Kode Recent Posts berikut ini juga dapat digunaka untuk menampilkan Recent Per Label atau Tulisan Terbaru menurut Kategori/Label.

Selain itu, dengan isyarat di bawah ini, kita dapat bisa menampilkan daftar posting terbaru dari blog lain.

Widget Recent Post versi simple --hanya menampilkan judul-- dapat dipasang dengan memakai widget Feed bawaan blogger, atau mengguanakan isyarat yang sudah CB share di cara menampilkan posting terbaru simple.

Cara Memasang Posting Terbaru Plus Gambar

Berikut ini Cara Memasang Posting Terbaru Plus Gambar Thumbnail di Sidebar Blogger.

1. Template/Tema > Edit HTML

Cara Memasang Posting Terbaru Plus Gambar di Sidebar Blog  Cara Memasang Posting Terbaru Plus Gambar di Sidebar Blog & Recent Post Per Label

2. Simpan (Copas) isyarat CSS Posting Terbaru plus Gambar Thumbbail berikut ini di atas isyarat ]]></b:skin>

/* CSS Recent Post  Thumbnail */
img.rct-thumb{width:72px;height:72px}
.rct-thumb {float: left;margin-right: 12px;width:72px;height:72px}
.recent-by-tag{width:100%;margin:0;padding:0}
ul.recent-by-tag li{padding:10px 0;margin-bottom:0;border-bottom:1px solid #f1f1f1}
ul.recent-by-tag li:first-child{padding:0;}
.recent-by-tag li{font-size:15px;list-style:none;padding-left:0;margin:0;padding:0;overflow:hidden}
.recent-by-tag a{font-size:15px;font-weight:normal;margin:0;}
.recent-by-tag strong{padding-left:0}
span.showdates{font-size:11px;margin:10px 0 0}
.recent-by-tag li:last-child {border-bottom:none;padding-bottom:0px;margin-bottom:0px;}

3. Simpan isyarat JavasScript Recent Post Thumbail Image berikut ini di atas isyarat </head>

<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var showpostdate = true;
</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+'" sasaran ="_blank" title="Cara Memasang Posting Terbaru Plus Gambar di Sidebar Blog & Recent Post Per Label" rel="nofollow"><img class="rct-thumb" alt="Cara Memasang Posting Terbaru Plus Gambar di Sidebar Blog Cara Memasang Posting Terbaru Plus Gambar di Sidebar Blog & Recent Post Per Label" src="'+l+'"/></a>');document.write('<strong><a href="'+i+'" sasaran ="_top" title="Cara Memasang Posting Terbaru Plus Gambar di Sidebar Blog & Recent Post Per Label" 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> 

4. Save! Simpan Template.

Langkah berikutnya pemasangan isyarat di widget.

5. Klik Layout/Tata Letak > Add a Gadget > pilih HTML/JavaScript

Cara Memasang Posting Terbaru Plus Gambar di Sidebar Blog  Cara Memasang Posting Terbaru Plus Gambar di Sidebar Blog & Recent Post Per Label

6. Isi Judul denga "Recent Posts" atau "Posting Terbaru"
7. Copas isyarat berikut ini di kolom content.

<script type="text/javascript" src="/feeds/posts/default?orderby=updated&amp;alt=json-in-script&amp;callback=rcentbytag"></script>

8. Save! Beres.

Recent Post Per Label

Untuk menampilka Recent Post Per Label, ulangi langkah no. 5 dan dan copas isyarat berikut ini:

<script type="text/javascript" src="/feeds/posts/default/-/Label?orderby=updated&amp;alt=json-in-script&amp;callback=rcentbytag"></script>

Ganti Label dengan nama label posting blog Anda.

Recent Post dari Blog Lain

Untuk memasang Recent Post dari blog lain, ulangi langkah no. 5 dan pasang isyarat berikut ini:

<script type="text/javascript" src="http://alamatblog.blogspot.com/feeds/posts/default?orderby=updated&amp;alt=json-in-script&amp;callback=rcentbytag"></script>

Ganti http://alamatblog.blogspot.com dengan alamat blog yang posting terbarunya akan ditampilkan di blog Anda.

Demikian Cara Memasang Posting Terbaru Plus Gambar, Recent Post Per Label, dan Posting Terbaru dari Blog lai  di Sidebar Blog. Good Luck & Happy Blogging! (www.idtutorial.com).*

Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours