24 October 2011

Cara Membuat Scroll Pada Blog Archive



Bagi kalian yang udah ngeblog bertahun - tahun lalu terus di blognya ada widget archivenya, pasti akan muncul sangat panjang kebawah bila di pilih.

Nah, dengan ini kita bisa ngebuat scroll pada archive kita. Jadi hemat tempat deh. Bagi yang suka hemat - hemat bisa dicoba lah ini. Kalo demen yang boros - boros yaaaa, buat pengetahuan aja broo :D

Moongggooooo.. . . .. . ...


Cara Membuat Scroll Pada Blog Archive (Arsip Blog)
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode berikut


<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>

6. Kode lengkapnya adalah seperti ini

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:200px;'>
<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>
</b:includable>
<b:includable id='flat' var='data'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<ul>
<li expr:class='&quot;archivedate &quot; + data:i.expclass'>
<b:include data='i' name='toggle'/>
<a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
<span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</li>
</ul>
</b:loop>
</b:includable>
<b:includable id='toggle' var='interval'>
<b:if cond='data:interval.toggleId'>
<b:if cond='data:interval.expclass == &quot;expanded&quot;'>
<a class='toggle' expr:href='data:widget.actionUrl + &quot;&amp;action=toggle&quot; + &quot;&amp;dir=close&amp;toggle=&quot; + data:interval.toggleId + &quot;&amp;toggleopen=&quot; + data:toggleopen'>
<span class='zippy toggle-open'>&#9660; </span>
</a>
<b:else/>
<a class='toggle' expr:href='data:widget.actionUrl + &quot;&amp;action=toggle&quot; + &quot;&amp;dir=open&amp;toggle=&quot; + data:interval.toggleId + &quot;&amp;toggleopen=&quot; + data:toggleopen'>
<span class='zippy'>
<b:if cond='data:blog.languageDirection == &quot;rtl&quot;'>
&#9668;
<b:else/>
&#9658;
</b:if>
</span>
</a>
</b:if>
</b:if>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</ul>
</b:includable>
</b:widget>

7. Kode warna merah dan hijau adalah kode yang ditambahkan kedalam script tersebut, 200 adalah tingginya, dan kita bisa ubah seseuai selera.

 8. Simpan jika sudah selesai.

Sumber: http://kurniasepta.blogspot.com/2011/10/membuat-scroll-pada-blog-archive-arsip.html

59 comments:

  1. makasih
    udah dicoba hasil memuaskan

    ReplyDelete
  2. Thx infonya, n sdh saya coba.
    Succes full

    ReplyDelete
  3. @all: sama sama :) senang berbagi

    ReplyDelete
  4. bang.kalau scrol cuma untuk script biasa gmana>>??

    ReplyDelete
  5. bang kalo scrol di postingan gimana ya?

    ReplyDelete
  6. .ka' kok template saya g' ada kode kya gtu?

    ReplyDelete
  7. @nsr: y udh pasang aja di templatenya

    ReplyDelete
  8. mantep gan...
    thx beudh infonyaaa...

    ReplyDelete
  9. ditaruhnya di atas atau dibawah kode gan?

    ReplyDelete
  10. sukses,,,klo ada waktu silahkan mampir dlo di blog saya ,,thanks..!!!

    ReplyDelete
  11. aku kok gak dapet kode yg kyak gitu yaaaah???

    ReplyDelete
  12. @Love.viiyt: coba cari lebih teliti

    ReplyDelete
  13. aku nggak letemu sih cari kode kaya gitu :(

    ReplyDelete
  14. wah, berhasil gan !!
    thanks informasinya

    ReplyDelete
  15. wah makasih banyak gan infonya... klo boleh.. tukeran link dong.. ini link blog saya..
    http://bekompas.blogspot.com/ trimakasih

    ReplyDelete
  16. mantap gan caranya...jgn lupa kunjungan balik ea...
    http://anomali-dunia.blogspot.com/

    ReplyDelete
  17. saya kok gg ketemu ama kode itu?
    saya gagal ni

    ReplyDelete
  18. @Ayie: cba cri lbih tliti lgi, yg lain aj bisa :D

    ReplyDelete
  19. Skedar info aja gan.. Klo susah pke Ctrl+F (Pas sudah masuk ke edit HTML nya), dah Ctrl+F baru cari code di box knan atas..
    Klo bisa mampir yya.. xD http://nice-search.blogspot.com/

    ReplyDelete
  20. it works!!, thanks infonya :)

    ReplyDelete
  21. Bos ternyata berhasil ....mator nuwun.

    ReplyDelete
  22. Thanks gan....

    kunjungi punya saya ya..
    di http://onesimusaugustpasaribu.blogspot.com/

    salam... :) :)

    ReplyDelete
  23. nice share gan..
    kalo utk ganti warna fontnya gmn ya??
    mohon pencerhaannya dong...
    maklum pemula nih..

    ReplyDelete
  24. Sempurna gan...
    Oiya..
    Blog Agan Sudah Ane Follow..
    Di Follback blog gw ya..
    www.rcyshared.blogspot.com

    Thank's Gan Atas tutornya.. ^_^

    ReplyDelete
  25. Terima kasih sekali sharenya... udah saya coba dan sukses, hasilnya bisa liat di blog saya, tengok yaa http://www.deebacalah.blogspot.com/

    sekali lagi terima kasiiihh >_<

    ReplyDelete
  26. HAdir siang,belajar dan menyimak.
    Nampaknya bila tak pake scroll,blog archive akan begitu panjang.Tips yang sangat bermanfaat,maksih sop ya,salam kenal.

    ReplyDelete
  27. ok...gan or gin,'''
    izin bookmarks tar lo ada waktu saya terapin deh
    indah banget jika kita saling berbagi,berbahagialah selalu
    mampir juga ya di


    http://mediaonlen.blogspot.com

    ReplyDelete
  28. makasih gan infonya sangat bermanfaat

    ReplyDelete
  29. blog saya semakin rapi mas kalo diberi scroll.
    dan saya baru tahu kalo itu namnya scroll hehehe

    ReplyDelete
  30. trus klo udah ketemu tembel di muka kita gan...kok saya bingung

    ReplyDelete
  31. berhasil bang makasi bang atas tuotrnya

    ReplyDelete
  32. blog saya jadirapi..berhasil gan..makasih bgt gan..

    ReplyDelete
  33. Makasih gan caranya moga sukses selalu..

    ReplyDelete
  34. mantappp...udah berhasil gan...maksihhh

    ReplyDelete
  35. Makasih sobat infonya, sudah saya terapkan pada blog saya ;)

    ReplyDelete
  36. tengkyu gan..
    akhirnya blog ane (click-ganda.blogspot.com) jdi agak sedikit rapi

    ReplyDelete
  37. thanks my brada, kunjungi juga http://radiobamana.blogspot.com/

    ReplyDelete
  38. Kok gag bisa gan padahal ane udah pas dan benar naruhnya ???

    Klo di simpan dan di pratinjau error muncul tulisan merah kayak gimana gitu,, mohon solusinya !!!

    ReplyDelete
    Replies
    1. coba cek lagi gan :)

      yang lain aja bisa kok...

      Delete
  39. itu di ganti atau di kopi di bawahnya gan..

    ReplyDelete
  40. Hatur nuhun juragan parantos tiasa, kalau ada waktu jangan ragu kunjungi blog saya juragan :)
    http://karyakuringharatis.blogspot.com/

    ReplyDelete
  41. Mantab mas, berhasil digunakan dengan baik..

    ReplyDelete
  42. Makasih sobat infonya, sudah saya terapkan pada blog saya.

    ReplyDelete
  43. thanks infonya sangat membantu
    kunjungi juga punya saya http://arif-net.blogspot.com/

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...