[GUIDE] Cara Membuat Daftar Isi Pada Thread Dengan Link Fokus Pada Sub Konten

[masulum]

Disclaimer: Ini adalah tutorial untuk pengguna-pengguna baru/newbie atau yang mungkin ingin memodifikasi konten thread yang lebih menarik. Jika mungkin tidak tertarik atau merasa thread ini tidak sesuai dengan Anda, silakan lewati thread ini. Saya juga akan langsung menghapus komentar yang dirasa tidak berkaitan dengan topik tanpa peringatan apapun.

[GUIDE] CARA MEMBUAT LINK FOKUS UNTUK DAFTAR ISI PADA THREAD

INTRO

Tutorial ini dibuat untuk Anda yang ingin membuat suatu topik yang memiliki banyak sub/kategori di dalamnya. Tutorial ini sangat cocok untuk digunakan bagi Anda yang ingin membuat topik berupa guide maupun listicles yang dilengkapi dengan daftar isi.

CARA KERJA

Jika disederhanakan, tutorial ini adalah untuk membuat URL yang apabila di klik, ia akan mencari suatu kata yang dibuat sebagai anchor link. Anchor link ini bertugas untuk mengarahkan pembaca yang mengklik link tersebut pada konten yang dituju. Untuk praktek, silakan Anda klik satu link pada daftar isi.

DAFTAR ISI THREAD

• Intro
  
• Cara Kerja
  
• Daftar Isi
  
• Tutorial & Contoh
  ▻ Anchor
  ▻ IURL
  
• Penutup
  

TUTORIAL

Untuk membuat "clickable" pada daftar isi suatu thread, sebenarnya kita hanya membutuhkan  2 tipe coding pada BBCODE. Code pertama adalah http:// dan yang kedua adalah [anchor]. Penggunaan dua kode tersebut akan saya jabarkan di bawah ini:

▶ ANCHOR

Anchor merupakan kata kunci yang digunakan untuk memberi perintah pada saat kita melakukan klik pada URL agar diarahkan pada kata kunci yang dimaksud. Dalam hal ini, Anda bebas untuk memilih kata kunci. Etikanya, Anda sebaiknya menggunakan sesuai dengan 1-3 kata awal pada sub konten. BBCode tag yang harus Anda gunakan untuk hal poin ini adalah [anchor=katakunci][/anchor].

Contoh:
Anda ingin mengarahkan pembaca langsung pada konten daftar isi, maka kode yang harus Anda gunakan adalah sebagai berikut.

Code:

[anchor=inidaftarisi]Ini Daftar Isi[/anchor]

Hasil:
Ini Daftar Isi

Pada tahap ini, seperti tidak ada apa-apa, karena memang nantinya URL akan mengarah pada konten ini (pada bagian IURL). Pengaturan untuk anchor sudah selesai.

▶ IURL

IURL adalah menu yang dapat diklik oleh member dan akan menjalankan perintah dari anchor, sehingga akan membawa pengguna untuk menemukan konten yang diharapkan dengan lebih cepat. Adapun kode/tag yang harus digunakan adalah [iurl=#katakuncipadaanchor]Title konten[/iurl]. Saya akan melanjutkan contoh pada kata "Ini Daftar Isi", untuk bisa mengarahkan kesana, setelah IURL tag, Anda tambahkan simbol =# kemudian kata kunci, tanpa spasi
Contoh penggunaan kode:

Code:

[iurl=#inidaftarisi]Ini Daftar Isi[/iurl]

Hasil:
Ini Daftar Isi <- Silakan Anda klik, maka Anda akan diarahkan ke bagian Ini Daftar Isi

Masih kurang paham? ini saya berikan contoh implementasi untuk sub forum yang lebih banyak

Contoh Implementasi

• ▻ Sub konten 1<- klik ini untuk langsung menuju sub 1
  
• ▻ Sub konten 2<- klik ini untuk langsung menuju sub 2
  
• ▻ Sub konten 3<- klik ini untuk langsung menuju sub 3
  
• ▻ Sub konten 4<- klik ini untuk langsung menuju sub 4
  
• ▻ Sub konten 5<- klik ini untuk langsung menuju sub 5
  
• ▻ Sub konten 6<- klik ini untuk langsung menuju sub 6
  
• ▻ Sub konten 7<- klik ini untuk langsung menuju sub 7
  

Lorem Ipsum
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."

1. What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

2. Where does it come from?
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.

3. Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.

4. Where can I get some?
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.

5. Sub konten ABC
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at purus tristique nunc sagittis ultrices eget sit amet augue. Suspendisse at hendrerit urna. Cras massa enim, gravida vitae urna eget, sagittis lacinia sem. Phasellus venenatis eget urna ut luctus. Sed posuere placerat eros, et volutpat nulla euismod condimentum.

6. Sub konten DEF
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at purus tristique nunc sagittis ultrices eget sit amet augue. Suspendisse at hendrerit urna. Cras massa enim, gravida vitae urna eget, sagittis lacinia sem. Phasellus venenatis eget urna ut luctus. Sed posuere placerat eros, et volutpat nulla euismod condimentum.

7. Sub konten HIJ
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at purus tristique nunc sagittis ultrices eget sit amet augue. Suspendisse at hendrerit urna. Cras massa enim, gravida vitae urna eget, sagittis lacinia sem. Phasellus venenatis eget urna ut luctus. Sed posuere placerat eros, et volutpat nulla euismod condimentum.

source: https://www.lipsum.com/feed/html

PENUTUP

Itulah tutorial sederhana untuk mempercantik thread yang Anda buat dengan menambahkan "clickable" pada daftar isi thread Anda. Semoga thread ini bermanfaat. Inspirasi thread ini dari thread Bitcointalk posting etiquette by tranthidung. Mohon maaf jika sebelumnya sudah ada yang membuat, karena saya mencoba dengan beberapa kata kunci tidak menemukan yang sesuai.

Edit:
1. Pengunaan pada mobile bisa dilakukan jika pada layar tidak memuat halaman secara utuh (tidak membutuhkan scroll). Jika ingin test, bisa zoom halaman, kemudian klik pada sub konten yang diharapkan.
2. Penambahan contoh implementasi agarpenjelasan lebih spesifik.
3. Kata kunci pada ANCHOR harus sama dengan kata kunci yang digunakan pada IURL silakan simak kode di bawah.

Code:

Jika pada anchor menggunakan keywords seperti ini
[anchor=poin1]...title..[/anchor]
[anchor=poin2]...title..[/anchor]
[anchor=poin3]...title..[/anchor]
[anchor=poin4]...title..[/anchor]
maka, IURLnya harus seperti ini
[iurl=#poin1]...title..[/iurl]
[iurl=#poin2]...title..[/iurl]
[iurl=#poin3]...title..[/iurl]
[iurl=#poin4]...title..[/iurl]

Kembali ke atas ▲

[Husna QA]

Saya coba lengkapi,
untuk penggunaan iurl/anchor hanya bisa diterapkan pada page yang sama (dalam hal ini page 1), jika content yang hendak dimasukkan pada daftar isi di page 1 berada di page berikutnya maka tidak bisa menggunakan iurl tapi menggunakan url yang merujuk link lainnya baik untuk link forum ini ataupun link dari url web lain.
Untuk contoh penerapannya bisa dilihat (di-quote dan dilihat bbcode yang saya gunakan) pada thread berikut:
Hardware Wallet - Husna QA
[Edukasi] Privasi dan Anonimitas Bitcoin - Husna QA

Pada Daftar isi ke-6 di thread Hardware Wallet, saya tidak bisa menerapkan iurl karena karena postingan dari agan antonio88s tidak berada satu page dengan postingan daftar isi di page 1. Dan sebelumnya saya sudah mencoba berkoordinasi dengan agan antonio88s untuk mencoba penggunaan iurl/anchor pada post beliau dan merujuk ke daftar isi di postingan saya, namun tetap tidak bisa.