Cara Membuat Entri Populer Dengan Animasi Berputar

Entri Populer adalah Entri atau postingan, tutorial atau apa aja terserah sobat menyebutnya apa !Intinya Entri Populer adalah Entri yang paling sering di baca oleh pengunjung, dan bila kita memasang Widget Entri Populer ini maka akan lebih bisa menarik perhatian pengunjung blog kita untuk membaca Entri Populer yang paling sering di baca pengunjung. Sayangnya untuk pemasangan Widget Entri Populer ini biasanya akan lebih menghabiskan tempat karna bentuknya yang memanjang ke bawah, sebelumnya Blog Oto Website pernah membahas tentang : Cara Membuat Entri Populer Dengan Fungsi Scroll dan Membuat Entri Populer Tampil Lebih Menarik.
Untuk kali ini masih tentang Entri Populer ya itu : Cara Membuat Entri Populer Dengan Animasi Berputar, maksudnya adalah widget atau gambar Entri Populer sobat akan berputar bila cursor mendekatinya, dan Widget Entri Populer juga tidak akan menghabiskan banyak tempat.

Untuk contohnya sobat bisa lihat gambar di atas. sekarang mari kita bahas Cara Membuat Entri Populer Dengan Animasi Berputar di Blogger sobat.

1. Masuk ke akun blogger sobat.

2. Pada Dasbor klick Rancangan ➨ Tambah Gadget (di bagian manapun sobat ingin widget ini muncul)

3. Lalu pilih Entri Populer ➨ Setting Entri Populer seperti gambar berikut, lalu simpan.

4. Selanjutnya pada menu klick Rancangan ➨ Edit HTML ➨ CentangExpand Template Widget.

5. Sekarang dalam Edit Template sobat cari kode ]]></b:skin> Jika kesulitan mencarinya coba baca Cara Cepat Mencari Kode HTML.

6. Bila sudah ketemu sekarang letakkan kode berikut ini di atas kode tadi.

.popular-posts .item-thumbnail{float:left;} .popular-posts ul{padding-left:30px;} .popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;} .popular-posts ul li img {padding:0px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-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.3) rotate(-360deg) ;-webkit-transform: scale(1.3) rotate(-360deg) ;-o-transform: scale(1.3) rotate(-360deg) ;-ms-transform: scale(1.2) rotate(-360deg) ;transform: scale(1.3) rotate(-360deg);}

6. Cara di atas sebenarnya sudah bisa lansung di Simpan dan Entri Populer sobat sudah bisa berputar, tapi bentuknya masih memanjang ke bawah. Jika ingin membentuknya seperti pada gambar di atas maka silahkan ikuti langkah selanjutnya.

7. Jika ingin membentuknya seperti pada gambar di atas, maka kita harus menghancurkan kode Widget Entri Populer.

Bukan menghancurkan sebenarnya lebih tepatnya adalah mengganti kode widget Entri Populer.

8. Untuk membentuknya seperti pada gambar di atas sobat cari kode : PopularPosts1

9. Setelah ketemu sobat perhatikan sampai kode </b:widget> ,lebih lengkapnya ini :

<b:widget id='PopularPosts1' locked='false' title='Entri Populer' 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 == "false"'>
          <b:if cond='data:showSnippets == "false"'>
            <!-- (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 == "false"'>
            <!-- (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' 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>
            <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>

10 .Lalu ganti atau hapus kode tersebut dan ganti dengan kode berikut :

<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 == "false"'> <b:if cond='data:showSnippets == "false"'> <!-- (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 == "false"'> <!-- (3) Show only thumbnails --> <div class='item-thumbnail-only'> <div class='item-thumbnail'> <a expr:href='data:post.href' expr:title='data:post.title'> <b:if cond='data:post.thumbnail'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> <b:else/> <img alt='' border='0' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHsdNUnYZBMXbI9T2kvXv7NKWKrv2idLbBPneFPsOax3QTWSNwaxKAZmE6YajLipMzUM8r-hhauGHD0J8PceBY3axpnbu0vY6wNITVa4VJPtqHPSEbKgPEE8u9C7vM2wmqSAgZXdw3lzI/s1600/otowebsite.jpg'/> </b:if> </a> </div> </div> <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>

11. Simpan Template.

Sekarang sobat bisa lihat sendiri hasilnya dan coba arahkn cursor ke widget Entri Populer.

Saya rasa cukup untuk kali ini !

Bagaimana apakah sobat berhasil menerapkannya di blogger sobat? silahkan tinggalkan tanggapan atau komentar sobat tentang postingan atau articles di atas!