Featured Post

Lanjutan komik AD-DUKHON,

Hello gaes kembali dengan saya, kali ini saya akan membagikan komik lanjutan AD-DUKHON yaitu Bangkitnya dan hancurnya bangsa YAJUJ MAJUJ. ...

Membuat tampilan Post Popular yang keren

  membuat popular post keren dalam blogging tampilan yang keren memang sangat di butuhkan agar pengunjung tidak selalu bosan pada saat mengunjungi web kita, pengunjungpun nyaman apabila tampilan atau desain blog kita elegan dan keren.

saya akan membagikan kode CSS Post Popular yang keren seperti tampilan dibawah ini.

                                              
Langsung saja ke Tutorial Cekidot langsung.


1.Hal yang pertama harus dilakukan adalah masuk ke Blogger lalu pilih TEMA  setelah itu klik sesuaikan, seperti pada gambar dibawah ini.

                            
2.Selanjutnya scroll paling bawah pilih tambahkan CSS lalu Kopi Paste kode CSS Post Popularnya.



Dan ini Kode CSS nya :

/* CSSTidy 1.5.2: Tue, 31 Jul 2018 00:47:50 +0000 */#PopularPosts1 ul li a:active{color:#fff;text-decoration:none}#PopularPosts1 ul li a{color:#333;display:block;font-family:Georgia,'Times New Roman',Times,serif;font-size:13px;font-style:normal;font-variant:normal;font-weight:400;letter-spacing:normal;line-height:18px;margin:0 40px 0 0;min-height:30px;orphans:2;padding:0;text-align:-webkit-auto;text-decoration:none!important;text-indent:0;text-transform:none;white-space:normal;widows:2;word-spacing:0}#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;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:0;list-style-type:none}#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0 25px 0;border:2px solid #f7f7f7;padding:10px}


Cukup Mudah kan?

2 Responses to "Membuat tampilan Post Popular yang keren"

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel