Cara Membuat Table of Content di Blogger (TOC Otomatis) Versi AMP
Cara membuat dan memasang table of content valid AMP di blogger. Jika di beberapa artikel yang ada di internet membahas cara membuat table of content di blogger tapi pada blog non AMP, nah kali ini saya akan membahas sebaliknya, saya akan membuat table of content atau daftar isi otomatis di blogger valid AMP yang tentunya simple dan SEO Friendly.
Fungsi Table Of Content di Blogger
Table of Content memiliki fungsi yang sama seperti di daftar isi yang ada di sebuah buku, yaitu menyampaikan inti dari pembahasan yang di berikan sebuah artikel, namun yang membedakan TOC versi buku dan versi blog adalah, di blog anda tinggal mengklik apa yg ada di daftar isi tanpa harus mencari perhalaman seperti daftar isi yang ada di buku.
BACA JUGA : Cara Membuat Parse Koding Postingan
Jika biasanya menggunakan TOC di blogger dilakukan dengan cara manual, yaitu menempelkan kode kedalam postingan, nah, Table of Content atau daftar isi yang akan saya bagikan ini tidak perlu begitu, karena TOC akan otomatis terpasang di dalam postingan tanpa harus memasangnya manual.
Cara Kerja Table of Content di Blogger
Cara kerja script yang saya buat ini yaitu dengan mengumpulkan h1, h2, dan h3 yang ada di dalam postingan. Jadi jika script ini tidak berfungsi, itu berarti anda tidak memasang tag yang saya jelaskan di atas.
Cara Membuat Table Of Content (TOC Otomatis) di Blog Valid AMP
- Pertama silahkan anda login ke akun blogger anda.
- Kemudian pilih tema, lalu klik Edit HTML
- Cari kode penutup head, contohnya seperti ini </head> atau </head>
- Jika sudah, letakkan kode di bawah ini tepat diatas kode tadi.
<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
<b:if cond='data:view.url != data:view.url params { amp: "1" }'>
<style media='all' type='text/css'>
.bwstoc {
margin: 10px 0;
background: #F0F0F0;
border: 1px solid #ddd;
}
.bwstoc ol, .bwstoc ul {
margin: 0 0 15px 20px;
padding: 0;
}
.bwstoc ul {
list-style: disc;
}
.bwstoc ol li, .bwstoc ul li {
font-size: 95%;
padding: 5px 10px 0 0;
margin: 0 0 0 30px;
}
.bwstoc a {
text-decoration: none;
}
.bwstoc a:hover {
text-decoration: underline;
}
.bwstoc .bwstocHeader {
font-weight: bold;
font-size: 100%;
position: relative;
outline: none;
border: none;
padding: 5px 15px 5px 5px;
margin: 5px 10px;
}
.bwstoc .bwstocHeader a {
text-decoration: none;
cursor: pointer;
}
.bwstoc .bwstocHeader a:hover {
text-decoration: underline;
}
</style>
<!-- Blogger TOC -->
<script>
//<![CDATA[
function bwstoc() {
var bwstoc = 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 bws_1 = getheading.replace(/[^a-z0-9]/gi," ");
var bws_2 = bws_1.trim();
var getHeadUri = bws_2.replace(/\s/g, "_");
document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].setAttribute("id", getHeadUri);
bwstoc = "<li><a href='#" + getHeadUri + "'>" + getheading + "</a></li>";
document.getElementById("bwstoc").innerHTML += bwstoc;
}
} else { document.write("<style>.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style>"); }
}
function bwstocShow() {
var bwstocBtn = document.getElementById('bwstoc');
var bwstocWrapID = document.getElementById('bwstocwrap');
var bwstocLink = document.getElementById('bwstocLink');
if (bwstocBtn.style.display === 'none') {
bwstocBtn.style.display = 'block';
bwstocWrapID.style.display = 'block';
bwstocLink.innerHTML = 'Tutup';
} else {
bwstocBtn.style.display = 'none';
bwstocWrapID.style.display = 'inline-block';
bwstocLink.innerHTML = 'Tampil';
}
}
//]]>
</script>
<noscript><style media='all' type='text/css'>#bwstocwrap,.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style></noscript>
</b:if></b:if><!-- TOC www.repick.net -->
<b:if cond='data:view.url != data:view.url params { amp: "1" }'>
<div id='post-toc'> <div id='bwstocwrap' class='bwstoc' style='display:inline-block;'><div class='bwstocHeader'>Daftar Isi [<a id='bwstocLink' onclick='bwstocShow()'>Tampil</a>]</div><ul id='bwstoc' style='display:none'/></div> <data:post.body/> <script>bwstoc();</script> </div></b:if><!-- end TOC --><!-- TOC www.repick.net -->
<b:if cond='data:view.url != data:view.url params { amp: "1" }'>
<div id='post-toc'> <div id='bwstocwrap' class='bwstoc' style='display:inline-block;'><div class='bwstocHeader'>Konten [<a id='bwstocLink' onclick='bwstocShow()'>Tutup</a>]</div><ul id='bwstoc' style='display:block'/></div> <data:post.body/> <script>bwstoc();</script> </div></b:if><!-- end TOC -->Jika Terdapat Error AMP
Jika pada saat anda memasang kode tersebut terdapat error AMP, maka ganti kode di bawah ini.
<b:if cond='data:view.url != data:view.url params { amp: "1" }'>Dengan kode di bawah ini, silahlan sesuaikan berdasar halaman AMP anda masing masing.
Jika halaman AMP anda adalah m=1, maka ganti dengan kode di bawah ini.
<b:if cond='data:blog.isMobileRequest != "true"'>Jika halaman AMP anda di semua versi seperti desktop, maka ganti dengan kode dibawah ini.
<b:if cond='data:blog.isMobileRequest != "true"'>Nah, bagaimana artikel cara membuat table of content (TOC Otomatis) di blogger valid AMP ini? Apakah sangat berguna?, jika ada pertanyaan silahkan berkomentar dengan sopan di kolom komentar ya.
www.repick.net
Komentar
Posting Komentar