Cara Membuat Daftar Isi Responsive Pada Postingan Blogger | Tips Terbaru

Pada kesempatan kali ini saya akan membuat panduan membuat Daftar Isi pada blogger atau web site, kenapa sih kita harus membuat daftar isi pada potingan kita !!

Daftar isi pada blog / web site ini sudah mendukug Responsive pokoknya nyaman dan tidak menggangu kode yang berada di template tersebut.

Dengan adanya Daftar isi pada blog kita tau poin atau judul - judul dalam artikel postingan, jadi kita di permudah dalam memahami isi tersebut. Eh iya tak hanya itu saja loh, dengan adanya daftar isi ini setiap kita klik salah satu judul akan tertuju ke artikel nama yang ada di postingan jadi kita tak usah secrol mouse / postingan tersebut.




Apa keuntungan dalam daftar isi pada blog atau web site ?

  • Mempermudah dalam memahami isi artikel / postingan saat membaca judul di daftar isi
  • Daftar isi yang bisa di Hiden / sebunyikan, jadinya menghemat halaman ke bawah

Yang harus di persiapkan dalam membuat daftar isi pada blog / web site 
  1. Buka Tema - HTML pada Blogger
  2. Copy dan Paste kode dan taruh diatas ]]></b:skin> atau sebelum </style>, kode tersedia di bawah
  3. Buat postingan ubah mejadi HTML
  4. Copy dan paste kode yang sudah saya sediakan untuk daftar isi pada postingan

Kode - kode script yang harus di pasng, ikuti langkah - langkanya
  1. Buka dsbor blogger plih menu Tema - Edit HTML
    Masukan kode di bawah ini di diatas ]]></b:skin> atau sebelum </style>

  2. /* Table of Contents by anangzd.com */
    .toc {background-color:#f8f9fa; border:1px solid #a2a9b1; padding:10px 13px; display:table; line-height:1.6em;}
    .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 !important; position:absolute; opacity:0}
    :not(:checked) > .toctogglespan:before {content:'['}
    .toctoggle:not(:checked) + .toctitle .toctogglelabel:after {content:'sembunyikan';display: inline}
    .toctoggle:checked + .toctitle .toctogglelabel:after {content:'tampilkan'}
    :not(:checked) > .toctogglespan:after {content:']'}
    .toctoggle:checked ~ ul{display:none}
    :target::before {content:''; display:block; height:50px; margin-top:-50px; visibility:hidden}


  3. Buat postingan ubah menjadi mode HTML 
    Copy paste kode yang sudah saya sdiakan di bawah, ini kode untuk menu Daftar isi 
    <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>
  4. Copy dan paste kode script pada daftar isi yanag akan di tuju, isi postingan / artikel yang akan kalian buat
    <h2 id="toc1">Judul Satu</h2>
    ...isi paragraf satu

    <h2 id="toc2">Judul Dua</h2>
    ...isi paragraf dua

    <h2 id="toc3">Judul Tiga</h2>
    ...isi paragraf tiga

    <h2 id="toc4">Judul Empat</h2>
    ...isi paragraf empat

    <h2 id="toc5">Judul Lima</h2>
    ...isi paragraf lima

    <h3 id="toc5_1">Sub Judul Lima ke Satu</h3>
    ...isi paragraf lima part 1

    <h3 id="toc5_2">Sub Judul Lima ke Dua</h3>
    ...isi paragraf lima part 2

    <h2 id="toc6">Judul Enam</h2>
    ...isi paragraf enam
  5. Setelah itu kalian tingga ubah nama - nama judul yang akan kau buat pada postingan tersebut
  6. Selesai


Semoga panduan membuat Daftar Isi di Postingan Blogger yang Responsive dengan mudah, cepat, simpel dan efisin waktu ini bisa bermanfaat buat kalian, Terimas kasih

0 Comments:

Post a Comment