Membuat Recent Post Keren dengan Thumbnail di Blog

#Blogger 

Hikz.xyz - Cara Membuat Recent Post Responsive dengan Thumbnail di Blog | Mempercantik blog dengan memasang recent post atau artikel terbaru di sidebar blog dengan thumbnail.

Recent post dengan thumbnail ini selain untuk mempercantik blog juga bermanfaat untuk memberitahu pengunjung jika ada postingan baru di blog yang mereka kunjungi.

Selain bisa buat blog jadi keren dan bagus, recent post juga "katanya memiliki nilai seo" (saya gak paham seo. Hehe), sehingga blog kita akan lebih bersahabat dengan mesin pencari seperti google dan bing.

Terus bagaimana cara buat recen post keren di sidebar blog?
Nah untuk memasang atau cara membuat recent post keren dengan tumbnail hanya perlu 4 langkah saja.

  1. Copy kode recent post dibawah
  2. Masuk ke blogger
  3. Paste kode yang sudah di copy
  4. Recent post keren sudah jadi

Berikut tutorial lengkap cara membuat recent post keren di sidebar blog. Nanti tampilan recent post yang sudah jadi akan seperti gambar dibawah ini.

Membuat Recent Post Blogger

Membuat Recent Post Keren dengan Thumbnail di Blogger

1. Silakan copy kode javascript dibawah ini

<style type='text/css'>
img.recent_thumb {width: 90px;height: 70px;float: left;
margin-right: 10px;}.recent_posts_thumbs_hikz {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_thumbs_hikz li {padding-bottom:5px;padding-top:5px;min-height:65px;} .recent_posts_thumbs_hikz a {text-decoration:none;} .recent_posts_thumbs_hikz strong {font-size:10px;}
</style>
<script style='text/javascript' src='https://static.hikz.xyz/_js/recent-post.js'></script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 50;
</script>
<script src='https://blogger.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

2. Masuk ke blogger lalu klik Menu Layout. Jika sudah klik lagi Add a Gadget yang ada di sebelah kanan. Tambahkan HTML/JavaScript, terus bagian Title isi dengan contoh: Recent Post atau bisa juga Artikel Terbaru atau terserah agan-agan. Untuk bagian content isi dengan kode recent post yang sudah agan copy tadi (tahap 1).

3. Klik tombol save atau simpan untuk memasang recent post keren di blog kamu.

4. Selamat gan, recent post with thumbnail keren sudah jadi.

Keterangan kode javascript:

Jangan lupa ganti alamat blog blogger.blogspot.com yang ada di dalam kode recent post dengan alamat blog agan.
numposts = 5, fungsinya untuk menampilkan jumlah artikel terbaru.
showpostthumbnails = true untuk menampilkan thumbnail, untuk menonaktifkan thumbnail ubah "true jadi false".
displaymore = readmore
displayseparator = tampilan atau tidak separator
showcommentnum = menampilakan jumlah komentar
showpostdate = untuk menampilan tanggal dan jam postingan
showpostsummary = true, untuk menpilkan description singkat.
numchars = 50 adalah jumlah kata yang akan di tampilkan di recent post

Sekain dari saya gan tutorial mempercantik blogspot dengan cara membuat recent post dengan thumbnail blogger, semoga bermanfaat dan terima kasih sudah berkunjung. Akhir kata, Wassalam...