Hello semua pada pertemuan kita ini saya akan membagikan tutorial blog nih,yaitu Cara Memodifikasi Widget Popular Post Lebih keren.yang ini cukup keren lohh ketika anda sentuh gambarnya gambar itu ada efek berputar.bagi saya sih keren,kodenya saya dapat dari mdf-blog.
mantap mantap editannya.heeheeh ini penampakan popular postnya
begini cara membuatnya
2.pilih Template -> Edit HTML
3.cari Kode ]]></b:skin> dan taruh kode dibawah ini diatas kode ]]></b:skin>
.PopularPosts li {margin-bottom:-10px}
.PopularPosts .item-thumbnail {float:left}
.popular-posts ul li img {
width:60px;
height:60px;
padding:2px;
-moz-border-radius:60px;
-webkit-border-radius:60px;
border-radius:60px;
-webkit-transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
transition:all 0.3s ease;
border:2px solid #CCC;
}
.popular-posts ul li img:hover {
border:2px solid #ccc;
-moz-transform:scale(1.2) rotate(-360deg);
-webkit-transform:scale(1.2) rotate(-360deg);
-o-transform:scale(1.2) rotate(-360deg);
-ms-transform:scale(1) rotate(-360deg);
transform:scale(1.2) rotate(-360deg);
}
.popular-post-isi {
position:relative;
background-color:#f7f7f7;
padding:5px;
min-height:60px;
border:1px solid #ccc;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
margin-left:75px;
margin-bottom:5px;
}
.popular-post-isi:before {
content:"";
width:0;
height:0;
position:absolute;
right:100%;
top:19px;
border-width:10px;
border-style:solid;
border-color:transparent #f7f7f7 transparent transparent;
}
.item-title {
font-size:12px;
line-height:1.1em;
}
.item-snippet {
color:blue;
font-size:11px;
line-height:1em;
}
4.setelah itu Cari kode dibawah ini
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
atau bukan cari kode <!-- (4) Show snippets and thumbnails -->
5.jika sudah dapat,ganti semua kode tadi dengan kode ini
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img border='0' expr:alt='data:title' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:title='data:title' expr:width='data:thumbnailSize' itemprop='photo'/>
</a>
</div>
<b:else/>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img border='0' expr:alt='data:title' expr:height='data:thumbnailSize' expr:title='data:title' expr:width='data:thumbnailSize' itemprop='photo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ__eYUMfxk8naQ0J62YWUIi39Rpek-Q9APaMxP8m8H-kDsusm99JVpZexY9ZBZPQyGYc6KL802xRXnoBjbyVQLRVIgR-Jxex_KxMgLX9q_6VKoWcqerwZKdfTHDymIZqGlSqHYueJcvw_/'/>
</a>
</div>
</b:if>
<div class='popular-post-isi'><div class='item-title'><a expr:href='data:post.href' itemprop='url'><span itemprop='summary'><data:post.title/></span></a></div>
<div class='item-snippet'><span itemprop='description'><data:post.snippet/></span></div></div>
</div>
<div style='clear: both;'/>
6.simpan template
7.Pergi Ke Tata Letak -> Entri Populer dan atur entri populer anda seperti gambar dibawah ini
8.simpan template