Membuat Material Design Colored Popular Post
Membuat Material Design Colored Popular Post
Kali ini saya akan membahas cara membuat material design colored popular post. Bedanya Popular post yang akan saya share ini dengan yang lain adalah dari segi tampilan, tampilan dari material design colored popular post akan terlihat lebih fresh dan menarik jika dilihat.
Membuat Material Design Colored Popular Post
Buka Blogger > Pilih Edit Tema > Tambahkan kode dibawah ini sebelum kode ]]></b:skin> atau </style>STYLE 1
/* Popular Post */
.item-snippet {display:none}
#PopularPosts1 {background:#2196f3;margin-right:1%;box-shadow:0 3px 3px -2px rgba(0,0,0,.2), 0 3px 4px 0 rgba(0,0,0,.14), 0 1px 8px 0 rgba(0,0,0,.12)}
#PopularPosts1 .widget-content {padding:5px 10px;}
.PopularPosts .item-thumbnail{float:left;margin:0}
#PopularPosts1 h2,#PopularPosts2 h2 {margin-top:5px;background:#2196F3;color:#fff;border-bottom:1px solid rgba(255,255,255,.3);font-size:16px;font-weight:500;text-transform:uppercase;letter-spacing:1px;text-align:center;}
.PopularPosts .popular-posts ul li{background:#2196F3;list-style:none;overflow:hidden;margin:0;border-bottom:1px solid rgba(255,255,255,.3);width:100%;}
.PopularPosts .popular-posts ul li:last-child{border-bottom:none}
#PopularPosts1 .popular-posts,#PopularPosts2 .popular-posts {position:relative;background:#2196f3}
.PopularPosts ul {counter-reset:trackit}
.PopularPosts .popular-posts ul li .item-content {counter-increment:trackit}
div.item-thumbnail-only {counter-increment:trackit}
.PopularPosts .popular-posts ul li a{color:#fff;transition:all .3s;font-size:17px!important;font-family:'Roboto';font-weight:normal;}
.PopularPosts .popular-posts ul li a:hover {color:#fff}
.PopularPosts .item-title{display:table-cell;vertical-align:middle;line-height:normal;text-overflow:ellipsis;padding:0 10px 0}
.PopularPosts .item-thumbnail img {display:block;float:left;border-radius:100%;width:70px;padding:0}
.popular-posts ul {padding-left: 0;}
STYLE 2
/* Popular Post */
.item-snippet {display:none}
#PopularPosts1 {background:none}
#PopularPosts1 .widget-content {padding:0}
#PopularPosts1 h2,#PopularPosts2 h2 {border-radius: 4px;margin-top: 5px;background: #2196F3;color: #fff;font-size: 17px;font-weight: 600;padding: 13px 0;text-align: center;box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);}
.PopularPosts ul{list-style-type:none;}
.PopularPosts li{margin:0;padding:10px!important}
.PopularPosts ul li{background:#fff;border-radius:4px;margin:10px 0;padding:0;box-shadow:0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2)}
.PopularPosts li a{font-weight:400;font-family:'Roboto',sans-serif;font-size:13px;color:#fff!important;transition:all .5s;border:none}
.PopularPosts li a:hover{color:#fff!important;border:none}
.PopularPosts img{padding-right:0}.popular-posts img{margin-bottom:5px;width:72px;height:62px;border-radius:4px}.PopularPosts .item-thumbnail{overflow:hidden;float:left;margin-right:10px;margin-bottom:-7px}
.PopularPosts .widget-content ul li:nth-child(1) {background:#3f51b5}
.PopularPosts .widget-content ul li:nth-child(2) {background:#9C27B0}
.PopularPosts .widget-content ul li:nth-child(3) {background:#E91E63}
.PopularPosts .widget-content ul li:nth-child(4) {background:#FF9800}
.PopularPosts .widget-content ul li:nth-child(5) {background:#f44336}
.PopularPosts .widget-content ul li:nth-child(6) {background:#00BCD4}
.PopularPosts .widget-content ul li:nth-child(7) {background:#009688}
Hapus dahulu kode css popular post pada blog anda sebelumnya agar cara ini berhasilSekian tutorial tentang Membuat Material Design Colored Popular Post, Selamat Mencoba dan semoga bermanfaat. Terima kasih