Pada postingan sebelumnya saya pernah membahas cara "Modifikasi Widget Popular Posts Dengan Efek Tooltip" tutorial dari trollvl.com. 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". Ini adalah hasil modifikasi saya sendiri, disini saya hanya membungkus kode .item-snippet dan .item.title pada widget popular postnya dan menambahkan gambar default untuk artikel yang tidak memiliki gambar, karena blogger tidak menyediakan gambar default untuk artikel yang tidak memiliki gambar pada widget popular post tersebut, dan saya juga memberikan sedikit efek pada gambar sehingga jika gambar pada popular post tersorot oleh cursor maka gambar tersebut akan berputar dan sedikit membesar sehingga membuat widget popular post ini menjadi lebih tampan.. :D ya seperti gambar diatas. Ini sudah saya coba dan berhasil sempurna.
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 » Centang  Expand Template Widget
2. Letakka kode 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/AVvXsEicUc2Jy7w_nCbkvWrH0CX9ctW39IKkvRqqSDaLUi_wCxiwU7ZzxU-FTujaZFxIqnrwQwuosziT2QMJ3jQw_5TscJXNj-9IFzrV83Izk0jgBYcEH4SohNlFyiHTifbxfR7hHHXnYywn_i59/'/>
    </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 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicUc2Jy7w_nCbkvWrH0CX9ctW39IKkvRqqSDaLUi_wCxiwU7ZzxU-FTujaZFxIqnrwQwuosziT2QMJ3jQw_5TscJXNj-9IFzrV83Izk0jgBYcEH4SohNlFyiHTifbxfR7hHHXnYywn_i59/ 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.