Cara Membuat Popular Post Dengan Gambar Horizontal

Tutorial | Postingan Blogger Tutorial kali ini masih berhubungan dengan beberapa posting sebelumnya. Yaitu masih seputar CSS dan Inspect Element.

Seperti diketahui bersama, dari bawaan blogger sendiri sudah tersedia widget Popular Post sendiri. Tapi kelemahannya, Widget tersebut sudah mempunyai pengaturan default dan hanya tersedia dalam bentuk vertikal, sehingga bentuk dari widget tersebut terlihat monoton dan agak membosankan jika dilihat. Dan yang pasti, jika kita ingin menampilkan Popular Post dengan Thumbnail yang maksimal, posisi yang cocok untuk tempat peletakannya hanya dibagian sidebar saja.

Oleh sebab itu maka saya coba sedikit melakukan uji coba agar widget popular post dengan Thumbnail tersebut bisa dipasang dibagian footer dan dengan posisi horizontal. Demonya ya bisa langsung dilihat di bagian footer blog ini.

Tapi itu juga masih banyak kekurangan. Soalnya untuk postingan yang tidak disertai gambar maka akan terlihat kosong. Ada yang bisa bantu gak ya??

Berikut ini adalah langkah-langkah Untuk Cara membuat Popular Post dengan Thumbnail Horizontal ini,

Login ke Dashboard blogger -> Design -> Edit Html. Atau Jika menggunakan fitur yang bahasa indonesia Beranda -> Rancangan -> Edit Html.

Cari kode ]]</b:skin>

Kemudian letakkan kode CSS berikut ini di atasnya.

#content-footer{
width:100%;
clear:both
}
#content-footer h2{
color: #333;
text-transform: none;
font-family: Georgia;
font-size: 16px;
font-weight: 700;
margin-bottom: 0px;
padding: 5px 15px;
}

.bottom-content .PopularPosts ul {
padding: 0;
margin: 0px;
background: #FFF;
overflow:hidden;
}
.bottom-content .PopularPosts ul li {
width: 82px;
padding: 0; margin:0 7px 0;
border: none;
float: left;
list-style: none;
line-height: 1em;
}
.bottom-content .PopularPosts {
background: none!important;
}
.bottom-content .PopularPosts .item-thumbnail img {
width:82px;
height:105px;
padding:0;
}
.bottom-content .PopularPosts .item-title {
padding: 5px 0;
margin:0px 0 10px;
font:bold 11px Georgia;
border-bottom: 1px solid #861519;
clear:both; height: 37px;
overflow: hidden; text-align: center;
}
.bottom-content .PopularPosts .item-title a {
color:#25c;
}
.bottom-content .PopularPosts .item-snippet {
margin:10px 0;
color:#4f4f4f;
}
.bottom-content .section{
margin: 0 5px;
}