Membuat Table Of Contents Di Postingan Blog Amp Html

Baca Juga

Selamat sore teman blogger. Pada waktu yang kemudian aku sudah membagikan artikel Cara Membuat Jump Link di Postingan Blog. Dan pada kesempatan Kali ini Saya ingin posting perihal 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 sebagai Table Of Contents a.k.a TOC. Sebenarnya Jump Link dan Table Of Contents ini mempunyai fungsi yang sama, yaitu untuk mempermudah pembaca untuk menuju ke paragraf yang di pilh dari daftar.

Saya menemui daftar isi atau Table Of Contents ini kebanyakan di wikipedia. Mungkin teman yang pernah buka wikipedia, niscaya sering nemuin link yang kalau diklik pribadi meluncur ke paragraf yang dituju, itulah salah satu penggunaan Kode Table Of Contents

Nah, disini aku akan membahas 3 hal perihal Table of Content untuk blog AMP HTML. Table of Content ini tentunya tidak menggunakan javascript supaya valid AMP.

Contents

1. Apa itu Table Of Contents atau TOC?
2. Keuntungan Membuat Table Of Contents atau TOC untuk Blog Valid AMP HTML
3. Cara Membuat Table Of Contents atau TOC untuk Blog Valid AMP HTML

Apa itu Table Of Contents atau TOC?

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

Dengan Table Of Contents atau TOC kita sanggup melompat ke serpihan tertentu dari konten yang ingin kita baca. Biasanya akan ditandai dengan sebuah header untuk tiap-tiap kontennya. Dan ini biasanya dipakai untuk postingan yang mempunyai konten yang sangat panjang, sehingga pembaca lebih gampang memilah bab-bab dari konten tanpa perlu capek menggulung layar.

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

Dan biasanya Table Of Contents atau TOC ini juga akan diindex oleh Google dan akan ditampilkan di halaman pencarian berupa link jump to content. Nanti aku update postingan ini jikalau TOC dari halaman ini sudah diindex Google.

Update - Setelah aku coba beberapa keyword, akibatnya TOC di halaman ini tampak di hasil pencarian menyerupai pada gambar di bawah ini.

Back to Content ↑

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

Bagi Sobat blogger yang gemar menulis posting yang sangat panjang atau merupakan catatan-catatan, Table Of Contents ini sanggup membantu Anda untuk berbagi sebuah navigasi untuk mempermudah pembaca menjelajahi atau membaca ulang isi postingan Anda.

Jika blog Anda sudah Valid AMP HTML tentu saja tidak sanggup menggunakan TOC yang menggunakan javascript menyerupai pada blog-blog non AMP alasannya ialah akan menciptakan blog menjadi tidak valid AMP.

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

Back to Content ↑

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

Silahkan ikuti langkah-langkah di bawah ini untuk menciptakan TOC di dalam postingan AMP.

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

     #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}

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

Kemudian simpan arahan HTML di bawah ini untuk menampilkan TOC di dalam postingan, misal sesudah paragraf pertama.

 <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_1" title="Membuat Table Of Contents Di Postingan Blog AMP HTML">Lorem Ipsum</a></li>
   <li><a href="#toc_2" title="Membuat Table Of Contents Di Postingan Blog AMP HTML">Morbi gravida varius fringilla</a></li>
   <li><a href="#toc_3" title="Membuat Table Of Contents Di Postingan Blog AMP HTML">Mauris consectetur</a></li>
   <li><a href="#toc_4" title="Membuat Table Of Contents Di Postingan Blog AMP HTML">Donec facilisis nec sem ac mattis</a></li>
   <li><a href="#toc_5" title="Membuat Table Of Contents Di Postingan Blog AMP HTML">Donec finibus tellus eget sodales vestibulum</a></li>
 </ol>
 </div>

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

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

 <h4 id="toc_1">Lorem Ipsum</h4>

Untuk tag H4, silahkan gunakan minor heading dari tab post editor di atas kemudian 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 serpihan tambahkan arahan berikut untuk memudahkan pembaca kembali ke atas ke TOC.

 <div class="back_toc" on="tap:toc.scrollTo('position' = 'center')" role="button" tabindex="0">Back to Content ↑</div>

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

Back to Content ↑