Cara Membuat Sidebar di Blog Bergerak

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 Labels (tag search) bergerak perlahan ke atas. Untuk itu pertama kita mestilah memasang widget Labels 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.Kemudian pilih Labels (bisa diganti dengan tag search)

Sesudah widget tersebut berhasil dipasang

4. Selanjutnya masuk ke edit HTML lalu centang pada expand template widget, kemudian cari kode seperti dibawah ini (tekan CTRL F di keyboard kemudian ketik tag search):

<b:section class='footer' id='footer' preferred='yes'>

<b:widget id='Label1' locked='false' title='Tag Search' type='Label'>

<b:includable id='main'>

<b:if cond='data:title'>

<h2><data:title/></h2>

</b:if>

<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>

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

<b:if cond='data:display == &quot;list&quot;'>

<ul>

<b:loop values='data:labels' var='label'>

<li>

<b:if cond='data:blog.url == data:label.url'>

<span expr:dir='data:blog.languageDirection'><data:label.name/></span>

<b:else/>

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>

</b:if>

<b:if cond='data:showFreqNumbers'>

<span dir='ltr'>(<data:label.count/>)</span>

</b:if>

</li>

</b:loop>

</ul>

<b:else/>

<b:loop values='data:labels' var='label'>

<span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>

<b:if cond='data:blog.url == data:label.url'>

<span expr:dir='data:blog.languageDirection'><data:label.name/></span>

<b:else/>

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>

</b:if>

<b:if cond='data:showFreqNumbers'>

<span class='label-count' dir='ltr'>(<data:label.count/>)</span>

</b:if>

</span>

</b:loop>

</b:if></marquee>

<b:include name='quickedit'/>

</div>

</b:includable>

</b:widget>

</b:section>

Letakkan kode berwarna merah pada posisi seperti diatas. Lalu kemudian simpan template anda.

Selamat Mencoba