21 Widget Popular Posts Dengan Multi Colored Style

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Multi Colored Posts WidgetPostingan kali ini masih seputar tutorial modifikasi widget popular posts, sebuah widget yang bertujuan untuk menampilkan postingan  yang sering dilihat/ popular posts berdasarkan page view. Popular posts kali ini akan kita modifikasi masih dengan penambahan CSS3 menjadi Popular Post dengan tampilan sembilan warna pada setiap title posts seperti tampilan screen shoot disamping ini:

Tertarik untuk menambahkan widget popular posts dengan tampilan multi color seperti diatas? Berikut tutorial pembuatannya:

Tahap Pertama:

  1. Seperti biasa login ke akun anda.
  2. Pilih edit HTML >> Cari kode ]]></b:skin>
  3. Setelah ketemu letakkan kode dibawah ini tepat diatas kode nomor dua tadi

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}

#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}

#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}

#PopularPosts1 ul li:first-child:after, #PopularPosts1 ul li:first-child + li:after, #PopularPosts1 ul li:first-child + li + li:after, #PopularPosts1 ul li:first-child + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"} #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

4. Simpan.

Tahap Kedua

  1. Pada menu tata letak >> Pilih add gadget/tambahkan gadget >> Pilih Entri populer/Popular posts >> hilangkan tanda centang cuplikan gambar dan keterangan, tampilkan minimal 9 posts.
  2. Simpan dan lihat hasilnya diblog anda!

Demikian tutorial cara menambahkan widget popular posts dengan tampilan multi color pada blog. Semoga bermanfaat.

Jika tertarik mencoba modifikasi lain dari widget popular posts, silahkan lihat tutorial berikut:

Selamat berkreatifitas!


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

21 komentar :

  1. sepertinya lebih bagus, berat nggak ya?

    BalasHapus
    Balasan
    1. Tidak berat kok karena selain ini widget default blogger, penambahan kode diats hanya CSS aja tuk modifikasi.

      Hapus
  2. oke bagus, eh mbak kalo aku pengen pasang yang home, about trs kayak diatas search bisa gak yah?
    blogku itu tba2 gak bisa. Aku pakenya laman trs di isi kan about me., Eh tulsanna gak muncul. Paka karena efek ini mba, saat membuka postingan lebih lama keluar seperti ini
    http://limacahaya.blogspot.com/search?updated-max=2012-11-27T09:17:00%2B07:00&max-results=4

    lalu untuk link teman juga tak bsa di skin warna. Aku pikir sebabnya itu. lalu menrt mba benar tdak? mkash masukknya

    BalasHapus
    Balasan
    1. Maksudnya karena efek apa ya? Pertanyaanx nyambung tdk dgn posts diats?

      Klu mau buat tab navigator secara otomatik atau laman mandisi blog nanti ya anaa posting tutorialnya, bisa secara manual tp klu mau mudah pada bagian dasbor sebenarnya bisa langsung setting.

      Kalau mau buat skin warna atau background sebenarnya mudah, silahkan ukhti ikuti lagi tutorialx dan teliti aja, biasax srg luput ksh tanda " pada link src image.

      Semoga mmbantu ya ukh.

      Hapus
  3. Popular post+number comment? Perlu dicoba nih
    Habis jalan2 eh....ujan. Numpang berteduh ya Mbak,skalian mau menikmati menu yang telah disuguhkan oleh tuan rumah hehehe...

    BalasHapus
    Balasan
    1. Bukan no comment tp no diats ttp no posts. Silahkan dicoba.

      Thanks kunjungan dan apresiasinya.

      Hapus
  4. Keren banget bisa berwarna gitu, makasih sharingnya, sis!
    Salam kenal dan kalau sempat mampir sekalian mengundang untuk gabung dengan teman2 lain yang sudah SUBMIT URL BLOG-nya ke Direktori Weblog Indonesia.

    BalasHapus
    Balasan
    1. Sudah sempat berkunjung ke blog direktorinya, hnya belum smpat submit URL blog krn ol via Hp, nnt kpn2 dicoba lg ya!

      Thanks kunjungan dan apresiasinya.

      Hapus
  5. wah keren nih,ijin pakai ya?

    BalasHapus
    Balasan
    1. Silahkan, thanks kunjungan dan apresiasinya.

      Hapus
  6. Mantab sudah dipake di Agung Car sista. Keren betul2 pelangi dihatiku jadinya ...

    BalasHapus
    Balasan
    1. Terimaksh tuk kunjungan dan apresiasi anda.

      Hapus
  7. Blog terkeren pertama yang pernah saya kunjungi.... banyak yg bisa dipelajari

    BalasHapus
    Balasan
    1. Bisa aja, diluar sana msh bnyk yg jauh lbh keren dgn ilmu yg lbh luas. Disini km sekedar brbagi. Trimaksh apresiasix.

      Hapus
  8. waw kliatannya asik tuh widgetnya
    coba dulu ah
    makasih gan

    BalasHapus
    Balasan
    1. Silahkan dicoba, trimaksh kunjungan dan apresiasinya.

      Hapus
  9. Thnks yaa udah di coba niih widgetnya,
    sorry gan sebelumnya ane ga izin dulu... hehehe

    BalasHapus
  10. mohon bantuannya untuk mem follow blog saya
    http://thisisme-ayuchrist.blogspot.com/

    BalasHapus
  11. Kok punyaku hanya bisa tampil sampai enam ya mbak ?

    BalasHapus
  12. Pleases add translation option in your cool blog plzzzzzzzzzzzzzzzzzzzz

    BalasHapus
  13. Kalau Cara Bikin Konverter HTML Kayak Agan Gimana Ya ??

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!