Membuat Popular Post tampilan Material Design - Material Desig merupakan User Interface yang paling banyak digunakan oleh pengembang teknologi, Material design dikenalkan oleh GOOGLE pada interface androidnya, kemduian diikuti Microsoft dengan WIndows 10-nya. Tak masalah siapa yang pertama kali membuat design dengan tampilan Material Design ini.

Dan menurut pengamatan saya blog pertama kali yang memakai thema khas material design adalah blog Alina Design, dan blog yang sering membahas tentang materil design adalah blog Id blanter. Arlina design merupakan salah satu kiblatnya blogger pada era ini yang dulu digawangi oleh blogger kondang MasKolois dan Kang Ismet, saya tidak mempunyai data yang cukup untuk mengulas sipa mereka mereka ini.


Membuat Popular Post tampilan Material Design

Langsung saja pada kesempatan kali ini saya akan kembali menyodorkan pada kamu tampilan widget yang sering dipasang pada blog yaitu Popular Post dengan style Material design, pada postingan terdahulu saya juga telah memberikan 4 style popular post

4 Style Popular Post

Untuk membuat Popular Post tampilan Material Design, kamu hanya perlu menambahkan kode CSS dibawah ini

/* Popular Post tampilan Material Design */
.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;}

Ganti background:#2196f3 jika kamu tidak menyukai warna biru terang, silahkan ganti kode warna HTMLnya lihat kode warna HTML

Baca : Kode warna HTML

Simpan thema dan liha hasilnya.

Membuat Popular Post tampilan Material Design

Jika kamu menyukai tampilan popular post yang ada pada gambar diatas, gunakan kode CSS dibawah ini

/* 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}

- Popular post ini hanya berfungsi untuk 7 tampilan, jika ingin menambahnya menjadi 10 tampilan tinggal copy paste kode ini b>.PopularPosts .widget-content ul li:nth-child(7) {background:#009688}

- Sesuaikan juga warnanya agar terlihat professional, ganti kode yang saya cetak BOLD

Cara memasang kode CSS pada thema blog

Log in ke blogger.com, silahkan masukan akun Google kamu

Setelah berhasil masuk pilih blog yang akan dipasang popular post

Pilih menu Thema > Edit HTML

Lalu pilih Thema, Edit HTML masukan kode CSS nya sebelum kode ]]></b:skin>  atau sebelum kode </style>

Demikianlah cara Membuat Popular Post tampilan Material Design, semoga bermanfaat
No comments