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. Bypass Template Path dan Stylesheet Path
  3. Customisasi Tampilan Tag Cloud
  4. Border Style, Border Width, Border Color
  5. Main Remi Bersama Top Komentator
  6. Membuat Text Gradient Dengan CSS
  7. Cara Menggunakan File CSS Yang Berbeda Untuk Home, Single Dll
  8. Source Code Main Remi Bersama Top Komentator
  9. Free CSS Button Generator
  10. Cara Membuat Tampilan Postingan Yang Berbeda-beda
  1. 14-5-2011 at 05:31 | #1

    (Maaf) izin mengamankan PERTAMAX dulu. Boleh, kan?!
    Kalau di WP dot com cuman bisa buat satu moel, thok.

    Reply

    alamendah Reply:

    (Maaf) izin mengamankan KEDUAX dulu. Boleh, kan?!
    Selamat Pagi Kang Alwi, selamat berakhir pekan

    Reply

    Vulkanis Reply:

    Mari Kita maaf-maafan Kang alam

    Reply

  2. 14-5-2011 at 06:37 | #2

    Bagus ne tutornya. .
    bisa diterapkan. .
    tetapi saya kurang memperhatikan daftar isi di blog. .. :”(
    mungkin bisa di blog yang lainnya..

    Reply

  3. 14-5-2011 at 08:20 | #3

    daftar isi wajib ada, untuk memudahkan pengunjung dalam pencarian yang dibutuhkan!

    Reply

  4. 14-5-2011 at 08:41 | #4

    nice info bang……

    Reply

  5. 14-5-2011 at 11:55 | #5

    Bagus gan artikelnya, kalau untuk blogspot gimana? Thanks

    Reply

  6. 14-5-2011 at 12:12 | #6

    hasilnya seperti yg di blog ini ya mas

    —————————————————————–
    Yup …. betul sekali …

    Reply

  7. 14-5-2011 at 14:38 | #7

    Maaf OOT mas.
    Saya membuat arsip dengan wp-archive
    Bila di bandingkan dengan sitemap generator bagusan mana ya?
    Makasih.
    Eh iya salam kenal, kunjungan perdana mas alwi :D
    —————————————————-
    tergantung selera kayaknya kalau wp-archive diurutkan berdasarkan urutan bulan dan tahun, kalau plugin yg saya pakai (DDSG) berdasarkan karegori menurut saya akan lebih mudah dalam pencarian artikel karena sudah dikelompokkan, kelebihan lainnya support page/halaman bisa displit menjadi beberapa halaman sesuai selera dg cara ini akan enteng loadingnya, kelebihan lainnya bisa digabung dg sitemap xml
    kalau wp-archive kurang tau apa bisa displit atau gak, kekurangan lainnya jika postingan sudah ratusan mungkin agak susah dalam pencarian postingan tertentu

    Reply

  8. 15-5-2011 at 00:24 | #8

    Wah keren bang..pakai gradient dan merapihkan unordered list ya bang..
    Oia, sebenarnya bisa loch bang tanpa plugin, sarah waktu ituh juga pernah instal plugin sitemap, tapi akhirna sarah ganti di page ajah.
    Yag sarah bahas di blog sarah juga sebenarnya bisa sich tapi bukan di single post di page bang. Sarah lupa, kalau ga salah hacknya di wp-includes—theme dan wp-includes–rss-functions.

    Tapi repotnya memang membuat kategorinya ituh..hihihi..tpi menurut sarah sich, soalna buat mengurangi plugin ajah. paling ga sarah buat arsip bulanan:
    <?php wp_get_archives(‘type=monthly’); ?>
    Sama list kategory..
    <?php wp_list_categories(); ?>
    Nah..cssna ituh ga usah manggil get_header lagi kayana, seperti abang bilang pakai static ajah buat ngurangin query tapi bikin file cssna lagi kalau bisa sich ada resetnya..Oia yg bagus dari eric meyers..
    Wah..banyak nich komennya..maaf ya bang, bis sarah suka kalau bahas beginian.
    CMIIW

    ————————————————————–
    Bisa juga sich buat daftar isi tanpa plugin seperti kata Sarah dg memanfaatkan fitur archives dll, tapi belum sempat2, ini masih ngoprek yg lainnya dulu (mengurangi plugin juga), kalau sarah bisa buat ntar saya yg pakai scriptnya heeeee … (ngarep.com)
    Gak apa2 saya suka kok dg komentar model ginian, bisa saling tuker pengalaman

    Reply

  9. 15-5-2011 at 08:23 | #9

    makasih mas alwi.
    Salam dan sukses selalu ya

    Reply

  10. 15-5-2011 at 08:53 | #10

    menarik sekali nih mas,,sangat bermanfaat makasih dan sukses trus ya,,

    Reply

Comment pages
1 2 3 5 2360
1+7=? (Wajib diisi)