12 Widget Recent Posts Dengan Thumbnail Dan Total Comments

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

 Recent Post Versi 2.1
Sebelumnya anaa sudah pernah posting cara memasang recent post atau widget postingan terbaru, untuk kali ini ada sedikit perbedaan, widget recent post ini disertai dengan thumbails dan jumlah komentar, anaa pun menggunakan widget ini untuk blog ini.
Sudah tahu cara membuat widget recent post with thumbails ini? Kalau sudah, ya ini untuk yang belum tau aja.
Oke langsung cara membuat widgt recent post ini:
1. Dalam keadaan loggin, klik Layout (Tata Letak)
2. Klik Page Elemens (Elemen Halaman)=> Add a gadget (Tambah Gadget)=> HTML/Javascript. Copi dan paste pada content code berikut:
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://lh5.ggpht.com/_RVpTV2JOOxA/SyuB4gW7tfI/AAAAAAAABQo/mIa_h06o5gw/No-Image-stat.gif";
imgr[1] = "http://lh5.ggpht.com/_RVpTV2JOOxA/SyuB4gW7tfI/AAAAAAAABQo/mIa_h06o5gw/No-Image-stat.gif";
imgr[2] = "http://lh5.ggpht.com/_RVpTV2JOOxA/SyuB4gW7tfI/AAAAAAAABQo/mIa_h06o5gw/No-Image-stat.gif";
imgr[3] = "http://lh5.ggpht.com/_RVpTV2JOOxA/SyuB4gW7tfI/AAAAAAAABQo/mIa_h06o5gw/No-Image-stat.gif";
imgr[4] = "http://lh5.ggpht.com/_RVpTV2JOOxA/SyuB4gW7tfI/AAAAAAAABQo/mIa_h06o5gw/No-Image-stat.gif";
showRandomImg = true;
boxwidth = 298;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://www.tipstrikblogging.com/";
</script>
<script src="http://tipstrikblogging.googlecode.com/files/RecentPostThumbnail.js" type="text/javascript"></script>
Keterangan:
  • boxwidth-Lebar widget (silahkan sesuaikan dengan sidebar sobat)
  • bgTD-Warna background (Sesuaikan sesuai template sobat)
  • borderColor-Warna Border (Sesuaikan dengan warna favorit sobat)
  • thumbwidth& thumbheight-Lebar dan tinggi gambar
    fntsize-ukuran judul postingan
  • acolor-Warna judul post
  • abold-untuk tebalkan huruf
  • numpost-jumlah post yang ingin ditampilkan
  • home-page: alamat blog anda
Nah silahkan mengedit sesuai selera anda, untuk melihat code warna bisa merujuk kesini
Jangan lupa save/simpan.


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

12 komentar :

  1. klo pasang label kya blog kamu tu gimana???
    makasih ya sebelumnya

    BalasHapus
  2. @ Nova Imut: Tabel yang mana ya? Tab Slide Atau Tab View? Ntr ya Anaa posting dulu.

    BalasHapus
  3. lABEL
    yang di bawahnya slide show itu loh..
    yang tulisannya banya itu.
    makasih ya..

    BalasHapus
  4. Oo anaa posting lebih dulu menu tab view, oke deh skrg yg dipinta! Sama2, anaa snang jg kok brbagi (",)

    BalasHapus
  5. haduh kok jadi aneh ya tampiilannya... postingan jadi ke pinggir ngikutin gadget nya....

    BalasHapus
  6. anaa dah liat blogx, tu karena sidebarnya terlalu kecil.

    BalasHapus
  7. mantep tuh, bisa juga pake feed ternyata, cuma tampilannya bagusan klo pake script biasa.

    btw da award lagi tuh, cekidot ya

    BalasHapus
  8. yg ini juga saiia gag nongol... salah dimana gerangankah?

    BalasHapus
    Balasan
    1. Maaf kemarin java scriptnya error sekarang sudah update, silahkan dicoba lagi!

      Hapus
  9. Recent post nie kan buat nampilin post terbarukan???

    Kok setiap saia buat posting trbaru nggk muncul d Recent post itu y???

    apa yg salah nie???

    BalasHapus
    Balasan
    1. Benar dah diupdate scriptnya, sekarang widget recent postnya dah tampil, lihat live demo diblog saya ini Keep Simple Thanks

      Hapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!