Cara Membuat Popular Post / Entri Populer dengan Fungsi Scroll

Cara Membuat Popular Post / Entri Populer dengan Fungsi Scroll - Setelah sekian lama tidak membahas mengenai Trik Blogger, kali ini saya akan coba share mengenai Cara Membuat Popular Post / Entri Populer dengan Fungsi Scroll.

Popular post / Entri Populer ini akan menampilkan posting-posting suatu blog yang populer berdasarkan pageviewnya. Pada umumnya tampilan popular post ditampilkan banyak sampai menghabiskan tempat sidebar, nah.. untuk membuat blog lebih cantik kita bisa pasang scroll pada popular post agar lebih simple dan rapi juga bisa menampilkan jumlah popular post dengan jumlah yang dan menghemat ruang sidebar blog kita.

Gambar dibawah merupakan contoh dari tampilan Popular Post tersebut, untuk mengetahui caranya bisa langsung dilihat dibawah.. terimakasih..

1. Login ke Blog
2. Masuk menu Template
3. Edit HTML

4. Cari kode seperti ini,

<b:if cond='data:title'><h2><data:title/></h2></b:if>

Susunan kodenya seperti ini

<b:widget id='PopularPosts1' locked='false' title='Populer' type='PopularPosts'>
            <b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
              <div style='overflow:auto; width:ancho;height:250px;'>
  <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></div>
</b:includable>
</b:widget>

5. Lalu letakkan kode berikut dibawah kode tersebut

<div style='overflow:auto; width:ancho;height:250px;'>

6. Tambahkan </div> sebelum </b:includable>

Judul: Cara Membuat Popular Post / Entri Populer dengan Fungsi Scroll
Rating: 100% based on 99998 ratings. 34 user reviews.
Ditulis Oleh Adincuih