Animated Swinging Skull
Selamat Datang Di Blog Hadzone Comunity

Selasa, 11 Maret 2014

Cara Membuat Entri Populer Bergerak di Blog Anda

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.
  4. <marquee direction='down' height='200' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='100' width='auto'>
  5. Langkah selanjutnya, masukan kode </marquee> di akhir rangkaian kode. Jadinya seperti ini.
  6. </ul>
        <b:include name='quickedit'/></marquee>
      </div>
    </b:includable>
      </b:widget>
  7. Susunan Kode lengkapnya.
  8. <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>
  9. 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 inginkan.

Sumber: TKP
NB : Hargai Karya Orang Lain Dengan Cara Menuliskan Nama Sumbernya :)

Tidak ada komentar:

Posting Komentar

 

Welcome Hadzone Comunity

Terima Kasih karena anda telah mengunjungi Blog ini

Silahkan Login

Tutorial Blog

Member Login

Lost your password?

Not a member yet? Sign Up!