Cara Membuat Daftar Isi (TOC) Dengan Daftar Multi-level
August 01, 2019 |
| Cara Membuat Daftar Isi (TOC) Dengan Daftar Multi-level |
Dengan membuat TOC itu berguna untuk menyediakan navigasi yang mudah untuk menentukan lokasi sub artikel pada artikel yang panjag tersebut. Wikipedia sendiri suka menambahkan TOC dikarenakan dapat membantu pembaca melompat pada satu bagian ke bagian lain.
TOC juga dapat menambah peningkat SEO untuk blog sobat. dikarenakan TOC dapat memberikan ringkasan dasar untuk mesin pencari tentang semua artikel sobat.
Dengan bantuan TOC Google juga semakin menyukai jika artikel sobat terdapat TOC didalamnya. Selain disukai google pastinya disukai oleh pembaca juga, karena dapat membantu mereka dengan mudah membaca artikel sobat.
Nah, Bagaimana cara memasang TOC di Theme Blogger sobat? Silahkan di baca dengan baik dan sampai akhir ya sob, supaya tidak ada yang bermasalah jika dibaca hingga akhir.
Cara Membuat Daftar Isi (TOC) Dengan Daftar Multi-level
1. Masuk ke Blogger > Template2. Klik "EDIT HTML"
3. Kemudian Cari kode </head> (Gunakan CTRL+F Untuk Mempermudah pencarian kode)
4. Jika sudah ketemu salin kode dibawah ini dan pastekan kodenya tepat diatas kode </head>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/><script type='text/javascript'>
//<![CDATA[
//*************TOC Plugin V2.0 by ImamKunBlog
function mbtTOC2(){var a=1,b=0,c="";document.getElementById("post-toc").innerHTML=document.getElementById("post-toc").innerHTML.replace(/<h([\d]).*?>(.*?)<\/h([\d]).*?>/gi,function(d,e,f,g){return e!=g?d:(e>a?c+=new Array(e-a+1).join("<ol class='point"+a+"'>"):e<a&&(c+=new Array(a-e+1).join("</ol></li>")),b+=1,c+='<li><a href="#point'+b+'">'+f+"</a>",a=parseInt(e),"<h"+e+" id='point"+b+"'>"+f+"</h"+g+">")}),a&&(c+=new Array(a+1).join("</ol>")),document.getElementById("mbtTOC2").innerHTML+=c}function mbtToggle2(){var a=document.getElementById("mbtTOC2"),b=document.getElementById("Tog");"none"===a.style.display?(a.style.display="block",b.innerHTML="hide"):(a.style.display="none",b.innerHTML="show")}
//]]>
</script>
5. Langkah berikutnya adalah cari kode ]]></b:skin>, salin dan pastekan kode dibawah ini tepat diatas kode ]]></b:skin>
/*####TOC Plugin V2.0 by ImamKunBlog####*/.mbtTOC2{border:5px solid #f7f0b8;box-shadow:1px 1px 0 #EDE396;background-color:#FFFFE0;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 30px 20px 10px; font-family:Oswald, arial;display: block;width: 70%;}.mbtTOC2 button{background:#FFFFE0; font-family:oswald, arial; font-size:22px;position:relative; outline:none;border:none; color:#707037;padding:0 0 0 15px;}.mbtTOC2 button a {color:#0080ff; padding:0px 2px;cursor:pointer;} .mbtTOC2 button a:hover{ text-decoration:underline; } .mbtTOC2 button span {font-size:15px; margin:0px 10px; }Jika sobat ingin melakukan pengeditan sobat bisa ikuti ini:
.mbtTOC2 li{margin:10px 0; } .mbtTOC2 li a {color:#0080ff; text-decoration:none; font-size:18px; text-transform:capitalize;} .mbtTOC2 li a:hover {text-decoration: underline;}.mbtTOC2 li li {margin:4px 0px;} .mbtTOC2 li li a{ color:#289728; font-size:15px;}
.mbtTOC2 ol{counter-reset:section1;list-style:none}.mbtTOC2 ol ol{counter-reset:section2}.mbtTOC2 ol ol ol{counter-reset:section3}.mbtTOC2 ol ol ol ol{counter-reset:section4}.mbtTOC2 ol ol ol ol ol{counter-reset:section5}.mbtTOC2 li:before{content:counter(section1);counter-increment:section1;position:relative;padding:0 8px 0 0;font-size:18px}.mbtTOC2 li li:before{content:counter(section1) "." counter(section2);counter-increment:section2;font-size:14px}.mbtTOC2 li li li:before{content:counter(section1) "."counter(section2) "." counter(section3);counter-increment:section3}.mbtTOC2 li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4);counter-increment:section4}.mbtTOC2 li li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4)"." counter(section5);counter-increment:section5}/* .point2 {list-style-type:lower-alpha} .point3 {list-style-type:lower-roman} .point4 {list-style-type:disc} */
Untuk mengubah warna latar belakang kotak kontainer, edit # FFFFE0
Untuk mengubah warna batas kotak, edit # f7f0b8
Untuk mengubah warna font dari teks utama, edit # 707037
Untuk mengubah warna tautan jangkar, edit # 0080ff
Untuk mengubah tautan, arahkan pengedit warna # 289728
6. Setelah itu sobat cari lagi kode <data:post.body/> dan ganti dengan kode di bawah ini:
<div id="post-toc"><data:post.body/></div>NOTE: Sobat akan menemukan kode ini dua atau lebih kode yang sama dalam template sobat, sehingga menggantikan semua contoh dengan kode di bawah ini terutama terjadinya kedua. Plugin TOC tidak akan berfungsi jika sobat mengganti <data:post.body/> sekali saja.
7. Terakhir Tinggal SAVE dan lihat atau coba hasilnya.
Nah itulah Cara membuat daftar isi TOC dengan multi level, semoga bermanfaat dan jika sobat mengalami masalah bisa berkomentar dibawah ini.
Happy Blogging!!
0 komentar