Dalam kesempatan ini, saya melalui IdnClass akan mencoba membuat tutorial blog tentang Cara Membuat Daftar Isi atau Post Summary pada postingan yang memiliki fitur Hide and Show atau tombol Sembunyikan dan Tampilkan. Karena kebanyakan blogger menggunakan fitur ini menggunakan script, maka dalam postingan saya ini tidak menggunakan script sama sekali. Sehingga aman dipakai untuk kamu yang menggunakan template blog AMP. Karena biasanya blog amp jika menggunakan script dalam postingannya, maka bisa menjadi tidak valid. Meskipun sebenarnya masih bisa di akali dengan menggunakan iframe. Tentu saja kamu harus benar-benar menguasai penggunaan iframe dan script untuk blog amp.
Nah, untuk kamu yang masih belum menguasai penggunaan script dalam blog amp, maka tutorial Cara Membuat Daftar Isi Postingan pada blog AMP ini bisa dijadikan alternatif.
Langkah-langkah Membuatnya
Sebelum melanjutkan tutorial ini, kamu bisa perhatikan pada kolom disamping. Seperti itulah kira-kira hasil dan tampilannya.Jika masih tertarik, silahkan lanjutkan membacanya. Jika tidak, kamu bisa baca-baca artikel yang lain yang ada di blog ini ya. siapa tau ada tutorial yang sedang kamu butuhkan untuk keperluan blog amp mu.
Kode CSS untuk membuat Daftar isi Postingan
Pertama, kamu harus sudah berada di halaman edit html blog kamu ya, terus cari kode <b:if cond='data:blog.pageType == "item"'>. Nah kalau sudah ketemu lihat lagi kebawahnya kamu cari kode <style amp-custom='amp-custom'> Kenapa harus di bawah kode itu, karena Daftar isi postingan ini hanya akan kita tampilkan pada halaman postingan saja bukan pada halaman home atau lainnya kan. jika sudah ketemu, silahkan salin kode dibawah ini dan pastekan di bahah kode <style amp-custom='amp-custom'> tadi.
/* Table of Contents IdnClass*/
.toc {background-color:#f8f9fa; border:1px solid #a2a9b1; padding:10px 13px; display:table; line-height:1.6em; float: left;
margin-right: 10px;}
.toc h2 {display:inline-block; margin-right:10px}
.toc a {text-decoration:none}
.toc a:hover {text-decoration:underline}
.toc ul {list-style-type:none; list-style-image:none; margin:0px; padding:0px; text-align:left}
.toc ul li {list-style-type:none;}
.toc ul li a {margin-left:.5em}
.toc ul li ul {margin-left:2em}
.toctogglelabel {cursor:pointer; color:#0645ad}
:not(:checked) > .toctoggle {display:inline; position:absolute; opacity:0}
:not(:checked) > .toctogglespan:before {content:'['}
.toctoggle:not(:checked) + .toctitle .toctogglelabel:after {content:'Hide';display: inline}
.toctoggle:checked + .toctitle .toctogglelabel:after {content:'Show'}
:not(:checked) > .toctogglespan:after {content:']'}
.toctoggle:checked ~ ul{display:none}
:target::before {content:''; display:block; height:0px; margin-top:0px; visibility:hidden}
Jika sudah, silahkan save atau simpan. Kode HTML untuk menerapkannya
Untuk cara menggunakannya, silahkan copy lagi kode di bawah ini dan pastekan pada halaman postingan yang akan kamu buat.
<div class="toc">
<input type="checkbox" role="button" id="toctoggle" class="toctoggle"><div class="toctitle"><h2>Daftar isi</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctoggle"></label></span></div>
<ul>
<li>1 <a href="#toc1" title="Judul Satu">Judul Satu</a></li>
<li>2 <a href="#toc2" title="Judul Dua">Judul Dua</a></li>
<li>3 <a href="#toc3" title="Judul Tiga">Judul Tiga</a></li>
<li>4 <a href="#toc4" title="Judul Empat">Judul Empat</a></li>
<li>5 <a href="#toc5" title="Judul Lima">Judul Lima</a>
<ul>
<li>5.1 <a href="#toc5_1" title="Sub Judul Lima ke Satu">Sub Judul Lima ke Satu</a></li>
<li>5.2 <a href="#toc5_2" title="Sub Judul Lima ke Dua">Sub Judul Lima ke Dua</a></li>
</ul>
</li>
<li>6 <a href="#toc6" title="Judul Enam">Judul Enam</a></li>
</ul>
</div>
Cara Menggunakannya
Perhatikan kata yang saya beri warna kuning pada kode di atas. #toc1 sampai #toc6 adalah id untuk memanggil elemen atau judul yang akan kita tuju. jadi silahkan atur heading atau judul atau elemen postingan dengan menyertakan id yang sama dengan yang diatas. Yang perlu di ingat adalah bahwa tiap id ini harus unik dalam satu halaman. Sebagai contoh :<h2 id="toc1">Judul Satu</h2> Disini di isi untuk paragraf satu <h2 id="toc2">Judul Dua</h2> Disini di isi paragraf dua <h2 id="toc3">Judul Tiga</h2> Disini di isi paragraf tiga <h2 id="toc4">Judul Empat</h2> Disini di isi paragraf empat <h2 id="toc5">Judul Lima</h2> Disini di isi paragraf lima <h3 id="toc5_1">Sub Judul Lima ke Satu</h3> Disini di isi paragraf lima part 1 dst.Semoga tutorial Cara Membuat Daftar Isi Postingan pada blog AMP ini mudah dipahami. Namun, Sebaiknya penggunaan Daftar isi postingan ini dipakai jika tulisan kita cukup panjang. Jika artikelnya pendek, maka bagi sebagian orang akan terlihat sedikit mengganggu. Jika ada pertanyaan atau masalah dalam penggunaan Daftar isi ini, silahkan sampaikan pertanyaan kamu dikolom komentar dibawah ini.