Pages

Tutorial, Tips n Trick

Kamis, 21 Oktober 2010

Membuat Scroll Down Pada Archive Blog


Membuat scroll down memang sudah pernah saya bahas di posting sebelumnya tentang memasang menu scroll down. tapi sekarang yang akan saya bahas adalah memasang scroll pada archive blog. kalau memasang scroll pada widget java script mungkin mudah karena tinggal copy paste sript pembuka di atas sendiri dan meletakkan script penutup diakhirnya. tapi jika yang di beri scroll adalah widget bawaan blogger maka membutuhkan sedikit trik khusus.

Seberapa pentingkah scroll pada archive blog ? kalau menurut blogger newbie manfaat dari scroll down itu sendiri adalah menghemat tempat. jadi sidebar blog kita terlihat lebih rapi. untuk contoh perbandingannya seperti gambar dibawah ini.

Archive Blog (memakai scroll)

Archive Blog (tanpa scroll)


Tertarik untuk membuatnya ?? ikuti langkah - langkah berikut :
  1. Masuk ke Acount Blogger atau Dashboard
  2. Pilih Layout , lalu klik Edit HTML
  3. Centang Expand Widget Templates
  4. Cari kode <div id='ArchiveList'> (pakai Ctrl + F untuk lebih mudahnya)
  5. Tambahkan kode bercetak tebal seperti dibawah ini (hasil jadi penempatan script seperti dibawah ini)

    <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <div style='overflow:auto; width:ancho; height:250px;'>
    <div id='ArchiveList'>
    <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
    <b:if cond='data:style == &quot;HIERARCHY&quot;'>
    <b:include data='data' name='interval'/>
    </b:if>
    <b:if cond='data:style == &quot;FLAT&quot;'>
    <b:include data='data' name='flat'/>
    </b:if>
    <b:if cond='data:style == &quot;MENU&quot;'>
    <b:include data='data' name='menu'/>
    </b:if>
    </div>
    </div>
    </div>
    <b:include name='quickedit'/>
    </div>
  6. Angka 250px (tinggi kotak scroll) bisa kamu ganti sesuai selera
  7. Klik Simpan template

Selamat Mencoba
Share this post
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

0 komentar

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
Posts RSSComments RSSBack to top
© 2011 BLOGGER TUTORIALS ∙ Designed by BlogThietKe
Released under Creative Commons 3.0 CC BY-NC 3.0