Hello sobat IcloudZer kali ini saya akan membahas mengenai Table of Content, apakah kamu tahu mengenai Table of Content, jika belum tahu kami akan memberikan informasi nya Untuk anda dan kami juga akan memberikan cara untuk menerapkan Table of Content didalam Postingan secara otomatis
Apa Itu Toc?
Toc atau Table of Content adalah sebuah Fitur yang bisa membuat sebuah link yang menuju langsung ke poin poin didalam artikel atau kumpulan inti pokok didalam pembasan artikel tersebut
Sebagai contoh kamu bisa melihat Table of Content Pada artikel yang sedang kamu baca ini, Table of Content juga dipakai atau digunakan oleh atau diterapkan oleh platform Wikipedia
Haruskah menggunakan Toc?
Table of Content bisa digunakan didalam artikel yang memuat pembahasan yang cukup panjang sehingga pembaca bisa memilih inti dari pembahasan dalam suatu artikel dengan melihat dari Table of Content tersebut
Tidak diharuskan anda untuk menggunakan Table of Content (Toc) tetapi tidak ada salahnya anda menggunakan Table of Content didalam postingan anda, Jika anda mempunyai pembahasan atau penjelasan yang cukup panjang
Lagi pula dengan menggunakan Table of Content didalam artikel membuat tulisan kita menjadi lebih teratur dan rapi
Pengaruh Terhadap SEO
Bisa dibilang ketika kamu menerapkan Table of Content didalam sebuah artikel berpengaruh terhadap pengalaman pengguna atau User Experience di dalam blog kita, dan tidak secara langsung berpengaruh terhadap SEO ataupun ranking dipencarian google
Info: User Experience atau pengalaman pengguna saat ini merupakan salah satu faktor penilaian Google untuk menentukan peringkat website.
Tampilan pada pencarian google?
Seperti yang sudah saya jelaskan sebelumnya bahwa dengan menerapkan Table of Content didalam postingan akan membuat tampilan yang berbeda dalam pencarian google sebagai contoh lihat gambar dibawah ini
Tampilan diatas ketika Table of Content diterapkan didalam postingan
Cara Pembuatan
Baiklah sobat dibawah ini adalah cara membuat Table of content, pelajari setiap langkah yang kami berikan agar mudah untuk dimengerti
- Login ke akun blogger kamu
- Pergi ke Template Kemudian pilih edit HTML
- Selanjutnya letakkan kode dibawah ini diatas kode ></head> atau sebelum kode </head>
- Jika sudah kemudian simpan
<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
<style media='all' type='text/css'>
.rah-toc {
margin: 10px 0;
background:#e3e3e3;
border:0px solid #f80000;
}
.rah-toc ol, .rah-toc ul {
margin: 0 0 15px 20px;
padding: 0;
}
.rah-toc ul {
list-style: disc;
}
.rah-toc ol li, .rah-toc ul li {
font-size: 95%;
padding: 5px 10px 0 0;
margin: 0 0 0 30px;
}
.rah-toc a {
text-decoration: none;
}
.rah-toc a:hover {
text-decoration: underline;
}
.rah-toc .rah-tocHeader {
font-weight: bold;
font-size: 100%;
position: relative;
outline: none
border: none;
padding: 5px 15px 5px 5px;
margin: 5px 10px;
}
.rah-toc .rah-tocHeader a {
text-decoration: none;
cursor: pointer;
}
.rah-toc .rah-tocHeader a:hover {
text-decoration: underline;
}
</style>
<!-- Blogger TOC -->
<script type='text/javascript'>
//<![CDATA[
function rah-toc() {
var rah-toc = i = headinglength = getheading = 0;
headinglength = document.getElementById("post-toc").querySelectorAll("h2, h3, h4").length;
if (headinglength > 0) {
// Hanya Tampil Jika Ditemukan Minimal 1 Heading
for (i = 0; i < headinglength; i++) {
getheading = document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].textContent;
var rah-toc_1 = getheading.replace(/[^a-z0-9]/gi," ");
var rah-toc_2 = rah-toc_1.trim();
var getHeadUri = rah-toc_2.replace(/\s/g, "_"); document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].setAttribute("id", getHeadUri);
rah-toc = "<li><a href='#" + getHeadUri + "'>" + getheading + "</a></li>"; document.getElementById("rah-toc").innerHTML += rah-toc;
}
} else { document.write("<style>.rah-toc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style>"); }
}
function rah-tocShow() {
var rah-tocBtn = document.getElementById('rah-toc');
var rah-tocWrapID = document.getElementById('rah-tocwrap');
var rah-tocLink = document.getElementById('rah-tocLink');
if (rah-tocBtn.style.display === 'none') {
rah-tocBtn.style.display = 'block';
rah-tocWrapID.style.display = 'block';
rah-tocLink.innerHTML = 'Tutup';
} else {
rah-tocBtn.style.display = 'none';
rah-tocWrapID.style.display = 'inline-block';
rah-tocLink.innerHTML = 'Tampil';
}
}
//]]>
</script>
<noscript><style media='all' type='text/css'>#rah-tocwrap,.rah-toc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style></noscript>
</b:if>Cara penggunaan Toc
Setelah anda menyelesaikan cara seperti di atas selanjutnya, untuk menampilkan Toc didalam postinganan periksa dua cara yang bisa kamu pilih
Cari kode <data:post.body/> jika sudah ketemu kemudian ganti dengan kode yang kami sediakan dibawah ini :
Toc Terbuka
<div id='post-toc'>
<div id='rah-tocwrap' class='rah-toc' style='display:inline-block;'><div class='rah-tocHeader'>Table of Content [<a id='rah-tocLink' onclick='rah-tocShow()'>Tutup</a>]</div><ul id='rah-toc' style='display:block'/></div>
<data:post.body/>
<script>rah-toc();</script>
</div>Ganti Kode <data:post.body/> dengan kode diatas untuk menampilkan Table of Content
Contoh Tampilan
Baiklah admin akan menyertakan contoh tampilan dari Toc Terbuka, nah tampilan nya seperti contoh dibawah ini ya
Info: Toc ini akan benar benar berfungsi jika kamu menerapkannya didalam template blog, Tampilan diatas hanya sebagai contoh demonya saja oke
Toc Tertutup
<div id='post-toc'>
<div id='rah-tocwrap' class='rah-toc' style='display:inline-block;'><div class='rah-tocHeader'>Table of Content [<a id='rah-tocLink' onclick='rah-tocShow()'>Tampil</a>]</div><ul id='rah-toc' style='display:none'/></div>
<data:post.body/>
<script>rah-toc();</script>
</div>Ganti Kode <data:post.body/> dengan kode diatas untuk menampilkan Table of Content
Contoh Tampilan
Baiklah admin akan menyertakan contoh tampilan dari Toc Tertutup, nah tampilan nya seperti contoh dibawah ini ya
Info: Toc ini akan benar benar berfungsi jika kamu menerapkannya didalam template blog, Tampilan diatas hanya sebagai contoh demonya saja oke
Begitulah informasi yang bisa saya bagikan untuk anda mengenai bagaimana cara membuat Table of Content didalam postingan blog secara otomatis
