Menciptakan Table Of Contents Di Artikel Blog Amp Html

Selamat sore teman blogger. Pada waktu yang kemudian Saya sudah membagikan artikel Cara Membuat Jump Link di Postingan Blog. Dan pada potensi Kali ini Saya ingin posting wacana Cara Membuat Table Of Contents Di Postingan Blog AMP HTML.

Saya pernah menemui link yang di klik pribadi menuju ke paragraf/artikel yang tertuju. Daftar isi tersebut sering disebut selaku Table Of Contents a.k.a TOC. Sebenarnya Jump Link dan Table Of Contents ini memiliki fungsi yang serupa, yakni untuk membuat lebih mudah pembaca untuk menuju ke paragraf yang di pilh dari daftar.

Saya menemui daftar isi atau Table Of Contents ini kebanyakan di wikipedia. Mungkin sobat yang pernah buka wikipedia, pasti sering nemuin link yang bila diklik eksklusif meluncur ke paragraf yang dituju, itulah salah satu penggunaan Kode Table Of Contents

Nah, disini Saya akan membicarakan 3 hal ihwal Table of Content untuk blog AMP HTML. Table of Content ini pastinya tidak memakai javascript supaya valid AMP.

Apa itu Table Of Contents atau TOC?

Table Of Contents atau TOC yakni sebuah daftar isi yang berisi beberapa list dari daftar konten yang ada di dalam halaman artikel tersebut. Biasanya disimpan di awal postingan atau sesudah paragraf kesatu atau kedua atau disesuaikan harapan.

Dengan Table Of Contents atau TOC kita mampu melompat ke bab tertentu dari konten yang ingin kita baca. Biasanya akan ditAndai dengan suatu header untuk tiap-tiap kontennya. Dan ini lazimnya dipakai untuk artikel yang mempunyai konten yang sangat panjang, sehingga pembaca lebih mudah memilah bab-bab dari konten tanpa perlu kelelahan menggulung layar.

Kalau dicontohkan pada sebuah buku, lazimnya ada halaman daftar isi yang berisi daftar halaman untuk setiap bab dari buku tersebut. Dengan itu maka kita mampu dengan gampang mencari halaman dari bab yang ingin kita baca.

Dan biasanya Table Of Contents atau TOC ini juga akan diindex oleh Google dan akan ditampilkan di halaman penelusuran berupa link jump to content. Nanti Saya update postingan ini jika TOC dari halaman ini telah diindex Google.

Update – Setelah Saya coba beberapa keyword, akibatnya TOC di halaman ini tampak di hasil pencarian mirip pada gambar di bawah ini.

Back to Top ↑

Keuntungan Membuat Table Of Contents atau TOC untuk Blog Valid AMP HTML

Bagi Sobat blogger yang gemar menulis posting yang sungguh panjang atau ialah catatan-catatan, Table Of Contents ini mampu membantu Anda untuk membuatkan suatu navigasi untuk memudahkan pembaca menjelajahi atau membaca ulang isi postingan Anda.

Jika blog Anda sudah Valid AMP HTML pastinya tidak mampu menggunakan TOC yang memakai javascript seperti pada blog-blog non AMP karena akan menciptakan blog menjadi tidak valid AMP.

Makara disini Saya share untuk berbagi Table Of Contents atau TOC ini untuk blogger yang menggunakan AMP HTML, sehingga ini akan membuat halaman postingan blog AMP HTML menjadi lebih variatif dan tampil lebih profesional. Postingan ini Saya dapat dari blog Kompi Ajaib

Back to Top ↑

Cara Membuat Table Of Contents atau TOC untuk Blog Valid AMP HTML

Silahkan ikuti langkah-langkah di bawah ini untuk membuat TOC di dalam artikel AMP.

Silahkan tambahkan CSS di bawah ini pada style amp-custom blog Anda.

     #btn_tocfont-weight:bold;cursor:pointer
    #btn_toc:focus,#toc li:focus,.back_toc:focusoutline:none
    #btn_toc svgvertical-align:middle
    #toc li,.back_toccursor:pointer
    #tocdisplay:grid
    :sasaran::beforecontent:"";display:block;height:40px;margin-top:-40px;visibility:hidden

Silahkan atur height:40px;margin-top:-40px; sesuai dengan tinggi sticky menu (jikalau blog menggunakan sticky hidangan), kalau tidak memakai sticky menu maka Anda mampu hapus CSS baris terakhir tersebut.

Kemudian simpan aba-aba HTML di bawah ini untuk menampilkan TOC di dalam artikel, misal sehabis paragraf pertama.

 
Contents


Banyaknya list silahkan sesuaikan dengan header yang dibentuk dan sesuaikan #toc_1 dan seterusnya sesuai banyaknya list yang dibentuk.

Kemudian silahkan buat header untuk tiap-tiap konten untuk TOC seperti di bawah ini

 

Lorem Ipsum


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 arahan id="toc_2", dan seterusnya.

Kemudian di setiap bawah konten dari setiap bagian tambahkan aba-aba berikut untuk memudahkan pembaca kembali ke atas ke TOC.

 
Back to Content ↑

Nah, itulah cara Membuat Table Of Contents Di Postingan Blog AMP HTML.

Back to Top ↑

Tinggalkan komentar