Cara Membuat Popular Post dengan Thumbnail Horizontal

Ikuti langkah-langkahnya berikut 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;
}

• Berhubung pada template ini widget popular post saya pasang di atas footer maka yang selanjutnya adalah cari kode: <div id='footer-wrapper'> atau sejenisnya, kemudian letakkan kode dibawah ini diatasnya

<div id='content-footer'>
<b:section class='bottom-content' id='widget-footer'>
<b:widget id='PopularPosts1' locked='false' title='Entri Populer' type='PopularPosts'/>
</b:section>
</div>

• Save Template.

Klik tautan ini untuk demo

Sumber: http://lagudoang.blogspot.com/