Cara Membuat Daftar Isi Di dalam Postingan Blogger
Daftar isi
Salah satu kelebihan seorang blogger adalah mencari apa yang diperlu kurang dari blognya, maka tidak salah jika seorang bloger akan terus mengembangkan blognya agar menjadi lebih baik lagi. Disini saya akan berbagi fitur penting bagi seorang bloger tentang bagaimana cara membuat daftar isi di dalam postingan blog. Membuat daftar isi di dalam postingan blog memang memiliki keasyikan tersendiri, ap bloger yang setiap harinya mesti update artikel terbaru untuk situsnya. Fitur daftar isi memang sangat perlu untuk digunakan bagi sebuah website atau situs karena dengan adanya daftar isi pengunjung akan mengetahui isi artikel atau pembahasan apa saja yang ada di dalam sebuah artikel.
Cara Membuat Daftar Isi Di dalam Postingan Blogger
Membuat daftat isi memang diperlukan, apalagi untuk mengetahui halaman atau pembahasan tertentu atau pembahasan yang sangat panjang sehingga memungkinkan untuk mengjliknya secara langsung ke halaman terkait atau mencarinya secara cepat. Tujuan dibuatnya daftar isi postingan (table of content) adalah agar memudahkan pembaca atau pengunjung di dalam mencari topik pembahasan tertentu, apa saja yang dibahas serta mengarahkan ke halaman tertentu yang diinginkan. Tetapi tidak jarang bagi blog pemula tidak tahu bagaimana cara membuat daftar isi postingan atau manfaat membuat daftar isi di dalam postingan. Daftar Isi di sini yakni daftar isi yang bisa meningkatkan kualitas blog atau SEO di mesin pencari atau google.com. Lalu apa saja langkah-langkah untuk membuat daftar isi, apa manfaatnya bagi sebuah website atau postingan.
Langkah pemasangan daftar isi (TOC) di dalam postingan blog
Agar tampilan blog anda terlihat lebih indah menawan, tambahkan dahulu kode css atau html berikut pada bagian tag </style> atau DI ATAS tag penutup ]]></b:skin>.
/* Table of Contents by igniel.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:0px; margin-top:0px; visibility:hidden}
Langkah selanjutnya yaitu masuk ke bagian utamanya pemasangan daftar isi (table of content). Penting! Ketika anda membuat postingan baru, pastikan blog anda dalam keadaan mode html bukan mode compose. Simpan kode format html ini di paragraf paling atas postingan anda.
Format html daftar isi di blogspot dan Fungsinya
<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>
Selanjutnya ke langkah pemasangan kode id di setiap header atau heading di bagian judul pada setiap artikel blog yang akan ditampilkan, link ini disebut juga jump to link atau link anchor postingan blog. Pemasangan id pada setiap header harus menyertakan id yang sama atau yang sesuai dengan daftar isi anda 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
Untuk demo atau contoh previewnya bisa cek di bawah ini
Post a Comment for "Cara Membuat Daftar Isi Di dalam Postingan Blogger"