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 Syntax Highlighter Otomatis Tanpa Javascript di Blogger

Syntax Highlighter adalah sebuah wadah untuk menampilkan sebuah kode pemograman. Dimana, syntax highlighter ini sering di gunakan untuk membuat sebuah tutorial di sebuah situs web.Syntax highlighter umumnya berwarna-warni, karena menggunakan banyak javascript , namun pada tutorial kali ini, saya akan membagikan tutorial tentang cara membuat syntax highlighter otomatis tanpa javascript di blogger . Wow tanpa javascript? Emang bisa? Karena syntax highlighter ini hanya menggunakan satu warna saja, jadi syntax highlighter ini tidak memerlukan javascript. Untuk memanggil syntax highlighter ini, agan hanya cukup menggunakan 2 script saja, karena itulah di sebut otomatis. (Baca juga :  Cara Membuat Prism Syntax Highlighter untuk Menampilkan Script Code di Blogger ) Mengenai syntax highlighter yang bisa mengurangi kecepatan blog agan, agan tidak perlu takut karena syntax highlighter ini hanya menggunakan script CSS saja. Itulah bedanya syntax highlighter ini dengan syntax highlighter yang...

Cara Memasang Script Redirect UC Browser ke Chrome Lebih Cepat

UC Browser memanglah browser terbaik untuk menampilkan halaman website tanpa iklan. Namun ini akan berdampak buruk bagi para publisher , khususnya publisher Google AdSense . Dengan banyaknya pengguna UC Browser, maka para publisher akan kehilangan banyak penghasilan. Untuk itulah pada tutorial kali ini saya akan memberikan cara memasang script redirect UC browser ke Chrome dengan mudah dan pastinya cepat . Script ini sebenarnya saya dapatkan dari forum ads.id, karena kebetulan script auto redirect ini lagi terkenal, akhirnya saya share ke blog saya. Script auto redirect ini mungkin bisa lebih cepat dari pada script auto redirect yang di share sebelumnya di forum ads.id, tapi saya juga belum tahu pasti seberapa cepat script ini bisa auto redirect dari UC browser ke Chrome. (Baca juga :  Cara Memasang Lebih Dari 2 In-Feed Ads Google AdSense ) Untuk cara memasangnya, langsung saja ikuti langkah-langkah dari saya di bawah ini. Cara Memasang Script Redirect UC Browser ke Chrome di Blog...

Cara Memasang Lebih Dari 2 In-Feed Ads Google AdSense

Setelah sebelumnya saya membagikan cara memasang In-feed ads Google AdSense secara otomatis , kali ini saya akan membagikan cara memasang lebih dari 2 In-feed ads Google Adsense . (Baca juga : Cara Memasang In-Article Ads Google AdSense Secara Otomatis ) Seperti yang kita ketahui fitur In-feed ads ini sangat berguna bagi para publisher Google AdSense. Karena memudahkan para pengunjung kita untuk melihat dan meng-klik iklan yang ada di pertengahan menu postingan. Selain itu, iklan In-feed ads ini juga tidak merusak pandangan blog kita. Sehingga tidak akan mengurangi pengalaman pengunjung terhadap blog yang kita miliki. Singkat cerita saya mendapatkan kode memasang iklan ini dari blog idola saya yaitu Arlina Design , tetapi karena kode yang di berikan hanya 2 buah slot saja, maka saya akan memberikan cara memasang iklan In-feed ini lebih dari 2 buah. Nah, bagi yang belum tahu cara memasang lebih dari 2 buah In-feed ads , ikuti langkah-langkah dari saya berikut ini. Cara Memasang Lebih d...

Cara Membuat Prism Syntax Highlighter untuk Menampilkan Script Code di Blogger

Untuk kalian yang gemar membagikan tutorial di blogger pastinya kalian membutuhkan Syntax Highlighter ini, apalagi kalian yang menerapkan blog dengan niche programming. Pada tutorial kali ini saya akan memberikan tutorial tentang cara membuat prism syntax highlighter untuk menampilkan script code di blogger . (Baca juga :  Cara Membuat Syntax Highlighter Otomatis Tanpa Javascript di Blogger ) Syntax Highlighter ini sudah tidak saya pakai sekarang, tetapi syntax highlighter ini sangat cocok untuk membagikan tutorial-tutorial yang menggunakan coding. Syntax Highlighter ini saya temukan di blog Arlina Design yang menerapkan niche tutorial blog dan sering membagikan template yang responsive. Kata admin blog Arlina Design, syntax highlighter ini adalah kombinasi antara syntax highlighter yang di buat blog Kang Ismet dan fitur penomoran yang di buat blog Kompi Ajaib . Untuk lebih jelasnya ikuti langkah-langkah dari saya mengenai cara membuat prism syntax highlighter untuk menampilkan ...

Cara Mudah Menghapus Blog di Blogger

Menghapus blog biasanya di lakukan pada saat blog yang kita buat salah nama, atau bisa jadi error pada banyak artikel. Kejadian ini adalah hal yang umum di lakukan, tetapi lebih baik sobat pikirkan terlebih dahulu sebelum membangun sebuah blog karena kejadian seperti ini banyak terjadi di kalangan blogger pemula. Bagi kalian yang sudah terlanjur, dan ingin menghapus blog kalian, kali ini saya akan memberikan cara mudah menghapus blog di blogger . (Baca juga : Cara Menghapus Tulisan Diberdayakan oleh Blogger ) Bagi sobat yang ingin menghapus blog , ikuti langkah-langkah dari saya berikut ini. Cara Menghapus Blog di Blogger Langkah pertama masuk ke akun Blogger sobat Pilih blog yang ingin di hapus Pilih menu Setelan , pilih Lainnya , kemudian pilih Hapus blog Sebelum menghapus, jika sobat ingin mengekspor blog sobat silahkan pilih Download blog Untuk langsung menghapus blog silahkan pilih Hapus Blog ini Sekarang blog sobat sudah di hapus, untuk menghapus secara permanen, silahkan ikuti ...