Daftar isi
Untuk pengguna wordpress kalau ingin menambahkan daftar isi di dalam postingan sanggup dilakukan dengan cara otomatis dan sangat mudah, yaitu kalian tinggal menginstal Plugin semacam "Table Of Contents Plus", dan kalian tinggal melaksanakan penyetingan di dalamnya.
Berbeda dengan Wordpress, Sayangnya untuk pengguna blogger setiap kali ingin menciptakan daftar isi di dalam postinganya harus di lakukan secara manual dengan menambahkan kode-kode HTML tertentu di setiap kali kalian menciptakan artikel. Perhatikan bab atas artikel ini, sebaga pola daftar isi untuk pengguna blogger.
Jika kalian berminat untuk membuatnya ibarat di atas artikel saya ini, ikuti tiap langkah untuk membuatnya
Cara Membuat Daftar Isi di Dalam Postingan Blogger
Setiap kali ingin mengikuti sebuah panduan atau totorial pastikan di lakukan dengan benar semoga tidak terjadi kesalahan.
Langkah 1 : Menambahkan Kode CSS di Template
Kode CSS di bawah ini akan menciptakan tampilan daftar isi sanggup di hide atau non hide nantinya, Copy isyarat di bawah ini dan pastekan sebelum kode ]]></b:skin> atau </Style>.
/* Daftar isi */ .toc {background-color:#f8f9fa; border:1px solid #a2a9b1; padding:10px 13px; display:table; line-height:1.6em;} .toc p {display:inline; 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-left:0px; margin-bottom:0px; padding:0px; text-align:left} .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:0px; margin-top:0px; visibility:hidden}
Langkah 2 : Membuat ID Pada Elemen Judul
Biasanya setiap judul atau pun sub-judul di dalam potingan akan terdapat di dalam isyarat h1,h2,h3,h4,h5,h6. Ketika kalian ingin menciptakan daftar isi yang mengarah ke judul-judul tertentu kalian perlu menambahkan atribut ID di dalam tag judul, lihat pola di bawah ini.
<h2 id="isi1">Judul di Dalam Postingan</h2>
Contoh : Keterangan :
- Untuk menambahkan atribut ID lakukan saat kalian menciptakan artikel dalam mode HTML di di blogger.
Langkah 3 : Menambah Kotak Daftar Isi di Dalam Potingan
Untuk langkah ke 3 sanggup kalian lakukan sebelum atau setelah menciptakan artikel, kalau kalian sudah mempunyai konsep untuk artikel yang kalian buat dalam tahap ini akan menjadi lebih mudah.
Tambahkan isyarat di bawah ini di bab dimana kalian ingin menampilkan daftar isi artikel kalian.
<div class="toc"> <input type="checkbox" role="button" id="toctoggle" class="toctoggle"> <div class="toctitle"> <p>Daftar isi</p> <span class="toctogglespan"><label class="toctogglelabel" for="toctoggle"></label></span> </div> <ul> <li>1 <a href="#isi1" title="√ Cara Membuat Daftar Isi di Postingan Blogger">Judul Daftar isi 1</a></li> <li>2 <a href="#isi2" title="√ Cara Membuat Daftar Isi di Postingan Blogger">Judul Daftar isi 2</a></li> <li>3 <a href="#isi3" title="√ Cara Membuat Daftar Isi di Postingan Blogger">Judul Daftar isi 3</a></li> <li>4 <a href="#isi4" title="√ Cara Membuat Daftar Isi di Postingan Blogger">Judul Daftar isi 4</a> <ul> <li>5.1 <a href="#isi4.1" title="√ Cara Membuat Daftar Isi di Postingan Blogger">Sub Judul Daftar isi 4.1</a></li> <li>5.2 <a href="#isi4.2" title="√ Cara Membuat Daftar Isi di Postingan Blogger">Sub Judul Daftar isi 4.2</a></li> </ul> </li> <li>6 <a href="#isi5" title="√ Cara Membuat Daftar Isi di Postingan Blogger">Judul Enam</a></li> </ul> </div>
Keterangan :- #isi merupakan id judul kalian, silahkan ganti sesuai id yang kalian buat untuk tiap judul di dalam potingan kalian.
- Bagian Title kalian ganti sesuai judul-judul di dalam postingan kalian.
- Ketika menambahkan kotak daftar isi ini pastikan kalian pulikasikan saat kalian di mode HTML.
Sebagai pola lihat gambar di bawah ini :
Dalam menciptakan artikel yang harus kita utamakan kualitas dan juga warta yang gampang untuk pengunjung blog, dengan menambahkan daftar isi di dalamnya artinya kita akan membantu pembaca menemukan apa yang akan mereka cari di dalam isi artikel.
Semoga ini sanggup membatu, gunakanlah secara optimal semoga sanggup memperbaiki kualitas setiap konten yang kalian posting dan lakukan cara lain seupaya pengunjung blog kalian betah dan puas dengan koten yang kalian sajikan.
Sumber http://felovena01.blogspot.com