Cara Membuat Tampilan Popular Post Berjalan

Popular post atau istilah kerennya postingan yang terpopuler, seperti contoh popular post yang ada di sidebar blog saya ini. Bagaimana menarik bukan? Kalau kita cuma pakai yang standar maka tidak akan bergerak seperti itu, lalu membuatnya bagaimana? Caranya sangat mudah, pertama, tentu anda harus memasang gadget popular postnya terlebih dahulu, dengan klik rancangan - elemen laman - tambah gadget - tambahkan popular post/entri populer.
Kemudian anda masuk ke edit HTML, expand widgetnya dicentang,dan cari kode seperti 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'>

Kemudian, perhatikan 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>
<marquee align='left' direction='up' height='250' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
      <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='' 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>
     </marquee></ul>

*Kode yang berwarna MERAH adalah kode yang harus anda tambahkan.
*Pratinjau terlebih dahulu sebelum menyimpan template.

18 comments:

  1. Makasih banyak infonya....akhirnya popular post blog saya berjalan jg.

    ReplyDelete
    Replies
    1. Alhamdulillah ya gan.. :D thanks juga atas kunjungannya..

      Delete
  2. terima kasih infonya

    ReplyDelete
  3. nice post,,thnks ya atas infonya..
    di tunggu kunjungan baliknya...
    http://www.topsecretindonesia.com/

    ReplyDelete
  4. cakep gan kunjungi blog ane ye!!!
    http://samsunggalaxyyoung.blogspot.com/

    ReplyDelete
  5. Gan sekedar koreksi, yang kode merah belum ditutup .
    ^^

    ReplyDelete
  6. Keren juga nih tanpa js jadinya bisa meringankan loding blog... trims gan :)

    ReplyDelete
  7. ini nanti bisa masuk ke dalam tabbed tu gak mas??

    ReplyDelete
  8. makasih gan informasinya..
    bermanfaat

    ReplyDelete
  9. mencerahkan,,, kungjung balik ke http://mimbarazhar.blogspot.com/ semoga dapt pencerahan

    ReplyDelete
  10. trims sobat, sangat bermanfaat dan bekerja dengan baik di blog saya, mampir ya sob ke blog saya --> http://duniaperawatdankesehatan.blogspot.com/

    ReplyDelete
  11. thanks ya gan,sudah ane coba,apalagi ane baru newbie
    singgah ya gan
    http://pusatkabar.blogspot.com/

    ReplyDelete
  12. Terima kasih gan sudah berbagi ilmu,langsung diterapkan di blog ane.

    ReplyDelete
  13. Yes berhasil :D
    Thx ya ^^
    http://ucitz.blogspot.com/

    ReplyDelete
  14. Sip gan Makasih gan ane dah berhasil masangnya. Salam kenal gan dari Cah Tangerang.

    ReplyDelete