Featured Post

Cara Membuat Widget Entri Terbaru di Blogger

Pernah berpikir bagaimana cara membuat widget entri terbaru di Blogger? Beberapa blogger menggunakan JavaScript untuk menyelesaikan problema ini. Beberapa hari yang lalu juga ada yang bertanya kepada saya mengenai hal ini di grup Diskusi HTML Pemula.

Seharusnya tidak perlu sampai pakai JavaScript untuk problema ini. Kamu cukup menggunakan fitur widget yang disediakan Blogger. Memangnya ada? Jawabnya adalah tidak ada. Namun, belum berarti tidak ada sama sekali. Kamu bisa menggunakan trik yang akan saya paparkan berikut ini.

Baca juga: Cara Membuat Widget Komentar Terbaru di Blogger

Membuat Widget Entri Terbaru di Blogger

Pertama yang harus kamu lakukan adalah tentu saja login di dasbor akun Blogger kamu. Setelah itu tujulah "Tata Letak" dan klik "Tambahkan Gadget". Pilih gadget "Feed".


Setelah memilih gadget Feed, kamu akan diarahkan ke tampilan formulir pengisian URL Feed blog kamu.


URL Feed untuk Blogger perlu ditambahi dengan /feeds/posts/default. Setelah itu klik lanjutkan hingga muncul entri terbaru dari blog kamu.

Kemudian ganti judul Feed dengan Entri Terbaru atau sesuai dengan keinginanmu, seperti di bawah ini.

Kemudian klik "Simpan". Setelah itu jangan lupa untuk melakukan sedikit sentuhan dengan CSS agar sesuai dengan gaya template blog kamu. Berikut ini adalah CSS yang saya tambahkan di widget Entri Terbaru blog Iskael.


#Feed1 {
background: #fff;
border: 1px solid #ddd;
padding: 10px;
margin-bottom: 15px;
}

#Feed1 h2 {
padding: 6px;
padding-bottom: 12px;
text-align: center;
background: url(http://intikali.org/iskael/pita-iskael.png) no-repeat top center;
color: #FFF;
background-size: 290px;
margin-bottom: 15px;
}

#Feed1 li {
list-style-type: none;
padding: 10px;
border: 1px solid #eee;
margin-bottom: -1px;
}


Berikut ini adalah hasilnya.


Mudah bukan? Silakan mencoba :)

Mungkin Kamu Juga Suka...

Comments

  1. wah, tutorialnya keren mas

    mas saya mau nanya sesuatu, tentang pengaturan heading di blog saya

    ReplyDelete
    Replies
    1. boleh, emangnya kenapa heading blognya mas?

      Delete
  2. ya iyalah pakai widget default aja :D

    ReplyDelete
  3. Tutorial ini penting. Baru paham kalo caranya begitu. *Bookmark*

    Btw, John, pernah bahas cara bikin Random Post? Kadang, aku nemu blog yang side bar-nya nggak ada arsip blog, tapi diganti random post. Jadi, tiap kali kita klik satu halaman, judul-judul entri di Random Post itu terus berubah. Kayaknya itu keren, dan meningkatkan page views.

    Btw lagi, blog ini apa nggak ada fitur Members buat mengikuti ya? *Biar nggak ketinggalan impoh*

    ReplyDelete
    Replies
    1. random post yah? ya nanti saya cari tahu caranya :D
      kayaknya sih ga sesimpel ini kalo random post, perlu JavaScript

      sebenarnya aku juga ingin pasang itu Hoed, tapi kayaknya Google udah mulai menggantinya dengan G+
      sebenarnya dengan like di Fanspage Facebook Iskael dan twitternya saja otomatis bisa tahu update terbaru entri di Iskael ini :D
      cuma kayaknya belum banyak yang tahu yah

      ya nanti saya pertimbangkan lagi untuk memasang widget member, karena widget di sidebar udah banyak banget, aku juga mau seleksi yang penting untuk ditampilkan saja :D

      Delete
    2. Ya, barusan aku udah Like FB Iskael. Tapi sayangnya aku jarang login ke FB atau Twitter, hehehe...

      Bagi blogger yang pakai Blogspot, kayaknya memantau update terbaru di blog-blog lain tuh paling enak di dashboard blog, jika blog yang dipantau memang memberi kesempatan pembaca untuk menjadi member. Karena dashboard blog kayaknya sesuatu yang pasti kita buka saban hari.

      Btw, aku ndaftar masuk ke group FB-mu itu John. Nama di FB-ku Reza Novian (aku gak punya akun FB yang pakai namaku). Di-approve ya. Hehe...

      Delete
    3. hehe, iya juga sih :D
      aku kalo ngunjungi Belajar Sampai Mati juga lewat dasbor :D

      kug belum masuk yah requestnya di Diskusi HTML Pemula?

      Delete
    4. Sekarang udah masuk ya? Soalnya barusan aku cek di FB malah udah kamu approve. :D

      Delete
    5. iya udah masuk :D
      aku kira itu malah bukan kamu
      ya aku approve aja, biasanya juga gitu
      ada orang yang pengen masuk buat belajar HTML

      Delete
  4. ini lebih bagus lagi kalo ada tutorial buat pita-iskael.png nya XD

    ReplyDelete
  5. wah kereenn sekali ilmunyaa.. terima kasih.. :D segera dicobaa...

    ReplyDelete

Post a Comment