Modifikasi | Widget Popular Posts Stylish | dengan CSS

Untuk kesempatan kali ini Miev akan share cara modifikasi popular post dengan css yang keren,yaitu "Modifikasi Widget Popular Posts Stylish dengan CSS". Ini adalah hasil modifikasi blog teman sendiri, disini Miev 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 Miev 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 keren seperti gambar diatas. Ini sudah Miev coba dan berhasil sempurna.

Berikut cara Modifikasi Widget Popular Posts Stylish dengan CSS
» TAHAP 1
1. Login akun blogger sobatMiev
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/AVvXsEgHgbLdPgSVnQv0Hw2ECDfjz2FL59E1tNaYvvDDjtgD1hTTtz-xWl18lIHzn-9kyouP6H_TStBmkkE_OezISJ5BzJ9PObNPekvb489w_n_OvrVEPW5CccQN9oLacigLN1Orj3cwVnGGqt3f//'/>
        </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 sobatMiev ingin menghilangkan ringkasan posting pada widget popular posts, tambahkan kode berikut ini

    .item-snippet { display:none }

Url https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHgbLdPgSVnQv0Hw2ECDfjz2FL59E1tNaYvvDDjtgD1hTTtz-xWl18lIHzn-9kyouP6H_TStBmkkE_OezISJ5BzJ9PObNPekvb489w_n_OvrVEPW5CccQN9oLacigLN1Orj3cwVnGGqt3f// merupakan gambar yang tampil jika artikel tidak memiliki gambar, silahkan ganti denagn url gambar sobatMiev.
Sisanya silahkan sobatMiev sesuaikan sendiri.

Semoga Artikel ini bermanfaat untuk sobatMiev

Contact : Facebook : softmiev Twitter      : softmiev Email        : softmiev@yahoo.co.id Invite        : 29ecodcc Jangan Lupa Komentar yah !!!

.

Posted in: Tutorial Blog