Tutorial Table of Content Jump To (#)

Kali ini cik tom nak ajarkan tutorial macam mana cara nak buat jump to heading (nama melayu tak tahu la). Adamxis pernah tanyakan cik tom sebelum ini macam mana nak buat dari senarai tajuk kecil tue (ala2 table of contents) bila klik akan terus direct ke tajuk besar dalam entry yang sama. Bagi cik tom cara ini bagus untuk kes entry yang terlampau panjang dan perlu dibahagikan mengikut subtopik yang lebih kecil bagi memudahkan pemahaman pembaca terutamanya entry berinformasi. Kiranya kita senaraikan semua tajuk di dalam entry yang sama bagi memudahkan pembacaan. Tutorial ini boleh digunakan bagi pengguna blogspot dan juga wordpress.

3 Jenis Cara Untuk Buat Internal Anchors untuk buat subtajuk dalam entry.

1. <h2 id=”heading”>Heading</h2>
2. <h2><a id=”heading”>Heading</a></h2>
3. <h2><a name=”heading”>Heading</a></h2>

**Cik tom prefer guna cara yang pertama. Rasanya lagi mudah dan simple code tapi korang bebas nak pilih yang mana.

Internal Anchor yang kat atas tue semua perlu di link pada setiap senarai tajuk kecil dalam entry. Contohnya;

<a href=”#heading”>Heading</a>

Contoh table of content yang di link kepada subtopik dalam entry bagi senarai tajuk kecil dalam entry ialah.

Table of Content
<ol> <li><a href=”#apa-itu-blog”>Apa itu blog</a></li>
<li><a href=”#cara-nak-buat-blog”>Cara nak buat blog</a></li>
<li><a href=”#perkara-asas-dalam-blogging”> Perkara asas dalam blogging </a></li> </ol>

<h2 id=”apa-itu-blog”>Apa itu blog </h2>

Blog ialah satu medan penulisan secara online. Bla… Bla… Bla….

<h2 id=”cara-nak-buat-blog “>Cara nak buat blog </h2>

Cara nak buat blog ialah korang mesti mempunyai akaun email samaada yahoo, gmail atau apa sahajalah. Bla… Bla… Bla….

<h2 id=”perkara-asas dalam-blogging “>Perkara asas dalam blogging</h2>

Perkara asas dalam dunia blogging ialah kerajinan. Bla… Bla… Bla….

Hasilnya;

Table of Content

  1. Apa itu blog(cuba klik pada tajuk)
  2. Cara nak buat blog(cuba klik pada tajuk)
  3. Perkara asas dalam blogging (cuba klik pada tajuk)

Apa itu blog

Blog ialah satu medan penulisan secara online. Bla… Bla… Bla….

Cara nak buat blog

Cara nak buat blog ialah korang mesti mempunyai akaun email samaada yahoo, gmail atau apa sahajalah. Bla… Bla… Bla….

Perkara asas dalam blogging

Perkara asas dalam dunia blogging ialah kerajinan. Bla… Bla… Bla….

**pastikan ayat/ perkataan dalam <h2 id=”sama-ayat”> sama dengan ayat dalam <a href=”#sama-ayat”>.

Antara contoh-contoh entry yang cik tom pernah guna tutorial jump to heading ialah;

1. Apa itu domain, hosting dan perbezaannya
2. Tutorial Daftar Blog Pada Enjin Carian (Ping Blog Di Google, Yahoo dan Bing)
3. Apa Itu Enjin Carian? Maklumat Mudah Mengenainya

Credit : Ferry

 

Sharing is caring

ciktom

Cik tom seorang part time blogger yang sangat sukakan dunia blogging dan buah tomato. Mula menulis blog 15 Julai 2010. Menaip segala ilham dari akal fikiran dan hati ke dunia alam cyber. Sebarang persoalan atau pengiklanan/advertorial/review sila hubungi ciktom; tomatogurl86[at]gmail.com...gantikan [at] dengan @

10 thoughts on “Tutorial Table of Content Jump To (#)

  • June 18, 2011 at 12:11 am
    Permalink

    Ohooo~ Boleh lah Shag guna pakai coding neh bila nak preview movies 😀 Thanks Cik Tom sayam~ 😉

    Reply
  • June 18, 2011 at 2:38 am
    Permalink

    nice share ciktom… dulu pon ade gak cari benda ni… tapi tak ingat plak nak guna utk buat ape.. kehkehkeh

    Reply
  • June 18, 2011 at 4:48 am
    Permalink

    Assalam…bagus ciktom ingatkan saya balik…dah lupa…sbb jarang praktik…okeh lepas nie nak selalu beramal…TQVM ciktom

    Reply
  • June 18, 2011 at 12:23 pm
    Permalink

    utk entri pnjang k cik tom, ehehe..
    entri emiey mkin lma mkin pndek lak skg ni 😉

    Reply
  • June 19, 2011 at 5:12 pm
    Permalink

    hehe memang dah lama aku cari tutorial ni, mekaseh tom,

    Reply
  • June 21, 2011 at 9:47 pm
    Permalink

    thanks ciktom untuk bl dan tutor ni 🙂

    Reply
  • February 1, 2012 at 1:32 pm
    Permalink

    cik tom, saya tak berapa clear sangatlah. boleh cik tom, bagi tau saya dengan lebih detail tak? betol, saya tengah pening ni. terima kasih tau. 🙂

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.

error: Content is protected !!