Cara Membuat Recent Post dengan Thumbnail di Blogspot

Cara Membuat Recent Post dengan Thumbnail di Blogspot – Untuk membuat tampilan blog anda lebih menarik, kali ini blogoonline ingin membagikan cara membuat recent post dengan thumbnail setelah posting beberapa waktu lalu membahas cara membuat recent post tanpa thumbnail. Menggunakan thumbnail dapat membuat tampilan widget anda menarik karena disertakan gambar, sehingga pengunjung akan tertarik jika gambar yang anda pasang bisa memprovokasi pengunjung dalam arti positif, untuk mengklik.

cara membuat recent post dengan thumbnail di blogspot


Cara ini hasilnya akan seperti jika anda menggunakan Popular Post bawaan asli blogger. Cukup menarik bukan? Baik langsung saja berikut ini cara membuat recent post dengan thumbnail di blogspot :

1.  Login ke akun blogger anda
2.  Pilih Layout
3.  Klik Add Widget
4.  Pilih HTML/ Javascript
5.  Masukkan kode dibawah ini

<style type='text/css'>
img.recent_thumb {padding:1px;width:72px;height:72px;border:0;
float:left;margin: 10px 10px 5px 0px;}
.recent_posts_with_thumbs {float: left;width: 100%;margin: 10px 10px 5px 0px;padding: 0;font-size:13px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;}
.recent_posts_with_thumbs strong {font-size:12px;}</style>
<script style='text/javascript' src='http://recent-post-techkgp.googlecode.com/files/recent%20post_www.techkgp.com.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 = 150; </script>
<script src='http://blogoonline.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

Ganti jumlah posting yang akan tampil dan ubah juga alamat url tersebut dengan alamat url milik anda. Kode ini telah dicoba dan berhasil, seperti terlihat pada gambar.

6.  Simpan

Demikian artikel tentang cara membuat recent post dengan thumbnail di blogspot, semoga bermanfaat.

Artikel Terkait dengan Tutorial Blogging

Bekti Nugroho G.S
Blog Oonline Updated at: 16.39

6 komentar:

  1. Keren sob artikelnya sangat bermanfaat, terimakasih. Akan saya coba langsung di blog saya kiosasyik.com

    BalasHapus
    Balasan
    1. Sama-sama gan, senang bisa membantu..

      Hapus
  2. nah ini baru bisa,, tengkyu gan

    BalasHapus
  3. Trimakasih mas, ijin praktek

    BalasHapus
  4. Cara menghilangkan deskripsinya gimana mas?

    BalasHapus
    Balasan
    1. var showpostsummary = true; dibikin "false"

      atau

      var numchars = 150; dibikin nol (0)

      semoga membantu..

      Hapus

Silahkan Berkomentar dengan :

1. Bahasa Indonesia yang baik dan benar
2. Tutur bahasa yang sopan dan santun
3. Tidak mencantumkan alamat url apalagi link aktif
4. Sesuai isi artikel ( bukan sekedarnya )

Maaf, komentar akan saya hapus jika tidak sesuai dengan peraturan diatas.

Mohon maaf juga apabila komentar tidak muncul segera, dikarenakan tidak selalu online dan kesibukan offline lainnya. Terima kasih atas perhatian dan pengertiannya.


About | Contact | Privacy Policy | Arsip
Copyright © 2014- Blog Oonline - Powered by Blogger