Lompat ke konten Lompat ke sidebar Lompat ke footer

Membuat Recent Post Per Label

Layaknya sebuah blog yang ingin terlihat profesional, harus juga menampilkan yang sederhana tetapi bisa memudahkan penelusuran. Menu navigasi yang mudah bisa membuat pembaca blog merasa nyaman. Untuk itu blog juga menampilkan recent post atau link tulisan-tulisan terbaru kita di blog.

Blog yang bagus adalah tulisan atau postingan dikategorikan dengan rapi. Jika di blogspot kita menggunakan fitur label untuk mengaktegorikan jenis tulisan yang memiliki kesamaan. Misalnya saja kalau di blog ini ada, tutorial blog, tips ngeblog, widget dan sebagainya.

Untuk menyajikan lebih banyak menu dan pilihan, kita bisa membuat atau memasang widget recent post yang di tampilkan berdasarkan kategori atau recent post per label. Dengan pilihan menu bisa jadi pembaca akan banyak mengklik postingan-postingan terbaru yang tertata rapi sesuai dengan labelnya.

Cara Membuat Recent Post Per Label
1. Login ke akun blogger.com
2. Pilih Template kemudian Edit HTML
3. Jangan lupa centang Expand Template Widget
4. Masukkan kode css berikut di atas kode ]]></b:skin>

img.label_thumb{float:left; padding:5px; border:1px solid #8f8f8f; background:#D2D0D0; margin-right:10px; height:55px; width:55px}
img.label_thumb:hover{background:#f7f6f6}
.label_with_thumbs{float:left; width:100%; min-height:70px; margin:0px 10px 2px 0px; adding:0}
ul.label_with_thumbs li{padding:8px 0; min-height:65px; margin-bottom:10px}
.label_with_thumbs a{}
.label_with_thumbs strong{}

5. Lalu cari kode </head> dan letakkan kode di bawah ini tepat di atas:

<script src='http://adablogku.googlecode.com/files/lebelgambar.js' type='text/javascript'/>

6. Simpan Template jika sudah selesai.

Langkah-langkah di atas adalah untuk mengkostumisasi template. Jika sudah selesai kita ke langkah berikutnya untuk menambahkan recent post per label, yaitu:

7. Pilih Tata Letak lalu tambahkan Tambah Gadget > HTML/Javascript
8. Kemudian masukan kode berikut ini:

<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script>

<script type="text/javascript" src="/feeds/posts/default/-/NAMALABEL?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

9. Kita dapat menkostumisasi tampilan dengan mengubah kode yang berwarna merah. Dan ganti teks yang berwarna hijau dengan nama lebel yang akan ditampilkan. Simpan jika sudah selesai.

49 komentar untuk "Membuat Recent Post Per Label"

  1. langsung d'coba kak..
    Thankz atas trik'y.. Hehehe
    Mantep dah ^_^)/

    BalasHapus
  2. tank infonya sobat.. Izin nyedot

    BalasHapus
  3. udah pernah pake kode ini dari blognya kang rohman

    BalasHapus
  4. kemarin ane baru saja belajar ngeblok

    BalasHapus
  5. recent post untuk blogspot,klo tips blogspot untuk membagi header jadi 2 gimana?

    BalasHapus
  6. bagaimana mengatur agar recent commentnya datar, soalnya tampilannya semakin ke samping . . ..

    BalasHapus
  7. Terima kasih tipsnya, akan saya coba ..

    BalasHapus
  8. kalo seperti diatas gmana sob.?

    BalasHapus
  9. pengen juga nich coba di blog ane yang versi blogspot

    BalasHapus
  10. ane praktekin dulu gan.. makasih buat trik nya.. :)

    BalasHapus
  11. wah, keren gan, dicoba dulu ah :D

    BalasHapus
  12. mantap gan. test dulu. kalo gak mau tampilkan gambar tinggal ganti false aja kan di showpostthumbnails =false
    betul gan?

    BalasHapus
  13. manteb gan artikelnya..misal posting lebih dari satu terus yang satu ada gambarnya dan yang ke dua cuma judul tanpa gambar gimana gan?

    BalasHapus
  14. Tanya sedikit ya mas?
    Hasil dari tutor diatas itu model recent post yang bergerak dari atas kebawah bukan, mas?
    Kalau seandainya bukan, kira-kira tambah apa lagi ya supaya bisa bergerak?

    Terima kasih sebelumnya...salam kenal :)

    BalasHapus
  15. thanks gan, akan saya cobain deh recent postnya

    BalasHapus
  16. Maturnuwun Infonya Monggo mampir di Blog saya

    BalasHapus
  17. Makasih sharingnya, mas.
    Moga cocok dengan blog saya :)

    BalasHapus
  18. Salam publisher. Hari ini saya sumbang satu klik untuk adsense anda, gantian dong klik adsense saya di www.newsoftpedia.com
    Ayo para netter indonesia saling klik adsense biar publisher Indonesia jadi kaya semua.
    trimsss..

    BalasHapus
  19. sip gan.
    kalo mau buat tampilan terbaru, komentar, dan random itu yang disidebar gimana cara buatnya. KW nya juga ndak tau :D

    BalasHapus
  20. Berguna bngt tutorialnya sob! Thanks ya.. :)

    BalasHapus
  21. Info yang baguz sekali untuk disimak.....
    Bermanfaat sekali untuk saya....

    Mohon kunjungan baliknya yaa....
    Dan saya juga sangat berterima kasih sekali kalau anda berkenan FOLLOW dan Backlink Blog sederhana saya.... :-)

    Title: Zamrud News
    ( www.zamrudnews.com )

    BalasHapus
  22. terima kasih sudah berbagi gan..salam..

    BalasHapus
  23. gak world blog gw aduh gimana ni ?

    BalasHapus
  24. langsung dicona Nice infonya.
    kunjungan balik blog saya juga gan.

    BalasHapus
  25. terima kasih tuutorialnya kang kurnia :-)
    kunjungi juga blog saya
    www.umatmuhammad.com
    www.fadilsoft.com

    BalasHapus
  26. terima kasih, kunjungi juga www.umatmuhammad.com dan kolomfadil.blogspot.com :-)

    BalasHapus
  27. waw, keren sangat gan...
    oh ya, untuk ngasih title link untuk widget ini gmna caranya ya mas bro???

    BalasHapus
  28. Ternyata mudah, ya, trims infonya Gan.

    BalasHapus
  29. Prakteknya ternyata tidak semudah itu, Gan.

    BalasHapus
  30. mas kalo mau posting itu di coba dulu baru posting, agar orang laen yang mngkin newbi kagak malah jadi bingung...
    di penambahan code Gadget > HTML/Javascript sadar ndak ada yang kurang tuh perintahnya?? klo nt mau yang bener silahkan klik di
    http://youtube-most-wanted.blogspot.com/
    sekali lagi klo mau posting di coba dl aja deh..salam

    BalasHapus
  31. makasih sob, sangat bermanfaat...

    BalasHapus
  32. Setelah dicari-cari akhirnya ketemu juga, makasih ya sobat.!
    jangan lupa kunjung balik dan join my site http://blog-medianet.blogspot.com/

    BalasHapus
  33. mantep tutorialnya gan,, simple dan mudah di mengerti... nice post

    BalasHapus
  34. Thank gan, manfaat banget buat newbie kayak ane.

    BalasHapus
  35. mantap dah artikelnya kawan...

    BalasHapus

Berlangganan via Email