Cara Membuat Populer Post Berwarna di Blog - TRIK SIMPLE
Cara Membuat Populer Post Berwarna di Blog

Cara Membuat Populer Post Berwarna di Blog - Populer post tanpa warna akan terlihat tidak menarik bener gk? ...nah dalam tutorial kali ini saya akan share kepada kalian cara membuat populer post berwarna di blog.

Populer Post merupakan widget wajib untuk setiap blog. Widget Populer Post ini dipasang biar pengunjung tau apa sih yang banyak dibaca di blog ini misalnya. Oke jika tertarik langsung saja ke caranya cekebrooot....

Cara Membuat Populer Post Berwarna di Blog


Hanya menambahkan kode CSS dibawah ini tepat diatas kode ]]></b:skin> atau ]]&gt;&lt;/b:skin&gt;
Catatan:
Jika sebelumnya sobat sudah memasang CSS dari tema asli atau tutorial lainnya, hapus terlebih dahulu lalu gantikan dengan kode dibawah ini.
/* Popular Post Berwarna */
.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-size:15px;color:#fff;margin:0 !important;width:100% !important;font-weight:bold}.PopularPosts ul li img{display:block;transition:all 400ms ease-in-out;width:60px;height:60px;float:left;margin:0 15px 0 0;border:4px solid rgba(0,0,0,0.2)}.PopularPosts ul li img:hover{border:4px solid rgba(0,0,0,0.5);transition:all 400ms ease-in-out}.PopularPosts ul li{background-color:#eee;counter-increment:num;position:relative;margin:0 10% 0 0;padding:10px;height:70px;}.PopularPosts .item-title{text-overflow: ellipsis;overflow:hidden;height:64px}.PopularPosts ul li:before,.PopularPosts ul li .item-title a{font-size:15px !important;color:inherit;text-decoration:none}.PopularPosts ul li:before{content:counter(num);display:block;position:absolute;font-size:35px !important;font-weight:700;color:rgba(0,0,0,0.2);top:40%;left:9px;}
.PopularPosts ul li{margin:0 !important;padding:10px 5px 10px 40px}
.PopularPosts ul li:nth-child(1){background-color:#5d93b2}.PopularPosts ul li:nth-child(2){background-color:#67b8b3}.PopularPosts ul li:nth-child(3){background-color:#67c27a}.PopularPosts ul li:nth-child(4){background-color:#ee9f7e}.PopularPosts ul li:nth-child(5){background-color:#ea6868}.PopularPosts ul li:nth-child(6){background-color:#b65757}.PopularPosts ul li:nth-child(7){background-color:#e9c462}.PopularPosts ul li:nth-child(8){background-color:#84d558}.PopularPosts ul li:nth-child(9){background-color:#4dd38c}.PopularPosts ul li:nth-child(10){background-color:#b44d7a}

Jika sudah Klik Simpan tema sobat dan lihat hasilnya.

Seting Widget sama kaya gambar dibawah ini agar terlihat rapi.


Jika sudah klik Simpan.

Oke sekian yang bisa saya jelaskan tentang Cara Membuat Populer Post Berwarna di Blog Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.

Cara Membuat Populer Post Berwarna di Blog


السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
Cara Membuat Populer Post Berwarna di Blog

Cara Membuat Populer Post Berwarna di Blog - Populer post tanpa warna akan terlihat tidak menarik bener gk? ...nah dalam tutorial kali ini saya akan share kepada kalian cara membuat populer post berwarna di blog.

Populer Post merupakan widget wajib untuk setiap blog. Widget Populer Post ini dipasang biar pengunjung tau apa sih yang banyak dibaca di blog ini misalnya. Oke jika tertarik langsung saja ke caranya cekebrooot....

Cara Membuat Populer Post Berwarna di Blog


Hanya menambahkan kode CSS dibawah ini tepat diatas kode ]]></b:skin> atau ]]&gt;&lt;/b:skin&gt;
Catatan:
Jika sebelumnya sobat sudah memasang CSS dari tema asli atau tutorial lainnya, hapus terlebih dahulu lalu gantikan dengan kode dibawah ini.
/* Popular Post Berwarna */
.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-size:15px;color:#fff;margin:0 !important;width:100% !important;font-weight:bold}.PopularPosts ul li img{display:block;transition:all 400ms ease-in-out;width:60px;height:60px;float:left;margin:0 15px 0 0;border:4px solid rgba(0,0,0,0.2)}.PopularPosts ul li img:hover{border:4px solid rgba(0,0,0,0.5);transition:all 400ms ease-in-out}.PopularPosts ul li{background-color:#eee;counter-increment:num;position:relative;margin:0 10% 0 0;padding:10px;height:70px;}.PopularPosts .item-title{text-overflow: ellipsis;overflow:hidden;height:64px}.PopularPosts ul li:before,.PopularPosts ul li .item-title a{font-size:15px !important;color:inherit;text-decoration:none}.PopularPosts ul li:before{content:counter(num);display:block;position:absolute;font-size:35px !important;font-weight:700;color:rgba(0,0,0,0.2);top:40%;left:9px;}
.PopularPosts ul li{margin:0 !important;padding:10px 5px 10px 40px}
.PopularPosts ul li:nth-child(1){background-color:#5d93b2}.PopularPosts ul li:nth-child(2){background-color:#67b8b3}.PopularPosts ul li:nth-child(3){background-color:#67c27a}.PopularPosts ul li:nth-child(4){background-color:#ee9f7e}.PopularPosts ul li:nth-child(5){background-color:#ea6868}.PopularPosts ul li:nth-child(6){background-color:#b65757}.PopularPosts ul li:nth-child(7){background-color:#e9c462}.PopularPosts ul li:nth-child(8){background-color:#84d558}.PopularPosts ul li:nth-child(9){background-color:#4dd38c}.PopularPosts ul li:nth-child(10){background-color:#b44d7a}

Jika sudah Klik Simpan tema sobat dan lihat hasilnya.

Seting Widget sama kaya gambar dibawah ini agar terlihat rapi.


Jika sudah klik Simpan.

Oke sekian yang bisa saya jelaskan tentang Cara Membuat Populer Post Berwarna di Blog Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

Disqus Codes
  • To write a bold letter please use or
  • To write a italic letter please use or
  • To write a underline letter please use
  • To write a strikethrought letter please use
  • To write HTML code, please use or
    or

    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Jangan Lupa Subcribe