Cara Membuat Daftar Isi Blog Model Scrollbox

Posted: 2 Mei 2010 in Blog, Tips & Trik
Tag:,

Ini adalah tutorial mudah membuat Daftar isi (shortcut) model textrea/scroll box.

Daftar isi blog itu penting banget lho.. Beliau bisa menolong kita dalam menampilkan posting-posting jaman purba kita 😀 (postng lama). Nih tak kasih petuah buat menciptakan tuh mesin pembantu kita (daftar isi). Berikut ini saya kasih contoh sortcut model scroolbox, karna jenis ini lebih efisien dibandingkan model biasa yang mana jika kita menampilkan seluruh arsip blog, maka akan memakan ruang satu halaman. Dikarenakan jumlah arsip yang banyak dan coba anda bayangkan jika arsip blog anda sudah tahunan, berapa panjang arsip yang akan ditampilkan dalam satu halaman? Untuk mempersingkatnya agar dalam 1 halaman agar terlihat ringkas, kita dapat menggunakan textarea seperti terlihat dibawah

Caranya sangat mudah, sisipkan shortcode pada textarea. Copy-paste saja kode berikut dan tinggal sesuaikan tampilan dengan selera anda:

<div style=”overflow: auto; width: 480px; height: 100px;
background-color: #ffecff; background-attachment: scroll;
background-repeat: no-repeat; background-position:right bottom;
text-align: left; padding: 5px; border: 2px solid #0000b9;”>
<span style=”font-size:10px;color:#800080;
font-family:Sans-serif;”>[/archives]
</span>
</div>
<a href=”https://mangunweni.wordpress.com/2010/05/07/cara-membuat-daftar-isi-di-wordpress-hosting-sendiri/&#8221; title=”Cara membuat daftar isi”><button>BIKIN-DISINI</button></a>
</div>

Setelah itu anda copy dan paste-kan pada area penulisan pada mode ‘HTML’, tapi ingat! pada shortcode hapus tanda “ / “.

Tampilan arsip blog anda tidak akan terlihat pada area penulisan, untuk melihatnya ‘Publish’ dahulu dan klik tombol ‘Preview Changes’.

Keterangan :

* width : lebar textarea.
* height : tinggi textarea.
* background-color : warna background textarea.
* background-position : letak posisi background gambar pada textarea.
* text-align : perataan pada text.
* padding : jarak antar text dengan textarea.
* border : tebal tipisnya bingkai textarea.
* solid : warna bingkai textarea.
* font-family : jenis text.

Okelah kalo begitu.. Selamat mencoba… 😀
Nih dia hasilnya.. Ringkas mbok?


<div style=”overflow:auto;width:200px;height:220px;background-color:#ffecff;background-attachment:scroll;background-repeat:no-repeat;background-image:url(‘http://www.addemoticons.com/emoticon/monkey/AddEmoticons12636.gif&#8217;);background-position:left bottom;
text-align: left; padding: 5px; border: 1px solid #0000b9;”>
<span style=”font-size:12px;color:#800080;font-family:Verdana;”><?php wp_get_archives(“type=postbypost”); ?>

</span>
</div>
<div>
<a href=”https://mangunweni.wordpress.com/2010/05/07/cara-membuat-daftar-isi-di-wordpress-hosting-sendiri/&#8221; title=”Cara membuat daftar isi”><button>BIKIN-DISINI</button></a>
</div>

Iklan
Komentar
  1. toelank berkata:

    thanxs bwat infonya n lam kenal ja yah…

    http://toelank.wordpress.com

  2. […] Untuk yang memakai wordpress gratisan silahkan baca disini […]

  3. Maulana Mufti berkata:

    Wah, apik kiye… inyong arep nyontek ya, olih apa ora kang??

    Inyong wis tak praktekna, cuma ora bisa nggawe scrole kang, apane kiye sing salah ya?

    Dadine kaya kiye kang , http://aslibumiayu.wordpress.com/daftar-isi/

    maturnuwun banget ya kang,… di enteni dolan maring blog ge inyong,..

  4. Vidzas Erdien berkata:

    Makasih tipsnya 🙂

    Saya dah coba praktik dan berhasil

    Salam kenal,

    Vidzas Erdien

  5. Maulana Mufti berkata:

    Kang, inyong durung bisa… sing ora muncul gambar kotak scrol le kuwe kang..
    Yen daftar isine sih ana,

    sing salah apane ya?

  6. […] Untuk yang memakai wordpress gratisan silahkan baca disini […]

  7. M. KHOLIL berkata:

    Penjelasannya kurang lengkap bos, gak bisa.

  8. belalangtue berkata:

    tengkiu lah ya hehe …..

  9. ahyar ayank berkata:

    makasih udah aku coba berhasil mas..

  10. bandoenglover berkata:

    makasih mas! mampir2 yh! 🙂

  11. afrioniblog berkata:

    makasih yahhh,,, bs jd referensi neh…hhehehe

    ^.^

  12. A Rahim BA berkata:

    mas, terima kasih infonya tentang membuat daftar isi, tapi setelah saya praktekkan kok gak berhasil, apa ada cara lain gak’ mas /

  13. septian maulana berkata:

    kurang jelas cara nya

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s