Trik Membuat Popular Posts Effects Spin

Trik Membuat Popular Posts Effects Spin

Dimana ada kemauan disitu ada jalan, seperti di hari ini ada kesempatan
Waktu luang,  untuk berbagi  tutorial yang  sederhana dan ringan,  tentang
Popular posts dengan effects  berputar,  dan sudah valid html 5, css3 jadi
Buat sobat yang berminat dengan widget ini, silahakan simak dibawah ini

Trik Membuat Popular Posts Effects Spin

Sebelum anda simak artikel  ini lebih lanjut,  sebelumnya  saya  publikasi  tentang
Menghapus Batas Tabel Gambar Postingan,   dan  pada  kali  ini saya akan share
Trik Membuat Popular Posts Effects Spin,   di  mana   widget   Popular  Posts  ini
Berperan penting pada artikel anda,  manakala  postingan tersebut yang sering  di
Kunjungi oleh pengunjung blog anda, jika di blog anda belum ada atau sudah ada
Dan ingin mencoba  Trik  popular post yang ini,  silahkan  berapresiasi  di sini sob

Cara memasangnya :

Masuk blog anda dan sign in, kemudian pilih dasboard dan pilih template
Lalu pilih edit template, selanjutnya anda cari kode ]]></b:skin> tekan
Ctrl + f untuk memudahkan pencarian anda, setelah ketemu kode yang
Anda cari copy kode di bawah ini dan paste tepat di atas kode ]]></b:skin>

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

Masih di edit html Kemudian Cari koode <b:section class='sidebar'
Atau lengkap cari kode nya seperti di bawah ini

<div id='sidebar-wrapper'>

          <div style='clear: both;'/>

          <b:section class='sidebar' id='sidebar' preferred='yes'>

Setelah ketemu copy kode di bawah ini dan pastekan tepat di bawah kode
<b:section class='sidebar' id='sidebar' preferred='yes'>

Di bawah ini kode yang harus anda copy :

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
              <b:includable id='main'>
  <b:if cond='data:title'><h3><data:title/></h3></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' target='_blank'>
                    <img alt='' 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='' 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>
  </div>
</b:includable>
            </b:widget>

Keterangan :

Setelah penempatan kode nya,  terpasang dengan benar,  silahkan klik save - simpan
Dan buka  blog anda,  dan cek popular  posts nya,  bekerja  dengan oftimal atau  tidak
Jika belum tampil di blog anda, silahkan baca kembali dengan seksama artikel diatas
Dan jika anda, ingin mengatur jumlah pos t yang tampil pada   popular posts  silahkan
Anda atur ulang menurut jumlah yang di inginkan,  dengan membuka halaman  layout
Pilih  tata letak  dan edit widget popular post,  silahkan  atur  jumlah posts atau  lainya
Menurut yang anda kehendaki, sekian semoga tutorial sederhana ini bisa bermanfaat