Cara Membuat Popular Post Berjalan

Add caption

Cobasanasini - 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.
 
  1. Berikutnya silahkan ke halaman Edit HTML dan jangan lupa untuk klik 'Expand Template Widget'
  2. Klik CTRL+F untuk mempermudah dan cari kode ini <div class='widget-content popular-posts'> 
  3. Setelah ketemu, masukkan kode ini tepat di bawah kode tersebut


<marquee align='left' direction='up' height='140' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='3' width='100%'>

4. Jangan lupa pula untuk menambahkan </marquee> sebelum </ul>
Dan secara keseluruhan akan nampak seperti ini :

<div class='widget-content popular-posts'>

<marquee align='left' direction='up' height='140' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='3' 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>

    <b:include name='quickedit'/></div>

  </div>

</b:includable>

</b:widget>

Kode yang berwarna hijau itu adalah kode yang kita cari tadi.
Sedangkan kode yang berwarna merah adalah kode yang kita tambahkan... :)

Oiyaa, sobat bisa merubah arah pergerakannya sesuka sobat lhooh. Sobat tinggal ganti aja directionnya menjadi "UP" atau "DOWN".
Dan untuk mengatur tinggi tampilan scroller-nya, sobat bisa merubah ukurannya di bagian 'height'.


Selamat Mencoba
Demonya ada disamping!

1 Coment :