Modifikasi widget popular posts stylish with CSS

Untuk kesempatan kali ini saya akan share cara modifikasi popular post dengan css yang keren ganteng dan stylish :D yaitu "Modifikasi widget popular posts stylish dengan CSS".

Berikut cara modifikasi widget popular posts stylish dengan CSS

» TAHAP 1
1. Login akun blogger anda
2. Pada Dashboard pilih Tata Letak » Tambah Gadget » Pilih Entri Populer
3. Lalu pilih jumlah post yang akan ditampilkan, Setting seperti gambar berikut ini !

4. Klik Simpan
5. Klik Simpan Setelan

» TAHAP 2
1. Masuk ke Template » Edit HTML Expand Template Widget
2. Letakan kode CSS berikut 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;
} 

3. 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;'/> 

Untuk mudah menemukannya cari saja kode  <!-- (4) Show snippets and thumbnails --> Lalu ganti semua kode tersebut dengan kode berikut 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/AVvXsEgoa7PnHyfk-cl0wQWCdIwBPeO_e9TsrayYfv3yN-jVSpggO8ZXpYQTuGFedvwinQMxelsIaBYMbDk_JpFtiU224pUCXkWPRJMTRNpLpYo6VuhgBVatsBgXeaBPsyLfvz5MIrkM2vt920Lr/'/>
    </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;'/>   

4. Simpan Template dan Lihat hasilnya..

//Pengaturan
Jika anda ingin menghilangkan ringkasan posting pada widget popular posts, tambahkan kode berikut ini:
.item-snippet { display:none }

Url ini: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoa7PnHyfk-cl0wQWCdIwBPeO_e9TsrayYfv3yN-jVSpggO8ZXpYQTuGFedvwinQMxelsIaBYMbDk_JpFtiU224pUCXkWPRJMTRNpLpYo6VuhgBVatsBgXeaBPsyLfvz5MIrkM2vt920Lr/
merupakan gambar yang tampil jika artikel tidak memiliki gambar, silahkan ganti denagn url gambar anda.
Sisanya silahkan anda sesuaikan sendiri.

Demikian posting tentang Modifikasi Widget Popular Posts Stylish dengan CSS, selamat berkreasi dan semoga bermanfaat.

Resource: http://mdf-blog.blogspot.com/2013/04/modifikasi-widget-popular-posts-stylish.html