Bertemu lagi dengan saya, kali ini saya akan share cara membuat popular post multi color flat ui. Caranya untuk membuatnya cukup mudah. langsung saja simak caranya di bawah ini
Login Blogger - Template - Edit HTML
Cari kode ]]></b:skin> lalu copy kode dan paste di atasnya
.PopularPosts .item-thumbnail { float: left; margin: 0 10px 0 0; } .PopularPosts img { margin-right: 0.5em; transition: all 0.5s; } .PopularPosts .item-title { padding-bottom: 0.2em; } .PopularPosts .item-snippet { color: #fff; } .item-thumbnail img { border-radius: 100px; padding: 5px; width: 60px; height: 60px; background: rgba(0, 0, 0, 0.3); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4) inset, 0 1px 0 rgba(255, 255, 255, 0.2); } .PopularPosts ul li { position: relative; margin: 5px 0; padding: 5px; border: 0; } .PopularPosts ul li:first-child { background: #ff4c54; width: 95%; } .PopularPosts ul li:first-child:after { content: "1"; } .PopularPosts ul li:first-child + li { background: #ff764c; width: 87%; } .PopularPosts ul li:first-child + li:after { content: "2"; } .PopularPosts ul li:first-child + li + li { background: #ffde4c; width: 84%; } .PopularPosts ul li:first-child + li + li:after { content: "3"; } .PopularPosts ul li:first-child + li + li + li { background: #c7f25f; width: 81%; } .PopularPosts ul li:first-child + li + li + li:after { content: "4"; } .PopularPosts ul li:first-child + li + li + li + li { background: #33c9f7; width: 78%; } .PopularPosts ul li:first-child + li + li + li + li:after { content: "5"; } .PopularPosts ul li:first-child + li + li + li + li +li { background: #7ee3c7; width: 75%; } .PopularPosts ul li:first-child + li + li + li + li + li:after { content: "6"; } .PopularPosts ul li:first-child + li + li + li + li + li +li { background: #f6993d; width: 72%; } .PopularPosts ul li:first-child + li + li + li + li + li + li:after { content: "7"; } .PopularPosts ul li:first-child + li + li + li + li + li + li +li { background: #f59095; width: 69%; } .PopularPosts ul li:first-child + li + li + li + li + li + li + li:after { content: "8"; } .PopularPosts ul li:first-child + li + li + li + li + li + li + li +li { background: #c7f25f; width: 66%; } .PopularPosts ul li:first-child + li + li + li + li + li + li + li + li:after { content: "9"; } .PopularPosts ul li:first-child:after, .PopularPosts ul li:first-child + li:after, .PopularPosts ul li:first-child + li + li:after, .PopularPosts ul li:first-child + li + li + li:after, .PopularPosts ul li:first-child + li + li + li + li:after, .PopularPosts ul li:first-child + li + li + li + li + li:after, .PopularPosts ul li:first-child + li + li + li + li + li + li:after, .PopularPosts ul li:first-child + li + li + li + li + li + li + li:after, .PopularPosts ul li:first-child + li + li + li + li + li + li + li + li:after { position: absolute; top: 20px; right: -15px; border-radius: 50%; background: #353; width: 30px; height: 30px; line-height: 1em; text-align: center; font-size: 28px; color: #fff; }
Klik Save