Cara Membuat Daftar Isi Blog Model Scrollbox

May 27, 2010 | Tips dan Trik | 2 Comments

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=”http://blepot.com/2010/05/cara-membuat-daftar-isi-blog-model-scrollbox/” 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.

Selamat mencoba mas dab… 🙂

comments (2)

Track comments via RSS 2.0 feed. Feel free to post the comment, or trackback from your web site.

  1. Dec 20, 2011 | www.kedai-kartika.com

    Makasih buat Infonya. bagus blognya minimase bgt hehehe

  2. Jan 12, 2012 | gembel

    semoga bermanfaat, terimakasih 🙂

Leave a Comment