Cara Membuat Entri Populer Bergerak

Cara Membuat Entri Populer Bergerak ke atas atau kebawah secara otomatis.

Ikuti langkah-langkah dibawah ini.

1. Login ke blog, dari halaman dasbor pilih pengaturan Template.
2. Klik Edit HTML, lalu cari kode  <div class='widget-content popular-posts'>
3. Selanjutnya Copy kode berikut dan tempatkan di Sebelahnya.
<marquee direction='down' height='200' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='100' width='auto'>
4. Langkah selanjutnya, masukan kode </marquee> di akhir rangkaian kode. Jadinya seperti ini.
</ul>
    <b:include name='quickedit'/></marquee>
  </div>
</b:includable>
  </b:widget>
5. Susunan Kode lengkapnya.
<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'><marquee direction='down' height='200' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='100' width='auto'>
    <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='' 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'/--></marquee>
  </div>
</b:includable>
  </b:widget>
6. Save Template Selesai.

Keterangan kode:

• marquee direction='down' arah gerakan, bisa diganti dengan up, left, atau right.
• height='200' tinggi dan width='auto' untuk mengatur tinggi lebar widget entri pupoler yang akan ditampilkan.
• scrollamount='2' scrolldelay='100' Waktu gerakan.
• Silakan ganti sesuai dengan yang kalian ingnkan.

Silakan baca juga artikel tentang cara membuat artikel berjalan di blog. Lanjutan kombinasi dari entri populer bergerak ini. Contohnya bisa dilihat DISINI, diblog saya satunya.

Semoga Bermanfaat.

Tweet