Lompat ke konten Lompat ke sidebar Lompat ke footer

Membuat Scroll Pada Blog Archive (Arsip Blog)

Membuat Scroll Pada Blog Archive (Arsip Blog)
Bulan lalu berapa tulisan yang sudah kamu posting? Coba deh, yang pasang widget Arsip Blog dilihat! Bulan lalu saya berhasil memposting 8 tulisan di blog ini. Dan kali ini kita akan belajar ngeblog lagi, yaitu membuat scroll untuk arsip blog. Jika tampilan drop down sih tidak terlalu bermasalah. Tapi jika memilih tampilan herarki yang mempunyai kelebihan bisa menampilkan jumlah tulisan perbulan dan judul akan sedikit membuat blog terlihat kurang rapi. Iya kalau kita rutin mengupdate blog, kan sebagian blogger dan saya tidak pasti rajinnya mengurus blog.

Dengan membuat scroll pada arsip blog, akan membuat panjang sidebar ke bawah tetap. Walau pada bulan tertentu banyak postingan atau sedikit arsip blog yang tampilannya herarki akan terlihat rapi dengan adanya scroll. Jika kita sudah menambahkan widget arsip blog dengan model herarki, langsung saja lakukan langkah selanjutnya.

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.

110 komentar untuk "Membuat Scroll Pada Blog Archive (Arsip Blog)"

  1. Mantef blognya...aku suka nih...slm knl gann...hehee

    BalasHapus
  2. keren syg gw males buka computer enak pake hp irit hehe keringan edit Html pengaruh jg ke blog

    BalasHapus
  3. nah ini yg mau q cari guns...
    nti akan q k coba d blog q,,smoga aja bs,,
    o y guns ,q pnya pertanyaan : kok widget alexa rank q brtanda NO DATA...?
    tlong jwabany guns...

    BalasHapus
  4. ikut nyimak gan,, untuk nambah2 ilmu

    BalasHapus
  5. info yang bagus... :-)
    silakan kunjungi blog kami... :-)
    http://hayubeautifulhandicraft.blogspot.com

    (HAYU beautiful handicraft)

    BalasHapus
  6. mantap gan ane coba nyimak
    jangan lupa mampir ya gan..ke blog ku http://fathurbook43.blogspot.com/

    BalasHapus
  7. bagus nih bisa membuat tampilan blog menjadi lebih simple.

    BalasHapus
  8. kok saya sudah coba tapi gak bisa ya ..?
    bales ya gan ..

    BalasHapus
  9. makasih banyak gan ini sangat membantu saya,.. yang baru belajar ngeblog

    BalasHapus
  10. mantap gan...numpang nyedot kalo cocok terusin dah... http://pencenk-estry.blogspot.com ngintip gratis...

    BalasHapus
  11. nach klu buat scrool pada "isi post blognya dibuat scrool" gimana, apakah metode diatas berlaku ???

    BalasHapus
  12. oke sob ane test drive dulu triknya...lain waktu ane update lagi infonya alias berguru.com...salam kenal n sukses selalu.thanks

    BalasHapus
  13. Blog yang keren... banyak info2 mantaf...
    terus berkarya:)]

    BalasHapus
  14. Info yang sangat membantu gan. . .thanks bgt y. .
    mampir donk k blog ane http://informersejati.blogspot.com

    BalasHapus
  15. gan klo pas di klik misalnya postingan bulan november gt kan,,,,nah supaya gag ngeload gt gmna caranya????

    maksdunya klo kita klik november gt,,,nanti yang muncul judul2 postingan bulan november doank,,,,

    BalasHapus
  16. nice share gan :D btw blog agan udah ane follow, follow back yah :P

    http://etincs.blogspot.com/

    BalasHapus
  17. sangat bermanfaat sekali untuk saya :) cara ini berhasil sudah saya coba

    BalasHapus
  18. Thanks for This Great Tips

    BalasHapus
  19. thanks infonya,,,,jgn lupa jga main-main bentar di blog aku ya,,,

    BalasHapus
  20. heeyy..
    it's works....
    thanks for your nice information..

    BalasHapus
  21. sip.. ternyata mudah sekali editnya :)

    BalasHapus
  22. terimakasih untuk semua komentarnya :X

    BalasHapus
  23. Oke oke oke
    Sangat berfungsi bgt untuk menghemat tempat. :X

    BalasHapus
  24. saya sudah lama pasang cara ini tapi sekarang kyknya pengen dihapus saja deh..

    BalasHapus
  25. keren sobat.. mantabs.. saya suka cara postingnya.. ;))

    BalasHapus
  26. mantafffff bro BISA MAKASIH YA

    BalasHapus
  27. pertamax gan ;),, kalau buat scrool untuk semua gadget gimana ya ??

    BalasHapus
  28. mantaf gan tutorialnya berhasil, ayo liat hasilnya di blog ane. makasih :)

    BalasHapus
  29. sip gan...
    thx infonya..bermanfaat bngettttt
    kunjungi blog Q jga browww :)

    BalasHapus
  30. thnks bro, udah aku pasangkan di blog aku.. salam kenal ya

    BalasHapus
  31. Thnx gan, ditunggu follbacknya jika berkenan...

    Salam
    http://nurrohmattriatmojo.blogspot.com/

    BalasHapus
  32. Makasih,, artikelnya super sekali :D
    kunjungi saya :D

    BalasHapus
  33. mas untuk yang blogroll widget ada gk ?
    klo ada tlong kasih tau ke :
    AFEEF TKJ BLOG soalnya mau buat blogroll banyak :)

    BalasHapus
  34. nice info gan.. mampir ke blog ane ye... :)

    BalasHapus
  35. maksudnya bikin scroll kok ribet amatan ya perasaan tinggal klik aja settinga archivenya terus tinngal pilih scroll nya aja ga usah copy paste gitu

    BalasHapus
  36. Thanks Informasinya gan salam Kenal
    www.robbyyuliendra.com

    BalasHapus
  37. nice info gan :)

    salam :
    damonwebster.blogspot.com

    BalasHapus
  38. ijin copas gan... boleh juga ne tricknya

    BalasHapus
  39. makasih gan atas ilmunya...

    BalasHapus
  40. makasih gan...mampir ke blog aku juga ya teman kali ajha butuh tiket;;)

    BalasHapus
  41. Makasih, Om, sudah di coba dan sukses :)

    BalasHapus
  42. bagus ,dah saya coba dan berhasil ,menu artikel jadi ringkest tidak malurmalur kaya uler,mkasih gan

    BalasHapus
  43. Makasih infonya Gan.. Salam kenal..

    BalasHapus
  44. keren gan,,,

    jangan lupa yah kunjungan balik nha..

    BalasHapus
  45. thenkyu sob infoNya..
    salam blogger n salam kenal
    mampir ya sob, kungjung balik untuk memberi efek pada blog sobat,,,

    http://indra-combination.blogspot.com/search/label/EFFECT%20BLOG

    BalasHapus
  46. Nahhhhh ini dia yang kita cari...!!!!!!!!! udach di coba gan dan berhasil...!!!! =)) =))

    BalasHapus
  47. tips yang bagus sob,,,kalo diterapkan ya mantap buat blog yg archivenya udah banyak postingan di bulan ini

    BalasHapus
  48. thx infonya gan

    BalasHapus
  49. thanks buat infonya gan!

    kunjungi juga ya..
    http://separateseye.blogspot.com/

    BalasHapus
  50. tanks gan....
    kunjungi ya
    www.indowebku.com

    BalasHapus
  51. Keren gannnn tipsnya,,,

    Kunjungan sesama bloggerrrr

    http://blogsfiw.blogspot.com

    BalasHapus
  52. kurang panjang tuhhh... artikelnya.

    bermanfaat x_x. blogsemuatrik.blogspot.com

    yukkk kunjungi blog saya.... ^ ^. :D.

    BalasHapus
  53. yahud... banget gan artikelnya...

    sy mau tanya gpp kan gan ??:p

    kalau mau membuat emoticon kayak gitu gimana caranya yah..?:-o mohon caranya yah ;)

    blogsemuatrik.blogspot.com kunjungi yah...

    BalasHapus
  54. makasihgan sekarang archiv blogsaya sudah tidak panjaaang lagi, sip sip

    BalasHapus
  55. sip gan artikelnya memang bagus dan bermanfaat

    BalasHapus
  56. Mudah dan sudah berhasil saya praktekkan.

    Thank's

    BalasHapus
  57. thanks sudah berbagi ilmunya, sukses selalu....

    BalasHapus
  58. makasi infonya mas, dan oh ya klo ada teman2 yg suka film horor terbaru, aku ada blognya nie, silakan dikunjungi krn dijamin tidak menyesal krn filmnya seru2 dan bisa didownload lagi loe, mkasi mas

    BalasHapus
  59. artikel yang bagus gan!!

    kunjungi juga blog saya : www.rolandjak23.blogspot.com

    BalasHapus
  60. Makasih gan infonya tentang Membuat Scroll Pada Blog Archive (Arsip Blog), sangat bermanfaat dan berhasil di blog saya.

    BalasHapus
  61. terimakasih om infonya,,,, sekarang udah bisa.

    BalasHapus
  62. makasih banyak
    sangat membantu ^^

    BalasHapus
  63. info yg sangat bemanfaat bagi blog saya,,,, saya harap agan mau berkunjung ke blog saya www.ankurniawan.blogspot.com dan memberikan sedikit komentar Terima kasih

    BalasHapus
  64. info yg sangat bemanfaat bagi blog saya

    BalasHapus
  65. BERHASIL gan !! Thanks

    BalasHapus
  66. Berhasil sob.Lumayan untuk menambah kecepatan loading di blog.

    BalasHapus
  67. ini yang saya cari buat blog saya galaktosa.blogspot.com dan hasilnya setelah dicoba ternyata...

    BalasHapus
  68. makasih banyak gan... bermanfaat bagnet nih :D

    BalasHapus
  69. mantab gan, membantu yang newbie kya ane

    BalasHapus
  70. oke, selesai..
    tenkyu bang :D

    BalasHapus
  71. Masalah selesai langsung deh. Jadi arsip blog saya bisa ada scroll nya :)

    BalasHapus
  72. mantap gan sangat membantu artikelnya..
    nice sharing

    BalasHapus
  73. Tankiyu banget gan buat berbaginya,ane akan coba diblog ane semoga jadi....

    BalasHapus
  74. alhamdulilah puyenga ane gan, hehehe
    thanks deh, nanti ane pelajari kembali
    http://samboedy.blogspot.com/

    BalasHapus
  75. wah makasih sob,, sering lupa caranya makasih byk

    mampir balik

    BalasHapus
  76. sipp sob ane udah bisa

    mampir

    BalasHapus
  77. :D :D :D terimakasih mantaab (y)
    mampir ke blog ana >> DP BBM WongJawaNgapak =))

    BalasHapus
  78. mantap gann,,,bisa dicoba nih. blog walkiing kesini yaaa...
    http://miftakhulhuda-a16.blogspot.com

    BalasHapus
  79. Mantap Gan ! :D
    http://microcyber2.blogspot.com/

    BalasHapus
  80. thank's gan

    mampit di blog ane juga yahh..

    kkn-hikmah.blogspot.com

    BalasHapus
  81. sipz
    http://giribig.com/
    http://www.duniagame.info/

    BalasHapus
  82. terima kasih gan ijin copas codenya... :D

    BalasHapus
  83. terima kasih ilmunya bermanfaat banget...

    BalasHapus
  84. mantabzz nih.. langsung terapkan...alhamdulilah berhasil di blog ku. terimaksih ilmunya sgt membantu.

    BalasHapus
  85. thanks ya sangat bermanfaat sekali buat ku

    BalasHapus

Berlangganan via Email