Cara Membuat Widget Postingan Terbaru di Blogger

Salah satu widget populer di blogger adalah Widget recent post atau postingan terbaru. Dengan widget ini pengunjung bisa mengetahui konten apa yang telah di publikasikan di blog sekarang. Bila postingannya menarik tentu saja bisa meningkatkan visitor blog.

Bentuk dan tampilan widget recent post yang saya bagikan kali ini terlihat sederhana dan bersih. Sangat cocok bagi yang menyukai hal simple. Tentunya widget ini fast loading karena tidak ada dekorasi-dekorasi yang berat.

Memasang Postingan terbaru di Blog

Tampilan ini seperti widget popular post jadi terdapat judul, gambar thumbnail, dan snippet deskripsinya. Dan itu semua bisa diatur karena selera orang berbeda-beda.

Caranya pertama silahkan buka menu Tata letak di dashboard blogger. Lalu klik Tambahkan Gadget dan pilih HTML/Javascript. Kemudian pastekan kode berikut. Setelah itu Simpan.

1. Hanya Judul

Gunakan kode ini bila Hanya ingin menampilkan judul saja, jadi gambar thumbnail dan deskripsi tidak muncul.

<link href="http://mybloggerlab.com/Scripts/recent.css" type="text/css" rel="stylesheet" />
<script src="http://mybloggerlab.com/Scripts/json.js"></script>
  <script type='text/javascript'>
var numposts = 3;
var showpostthumbnails =  false;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;</script>
  <script type="text/javascript" src="http://www.ALAMAT-BLOG.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs"></script>

2. Menampilkan Judul dan Deskripsi

Kali ini deskripsi snippet ikut tampil. Namun Gambar thumbnail tidak ada

<link href="http://mybloggerlab.com/Scripts/recent.css" type="text/css" rel="stylesheet" />
<script src="http://mybloggerlab.com/Scripts/json.js"></script>
  <script type='text/javascript'>
var numposts = 3;
var showpostthumbnails =  false;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;</script>
  <script type="text/javascript" src="http://www.ALAMAT-BLOG.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs"></script> 

3. Menampilkan Judul, Deskripsi dan Gambar Thumbnail

Terkahir , semua bagian akan muncul dengan sempurna.

<link href="http://mybloggerlab.com/Scripts/recent.css" type="text/css" rel="stylesheet" />
<script src="http://mybloggerlab.com/Scripts/json.js"></script>
  <script type='text/javascript'>
var numposts = 3;
var showpostthumbnails =  true;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;</script>
  <script type="text/javascript" src="http://www.ALAMAT-BLOG.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs"></script>

 

Ubah ALAMAT-BLOG dengan url blog atau situs anda. Untuk mengatur jumlah postingan yang tampil caranya ubah angka 3 pada kode var numposts = 3; dengan jumlah postingan yang anda inginkan. Dan untuk mengaur jumlah karakter deskripsi yang tampil caranya mengubah angka 100 pada kode var numchars = 100; sesuai dengan keinginan anda. Kira kira beginilah tampilannya.

Begituah caranya memasang widget recent post. Sekian postingan kali ini. Semoga bermanfaat dan terima kasih.

Source : http://www.mybloggerlab.com/