Cara Membuat Sidebar Bergerak Scrolling Ke Atas

SIang Sobat AIRSHARE14 ,

Ingin tahu cara membuat widget di sidebar bergerak ke atas, item scrolling satu persatu dan mengatur pergerakan kecepatan isi widget bisa dilakukan dengan mengedit sedikit kode javascriptnya. Cara ini bisa membuat tampilan iklan bergerak dinamis atau apapun yang ingin anda tampilkan bergerak bergantian satu persatu dari bawah menuju sisi atas kolom sidebar. Membuat sidebar bergerak ke atas akan mempercantik blog anda dan membuat promosi menjadi lebih hidup.

Kali ini kita membuat contoh sebuah Posting Paling Dicari (popular post) bergerak perlahan ke atas. Untuk itu pertama kita mestilah memasang widget popular post terlebih dahulu. Jika sudah dipasang ikuti trik ini hingga ke langkah 4.

Caranya :

1.Masuk ke Design-Page Elements





2.Kemudian pilih add a gadget




3.Ambil popular post




Sesudah widget tersebut berhasil dipasang

4.Seterus masuk ke desing template--edit HTMLlalu centang pada expand template widget

cari kode seperti dibawah 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'>
<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 berwarna merah bisa diatur seperti diatas. Lalu kemudian simpan template anda.
Kecepatan gerak bisa diubah pada scrollamount='3'.> dan nilai 1 adalah nilai untuk yang paling lambat.