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
- 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.
- 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>.
- 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.
- 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.
Infonya saya simpan dan di back up gak lupa tuh
Reply
Makasih informasinya yaa bos…
Reply
Keren deh jadinya mas… Daftar isi memang sangat penting saya malah belum membenahinya… Belum sempat mengotak atikknya…
Reply
yaa…yaaa…yaaa…
blog saya belum ada daftar isi nya nih mas,
segera lah dibuat…
thanks yaa,…
Reply
makasih gan infonya, ini sangat bermanfaat buat blog saya juga
oya bisa tukeran link ???
Reply
Salam Takzim
Masih manggut manggut kang, secara saya belum bisa mengoptimalkan isro-m dot com nih hehehe
Semoga nanti kala liburan mahasiswa saya mulai menggunakan
Salam Takzim Batavusqu
Reply
waah.. info bagus. sayang gag bisa di peke di blogspot yaa…:(
————————————————-
Untuk pluginnya emang gak bisa tapi untuk modifikasi tampilan halaman daftar isi dg sentuhan CSS3 bisa kok diaplikasikan di blogspot
Reply
daftar isinya kok kosong mas setelah saya lihat
tapi mantabs ilmunya
uprek theme terus
salam dari pamekasan madura
————————————————————–
Pas Kang Citro akses lagi bebenah dg beberapa plugin yg ada termasuk sitemapnya sehingga halaman daftar isi hanya halaman putih aja heee … sekarang dah normal lagi
Reply
Saya juga berencana mau mengunakan style berbeda antar halaman page. Namun belum punya cukup waktu untuk membuat stylenya. Prioritas saya saat ini lebih kepada mempersiapkan materi untuk postingan baru (plus mendalaminya dulu sebelum dipublish).
Oya, sedikit saran saja untuk tampilan latar halaman daftar isinya mas. Menurut saya, akan lebih baik jika gambar latarnya dibuat
fixed
. Jadi, ketika halaman digulung ke bawah atau ke atas, posisi gambar latarnya tetap (tidak ikut tergulung).Hal itu bisa meminimalisir distraksi/gangguan saat user menggulung halaman.
————————————————————–
Ok, sekarang dah saya buat fixed, sebelumnya mau saya buat fixed tapi entah kenapa efek scrollnya jadi agak lambat terutama di Firefox, tapi sekarang dah beres, thank Mas Is masukannya.
Reply
gan, kalo tuk di blogger gimana caranya?makasih………………….
——————————————————
Lain waktu mungkin akan saya bahas secara khusus tentang cara membuat daftar isi di blogspot, kalau saya bahas di komentar ini akan terlalu panjang
Reply