Cara Membuat Artikel Yang Sering di Baca Berjalan Otomatis

"Entri Populer"  atau biasa disebut "Popular Entry" atau dalam bahasa kita disebut juga artikel yang sering dibaca oleh pengunjung terkadang terlihat monoton dan kurang menarik bagi seorang pengunjung untuk membukanya. Untuk itu kita akan membuat widget artikel yang sering dibaca tersebut bisa 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 (yang sudah jadinya)

<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.


Sumber:
http://pengguna-komputer.blogspot.co.id/2013/09/cara-membuat-entri-populer-bergerak.html

Semoga bermanfaat,
Ded Lee

Artikel Lainnya