Cara Membuat Artikel Populer Warna-warni

Cara Membuat Artikel Populer Warna-warni
Ok! Kali ini saya akan memberikan sedikit tutorial sederhana, ya hanya sederhana karena hari ini lebaran tentunya gak ada waktu buat Online hehe, jadi saya akan membuat tutorial singkat, yaitu cara membuat artikel populer warna-warni seperti blog ini.

Sebenarnya artikel populer warna-warni saya mendapatkan CSS nya di template Sang Seo punya kang mouser hehe, tapi agak saya modifikasi sedikit, agar tampilannya terlihat lebih unyu dan menarik.

Perlu anda ketahui artikel populer sangat penting untuk dipasang diblog, karena pengunjung rata-rata mencari artikel atau postingan yang unik, nah artikel populer ini juga bisa membuat pengunjung blog menjadi betah karena banyak sekali artikel-artikel yang unik dan menarik. Baiklah tidak akan banyak basa-basi lagi, mari kita simak bersama-sama bagaimana cara membuat artikel populer warna-warni ini.

  1. Masuk ke-blogger
  2. Langsung pergi ke-tata letak, tambah gadget pilih Entri Populer.
  3. Kemudian kita masuk ke Edit HTML, masukkan css dibawah ini.
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{list-style:none;border:none;background:none;outline:none;margin:0;padding:0}
.PopularPosts ul{list-style:none;font-family:Oswald,Sans-Serif;font-size:13px;color:#fff;margin:.5em 0}
.PopularPosts ul li img{display:block;width:70px;height:70px;float:left;margin:0 15px 0 0}
.PopularPosts ul li{background-color:#eee;counter-increment:num;position:relative;margin:0 10% 0 0;padding:10px}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a{font-weight:400;font-size:13px;color:inherit;text-decoration:none}
.PopularPosts ul li:before{content:counter(num);display:block;position:absolute;background-color:#555;color:#FFF;width:20px;height:20px;line-height:20px;text-align:center;bottom:5px;right:5px;margin-top:15px;border-radius:100px}
.PopularPosts ul li:nth-child(1){background-color:#F1C40F;margin-right:0}
.PopularPosts ul li:nth-child(2){background-color:#F39C12;margin-right:0}
.PopularPosts ul li:nth-child(3){background-color:#2ECC71;margin-right:0}
.PopularPosts ul li:nth-child(4){background-color:#27AE60;margin-right:0}
.PopularPosts ul li:nth-child(5){background-color:#E67E22;margin-right:0}
     4. Simpan template, dan lihat hasilnya :)

Itu lah tutorial singkat saya cara membuat artikel terpopuler warna-warni, apabila anda tidak berhasil bisa anda tanyakan dikolom komentar saya akan membantu anda untuk membuat nya, oke bro. Semoga artikel ini bermanfaat, selamat hari raya idul fitri 1935 Hijriah, mohon maaf lahir dan batin. Happy Blogging

Cara Membuat Artikel Populer Warna-warni Rating: 4.5 Diposkan Oleh: Munawir Alfikri

12 komentar:

  1. Tentang Makanan mengucapkan Selamat Hari Raya Idulfitri 1435 H.mohon maaf lahir dan batin Mas Munawir......untuk tutonya disimak dulu yah hehehe

    ReplyDelete
    Replies
    1. Iya mas dede :)
      makasih udah berkunjung yaa

      Delete
  2. udah lama mau pake populler post yang kaya gini , ijin pake di blog ane gan

    ReplyDelete
  3. wah bisa tambah keyen nih populer pos nya :D

    ReplyDelete
    Replies
    1. Hehehe iya tambah imut ya gan popular post nya

      Delete
  4. Wah, sepertinya bagus digunakan untuk template kompi ajaib ini ya mas?
    Oh, selamat hari raya idhul fitri 1435, maaf lahir bathin ya mas...

    ReplyDelete
    Replies
    1. Iya mass seperti nya begitu deh heheh :D
      Iya sama-sama mas saya juga :)

      Delete
  5. wah keren nih artikelnya, jadi eye catching ya artikel populernya :D
    o ya ane dah follow g+ nya, follback ya :P

    ReplyDelete
    Replies
    1. wahh makasih ya :)
      Oke udah di follback kok :-d

      Delete

Apa tanggapan anda tentang artikel diatas?