22 Widget Recent Posts Blogger Berdasarkan Label Atau Kategori

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

Recent Posts PerlabelPada tutorial cara menambahkan widget recent posts dengan fungsi previous dan next ada komentator yang bertanya tentang widget recent post berdasarkan label dan kategori. Sebagai tanggapan dari pertanyaan tersebut saya posting tutorial kali ini.

Widget recent posts berdasarkan label atau kategori ini akan otomatis menampilkan postingan atau artikel terbaru sesuai dengan label atau kategori yang ditentukan. Contohnya anda bisa lihat langsung pada blog ini. Anda juga dapat mengatur untuk menampilkan thumbnail pada widget, keterangan, tanggal posting, jumlah komentar atau link read more.

Baiklah langsung ketutorial cara menambahkan widget recent posts blogger berdasarkan label atau kategori pada blog:

Langkah Pertama

  • Login ke akun anda>> pada dasbor>> klik template >> edit HTML
  • Cari kode berikut ]]></b:skin> dan letakkan kode CSS dibawah ini diatas kode tadi

/* LABEL CHOOSE

================================================ */

img.label_thumb{

float:left;

padding:5px;

border:1px

solid #F3F3F3;

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;

padding:0}

ul.label_with_thumbs li{

padding:8px 0;

min-height:65px;

margin-bottom:10px;

list-style:none;

}

.label_with_thumbs a{}

.label_with_thumbs strong{}

  • Selanjutnya cari kode </head> kemudian letakkan script berikut diatasnya

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

  • Save/ simpan template.

Langkah Kedua

  • Masih pada dasbor>> klik>> Tata Letak>> tambah gadget
  • Pilih HTML/JavaScript
  • Letakkan kode berikut pada form yang muncul dan beri judul yang anda inginkan

<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/-/Category Here?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

Keterangan script diatas: Numposts adalah angka jumlah posting yang ingin ditampilkan.

Jika tidak ingin menampilkan thumbnail ganti true menjadi false

Jika ingin menampilkan tanggal, read more, dan summary semua yang bertuliskan false ganti menjadi true

Tulisan berwarna merah ganti dengan label postingan yang anda pilih.

  • Simpan dan lihat hasilnya diblog anda!

Demikian tutorial cara menambahkan widget recent posts sesuai label atau kategori pada blog. Semoga bermanfaat.


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

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

22 komentar :

  1. Sepertinya postingan ini jawaban dari riquest saya deh :D
    Btw widgetnya itu udah ada fungsi previous dan next belum?
    Thanks sebelumnya untuk selalu sering yg bagus2 :)

    BalasHapus
    Balasan
    1. maksudku "sharing" byukan "sering"... :)

      Hapus
    2. Ya, seperti dugaan anda. Terimakasih apresiasinya.

      Hapus
  2. Membuat thumbnails recent posts perlabelnya jadi bulat kayak diblog agan bgm ya?

    BalasHapus
    Balasan
    1. Cukup tambahkan kode CSS thumbnailnya/image recent posts dengan kode: border-radius: 100px

      Hapus
    2. bisa juga border-radiusnya dinyatakan dalam persen seperti ini:
      -moz-border-radius: 50%;
      -webkit-border-radius: 50%;
      border-radius: 50%;

      Hapus
  3. Useful tuts. Thanks for sharing this widget, good one.

    BalasHapus
    Balasan
    1. Thank you for your participation.

      Hapus
  4. cara membuat script googlecode nya kalau boleh tau gimana, terima kasih

    BalasHapus
    Balasan
    1. Caranya anda buat akun terlebih dahulu digooglecode, terus download script yang anda inginkan dan upload kembali keakun googlecode anda. Semoga membantu. Terimakasih kunjungannya!

      Hapus
  5. sipp, sudah saya coba di blog ane, terima kasih

    BalasHapus
    Balasan
    1. Sama-sama, terimakasih juga ats apresiasi anda.

      Hapus
  6. adow maaaakkk.... puyeng aq.... untung blog ini berwana pink, jadi agak semangat. aku tanya ya mbok : " cara isi category here itu gimana ? " ajari aku ya ? puyeeengggg 1000 keliling. ini web aku http:/www.indahvariasi.blogspot.com.

    BalasHapus
  7. keren sob, dipelajari dulu ya

    BalasHapus
  8. tutorialnya buat dipasang di side bar atau dimana mba?? saya coba pasang di bawah postingan gak muncul apapun .......

    BalasHapus
    Balasan
    1. Bikin layot baru aja gan, dengan nama footer2..

      Hapus
  9. Terimakasih banyak atas postinganya..
    sangat membantu...
    tapi kalo boleh minta caranya dong biyar lebih ringan loadnya...

    -Thanks-

    BalasHapus
    Balasan
    1. kurangi penggunaan gambar pada template.
      sebaiknya gambar kecil2 yang ada pada template digabungin dan pemanggilannya dilakukan dengan cara background-position. (penggabungan ini sering dikatakan sprite image).
      Kompres/minified CSS dan JS..
      Gunakan tag kondisional untuk mengatur script yang muncul.
      jangan gunakan terlalu banyak script (klo bisa digabung dalam satu file lebih bagus.)

      Hapus
  10. kalo mau buat widget recent post perlabel yang pake satu thumbnail saja gmna?
    skalian cara customsize gambarnyya ya min
    makasih banget infonya. sangat membantu

    BalasHapus
  11. makasih gan tutorialnya,,,ane praktekin disini "Andonesi'S"

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

    BalasHapus
  13. ko gak muncul ya di blog ane mah gan

    BalasHapus

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!