Romeltea Media
  • HOME
  • Categories
    • Komunikasi
    • Media
    • Jurnalistik
    • Humas
  • Writing
  • Speaking
  • Blogging
    • Templates
    • Tips SEO
    • AdSense
    • Posting
  • About
  • Kontak
  • Sitemap
  • Disclaimer
  • Iklan
  • Links
    • Romeltea Online
    • Komunikasi Praktis
    • Risalah Islam
    • BolaGP Sport
    • Bandung Aktual
Romeltea Media Blogging Desain Blog Cara Menampilkan Posting Terbaru di Sidebar Blogger

Cara Menampilkan Posting Terbaru di Sidebar Blogger

Romeltea Romeltea Media Romeltea
October 15, 2016
Romeltea Follow @romel_tea
Romeltea
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="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>
<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
Anda bisa buka The Blogger Guide dan Help Logger untuk cara dan jenis Recent Posts lainnya.

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

Thanks for reading Cara Menampilkan Posting Terbaru di Sidebar Blogger | Tags: Blogging Desain Blog

Next Article
« Prev Post
Previous Article
Next Post »

Related Posts

Your Comments

15 komentar on Cara Menampilkan Posting Terbaru di Sidebar Blogger

  1. Ka WantoOctober 22, 2016

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

    ReplyDelete
    Replies
    1. Romel TeaOctober 23, 2016

      Pake kode Cara #2, gambarnya di-full width-kan jadi 100%

      Delete
      Replies
        Reply
    2. Reply
  2. Steve RuhakMarch 25, 2017

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

    ReplyDelete
    Replies
    1. Romel TeaMarch 28, 2017

      Ubah kode var showpostdate = true menjadi var showpostdate = false

      Delete
      Replies
        Reply
    2. Reply
  3. Mas RozakAugust 15, 2017

    siap terimaksih banyak sudah berhasil

    ReplyDelete
    Replies
    1. AnonymousJanuary 07, 2018

      Wah di blogku ga bisa gan 😩

      Delete
      Replies
        Reply
    2. Reply
  4. shelanurainiFebruary 17, 2018

    Terimaksih...bermanfaat :)

    ReplyDelete
    Replies
      Reply
  5. shelanurainiFebruary 17, 2018

    Mksih

    ReplyDelete
    Replies
      Reply
  6. Kirito DaikichiMarch 26, 2018

    labelnya hanya bisa 1? bisa menampilkan 2 label sekaligus gk

    ReplyDelete
    Replies
    1. Romel TeaDecember 20, 2018

      Bikin aja dua widget recent post per labelnya

      Delete
      Replies
        Reply
    2. Reply
  7. Handy rusandi berbagi73December 19, 2018

    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. Romel TeaDecember 20, 2018

      Ubah angka 6 di kode kedua menjadi 16
      Ubah angka 5 di kode ketiga menjadi 15

      Delete
      Replies
        Reply
    2. Reply
  8. Handy rusandi berbagi73December 20, 2018

    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. Romel TeaDecember 21, 2018

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

      Delete
      Replies
        Reply
    2. Reply
  9. Iim RohimahDecember 06, 2019

    wah mantap sekakali... trimkasih tutorialnya kak

    ReplyDelete
    Replies
      Reply
Add comment
Load more...

You comment, I'll visit back your blog. If you have one. Komentar SPAM dan LINK AKTIF tidak akan muncul.

Subscribe to: Post Comments (Atom)

Recent Posts

Popular Posts

  • Cara Menulis Berita - Panduan untuk Pemula
  • Dasar-Dasar Jurnalistik untuk Pemula
  • Daftar Istilah & Singkatan Chat WhatsApp dan Media Sosial - Kamus Bahasa Slang, Gaul
  • Media Online: Pengertian dan Karakteristik
  • Cara Membuat Website di Hosting Premium Hosting24
  • Cara Membuat Logo, Kartu Nama, Kop Surat secara Online dengan Logaster
  • Daftar Kata Baku-Tidak Baku Bahasa Indonesia
  • Media Sosial: Pengertian, Karakteristik, dan Jenis
  • Cara Menulis Berita yang Baik: 5W1H plus Piramida Terbalik
  • Cara Download Buku Google (Google Books)

Categories

Bahasa Bisnis Online Blogging Blogpreneur Google Adsense Humas Internet Jurnalistik Komunikasi Media Pers Presentasi Public Speaking Radio Teknik MC Template Blog Tips SEO

Join us on Facebook

Romeltea Media

Info Bola & MotoGP

Recommended Yeuh!

Hosting Unlimited Indonesia

About

Romeltea Media adalah blog pribadi ASM Romli untuk share tips & trik komunikasi praktis, jurnalistik, menulis, public speaking, radio broadcasting, blogging, dll.

Web Partners

  • Romeltea Online
  • Komunikasi Praktis
  • BolaGP Sport
  • Bandung Aktual
  • Risalah Islam

Newsletter

Berlangganan artikel terbaru dari blog ini langsung via email.

Copyright © Romeltea Media. All rights reserved