 |
| Kepentingan Table of Contents dan Back To Top |
Pengenalan
Kalau anda seorang blogger, mesti anda pernah tulis artikel panjang berjela kan? Kadang-kadang sampai lebih 1500 perkataan, penuh dengan penerangan, gambar dan huraian. Memang bagus untuk pembaca dan juga SEO, tapi ada satu masalah kecil: pembaca cepat penat scroll. Lagi-lagi kalau mereka cuma nak cari satu bahagian penting sahaja dalam artikel tersebut.
Di sinilah datangnya peranan Table of Content (TOC) dan Back to Top button. TOC membolehkan pembaca nampak gambaran keseluruhan isi artikel dengan cepat. Manakala butang Back to Top pula membantu mereka kembali ke atas halaman tanpa perlu scroll manual. Dua feature ini nampak simple, tapi sebenarnya boleh ubah pengalaman pembaca dengan ketara.
Bukan itu sahaja, Google juga suka artikel yang ada TOC. Kadang-kadang search engine akan paparkan “jump link” terus ke bahagian tertentu artikel anda. Ini boleh tingkatkan klik CTR (Click Through Rate) blog anda. Jadi kalau anda guna Blogspot dan masih belum pasang TOC dan Back to Top, dalam artikel ini saya akan Kongsi sedikit cara pasang TOC dan BTT dalam html post dan bukan tema asal blog.
Kepentingan TOC dan Back to Top
1. Memudahkan Navigasi Pembaca
Bayangkan anda masuk ke sebuah blog yang tulis artikel panjang. Tanpa TOC, anda mungkin kena scroll dari awal sampai habis untuk cari info tertentu. Tapi dengan adanya TOC, anda boleh klik terus tajuk yang anda nak baca. Simple tapi sangat membantu.
2. Menjadikan Artikel Lebih Teratur
TOC membuat artikel anda nampak lebih profesional. Ia bukan sekadar senarai isi, tapi juga struktur yang menunjukkan penulis serius dalam menyampaikan maklumat. Sama juga dengan butang Back to Top dan ia beri “sentuhan mesra pengguna” yang buat blog nampak moden.
3. Kelebihan SEO
Google sangat suka artikel yang tersusun dengan heading (H2, H3). Bila anda tambah TOC, crawler Google lebih mudah faham isi artikel. Kadang-kadang, hasil carian Google akan paparkan link terus ke subsection dalam artikel anda. Ini peluang besar untuk tarik lebih ramai pembaca.
4. Tingkatkan Masa Pembaca di Blog
Dengan navigasi yang lancar, pembaca akan habiskan lebih banyak masa membaca artikel anda. Mereka tak cepat bosan, sebab boleh pilih bahagian yang mereka minat. Secara tidak langsung, bounce rate blog akan turun dan ini juga bagus untuk SEO.
Baca juga artikel berkaitan
Kod TOC dan Back to Top
Untuk pengguna Blogspot, sebenarnya tidak susah pun nak tambah TOC dan butang Back to Top. Disini saya kongsikan kod html untuk posting yang akan dibuat.
Notes penting: kod ini untuk satu artikel saja dan bukan keseluruhan theme. Kerana ada theme premium tak support TOC
<!-- CSS TOC & Back to Top -->
<style>
.toc-container {
background: #f9f9f9;
border: 1px solid #ddd;
padding: 15px;
margin: 20px 0;
border-radius: 8px;
}
.toc-title {
font-weight: bold;
margin-bottom: 10px;
font-size: 18px;
}
.toc-list {
list-style: none;
padding-left: 0;
}
.toc-list li {
margin: 5px 0;
}
.toc-list a {
text-decoration: none;
color: #0073e6;
}
.toc-list a:hover {
text-decoration: underline;
}
.back-to-top {
display: block;
margin-top: 15px;
font-size: 14px;
}
</style>
<!-- TOC -->
<div id="top" class="toc-container">
<div class="toc-title">Isi Kandungan</div>
<ol class="toc-list">
<li><a href="#section1">Pengenalan</a></li>
<li><a href="#section2">Kepentingan TOC dan Back to top</a></li>
<li><a href="#section3">Kod TOC & Back to top</a></li>
<li><a href="#section4"> Langkah-langkah Membuat TOC dan Back to Top </a></li>
<li><a href="#section5"> Beza TOC theme dan TOC Posting</a></li>
<li><a href="#section6">Rumusan</a></li>
</ol>
</div>
Kod di atas adalah versi ringkas dan mudah difahami. Anda boleh edit warna, tulisan, dan saiz mengikut tema blog masing-masing.
Langkah-langkah Membuat TOC dan Back to Top di Blogspot
Bagi anda yang baru dengan coding, jangan risau. Saya terangkan langkah-langkahnya dengan cara paling mudah dan tak perlu ubah setting di theme. Cuma buat dekat html view di artikel semasa nak buat post.
1. Masuk ke Dashboard Blogspot
Login ke akaun Blogspot anda. Pilih artikel yang ingin anda ubah dan tambah TOC. Copy kod tadi.
 |
| Copy paste kode TOC dan BTT |
2. Tambahkan Kod TOC
- Pergi ke Blog Post > Edit HTML View
- Tambahkan kode yang saya berikan tadi, paste di atas perenggan H2 ( pengenalan ). Tekan Control + F kemudian taip H2. cari pengenalan . iaitu perenggan paling atas.
 |
| Tambah id=''section'' |
Tambah id="section1" hingga id="section6" di setiap H2 ikut jumlah berapa panjang H2 dan paste kode <p><a href="#top" class="back-to-top">↑ Kembali ke Isi Kandungan</a></p> di setiap akhir perenggan H2 tadi.
 |
| Paste Back top Isi Kandungan |
3. Contoh pengisian dalam artikel
Saya gunakan terus artikel ni sebagai contoh.
<!—Cara menambah table of konten -->
<h2 id="section1">Pengenalan</h2>
<p>Isi artikel section 1...</p>
<p><a href="#top" class="back-to-top">↑ Kembali ke Isi Kandungan</a></p>
<h2 id="section2">Kepentingan TOC dan BTT</h2>
<p>Isi artikel section 2...</p>
<p><a href="#top" class="back-to-top">↑ Kembali ke Isi Kandungan</a></p>
<h2 id="section3">Langkah-langkah memasukan Kod TOC</h2>
<p>Isi artikel section 3...</p>
<p><a href="#top" class="back-to-top">↑ Kembali ke Isi Kandungan</a></p>
<h2 id="section4">Beza TOC post dan TOC theme</h2>
<p>Isi artikel section 4...</p>
<p><a href="#top" class="back-to-top">↑ Kembali ke Isi Kandungan</a></p>
<h2 id="section5">Rumusan</h2>
<p>Isi artikel section 5...</p>
<p><a href="#top" class="back-to-top">↑ Kembali ke Isi Kandungan</a></p>
 |
| Paparan penuh TOC dan Kembali ke Top |
4. Simpan & Uji
Klik Save dan buka blog anda. Cuba scroll anda akan nampak TOC berfungsi dan butang Back to Top muncul bila anda turun ke bawah.
Perbezaan TOC Di theme dan Toc dan Posting
1. Kod TOC di Theme (Edit HTML Theme)
Bila kita letak kod TOC terus dalam theme, ia akan apply secara automatik pada semua artikel blog. Tapi bukan semua theme support kepada TOC ni. Lebih-lebig lagi theme yang premium dan mementingkan kelajuan.
Maksudnya setiap kali awak publish artikel baru, TOC akan detect heading (H2, H3) dalam post tu dan hasilkan senarai isi kandungan.
Kelebihan:
- Tak perlu copy-paste kod setiap kali tulis artikel.
- Blog nampak lebih konsisten.
- Lebih sesuai kalau blog awak fokus pada artikel panjang (tutorial, panduan).
Kekurangan:
- Kadang-kadang kalau artikel pendek, TOC nampak tak sesuai (kosong atau terlalu simple).
- Perlu sedikit coding tambahan untuk “hide/show TOC” ikut panjang artikel.
2. Kod TOC dalam Post (HTML editor di artikel)
Kod ni awak letak secara manual dalam satu-satu artikel. Sesuai untuk artikel mana yang kita nak letak. Kerana tak semua artikel kita panjang lebar kan.
Jadi TOC hanya muncul di artikel yang awak masukkan kod tersebut.
Kelebihan:
- Fleksibel – awak boleh pilih artikel mana yang nak ada TOC.
- Sesuai kalau hanya artikel panjang tertentu yang perlukan isi kandungan.
Kekurangan:
- Agak leceh sebab kena copy-paste kod setiap kali nak guna.
- Kalau silap letak dalam editor (compose vs HTML mode), kadang TOC tak jalan.
Baca juga artikel berkaitan
Rumusan
Memasang Table of Content dan Back to Top button bukanlah perkara wajib dalam blog. Tapi kalau anda mahu blog nampak lebih profesional, mudah dibaca, dan mesra SEO, dua ciri ini memang patut dipasang.
TOC membantu pembaca terus melompat ke bahagian yang mereka mahu, manakala Back to Top memudahkan mereka kembali ke atas dengan sekali klik. Nampak remeh, tapi inilah detail kecil yang buat pembaca rasa selesa. Bila pembaca selesa, mereka akan datang lagi – dan itulah tujuan utama kita sebagai blogger.
Kalau anda belum cuba, inilah masa terbaik untuk tambah TOC dan Back to Top di blog anda. Simple, percuma, dan hasilnya memang berbaloi. Selamat mencuba!
 |
| Kepentingan TOC. View akhir |
Jika berminat baca juga Best Niche for Blogging. 10 Most Popular
Post a Comment