Cara Membuat Daftar Isi Di Postingan Blog non-AMP dan AMP
Monday, October 29, 2018
Add Comment
Cara
Membuat Daftar Isi atau bahasa keren-nya Table of Content (TOC), Table of Content
(TOC) befungsi untuk memudahkan pengunjung untuk menelusuri isi artikel yang
panjang, jadi dengan bantuan table of content atau daftar isi pada postingan
dapat mempermudah hal tersebut.
Pemsangan
table of contents pada postingan blog bukan hanya memudahkan para pengunjung
untuk menelusuri seluruh artikel dengan mudah, namun juga dapat membuat blog
kita menjadi lebih rapi, terlihat professional dan tentunya lebih SEO friendly.
Mungkin
ada baiknya admin sedikitnya jelasakan terlebih dulu apa itu Table of Content itu?
Pengertian Table Of Content
Table
of Content (TOC) merupakan sebuah daftar isi pada postingan yang terdiri dari baba
tau poin poin penting dalam artikel tersebut, Teable of Content layaknya sebuat
daftar isi pada buku buku biasanya yang kita sering jumpai ketika membaca buku,
untuk membudahkan kita mencari baba tau poin penting dalam buku biasanya kita
mencarinya di daftar isi tersebut, sama seperti Table of Content yang
memudahkan pengunjung untuk mencari topik pentingnya saja, samakan seperti
daftar isi pada buku, namun jika daftar isi pada buku setelah mengetahui
halaman yang ingin dibaca harus secara manual dibuka dulu, berbeda dengan Table
of Content pada postingan satu klik saja poin mana yang ingin dibaca secara
otomatis akan berpindah ke bagain yang ingin dibaca tersebut tidak perlu menyekrol
ke atas bawah untuk membaca.
Jadi,
pembaca tidak perlu repot repot scroll atas bawah untuk membaca. Contohnya
seperti tombol dibawah ini.
Cara Memasang TOC di Blog
Cara Pasang di Blog non-AMP
Pertama,
login masuk ke dasblor blog Pilih Tema,
Edit HTML, cari kode ]]></b:skin>
dengan ctrl+f, kemudian letakan kode dibawah tempat di atas kode ]]></b:skin> Kemudian
Simpan Template.
#btn-cm{border:1px solid #dadada;border-radius:5px;background-color:#f9f9f9} #btn_toc{font-weight:700;cursor:pointer;margin:10px} #btn_toc:focus,#toc li:focus,.back_toc:focus{outline:none} #btn_toc svg{vertical-align:middle} #toc li{cursor:pointer} #toc{display:grid} .back_toc{cursor:pointer;text-align:right}
Cara pasang di Blog AMP
Cari kode <style
amp-custom='amp-custom'> dan letakan kode ini di bawahnya.
#btn_toc{font-weight:bold;cursor:pointer} #btn_toc:focus,#toc li:focus,.back_toc:focus{outline:none} #btn_toc svg{vertical-align:middle} #toc li,.back_toc{cursor:pointer} #toc{display:grid} :target::before{content:"";display:block;height:40px;margin-top:-40px;visibility:hidden}
Jika
menggunakan header sticky tambahkan kode css ini di bawah kode tersebut
:target::before{content:"";display:block;height:40px;margin-top:-40px;visibility:hidden
Dan
perhatikan kode height:40px;margin-top:-40px ubah sesuai nilainya dengan tinggi header stickynya, (ini berlaku
untuk blog nonAMP dan AMP).
Jika
sudah selesai sobat sudah sukses Memasang table of contents pada template. Namun
harus ada kode pemanggil di postingan untuk menampilkanya, simak langkah
selanjutnya.
Cara Menerapkan ToC di Postingan
Untuk
menampilkan table of contents pada postingan, kita perlu memanggil css yang
sudah kita pasang pada template tadi, jika tidak memasang kode ini pada
postingan yang ingin di tampilkan TOC nya percuma saja tidak akan tampil apa
apa, jadi sobat perlu memasang nya di setiap postingan yang ingin ada TOC nya, Caranya
pilih menu HTML pada format postingan “ingat
jangan di format compos”.
Untuk Blog NON-AMP
<div
id="btn-cm"> <div id="btn_toc" onclick="if
(document.getElementById('toc').style.display === 'none') {
document.getElementById('toc').style.display = 'block'; } else {
document.getElementById('toc').style.display = 'none'; }"
role="button" tabindex="0">Contents <svg
width="18" height="18" viewBox="0 0 24
24"><path fill="#000000"
d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z"
/></svg></div> <div id="toc"> <ol>
<li><a href="toc" title="Subheading
1">Subheading 1</a></li> <li><a href="toc"
title="Subheading 2">Subheading 2</a></li>
<li><a href="toc" title="Subheading 3">Subheading
3</a></li> <li><a href="toc"
title="Subheading 4">Subheading 4</a></li>
<li><a href="toc" title="Subheading
5">Subheading 5</a></li> </ol> </div>
</div>
Untuk Blog AMP
<div
id="btn_toc" on="tap:toc.toggleVisibility" role='button'
tabindex='0'>Contents <svg width="18" height="18"
viewBox="0 0 24 24"><path fill="#000000"
d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z"
/></svg></div> <div id="toc"> <ol>
<li><a href="#toc" title="Lorem Ipsum">Lorem
Ipsum</a></li> <li><a href="#toc"
title="Morbi gravida varius fringilla">Morbi gravida varius
fringilla</a></li> <li><a href="#toc"
title="Mauris consectetur">Mauris consectetur</a></li>
<li><a href="#toc" title="Donec facilisis nec sem ac
mattis">Donec facilisis nec sem ac mattis</a></li>
<li><a href="#toc" title="Donec finibus tellus eget
sodales vestibulum">Donec finibus tellus eget sodales
vestibulum</a></li> </ol> </div>
Keterangan:
Banyaknya
list silahkan sesuaikan dengan header yang dibuat dan sesuaikan #toc dan seterusnya sesuai
banyaknya list yang dibuat.
Kemudian
silahkan buat header untuk tiap-tiap konten untuk TOC seperti di bawah ini
<h4
id="toc_1">Lorem Ipsum</h4>
Untuk
tag H4, silahkan gunakan minor heading dari tab post editor di atas lalu
tambahkan id="toc_1"
dan
seterusnya sesuai posisi header. Untuk header kedua maka tambahkan kode id="toc_2", dan seterusnya.
Untuk
pemasangan pada postingannya menurut admin setelah paragraph basa basi pada
awal artikel, atau sesuaikan saja dimana menurut sobat untuk pemasanganya.
Untuk
menudahkan pembaca kembali ke atas ke TOC gunakan kode ini di setiap bab.
Blog
AMP
<div
class="back_toc" on="tap:toc.scrollTo('position' =
'center')" role="button" tabindex="0">Kembali ke atas ↑</div>
Blog
Non-AMP
<div
class="back_toc"
onclick="document.getElementById('btn_toc').scrollIntoView(true);"
role="button" tabindex="0"> Kembali ke atas ↑</div>
Selamat
mencoba..
Demikian,
Cara Membuat Daftar Isi Di Postingan
Blog non-AMP dan AMP, semoga bermanfaat. Jika ada yang ingin ditanyakan
silahkan komen dibawah..
0 Response to "Cara Membuat Daftar Isi Di Postingan Blog non-AMP dan AMP"
Post a Comment
Note :
- Di larang pasang link aktif di kolom komentar
- Komentar akan disetujui jika tidak mengandung promosi
- Komentar boleh menggunakan bahasa banjarmasin
- Dilarang komentar yang berisi pornografi
- Jangan harap komentar yang berisi link aktif akan disetujui