Home » CSS » Optimasi Wordpress » Modifikasi Tampilan Halaman Daftar Isi

Modifikasi Tampilan Halaman Daftar Isi

14 Mei. 201150 comments
Modifikasi Tampilan Halaman Daftar Isi

Daftar isi merupakan salah satu komponen penting di dalam blog. Daftar isi juga merupakan salah satu navigasi blog yang akan memudahkan pengunjung untuk melihat keseluruhan tulisan/postingan yang telah dibuat.

Cara membuatnya cukup mudah, untuk WordPress yang self hosting bisa dilakukan secara manual atau dengan menggunakan bantuan sebuah plugin misalnya plugin Sitemap Generator. Untuk detail cara pemembuatannya silahkan baca postingan sebelumnya, cara membuat daftar isi di wordPress dengan sitemap generator.

Jika kebetulan anda membuat halaman daftar isi menggunakan plugin sitemap generator (Dagon Design Sitemap Generator), anda bisa memodifikasi tampilannya sesuai selera anda. Misalnya, anda bisa mengganti list style urutan kategori atau urutan judul postingan dari jenis bullet (•) ke angka (1.. 2.. 3.. dst), memberi warna background, border, warna link, hover dan lain-lain.

Cara Modifikasi Tampilan Halaman Daftar Isi

  1. Buka file sitemap-generator.php yang ada di direktori plugin tersebut (jangan lupa backup dulu isinya). Anda bisa membuka file tersebut lewat dashboard admin, cpanel atau FTP.
  2. Kemudian cari kode <ul> di bagian Generate page output dan Generate post output. Untuk lebih memudahkan pencarian tekan Ctrl+F dan masukkan kode <ul> di dalam kotak pencarian. Jika sudah ketemu ganti kode tersebut <ul> menjadi <ol>. Kemudian cari juga kode </ul> di bagian Generate page output dan Generate post output. Untuk lebih memudahkan pencarian tekan Ctrl+F dan masukkan kode  </ul> di dalam kotak pencarian. Jika sudah ketemu ganti kode tersebut </ul> menjadi </ol>.
  3. Jika anda ingin memodifikasi warna link, hover, memberi border pada halaman daftar isi (dengan CSS3) tambahkan kode CSS3 berikut ini di file CSS yang anda gunakan.
    .ddsg-wrapper
    { background:#edeff0;
      width:auto;
      line-height:1.5em;
      padding:7px 5px 5px 7px;
      margin:-5px 2px 2px 0;
      border:1px solid #ACADB5;
      box-shadow:2px 2px 2px #888;
      -moz-box-shadow:2px 2px 2px #888;
      -webkit-box-shadow:2px 2px 2px #888;
      -moz-border-radius:6px;
      border-radius:6px;
      background-image:-moz-linear-gradient(left,rgba(0,0,0,0) 80%,rgba(0,0,0,.20));
      background-image:-webkit-gradient(linear,right top,left top,color-stop(0.01,rgba(0,0,0,.20)),color-stop(0.08,rgba(0,0,0,0))); }
    
    .ddsg-wrapper a
    { border-bottom:1px dotted #BDB9B9; }
    
    .ddsg-wrapper a:hover
    { color:#800000;
      font-weight:bold; }

    Di samping dengan cara tersebut di atas, anda juga bisa menggunakan teknik Custom CSS Per Post.

  4. Untuk pengaturan margin kiri dari judul postingan, anda bisa menambahkan style pada kode <li> sebelum kode berikut ini : <a href="' . get_permalink($post_data[$p]['id']) . '"'; misalnya jika margin kiri akan diberi jarak 60px maka kodenya menjadi seperti ini : <li style="margin-left:60px">

Keterangan : Untuk point ke 3, pengaturan margin, padding, warna background, warna link, hover dan lain-lain bisa anda atur sesuai selera, demikian pula untuk point ke 4 (pengaturan margin kiri untuk judul posting).

Supaya tampilannya lebih eksklusif anda bisa menggunakan template khusus yang bisa anda buat sendiri seperti yang saya gunakan di blog ini. Di halaman daftar isi blog ini saya hanya menggunakan satu kolom dengan membuang bagian sidebar, trackback, pingback dan bagian komentar, dan tentunya menggunakan CSS khusus pula (mungkin lain waktu akan saya buatkan postingannya). Hasilnya bisa anda lihat di halaman Daftar Isi blog ini.

Mudah-mudahan artikel tentang Modifikasi Tampilan Halaman Daftar Isi ini bisa bermanfaat untuk anda, terima kasih.

Artikel Yang Mungkin Berkaitan :

  1. Cara Menggabungkan File CSS WordPress
  2. CSS Image Sprites Generator
  3. Cara Mengganti Font Dalam Postingan
  4. Border Style, Border Width, Border Color
  5. Mempercantik Tampilan Code Snippets Dengan CSS
  6. Free CSS Button Generator
  7. 80 Inspirasi, Design Footer Nan Cantik Dan Unik
  8. Tips dan Tricks CSS (Cascading Style Sheets)
  9. Source Code Main Remi Bersama Top Komentator
  10. Custom CSS Per Post
  1. 17-9-2011 at 03:38 | #1

    untuk point 3 penempatannya di sebelah mana ya.,? sebelum atau sesudah kode apa?

    Reply

  2. 29-9-2011 at 20:07 | #2

    thank banget mas tutorialnya. oya, kalo mau menghilangkan Plugin by xxxx yang di bagian bawah daftar isinya gimana mas?
    thank

    Reply

  3. 10-11-2011 at 11:52 | #3

    makasih tutorialnya mas, sudah ta coba n sukses… tapi untuk kode css ga bisa di terapkan apa ga cocok dengan blog saya mas?

    Reply

  4. Kiky
    15-11-2011 at 18:33 | #4

    Makasih mas tutornya.. sangat membantu.. Saya mau tanya nih mas.. kalau menghapus bagian category ( post semuanya di jadikan 1 ), semacam seperti index / recent post.. itu gimana yah mas ?

    Thanks

    ——————————————————————
    Bisa pakai plugin wp archive

    Reply

  5. 23-12-2011 at 19:38 | #5

    thanks atas infonya yang sangat bermanfaat dan mudah dicerna, salam kenal

    Reply

  6. 10-1-2012 at 14:19 | #6

    Tutornya sangat membantu, trims mas bro..
    semoga dibalas oleh YMK.

    Reply

  7. 22-1-2012 at 23:06 | #7

    Ini contoh daftar isi punya saya, hasil modif.
    http://blog.bikinwebsendiri.com/?page_id=473

    Reply

  8. 31-1-2012 at 10:29 | #8

    thanks ya gan..telah membantu ni

    Reply

  9. 24-2-2012 at 12:02 | #9

    makasih bnyk atas ilmunya mas…

    Reply

  10. 27-2-2012 at 22:20 | #10

    Sayang saya pakai blogspot :)

    Reply

Comment pages
4+7=? (Wajib diisi)