Langsung ke konten utama

Cara Membuat Recent Post Berdasarkan Label Di Blogger

Setelah sebelumnya saya sudah membuat popular post berdasarkan label, pada tutorial kali ini saya akan membagikan tutorial tentang cara membuat recent post berdasarkan label di blogger. Yang membedakan dari widget sebelumnya adalah antara widget popular atau populer yang hanya menampilkan artikel populer dan recent post atau artikel terbaru.

(Baca juga : Cara Membuat Widget Popular Post Berdasarkan Label di Blogger)

Ini memungkinkan visitor atau pengunjung blog untuk melihat serta memilih artikel dengan label atau kategori yang mereka sukai. Tidak hanya itu, script yang di pakai juga tidak terlalu banyak sehingga memudahkan kita mengatur widget recent post ini.
Cara Membuat Recent Post Berdasarkan Label Di Blogger

Masih sama seperti widget popular post per label, widget ini juga memiliki pengaturan yang memudahkan kita untuk menampilkan beberapa fitur yang ada di dalam widget ini. Untuk cara memasang widget recent post berdasarkan label di blogger, ikuti langkah-langkah dari saya berikut ini.

(Baca juga : Cara Membuat Recent Post Blogger Berdasarkan Label Seperti Evo Magz Template)

Cara Membuat Recent Post Berdasarkan Label Di Blogger

  1. Langkah pertama masuk ke akun Blogger agan.
  2. Pilih menu Tata Letak, kemudian pilih lokasi widget yang agan inginkan, klik Tambahkan Gadget, kemudian pilih HTML/JavaScript.
  3. Masukan Judul widgetnya, kemudian masukan kode di bawah ini tepat di kolom Konten.
  4. <style type="text/css">
    img.label_thumb{position:absolute;top:6px;left:0;float:left;height:50px;width:58px;}ul.label_with_thumbs{float:left;width:100%;margin: 0 0 0;padding:0;}ul.label_with_thumbs li{padding:6px 0px 6px 66px;position:relative;min-height:53px;margin:0 0 0 0;border-bottom:1px solid #eee;}ul.label_with_thumbs li:last-child{border-bottom:none !important;}.label_with_thumbs li{list-style:none;font-size:11px;color:#999;}.label_with_thumbs .title-label a{float:left;display:inline-block;font-weight:bold;font-size:13px;margin:0 0 3px;padding:0;color:#555;width:100%;}.label_with_thumbs a:hover{color:#0099cc;}.label_with_thumbs strong{padding-left:0px;}a.comment-label{font-size:11px;color:#999;}a.more-label{font-size:11px;color:#999;}
    </style>
    <script type='text/javascript'>
    var numposts = 6;
    var showpostthumbnails = true;
    var displaymore = false;
    var displayseparator = false;
    var showcommentnum = false;
    var showpostdate = false;
    var showpostsummary = false;
    var numchars = 0;
    </script>
    <script type="text/javascript" src="/feeds/posts/default/-/LabelAgan?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
    • Pengaturan Widget :
      • var numposts = 6; di gunakan untuk mengatur jumlah artikel yang akan di tampilkan, silahkan ganti dengan jumlah artikel yang agan ingin tampilkan.
      • var showpostthumbnails = true; di gunakan untuk mengaktifkan dan menonaktifkan gambar thumbails widget.
      • var displaymore = false; di gunakan untuk mengaktifkan dan menonaktifkan link readmore.
      • var showcommentnum = false; di gunakan untuk mengaktifkan dan menonaktifkan jumlah komentar pada artikel tersebut.
      • var showpostdate = false; di gunakan untuk mengaktifkan dan menonaktifkan waktu pembuatan artikel.
      • var numchars = 0; di gunakan untuk menampilkan jumlah karakter pada artikel.
      • true di gunakan untuk mengaktifkan fitur, false digunakan untuk menonaktifkan fitur yang ada.
      • Ganti LabelAgan dengan dengan label blog yang agan akan tambahkan.
  5. Setelah selesai mengatur, silahkan klik Simpan.
  6. Jika berhasil maka tampilan widget akan seperti ini.
    Membuat Grid Recent Post Berdasarkan Label di Blog


Demikian tutorial dari saya mengenai cara membuat recent post berdasarkan label di blogger. Jika ada pertanyaan mengenai widget ini, atau mengenai cara pemasangannya di blogger, silahkan masukan ke dalam kolom komentar.

Terima kasih sudah berkunjung di blog Tutorial Umum, semoga artikel di atas bermanfaat untuk agan atau sista semua. Untuk tutorial blogger dan widget blogger yang lainnya, silahkan tetap kunjungi blog Tutorial Umum.

Postingan populer dari blog ini

Cara Membuat Widget Komentar Terbaru Dengan Judul Postingan di Blogger

Cara Membuat Widget Komentar Terbaru Dengan Judul Postingan di Blogger - Setelah sebelumnya saya membagikan tutorial cara membuat widget recent comments ringan di blog, kali ini saya akan membagikan widget yang sama tapi dalam bentuk yang berbeda. Apa bedanya ? Di dalam widget komentar terbaru ini sudah ada judul postingannya, jadi akan terlihat artikel apa yang terakhir di komen oleh pengunjung blog. Untuk masalah kecepatan, widget ini tidak akan menggangu kecepatan blog, jadi kalian tidak perlu khawatir untuk memasang widget ini. (Baca juga : Cara Membuat Widget Recent Comments Ringan di Blog ) Widget ini saya temukan di blog Kang Ghani yang sering membagikan berbagai tutorialnya. Bagi yang ingin tahu bagaimana cara memasangnya, ikuti langkah-langkah berikut ini. Cara Memasang Widget Komentar Terbaru Dengan Judul Postingan di Blogger Langkah pertama masuk ke akun blogger kalian Kemudian pilih menu Tata Letak , kemudian pilih lokasi widgetnya Pilih Tambahkan Gadget , kemudian pili...

Cara Membuat Button Responsive 13 Gaya dengan CSS

Button atau tombol adalah sebuah tampilan atau bentuk untuk mengaktifkan sebuah perintah yang di jalankan oleh admin atau penggunanya. Umumnya button atau tombol ini hanya berupa 1 atau 2 buah saja dalam bentuk terpisah-terpisah. Kali ini saya akan membagikan cara membuat button responsive 13 gaya dengan css . Button responsive ini tidak memakan loading sebuah website atau blog, karena button ini hanya menggunakan css saja. (Baca juga : Cara Membuat Efek Tombol Keyboard di Blogger Dengan CSS ) Ada beberapa pilihan untuk memilih button yang kita inginkan, diantaranya : 6 warna Biru Orange Merah Hijau Ungu Putih 4 ukuran XS (Extra Small) SM (Small) MD (Medium) LG (Large) 2 pengaturan Block Buttons Outline(Accessibility) Untuk tampilan 13 gaya buttonnya silahkan lihat di https://bttn.surge.sh/ . Tampilan Gaya Button Slant, Unite, Float Tampilan Gaya Button Pill, Material - flat, Material - circle Tampilan Gaya Button Fill, Gradient, Jelly Tampilan Gaya Button Stretch, Minimal, Bordered...

Cara Membuat Tombol Demo dan Download Ringan Responsive di Blogger

Tombol download dan demo sangat di butuhkan pada saat kita membagikan sesuatu di blog yang kita miliki. Apalagi untuk kalian yang memiliki blog seperti blog share template, software, film, musik, dan lain sebagainya. Untuk itu kali ini saya akan membagikan cara membuat tombol demo dan download ringan responsive di blogger . (Baca juga :  Cara Membuat Button Responsive 13 Gaya dengan CSS ) Kenapa saya bilang ringan, karena tombol ini hanya menggunakan css jadi tidak masalah karena tidak menggunakan javascript yang berlebihan. Cara konfigurasinya sangat mudah kalian tinggal memasukan link demo atau download kalian. Langsung saja saya akan memberikan cara membuat tombol demo dan download ringan responsive di blogger . (Baca juga :  Cara Membuat Button Dengan Animasi Bounce Effect ) Cara Membuat Tombol Demo dan Download Ringan Responsive di Blogger Langkah pertama masuk ke akun Blogger kalian. Pilih menu Tema , kemudian pilih Edit HTML . Cari script ]]></b:skin> atau ...

Update Template Tutor Magazine 3D Versi 1.0, Template Biru Paling Favorit

Update Template Tutor Magazine 3D Versi 1.0, Template Biru Paling Favorit Setelah sebelumnya saya membagikan template Hijau Magazine v1.0 , kali ini saya akan membagikan template versi terbaru dari Template Tutor Magazine , yaitu Template Tutor Magazine 3D v1.0 . (Baca juga : Download Template Premium Paling Laris 2017, Hijau Magazine V1.0 Template ) Mengapa 3D ? Karena saya sudah menyesuaikan beberapa CSS yang ada, agar tampilannya terlihat 3D atau terlihat seperti nyata. Di Template Tutor Magazine ini, saya juga sudah memperbarui beberapa bug yang ada di Template Tutor Magazine sebelumnya. Untuk keterangan beberapa bug dan update terbaru diantaranya adalah. Perbaikan Thumbnail Gambar menu Postingan Perbaikan Thumbnail Gambar menu Postingan  Perbaikan Primary menu dan Judul Blog  Perbaikan Primary menu dan Judul Blog   Update H2 Update H2  Popular Posts update style  Popular Posts update style  Perubahan Posisi & update beberapa fitur.  Perubahan ...