Senin, 06 April 2009

Membuat Arsip Blog Fungsi Scroll

Mungkin ini yang dimaksud oleh katobengke tentang blogroll kecil. Arsip blog fungsi scroll itu dapat kita lihat pada blog saya. Untuk membuat arsip blog memiliki fungsi scroll sangat mudah, untuk membuatnya silahkan ikuti langkah-langkah berikut :

Membuat Arsip Blog Fungsi Scroll
  • Masuk ke blogger
  • Klik Tata Letak
  • Klik Elemen Halaman
  • Tambahkan sebuah elemen halaman=> Tambah elemen Arsip Blog
  • Tapi kawan harus pilih gaya Hierark
Itu belum berfungsi scroll, untuk membuatnya memiliki fungsi scroll ikuti langkah-langkahnya lagi !
  • Setelah itu, klik Edit Html
  • Beri tanda centang pada tulisan Expand Widget Template
  • Kawan cari kode seperti ini

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

Kawan akan menemukan kode lengkapnya 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:100px;'>
<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>


Kode warna merah dan hijau adalah kode yang ditambahkan kedalam script tersebut
Kode warna hijau yang dicetak tebal adalah tinggi dari elemen tadi, silahkan kawan ganti agar sesuai dengan blog kawan

Lalu jangan lupa untuk menyimpannya=> Klik Simpan

Coba kawan lihat hasilnya... pasti bentuknya jadi seperti ini...
Photobucket

33 komentar:

  1. ko..ada award persahabatan nih..cepet diambil y di blog saya..ntar kehabisan loh!!

    BalasHapus
  2. makasih atas tipsnya....cakep...

    BalasHapus
  3. Makasih bos, tipsnya mantep dan berjalan dengan baik di blog saya :
    http://www.dudioke.co.cc/

    BalasHapus
  4. http://suharjo21.blogspot.com/

    bagaimana caranya memasukan postingan ke dalam navigasi menu dan submenu masing-masing sesuai keinginan, susah,,yang tau kirim ke roomajo@gmail.com

    BalasHapus
  5. Cool Brother, mkc bro info nya.....

    BalasHapus
  6. makasih bro, berguna banget buat saya, kunjungan balik Tjahmagelang

    BalasHapus
  7. maaf admin mo tnya nih.. cara melebarkan kolom arsip blognya itu gimana yah?? soalnya blog ku kolom arsipnya kecil banget...

    makasih ..salam kenal...

    BalasHapus
  8. tengkiyu :D

    http://iyandiansyah.blogspot.com/

    http://www.pancadunia.co.cc/

    BalasHapus
  9. voldado.blogspot.com
    maen ya gan..

    BalasHapus
  10. Nice Share Gan, Thanks Very Much

    BalasHapus
  11. keren info nya,
    maksih nih
    :D

    BalasHapus
  12. Sp Berhasil gan
    thx atas infonya ;)

    BalasHapus
  13. asyik dach .... tengkiyu

    BalasHapus
  14. Ok... tks u kawan... tas panduanx..

    kawan jgn lupa berkunjung jg ya ke blogku...

    tks a lots.

    BalasHapus
  15. Terimakasih mas oke brhasil,,,,

    BalasHapus
  16. Ok... tks u kawan... tas panduanx..

    kawan jgn lupa berkunjung jg ya ke blogku...

    tks a lots.

    BalasHapus
  17. mantap gan harus di coba ke http://angkaraku.blogspot.com

    BalasHapus
  18. Wah, thanks ya mas infonya..
    berguna sekali ni, dah saya coba... keren..

    lam knl y mas

    BalasHapus
  19. Thanks ya. menambah wawasan

    BalasHapus
  20. makasih boss...langsung praktek

    BalasHapus
  21. thanks bro tips nya....
    jangan lupa mampir di www.themahir.blogspot.com

    BalasHapus
  22. waahh makasih.. berguna banget.. :D
    mampir ke blog saya yaa :D

    www.nahdli.co.cc

    BalasHapus
  23. Tipsnya sangat membantu gan.

    BalasHapus
  24. makasih info nya mas, follow ya blog saya acehtourismagency.blogspot.com

    BalasHapus

Sialahkan kawan berkomentar tentang artikelnya...karena komentar kawan sangat berarti bagi blog ini...^_^ salam Blogger