October 12, 2022

Cara Menampilkan Posting Terbaru di Sidebar Blogger

By Romeltea | Published: October 12, 2022

Cara Menampilkan Posting Terbaru di Sidebar Blogger
Cara Menampilkan Posting Terbaru di Sidebar Blogger

BANYAK cara menampilkan widget recent post atau tulisan terbaru di sidebar blogger.

Banyak pula jenis atau tipe tampilannya, mulai judul doang hingga plus gambar thumbnail.

Widget Recent Posts atau Tulisan Terbaru merupakan bagian internal linking sekaligus navigasi bagi pengunjung untuk membuka tulisan terbaru atau tulisan lain di blog kita.

Saya sendiri memasang dua jenis widget posting terbaru di blog ini. Pertama, di sidebar halaman dalam, berupa judul tulisan doang.

Kedua, di halaman depan berupa judul dan gambar di sedebar/kolom tengah dengan label tertentu (per kategori).

Menampilkan Posting Terbaru di Sidebar Blog

Cara #1 Daftar Judul - Menggunakan Feed Widget

Jika ingin menampilkan berupa daftar judul doang, kita bisa menggunakan widget Feed bawaan blogger. Cara pasangnya:
  1. Layout > Add a Gadget > pilih Feed
  2. Masukkan URL atau alamat blog Anda > klik Continue
  3. Ubah judulnya dengan Posting Terbaru atau Recent Posts
  4. Save!
Namun, menampilkan daftar tulisan terbaru dengan menggunakan widget Feed ini suka bermasalah dengan judul widget, suka ngilang! Maka, gunakanCara Menampilkan Posting Terbaru di Sidebar Blogger yang kedua.

Cara #2 Daftar Judul - Menggunakan Kode JavaScript

1. Layout > Add a Gadget > pilih HTML/JavaScript
2. Ubah judulnya dengan Posting Terbaru atau Recent Posts
3.  Copas kode berikut ini:

<script>
//<![CDATA[
function showlatestposts(json){document.write('<ul id="recent-posts">');for(var i=0;i<6;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var postsurl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){postsurl=entry.link[k].href;break;}}
document.write('<li class="recent-posts">');document.write('<a href="'+ postsurl+'" target ="_top" title="'+ posttitle+'">'+ posttitle+'</a>');document.write('</li>');}
document.write('</ul>');};
document.write("<scr" + "ipt type=\"text/javascript\" src=\"/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts\"></scr" + "ipt>");
//]]>
</script>

Cara #3 Daftar Judul plus Gambar Thumbnail

Penampakannya seperti ini:

Posting Terbaru Daftar Judul plus Gambar Thumbnail

Cara pasang:

1. Layout > Add a Gadget > pilih HTML/JavaScript
2. Isi Judul dengan Posting Terbaru
3. Copas kode berikut ini ke kolom Content:

<style>
img.rct-thumb{float:left;margin-right:10px;height:72px;width: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 #ddd}
.recent-by-tag li{font-size:13px;list-style:none;padding-left:0;margin:0;padding:0;overflow:hidden}
.recent-by-tag a{font-family:'Oswald',sans-serif;font-size:16px;font-weight:normal;margin:0;}
.recent-by-tag strong{padding-left:0}
span.showdates{font-size:12px;margin:10px 0 0}
</style>
<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji6XmBI-ebHJZTKyD5d8I3cmeYulMmZdFZOjfkAHqVj8Fcby1n3ci3UlCz6CSVTV57Kf_o-aesDOi5QuwG_Uqb7-LEYGvDLWlgkUSgAgE3LXLaJLD2kbVkIeXUIRPrKD2L3JV9RXdnpTMX/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>
<script>
document.write("<script src=\"http://www.romelteamedia.com/feeds/posts/default?orderby=updated&alt=json-in-script&callback=rcentbytag\"><\/script>");
</script>

Jika ingin menampilkan posting terbaru dari label atau kategori tertentu, maka kode terakhir yang digunakan yang ini:

<script>
document.write("<script src=\"http://www.romelteamedia.com/feeds/posts/default/-/Label?orderby=updated&alt=json-in-script&callback=rcentbytag\"><\/script>");
</script>


Catatan: 
Ubah alamat blog yang warna merah dengan alamat blog Anda dan Label yang akan ditampilkan.

4. Save!

Cara Lain Menampilkan Artikel Terbaru

Berikut ini kode yang saya modifikasi dari Helploger. Kode ini menampilkan posting terbaru di sidebar blog berupa judul artikel saja. Ini desainnya:

Artikel Terbaru

Cara pasangnya begini:

1. Klik Layout
2. Klik Add a Gadget 
3. Pilih HTML/JavaScript
4. Isi kolom judul dengan Terbaru 
5. Copas kode berikut ini di kolom Content.

<div id="hlrpsb">
<script type="text/javascript">
function showrecentposts(t){for(var e=0;e<numposts;e++){var n,r=t.feed.entry[e],i=r.title.$t;if(e==t.feed.entry.length)break;for(var d=0;d<r.link.length;d++)if("alternate"==r.link[d].rel){n=r.link[d].href;break}i=i.link(n);var s=r.published.$t,a=s.substring(0,4),o=s.substring(5,7),l=s.substring(8,10),u=new Array;u[1]="Jan",u[2]="Feb",u[3]="Mar",u[4]="Apr",u[5]="May",u[6]="Jun",u[7]="Jul",u[8]="Aug",u[9]="Sep",u[10]="Oct",u[11]="Nov",u[12]="Dec",standardstyling||document.write(""),document.write('<div class="rctitles2">'),standardstyling&&document.write(""),document.write(i),standardstyling&&document.write(""),1==showpostdate&&document.write(" - "+l+" "+u[parseInt(o,10)]+" "+a),standardstyling||document.write("</div>"),document.write("</div>"),standardstyling&&document.write("")}standardstyling||document.write('<div class="bbwidgetfooter">'),standardstyling&&document.write(""),document.write(""),standardstyling||document.write("/div")}
</script>
<script type="text/javascript">var numposts = 5;var showpostdate = false;var standardstyling = true;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script><noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#hlrpsb a {color: #000000;font-size:16px;}.rctitles2 {padding-bottom:10px;margin-bottom:10px;border-bottom: 1px dotted #cccccc;text-align:left;font-weight:700}
</style></div>

6. Simpan!

Demikian Cara Menampilkan Posting Terbaru di Sidebar Blogger. Wasalam. (www.romelteamdia.com).*

Previous
« Prev Post
Author Image

Romeltea
Romeltea adalah onair dan online name Asep Syamsul M. Romli aka Kang Romel. Praktisi Media, Blogger, Trainer Komunikasi from Bandung, Indonesia. Follow me: facebook twitter instagram linkedin youtube

Recommended Posts

Related Posts

Show comments
Hide comments

21 comments on Cara Menampilkan Posting Terbaru di Sidebar Blogger

  1. permisi mas saya liat di halaman beranda ada sidebar ditengah menampilkan gambar dan judul, bagaimana cara membuatnya.. terima kasih

    ReplyDelete
    Replies
    1. Pake kode Cara #2, gambarnya di-full width-kan jadi 100%

      Delete
  2. Gan cara #2, untuk menghilangkan tanggalnya bagaimna caranya? trima kasih sebelumnya

    ReplyDelete
    Replies
    1. Ubah kode var showpostdate = true menjadi var showpostdate = false

      Delete
  3. siap terimaksih banyak sudah berhasil

    ReplyDelete
    Replies
    1. Wah di blogku ga bisa gan 😩

      Delete
  4. labelnya hanya bisa 1? bisa menampilkan 2 label sekaligus gk

    ReplyDelete
    Replies
    1. Bikin aja dua widget recent post per labelnya

      Delete
  5. kalau saya ingin pasang salah satu artikel di sidebar bagaimana gan ?
    maksudnya jika saya punya 30 artikel dan artikel ke 15 itu ingin saya pasang di bawah popular post.
    apa yang harus saya rubah dari tutorial anda.
    terima kasih.

    ReplyDelete
    Replies
    1. Ubah angka 6 di kode kedua menjadi 16
      Ubah angka 5 di kode ketiga menjadi 15

      Delete
  6. sebelumnya saya ucapkan terima kasih. Tapi maksud saya adalah saya ingin menampilkan 1 artikel di sidebar dengan tampilan seperti popular post yang disertai gambar

    ReplyDelete
    Replies
    1. Ubah angkanya jadi angka 1, atau gunakan saja widget Featured Post

      Delete
  7. wah mantap sekakali... trimkasih tutorialnya kak

    ReplyDelete
  8. Bagaimana cara masukin gambarnya pada recent post.. Tks sebelumnya.

    ReplyDelete
    Replies
    1. Gunakan kode di Cara #3 dan pastikan ada gambar di postingan

      Delete

Contact Form

Name

Email *

Message *