Cara Merubah Tampilan Widget Popular Post [Efek Zooming]

Selamat datang kembali di Demo IdBoegis, Blog yang membahas seputar Tips Adsense, Tips Komputer, Tutorial Blog, SSH Gratis, Tips Youtube, Tips Smartphone dan informasi internet lainnya.

Pada Artikel kali ini kita akan membahas Cara Merubah Tampilan Widget Popular Post [Efek Zooming], Postingan ini masih berhubungan dengan Artikel Tutorial Blog. Artikel Widget.

Baca juga:

Cara Merubah Tampilan Widget Popular Post [Efek Zooming]

Advertisement

Modifikasi dan mengubah tampilan popular post blogspot - Halo sobat siabdi, pada artikel sebelumnya saya sudah membagikan tutorial mengenai cara menyembunyikan postingan terakhir di halaman depan blog, dan pada kesempatan kali ini saya akan membagikan tutorial mengenai cara merubah tampilan widget popular post dengan efek zooming. Pada dasarnya widget ini bekerja seperti biasanya, yakni menampilkan postingan terpopuler yang terdapat di blog milik sobat, hanya saja yang berbeda yakni tampilannya. Dimana secara umum widget ini tampak biasa saja dengan menampilkan judul, ringkasan dan juga gambar thumbnail.

Namun tutorial yang akan saya bagikan kali ini akan membuat tampilan popular post milik sobat akan menjadi sedikit berbeda dari tampilan popular post pada umumnya, dimana tampilan popular post yang akan saya bagikan ini hanya menampilkan gambar serta nomor urut, dan ketika gambar di sentuh dengan cursor mouse gambar popular akan menimbulkan efek zooming pada gambar dan di sertai judul di dalamnya. Bagi sobat yang penasaran silahkan perhatikan link live demonya. Bagi sobat yang tertarik ingin menggunakannya silahkan ikuti tutorial di bawah ini.

Link Demo Disini

Catatan : Widget popular post sebelumnya harus sudah terpasang di halaman blog milik sobat.

Modifikasi Tampilan Widget Popular Post

1. Pertama, silahkan sobat masuk ke blog milik sobat masing-masing.
2. Selanjutnya, silahkan buka template editor.
3. Kemudian, silahkan cari kode CSS .PopularPosts gunakan kombinasi CTRL+F untuk mempermudah pencarian.

4. Apabila kode CSS di atas telah sobat temukan, selanjutnya silahkan sobat hapus semua sourche kodenya dan silahkan ganti dengan kode di bawah ini.

.PopularPosts .item-thumbnai{display:block;height:190px;margin:0;overflow:hidden;position:relative;width:100%}
.PopularPosts .item-thumbnail{float:none;margin:0 0 10px}
.PopularPosts .item-title{background:rgba(0,0,0,0.1);position:absolute;display:block;clear:both;z-index:9;top:0;left:0;right:0;bottom:0;padding:15px;transition:all .4s;}
.PopularPosts .item-title:hover{background:rgba(0,0,0,0)}
.PopularPosts .item-title a{color:rgba(255,255,255,0);font-weight:700;font-size:120%;text-shadow:0 0 5px rgba(0,0,0,0)}
.PopularPosts .item-title:hover a,.PopularPosts .item-title a:hover{color:rgba(255,255,255,1);text-shadow:0 0 5px rgba(0,0,0,.3)}
.PopularPosts .widget-content ul li img{translate(0,0) scale(1.0);transition:all .8s linear}
.PopularPosts .widget-content ul li:hover img{transform:translate(0,-20px) scale(1.05);transition:all 3.6s linear;}
.PopularPosts img{display:block;height:auto;width:100%;padding:0;backface-visibility:hidden;}
.PopularPosts .item-snippet{display:none;}
.PopularPosts ul li .item-content{position:relative;overflow:hidden;}
.PopularPosts ul{padding:0;line-height:normal;counter-reset:count;}
.PopularPosts .widget-content ul li{position:relative;padding:10px 0;overflow:hidden;max-height:100px;transition:all .4s;}
.PopularPosts .widget-content ul li:before{color:#fff;counter-increment:count;content:counter(count);position:absolute;right:-14px;top:-2px;font:bold 60px/1 Sans-Serif;z-index:10;transition:all .4s;}
.PopularPosts .widget-content ul li:hover:before{right:-55px;}

5. Setelah langkah nomor 4 sobat terapkan, kemudian cari kode id widget PopularPosts1. Biasanya akan nampak seperti gambar di bawah ini.

Silahkan hapus semua kode <b:widget......></widget> dan silahkan ganti dengan kode di bawah ini.

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
            <b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href'>
                    <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>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (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;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
          </b:widget>

6. Selanjutnya silahkan simpan template dan lihat hasilnya.

Setelah berhasil memodifikasi widget popular postsnya, selanjutnya perhatikan gambar thumbnailnya, apabila gambar tersebut nampak buram atau kabur, silahkan tambahkan kode di bawah ini setelah tag penutup </b:section> pada widget popular post.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script>
//<![CDATA[
function resizeThumb(parentID, size) {
    var parent = document.getElementById(parentID),
        image = parent.getElementsByTagName('img');
    for (var i = 0; i < image.length; i++) {
        image[i].src = image[i].src.replace(/\/s72\-c/, "/s" + size + "-c");
        image[i].width = size;
        image[i].height = size;
    }
} resizeThumb('Blog1', 300);
//]]>
    </script>
  </b:if>
</b:if>
</b:if>
<div class='clear'/>

Sehingga setelah terjadinya penambahan kode di atas akan tampak seperti di bawah ini.

Demikian tutorial kali ini megenai cara merubah dan memodifikasi tampilan widget popular posts dengan efek zooming thumbnail. Apabila sobat masih memiliki pertanyaan atau kesulitan dalam menerapkan tutorial di atas, Silahkan tinggalkan komentar sobat pada kotak komentar. Selamat mencoba :)