Cara Membuat Entri Populer Dengan Animasi Berputar

Saat ini Poetra 86 akan membahas tentang Cara Membuat Entri Populer Dengan Animasi Berputar.
Bagi sobat yang pemula saya jelaskan !!!. Entri Populer adalah Entri atau postingan 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. Maksudnya dari animasi berputar adalah widget atau gambar Entri Populer sobat akan berputar bila cursor mendekatinya dan Widget Entri Populer juga tidak akan menghabiskan banyak tempat. Bentuknya seperti screenshot di bawah ini :

1. Yang Pertama Masuk ke akun blogger sobat.

2. Lalu Pada Dasbor klik Rancangan -> Tambah Gadget 

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

4. lalu pada menu klik Rancangan > Edit HTML > Centang  Expand Template Widget.

5. Sekarang dalam Edit Template sobat cari kode ]]></b:skin> dengan cara (ctrl-F)

6. Apabila  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);}

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 jelasnya liat di bawah 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/AVvXsEhXX9gCuRV316PF-HCZLdw9EcK621qYUcWOG2kWwEz14dqJooGFwdRGE4XPZtmpJNMOnnBUqAlV8H5S5_9pD9QNIMHV0JavBfCDoEilwqN2GzM4vYURPEJSwbmww1ImpGHZtjwlcIdRPN4/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.

Sobat bisa lihat sendiri hasilnya dan coba arahkan cursor ke widget Entri Populer yang sobat buat
Jangan lupa tinggalkan jejak seperti berkomentar Dll.