Membuat Label Dengan Fungsi Scroll - Indriawan dot Com | Informasi Dan Berita Online

Breaking

Post Top Ad

Space Iklan

Rabu, 19 Januari 2011

Membuat Label Dengan Fungsi Scroll

Pada postingan kali ini saya akan menjelaskan bagaimana cara membuat label dan arsip ( archive ) dengan fungsi scroll. Sebenarnya tutorial ini di request oleh sobat dari malaysia lewat chat box "How to make archives just like yours ?". Langkahnya cukup sederhana, sobat tinggal menambahkan sedikit kode pada arsip sobat. Sebelumnya buatlah widget arsip/archive dengan nama arsip blog atau apa saja, ini cuma untuk memudahkan sobat dalam penambahan kode nantinya. Pilih model yang Hirearchy

Kalau sudah membuat widget arsip, langkah selanjutnya sobat masuk ke edit HTML jangan lupa klik kotak Expand Template Widget. Carilah nama widget arsip blog yang sudah sobat buat tadi ( tekan Ctrl F untuk lebih mudah ).

Carilah kode di bawah 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'/>

Kode yang berwarna hijau sebelumnya tidak ada, tambahkan kode itu untuk aktifkan fungsi scrollnya. Yang berwarna biru adalah tinggi arsipnya, sesuaikan dengan template sobat. Setelah itu simpan..

Untuk membuat label dengan fungsi scroll, langkah-langkahnya sama seperti yang di atas. Sobat cari kode seperti di bawah ini

<b:widget id='Label1' locked='false' title='Label' type='Label'>
<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;'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Tambahkan kode berwarna hijau, dan simpan template. Sekarang lihat pekerjaan sobat.

Semoga bermanfaat.
Alhamdulillah...

14 komentar:

  1. Maksih tipsnya sop,barokalloh,amin.
    Nice share,happy blogging.

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

    BalasHapus
  3. kok ngk bisa ya sob..??semuanya dah benar cm pas mw save ngk bisa..trus mw dipratinjau keluar kata2 ini sob
    Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: The element type "b:includable" must be terminated by the matching end-tag "".
    Error 500

    gmn ya..??mohon bantuannya.terimaksih

    BalasHapus
  4. penjelasannya sangat sederhana..mudah dipahami...salam kenal dan sukses selalu :)

    BalasHapus
  5. trims atas tutorial nya gan,,mantap!sudah berhasil ane praktekan

    BalasHapus
  6. alhamdulillah tutorial cara membuat scrol sudah saya praktekan. trmksh bnyk.
    jngn lupa mampir ke blog saya yang kini sudah lumayan ramai pengunjungnya, ada ribuan perhari

    BalasHapus
  7. terima kasih ya untuk info nya. salam dari malaysia ;)

    BalasHapus
  8. terima kasih ya untuk info nya. salam dari malaysia ;)

    BalasHapus
  9. . setelah saya menyimak dari awal hingga akhir, banyak sekali ilmu yang saya terima dari artikel yang anda tulia, semoga tambah bermanfaat ya lam kenal dan sukses selalu

    BalasHapus
  10. informasi yang sangat menambah wawasan saya makasih ga,.

    BalasHapus
  11. nice infonya.... sukses terus ea ditunggu artikel selanjutnya!!!

    BalasHapus

Post Top Ad

Space Iklan