Mengenal dan Membuat Arsip Blog

3.11.2009
Arsip Blog adalah salah satu widget yang telah lama dibuat oleh Blogger.com,berfungsi untuk melihat artikel-artikel lama yang telah kita buat dengan jerih payah.Baiklah saya akan menjelaskan tentang inipeace.



Ini request dari sahabat saya,Mas Erik :
Wan, kalau scroll untuk blog archive gimana caranya. Diposting ya


Bagaimana Cara Membuatnya?

ikuti langkah-langkah berikut :
  • Login ke Blogger.com
  • Klik Tata Letak/Layout
  • Klik Elemen Halaman/Page Elements
  • Klik Tambah Gadget/Add Gadget
  • Klik Widget"Arsip Blog"
  • Lihat gambar ini,Isi sesuai dengan yang digambar :
  • Judulnya harus : Arsip Blog
  • Lihat ada 3 Fungsi yaitu Hierarki,Daftar Flat dan Menu Dropdown,Pilih Hierarki.
  • Klik Simpan.
  • Hasilnya begini :
Bagaimana cara membuat widget Arsip Blog menggunakan scroll?

  • Klik Layout/Tata Letak
  • Klik Menu Edit HTML
  • Klik Edit HTML → Sebelumnya terlebih dahulu teman backup dulu templatenya dengan mengklik Download Template Lengkap.Supaya bila terjadi kesalahan maka bisa diulang kembali.
  • Klik Expand Widget Template
  • Teman cari kode ini :
    <b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
  • Atau cari judulnya yaitu : Arsip Blog
  • Ketika teman menemukan scriptnya secara lengkapnya begini :

    <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>


  • Yang berwarna merah adalah kode yang harus ditambahkan di script itu.
  • Teman bisa merubah height: 100px dengan tinggi yang diinginkan.
  • Hasilnya begini :


Meskipun panjang dan agak rumit semoga teman semuanya berhasilsengihnampakgigi.

22 komentar:

  • brown sugar

    Hwaaaaaaaaaaaaa...sumpe gaptek bin ga mudenggg....
    Gw mending minta tolong sang sekretaris deee ngoprekknya...kaga tahan mentallll handle kek ginian...biaa nyapu ma ngepel ogahhh suruh ngoprekk giniannn...hiks...

  • Wah, tks Wan, saya copy dulu, besok saya kerjakan
    Tks banget Wan

  • Sip sudah berhasil

  • Unknown

    ni yang pake scroll, aku pake yang dropdown, bagus mana ya? ntar wis,hehe

  • plague doctor

    wow, great
    tapi bikin lola gak ya?

  • beat2ws

    Punyaku malah dibuat dropdown aja, tapi lebarnya full.

  • bagus bget mas trik tipsnya..
    thanks..

  • tutorial yg berguna bagi yg pemula...semoga amalnya diterima disisi.Nya ...ehhh...salah kirain ada yg meninggal hehhehe

  • BLOGGOA

    selalu mangarsipkan hal yang menarik...mantap kang arsip

  • Aku lagi pengen bikin ini nih...
    nanti kalo ngga berhasil boleh nanyakan?? hehehe

  • Mawardi Mustafa

    Maaf nich mas yang laen aku ngerti tapi ini yang warna merah ditambah/diganti dengan apa gitu ????
    tolong bagi-bagi ilmunya lebih banyak.
    and satu permohonanku kalo bisa gimana sich caranya bikin box coment yang selalu tampak tidak musti di klik lagi link Coment here

  • Moel

    makasih infonya, berguna banget bagi saya yang newbie. mampir ke blog aku ya lihat2 : http://moelslife.blogspot.com. Makasih

  • Unknown

    wah, mau coba akh. tks ya....aku sering berhasil kalo pake tips dari kamu.

  • bliyan

    weleh.... weleh, hatur nuhun, mohon ijin langsung ke TKP!

  • http://paketrahasiapriaperkasa.blogspot.com

  • Seonggok makhluk hina

    Halo, mas bagaimana caranya memasang kotak komentar pada blog (spt kotak komentar ini!)

  • MIHA

    salam kenal,
    mas minta tolong dunk.... postingan saya kok nggak muncul di postingan blog yach?

  • semua tentang bangka barat

    tq for information, please visit my blog............hwa hhahahahahahaha. mantp infonya...............

  • sang murid

    hmm boleh dicoba nih...

  • Posting Komentar

    Silahkan menuliskan komentar anda pada opsi Google/Blogger untuk anda yang memiliki akun Google/Blogger.

    Silahkan pilih account yang sesuai dengan blog/website anda (LiveJournal, WordPress, TypePad, AIM).

    Pada opsi OpenID silahkan masukkan URL blog/website anda pada kotak yang tersedia.

    Atau anda bisa memilih opsi Nama/URL, lalu tulis nama anda dan URL blog/website anda pada kotak yang tersedia. Jika anda tidak punya blog/website, kolom URL boleh dikosongi.

    Gunakan opsi 'Anonim' jika anda tidak ingin mempublikasikan data anda. (sangat tidak disarankan)