2 Cara Menampilkan Postingan Terbaru Di Sidebar Blog (Blogger) Keren Ringan

Pada artikel kali ini saya memberikan cara menampilkan postingan terbaru di blog yang unik dan sangat ringan hanya menggunakan widget. Fungsi memasang postingan terbaru ini adalah supaya postingan yang baru kita buat akan muncul di setiap halaman yang dibuka oleh pengunjung. Hal ini akan menambahkan view blog anda yakni ketika pengunjung melihat postingan terbaru pada widget blog anda, maka kemungkinan besar postingan terbaru anda akan banyak yang dilihat pembaca.

Jadi, setelah membaca penjelasan diatas saya asumsikan anda sudah paham apa itu fungsi dan guna menampilkan postingan terbaru di sidebar blog. Adapun pada tutorial kali ini yang akan saya berikan bagaimana tutorialnya cara membuat postingan terbaru di blog. Sebelumnya saya akan memberikan contoh tampilannya pada gambar dibawah ini.

Cara Jitu Menampilkan Postingan Terbaru Di Sidebar Blog (Blogger) Keren, Simpel
Terdiri dari postingan paling baru menyusun ke bawah disertai tangggal postingan (bulan, tanggal dan tahun) dibawah judul artikel. Untuk tutorialnya silahkan Anda ikuti langkah-langkahnya.

#1 Cara Menampilkan Postingan Terbaru Di Blogger dengan Script Ringan

Langkah #1 - Buka Dashbor blogger anda masuk ke Tata Letak > Tambahkan Gadget (dimanapun yang anda inginkan).

Langkah #2 - Silahkan pilih Gadget bernama Html/JavaScript maka muncul jendela baru. Berikan nama judul (pada kolom pertama) dan pastekan script dibawah ini dibawah kolom ke 2 (setelah kolom judul) 
<div class="recentpoststyle" style="padding:0.5rem;">
  <script type="text/javascript">
  function showlatestposts(e){for(var t=0;t<posts_no;t++){var r,s=e.feed.entry[t],n=s.title.$t;if(t==e.feed.entry.length)break;for(var a=0;a<s.link.length;a++)if("alternate"==s.link[a].rel){r=s.link[a].href;break}n=n.link(r);var i="... baca selengkapnya";i=i.link(r);var l=s.published.$t,o=l.substring(0,4),u=l.substring(5,7),c=l.substring(8,10),m=new Array;if(m[1]="Jan",m[2]="Feb",m[3]="Mar",m[4]="Apr",m[5]="May",m[6]="Jun",m[7]="Jul",m[8]="Aug",m[9]="Sep",m[10]="Oct",m[11]="Nov",m[12]="Dec","no content"in s)var d=s.content.$t;else if("summary"in s)var d=s.summary.$t;else var d="";var v=/<\S[^>]*>/g;if(d=d.replace(v,""),document.write('<li class="recent-post-title">'),document.write(n),document.write('</li><div class="recent-post-summ">'),1==post_summary)if(d.length<summary_chars)document.write(d);else{d=d.substring(0,summary_chars);var f=d.lastIndexOf(" ");d=d.substring(0,f),document.write(d+" "+i)}document.write("</div>"),1==posts_date&&document.write('<div class="post-date">'+m[parseInt(u,10)]+" "+c+" "+o+"</div>")}}
  </script>
  <script type="text/javascript">
  var posts_no = 8;var posts_date = true;var post_summary = true;var summary_chars = 80;</script>
  <script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts">
  </script><a style="font-size: 9px; color: #CECECE;margin-top:10px;" href="http://www.hardifal.com/" rel="nofollow"><abbr title="Hardifal";>Recent Posts Widget By</abbr></a>
  <noscript>Your browser does not support JavaScript!</noscript>
  <style type="text/css">
  .recentpoststyle {counter-reset: countposts;list-style-type: none;}
  .recentpoststyle a {text-decoration: none;color: #49A8D1;}
  .recentpoststyle a:hover {color: #3987E8;}
  .recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 1;position:relative;font-size: 15px;font-weight: bold;color:#fff;background:#002F63; margin:13px 5px 0px -6px;line-height:30px;width:30px;height:30px;text-align:center;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}li.recent-post-title{margin-bottom: 5px;padding: 0;}
  .recent-post-title a {color: #000;text-decoration: none;font: bold 15px "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}
  .post-date {font-size: 11px;color: #999;margin:5px 0px 15px 32px;}
  .recent-post-summ {border-left:1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 10px; font: 15px Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif;}
  </style></div>
Keterangan : Tanda mark script diatas

  • Yang saya beri tanda mark merah 8 adalah jumlah postingan yang akan ditampilkan.
  • Bertanda mark kuning #002F63 merupakan kode warna lingkaran
  • Dan yang bertanda mark biru "Avant Garde" ialah jenis huruf yang digunakan.
Silahkan ganti dan edit tampilan postingan terbaru ini sesuai dengan yang anda sukai / inginkan.

Langkah #3 - Jika sudah, klik Simpan


#2 Cara Membuat Postingan Terbaru Di Blog Widget Blogger

Tutorial yang kedua ini adalah untuk anda yang tidak mau berurusan dengan script, yakni dengan menggunakan fitur Gadget blogger. Tapi ingat, tampilannya tentu akan jauh berbeda dengan cara yang pertama, cara ke-2 ini akan tampil biasa akan tetapi lebih ringan.

Langkah #1 - Buka Tata Letak > Tambahkan Gadget

Langkah #2 - Scroll ke bawah dan pilih Gadget Feed lalu masukan URL Feed blog anda sebagai berikut :
Https://namabloganda.com/feeds/posts/default
Silahkah ubah namabloganda.com dengan Url blog anda

Langkah #4 - Klik Lanjutkan dan silahkan anda atur tampilan postingan terbaru seperti Judul dan Tampilan yang terdiri dari (jumlah item, tanggal, pengarang dan buka link di jendela baru)
Keterangan :

  • Jumlah Item = Jumlah postingan yang akan ditampilkan
  • Sumber/Pengarang Item = menampilkan pengarang
  • Buka Link jendela baru =  Buka link di jendela atau tab baru ketika di klik.

2 Cara Menampilkan Postingan Terbaru Di Sidebar Blog (Blogger) Keren Ringan
gambar langkah 4

Itulah cara menampilkan postingan terbaru di blog keren tanpa ribet yang bisa anda coba gunakan pada blog anda.

No comments for "2 Cara Menampilkan Postingan Terbaru Di Sidebar Blog (Blogger) Keren Ringan"