Cara Membuat Daftar Isi atau Table of Contents di Postingan Blogger
Cara Membuat Daftar
Isi atau Table of Contents di Postingan Blogger – inspirasi
mengoprek trik ini berawal ketika saya membuka halaman website Mas Sugeng. Saat saya mencoba menelaah halaman tersebut saya langsung
“jatuh cinta” pada daftar isi halaman postingannya. Keren.
Simpel. Dan memudahkan para pengunjung untuk membaca bagian-bagian atau subjudul
postingannya. Begitu kesimpulan saya.
Karena tidak tahu
trik itu namanya apa dan bagaimana cara membuatnya akhirnya saya
memeberanikan bertanya kepada Mas Sugeng. Dengan kebaikan hatinya,
Mas Sugeng merekomendasikan trik dan cara membuat daftar isi atau
table of contents di postingan blogger yang ada di link blog
caramanual.com dan oprak-oprek pun mulai saya lakukan.
Karena newbie, pada
awal oprak-oprek itu saya menemukan kesulitan. Beberapakali mencoba belum berhasil, Berkat pertolongan Allah dan petunjuk beberapa artikel yang
mirip dari blog lain, menjelang tengah malam, akhirnya pembuatan
daftar isi berhasil juga. Alhamdulillah.
Contoh daftar isi
di postingan blog yang saya buat bisa anda lihat di live demo dibawah
ini. Pastikan Anda melihatnya terlebih dahulu sebelum lanjut membaca
tutorial ini agar Anda yakin, “Oh...bener, trik yang dibagikan
Cara-NgoprekBlog ini terbukti bisa diandalkan”, hehe
Saya ingatkan,
trik yang saya bagikan ini hanya saya rekomendasikan untuk pengguna
blogger. Pengguna Wordpress tentu tidak perlu menggunakan trik ini,
karena sudah ada widget khusus yang bisa diistall dan secara otomatis
bisa membuat daftar isi di halaman postingan.
Kalau Anda sudah
melihat Live Demo diatas, sekarang mari kita lanjut.
Saya tidak akan membahas apa itu Table of Contents? dan apa kegunaannya? Karena Anda
sampai ke artikel ini pasti sudah memiliki informasi awal tentang
hal-hal tersebut. Kalau belum, Anda bisa browsing di Mr. Google
dengan kata kunci tersebut.
Agar tidak berpanjang waktu, yuk, kita
langsung saja kita membahas cara membuat daftar isi atau table of
contents di postingan blogger versi Cara-NgoprekBlog yang
diintisarikan dari beberapa artikel kawan-kawan blogger lainnya.
IKUTI
LANGKAH-LANGKAH BERIKUT:
1. Pastikan Anda
sudah masuk ke akun Blogger.com.
2. Klik Tema/Thema >
Edit HTML.
3. Cari kode
]]></b:skin> atau </style>.
4. Copy kode css
dibawah ini, lalu Paste persis DI ATAS kode ]]></b:skin>
atau </style>.
----------------------------
/* Table of Contents
(TOC) */
#btn-cm{border:1px
solid #dadada;border-radius:5px;background-color:#f9f9f9}
#btn_toc{font-weight:700;cursor:pointer;margin:10px}
#btn_toc:focus,#toc
li:focus,.back_toc:focus{outline:none}
#btn_toc
svg{vertical-align:middle}
#toc
li{cursor:pointer}
#toc{display:grid}
.back_toc{cursor:pointer;text-align:right}
:target::before{content:"";display:block;height:40px;margin-top:-40px;visibility:hidden}
----------------------------
5. Lalu klik
Simpan/Save Tema.
Selanjutnya
perhatikan kode css yang sudah anda paste tersebut pada bagian ini
(paling bawah kode css tadi):
----------------------------
:target::before{content:"";display:block;height:40px;margin-top:-40px;visibility:hidden}
----------------------------
Nah, apa yang harus dikerjakan?
- Jika Anda
menggunakan menu navigasi sticky, (yang belum paham menu
navigasi sticky silahkan klik lagi link LIVE DEMO di atas, pada blog
tersebut saya menggunakan template VioMagz buatan Mas Sugeng yang
menggunakan menu navigasi sticky) silahkan atur bagian pada
kode ini: height:40px;margin-top:-40px. Fungsinya
untuk apa? Untuk mengatur agar subjudul yang kita ingin tampilkan
langsung terbaca ketika link subjudul postingan itu diklik. Pada
template VioMagz, sesuai pengalaman saya saya setting menjadi:
;height:60px;margin-top:-30px.
- Jika Anda tidak
menggunakan menu navigasi sticky, silahkan hapus kode
tersebut.silahkan atur bagian height:40px;margin-top:-40px.
- Jika Anda tidak menggunakan menu navigasi sticky, silahkan hapus
kode tersebut.
6. Setelah itu masuk
ke bagian Postingan > lalu Edit salah satu postingan blog Anda
yang ingin menggunakan daftar isi. Biasanya postingan yang
menggunakan daftar isi adalah postingan yang panjang dan memiliki
subjudul.
7. Pastikan Anda
berada pada bagian HTML bukan Compose.
8. Selanjutnya, Copy
kode dibawah ini, lalu Paste setelah paragraf pertama atau pada letak
yang Anda inginkan, dibawah judul juga bisa.
----------------------------
<div id="btn-cm">
<div id="btn_toc"
onclick="if (document.getElementById('toc').style.display ===
'none') { document.getElementById('toc').style.display = 'block'; }
else { document.getElementById('toc').style.display = 'none'; }"
role="button" tabindex="0">Contents <svg
width="18" height="18" viewBox="0 0 24
24"><path fill="#000000"
d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z"
/></svg></div>
<div id="toc">
<ol>
<li><a
href="#toc_1" title="Subheading 1">Subheading
1</a></li>
<li><a
href="#toc_2" title="Subheading 2">Subheading
2</a></li>
<li><a
href="#toc_3" title="Subheading 3">Subheading
3</a></li>
<li><a
href="#toc_4" title="Subheading 4">Subheading
4</a></li>
<li><a
href="#toc_5" title="Subheading 5">Subheading
5</a></li>
</ol>
</div>
</div>
----------------------------
Kalau langkah ke-8
ini sudah selesai Anda lakukan, sekarang tinggal bagaimana cara setting
subjudul pada postingan Anda itu agar mempunyai link dan
terhubung/terbaca oleh link pada kode di poin 8 itu. Sehingga ketika
pengunjung blog menklik link pada link Contens atau Daftar Isi
postingan blog kita itu langsung diarahkan ke subjudul yang dimaksud.
Oleh karena itu langsung saja kita menuju pada langkah selanjutnya.
9. Setting Link
Subjudul postingan Anda.
Perhatikan bagian
ini pada kode di poin 8 diatas:
----------------------------
<ol>
<li><a
href="#toc_1" title="Subheading 1">Subheading
1</a></li>
<li><a
href="#toc_2" title="Subheading 2">Subheading
2</a></li>
<li><a
href="#toc_3" title="Subheading 3">Subheading
3</a></li>
<li><a
href="#toc_4" title="Subheading 4">Subheading
4</a></li>
<li><a
href="#toc_5" title="Subheading 5">Subheading
5</a></li>
</ol>
----------------------------
pada kode itu link
(calon) subjudul postingan blog pada Daftar Isinya dikasih nama
toc_1, toc_2, toc_3 dan selanjutnya.
Maka, agar subjudul postingan blog Anda bisa dibaca dan terhubung
pada link itu, Anda harus mencantumkan masing nama unik tersebut
secara terpisah pada masing-masing subjudul postingan Anda. Caranya
bagaimana?
9.a. Caranya
tambahkan kode id="toc_1" sebelum
nama Subjudulnya. Pada contoh kasus template VioMags di
LIVE DEMO tadi adalah sebagai berikut:
----------------------------
<div
style="line-height: 150%; margin-bottom: .0001pt; margin: 0cm;">
<b><span
style="font-family: "roboto" , serif;"><br
/></span></b></div>
<div
style="line-height: 150%; margin-bottom: .0001pt; margin: 0cm;">
<b><span
style="font-family: "roboto" , serif;"><br
/></span></b></div>
<div
style="line-height: 150%; margin-bottom: .0001pt; margin: 0cm;">
<h3
style="text-align: left;">
<b><span
style="font-family: "roboto" ,
serif;"id="toc_1">Penguasaan
Dakwah</span></b></h3>
</div>
<div id="btn-cm">
----------------------------
Kode yang berwarna
merah itulah yang harus Anda tambahkan pada kode subjudul postingan
Anda. Pastikan semua subjudul sudah diberikan kode seperti itu. Dan
pastikan semua subjudul diberi kode yang berbeda secara berurutan,
Misal: subjudul 1 id="toc_1", subjudul kedua id="toc_2"
dan seterusnya.
9.b. Setelah Anda
setting ID masing-masing subjudul, sekarang semua subjudul sudah bisa
terbaca/terhubung dengan link pada tabel Daftar Isi (dari kode poin
8). Tinggal Anda edit title dan nama subjudul tersebut yang
dimunculkan di Daftar Isi. Saya menyarankan isikan masing-masing
subjudul sesuai yang tercantum pada postingan blog dengan mengganti
Subheading 1 dan seterusnya pada kode di poin 8. Contohnya
aflikasinya seperti ini:
----------------------------
<ol>
<li><a
href="#toc_1" title="Penguasaan
Dakwah">Penguasaan
Dakwah</a></li>
<li><a
href="#toc_2" title="Perbedaan
Penguasaan
Dakwah">Perbedaan
Penguasaan
Dakwah</a></li>
<li><a
href="#toc_3" title="Kemampuan
dan
Keberhasilan
Dakwah">Kemampuan dan
Keberhasilan
Dakwah</a></li>
<li><a
href="#toc_4" title="Penguasaan
Medan Luar dan Medan Dalam">Penguasaan
Medan Luar dan Medan Dalam</a></li>
</ol>
----------------------------
Kalu sudah SAVE/UPDATE postingan.
Jika langkah-langkah
ini sudah dilakukan, maka daftar isi postingan atau table of contents
di postingan blogger Anda sudah bisa berfungsi sebagaimana dalam LIVE
DEMO di atas. Jika tidak, barangkali ada kesalahan dalam menerapkan
langkah-langkah yang saya jelaskan. dan pastikan sebelum anda mengakhiri proses ini SAVE atau UPDATE postingan Anda ini pada posisi HTML bukan Compose. Demikian trik yang bisa saya
bagikan sekarang ini. Selamat mencoba dan sukses.
0 Response to "Cara Membuat Daftar Isi atau Table of Contents di Postingan Blogger"
Post a Comment