Posted by Aak
Aak-share.com Updated at: 12:50:00 AM

Membuat Style Widget Popular Posts Thumbnail dengan CSS

No comments:
Style Widget Popular Posts - Sebelumnya saya telah menuliskan populer post dengan efek ceklis, pada kesempatan ini masih dalam topik yang sama mengenai populer post namun pada kali ini  saya akan memodifikasi populer post agar terlihat lebih keren. Widget Popular Posts yang akan saya share berikut ini menggunakan CSS.

Style Widget Popular Posts berikut ini  dengan penambahan kode .item-snippet dan .item.title dan juga penambahan efek zoom dan rotasi dengan demikian tampilan style populer post akan terlihat lebih cool and beutiful. Untuk penerapannya berikut ini langkah-langkahnya :

Style Widget Popular Posts dengan CSS

L1 - Penerapan CSS
Untuk penerapan CSS silahkan anda buka Editor template => selanjutnya anda cari kode ]]></b:skin> dan anda terapkan kode berikut 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;
}

L2 - Penerapan HTML
Selanjutnya anda cari kode <!-- (4) Show snippets and thumbnails --> untuk lebih lengkapnya seperti berikut :
<!-- (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 expr:alt='data:post.title' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:title='data:post.title' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>

Jika sudah silahkan anda ganti kode diatas dengan kode dibawah ini :

 <!-- (4) Show snippets and thumbnails -->
<div class="item-content">
<b:if cond="data:post.thumbnail">
</b:if>
<div class="item-thumbnail">
<a expr:href="data:post.href" href="https://www.blogger.com/null" 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" href="https://www.blogger.com/null" target="_blank">
<img border="0" src="http://2.bp.blogspot.com/_IKigl6y9hFA/TMdcT1jzo5I/AAAAAAAAAHA/hAKuT9rJpFU/noimage.jpg" expr:alt="data:title" expr:height="data:thumbnailSize" expr:title="data:title" expr:width="data:thumbnailSize" itemprop="photo" />
</a></div>
</b:else>
<div class="popular-post-isi">
<div class="item-title">
<a expr:href="data:post.href" href="https://www.blogger.com/null" itemprop="url"><span itemprop="summary"><data:post .title=""></data:post></span>
</a></div>
<div class="item-snippet">
<span itemprop="description"><data:post .snippet="">
</data:post></span></div>
</div>
</div>
<div style="clear: both;">
<div style="clear: both;">

Berikutnya anda simpan template.

L3 - Konfigurasi Entri Populer Post
Jika anda sudah menerapkan entri populer post, anda silahkan beri tanda ceklis pada thumbnail gambar dan cuplikan, screen shootnya seperti berikut :

Penjelasan :
Jika anda ingin menghilangkan ringkasan posting pada widget popular posts, tambahkan kode berikut ini :
.item-snippet { display:none }
Jika anda ingin mengganti gambar dengan kesanyangan anda silahkan anda ganti Kode warna biru
http://2.bp.blogspot.com/_IKigl6y9hFA/TMdcT1jzo5I/AAAAAAAAAHA/hAKuT9rJpFU/noimage.jpg 
Selanjutnya silahkan anda sesuaikan dengan template anda.

Demikian Style Widget Popular Posts Thumbnail dengan CSS, semoga bermanfaat!

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments