Membuat Recent Post Warna Warni di Blog

#Blogger 

Hikz - Recent Post Warna-Warni | Jika artikel sebelumnya saya memberikan tutorial membuat recent post keren dengan thumbnail, nah sekarang ini saya akan memberikan bagaimana cara membuat recent post warna warni yang keren di blogger.

Recent post yang biasa tampil di sidebar blog sebelah kanan atau pun kiri (tergantung template), sekarang akan saya sulap warna-warni agak pengunjung betah dan tertarik untuk mengklik linknya.

Baca juga:
- 10 Template Toko Online Keren Untuk Blogger
- Cara Memasang Ads.txt di Blogger dan WordPress
- Cara Memindahkan Iklan Auto Ads (Adsense) Kebawah Layar

Kita sudah tau jika recent post ini terbilang sangat harus di pasang agar pengunjung tahu jika ada artikel terbaru lainnya untuk mereka lihat artikelnya. Dan berikut ini cara membuat recent post berwarna warni dengan ccs, html, dan javascript.

Recent Post Warna Warni dengan Thumbnail

Untuk recent post warna-warni yang saya maksud nantinya kan seperti gambar dibawah ini. Yang kiri dengan thumbnail, sedangkan yang kanan tanpa thumbnail.

Recent Post Warna Warni Blogger

Lihat demonya dulu disini untuk memastikan jika script recent post warna warni nya berfungsi. Berikut cara pemasangannya:

  1. Buka blogger
  2. Klik Menu Tata Letak
  3. Klik Tambahkan Gadget atau Widget
  4. Pilih yang HTML/JavaScript
  5. Copy kode berikut ini:
    <style scoped="scoped">
    .hikz-recpost {font:normal normal 11px/normal Arial;color:#333;margin:0 auto;padding:0;min-height:100px;}
    .hikz-recpost li {list-style:none;margin:0;padding:8px;background-color:white;border-bottom:1px solid #ddd}
    img.hikz-rethum{float:left;margin:0 10px 0 0;padding:0;border:none;background:none;outline:none;width:55px;height:55p}
    .hikz-recpost li a{font:normal normal 12px/normal Oswald;display:block;text-decoration:none;color:#fdfdfd}
    .hikz-recpost li a:hover {text-decoration:none;color:#ffffff;font-weight:bold}
    .hikz-recpost li:nth-child(1) {background-color:#E11E28;}
    .hikz-recpost li:nth-child(2) {background-color:#FD3C03;}
    .hikz-recpost li:nth-child(3) {background-color:#AE8A00}
    .hikz-recpost li:nth-child(4) {background-color:#6EBE27;}
    .hikz-recpost li:nth-child(5) {background-color:#149A48;}
    .hikz-recpost li:nth-child(6) {background-color:#5BBFF1;}
    .hikz-recpost li:nth-child(7) {background-color:#61469C;}
    .hikz-recpost li:nth-child(8) {background-color:#863E86;}
    .hikz-recpost li:nth-child(9) {background-color:#863E62;}
    .hikz-recpost li:nth-child(10) {background-color:#815540;}
    </style>
    <script src='https://static.hikz.xyz/_js/hikz-repost.js' type='text/JavaScript'></script>
    <script style='text/javascript'>
    var numposts = 10;
    var showpostthumbnails = true;
    var displaymore = false;
    var displayseparator = false;
    var showcommentnum = false;
    var showpostdate = false;
    var showpostsummary = true;
    var numchars = 85;
    </script>
    <script src='https://www.portal-islam.id/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
  6. Jangan lupa ganti www.portal-islam.id dengan alamat blogspot.com agan
  7. Pastekan kode diatas ke Halaman HTML/JavaScript di bagian Content, Yang Title atau judul terserah.
  8. Klik Save atau Simpan
  9. Selamat Anda sudah berhasil membuat recent post warna warni di blogger.

Jika di atas recent post dengan thumbnail, nah yang dibawah ini tutorial cara membuat recent post tanpa thumbnail, dan berikut ini cara-caranya.

Recent Post Warna Warni tanpa Thumbnail

Cara pemasangannya hampir sama seperti recent post warna warni dengan thumbanil di atas, bedanya hanya di css dan javascript saja. Demo untuk recent post tanpa thumbnail klik disini.

Berikut adalah css dan script recent post warna warni tanpa thumbnail + tutorial membuatnya.

  1. Lihat tahap 1 sampai 4 diatas
  2. Copy CSS dan JavaScript recent post nya di bawah ini:
    <style scoped="scoped">
    .hikz-recpost {font:normal normal 11px/normal Arial;color:#222;margin:0 auto;padding:0;min-height:100px}
    .hikz-recpost li {list-style:none;margin:0;padding:8px;background-color:white;border-bottom:1px solid #ddd}
    .hikz-recpost li a{font:normal normal 12px/normal Oswald;display:block;text-decoration:none;color:#fdfdfd}
    .hikz-recpost li a:hover {text-decoration:none;color:#ffffff;font-weight:bold}
    .hikz-recpost li:nth-child(1) {background-color:#E11E28;}
    .hikz-recpost li:nth-child(2) {background-color:#FD3C03;}
    .hikz-recpost li:nth-child(3) {background-color:#AE8A00}
    .hikz-recpost li:nth-child(4) {background-color:#6EBE27;}
    .hikz-recpost li:nth-child(5) {background-color:#149A48;}
    .hikz-recpost li:nth-child(6) {background-color:#5BBFF1;}
    .hikz-recpost li:nth-child(7) {background-color:#61469C;}
    .hikz-recpost li:nth-child(8) {background-color:#863E86;}
    .hikz-recpost li:nth-child(9) {background-color:#863E62;}
    .hikz-recpost li:nth-child(10) {background-color:#815540;}
    </style>
    <script src='https://static.hikz.xyz/_js/hikz-repost.js' type='text/JavaScript'></script>
    <script style='text/javascript'>
    var numposts = 10;
    var showpostthumbnails = false;
    var displaymore = false;
    var displayseparator = false;
    var showcommentnum = false;
    var showpostdate = false;
    var showpostsummary = true;
    var numchars = 85;
    </script>
    <script src='https://www.portal-islam.id/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
  3. Silakan ganti www.portal-islam.id dengan alamat blogspot.com agan
  4. Simpan kode tersebut ke Widget Blogger HTML/JavaScript
  5. Jangan lupa simpan
  6. Silakan lihat blog agan yang sudah di pasang recent post warna warni
  7. Selamat agan sudah berhasil membuat recent post warna pelangi. Hahaa

Diatas saya menyimpan script di cdn subdomain dari hikz.xyz jika pengunjung mau menyimpan di tempat lain atau di hosting sendiri bisa saja. Caranya download dulu scriptnya lalu upload di hosting masing-masing.

Saran saya sich simpan di hosting saya saja (tidak usah di ganti), karena kecepan dari hosting saya super wust, alias fast banget. Hahaaa Tapi terserah agan juga sich...

Itulah artikel dan tutorial dari saya tentang membuat recent post warna warni di blogger atau blog blogspot dengan mudah dan cepat. Semoga bermanfaat...