Memasang HTML Table of Content (TOC) pada Blog

agranik.id - Setiap pemilik blog pastinya ingin tampilan blognya menarik. Salah satu yang dapat dilakukan adalah dengan memasang HTML Table of Content (TOC) pada blog. Tujuannya agar para pengunjung blog merasa nyaman dan mereka mengunjung blog kembali di waktu berikutnya.

Memasang HTML Table of Content cukup mudah di pasang karena banyak para master blog yang berbagi tutorialnya. untuk blog ini sendiri menggunakan HTML Table of Content (TOC) dari blog sebelah. Jika kalian menggunakan template Linkmagz karya mas sugeng.id kalian tidak perlu lagi repot-memasng Table of Content (TOC). Karena pada template Linkmagz sudah tertanam TOC didalamnya.

Untuk template Viomagz sayangnya tidak ada table of content bawaannya sehingga harus memasang HTML table of content (TOC) pada blog secara manual.

Pada tulisan kali ini akan berbagi tutorial memasang HTML table of content (TOC) pada blog. Berikut ini langkah demi langkah yang dapat kalian lakukan untuk memasang HTML table of content (TOC) pada blog kalian.

1. Memasang kode HTML sebelum / diatas kode </head>

Pada tahap pertama silahkan kalian buka terlebih menu "tema' lalu klik "edit HTML", untuk memulai mengedit tema HTML ini tentunya kalian sudah dalam kondisi login pada blog kalian.

Setelah mengklik "edit HTML" lalu cari kode yang bertulis </head> untuk mempercepat pencarian saya sarankan menggunakan short key pencarian dengan menekan Ctrl+F selanjutnya ketik </head>.

Jika sudah ditemukan silahkan copy kode di bawah ini dan paste tepa diatas atau sebelum kata </head>

<link href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
<b:tag href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/fontawesome.min.css' name='link' rel='stylesheet'/>
<b:tag cond='data:blog.languageDirection == &quot;rtl&quot;' href='https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&amp;display=swap' name='link' rel='stylesheet'/>

2. Menambahkan kode id='post-body'

Pada langkah berikutnya masih pada edit HTML di tema, silahkan cari post-body entry-content atau <div class='post-body-artikel'>. Jika sudah ketemu kode tersebut silahkan tambahkan kode berikut ini id='post-body' setelah post-body entry-content

Maka akan seperti ini: <div class='post-body-artikel'>

3. Memasang kode Syntax Highlighter.

Sebentar lagi tahapan proses memasang HTML table of content (TOC) pada blog akan selesai. Silahkan copy kode dibawah ini dan nantinya kalian paste / tempel di atas atau sebelum kode ]]></b:skin>

/* TOC Kode */
@font-face{font-family:"Font Awesome 5 Brands";font-display:swap;font-style:normal;font-weight:400;font-display:block;src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-brands-400.eot);src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-brands-400.eot?#iefix) format("embedded-opentype"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-brands-400.woff2) format("woff2"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-brands-400.woff) format("woff"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-brands-400.ttf) format("truetype"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-brands-400.svg#fontawesome) format("svg")}.fab{font-family:"Font Awesome 5 Brands";font-weight:400}
@font-face{font-family:"Font Awesome 5 Free";font-display:swap;font-style:normal;font-weight:400;font-display:block;src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-regular-400.eot);src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-regular-400.eot?#iefix) format("embedded-opentype"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-regular-400.woff2) format("woff2"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-regular-400.woff) format("woff"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-regular-400.ttf) format("truetype"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-regular-400.svg#fontawesome) format("svg")}.far{font-family:"Font Awesome 5 Free";font-weight:400}
@font-face{font-family:"Font Awesome 5 Free";font-display:swap;font-style:normal;font-weight:900;font-display:block;src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-solid-900.eot);src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-solid-900.woff2) format("woff2"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-solid-900.woff) format("woff"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-solid-900.ttf) format("truetype"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-solid-900.svg#fontawesome) format("svg")}.fa,.far,.fas{font-family:"Font Awesome 5 Free"}.fa,.fas{font-weight:900}
.tocify-wrap{display:flex;width:100%;clear:both;margin:0}
.tocify-inner{position:relative;max-width:100%;background-color:rgba(128, 135, 136, 0.1);display:flex;flex-direction:column;overflow:hidden;font-size:13px;color:#4169E1;line-height:1.6em;border:1px solid;border-color:#B1B1B1;border-radius:5px}
.tocify-inner a:hover{color:#FFA500;}
a.tocify-title{position:relative;height:38px;font-size:15px;color:#4169E1;font-weight:600;display:flex;align-items:center;justify-content:space-between;padding:0 15px;margin:0;border-radius:5px}
a.tocify-title.is-expanded{border-bottom:1px solid;border-color:#ADADAD;border-radius:5px 5px 0 0}
.tocify-title-text{display:flex}
.tocify-title-text:before{content:'\f0cb';font-family:'Font Awesome 5 Free';font-size:13px;font-weight:900;margin:0 6px 0 0}
.rtl .tocify-title-text:after{margin:0 0 0 6px}
.tocify-title:after{content:'\f078';font-family:'Font Awesome 5 Free';font-size:12px;font-weight:900;margin:0 0 0 25px}
.rtl .tocify-title:after{margin:0 25px 0 0}
.tocify-title.is-expanded:after{content:'\f077'}
a.tocify-title:hover{text-decoration:none}
#tocify{display:none;padding:8px 15px;margin:0}
#tocify ol{padding:0 0 0 20px}
.rtl #tocify ol{padding:0 20px 0 0}
#tocify li{font-size:13px;margin:7px 0}
#tocify li a{color:#4169E1;}
.tocify-inner ol>li{counter-increment:ify;list-style:none}
.tocify-inner ol>li:before{display:inline-block;margin:0 5px 0 0}
#tocify li a:hover{color:#FFA500;text-decoration:underline}
@media (max-width: 350px) {
.tocify-inner{min-width:100%}
}

4. Memasang kode sebelum kode </body>

Pada tahap selanjutnya yaitu memasang kode script untuk di tempatkan sebelum atau di atas kode </body>

Silahkan copy dan tempelkan kode dibawah ini sebelum kode </body>.pada tema HTML blog kalian.

<script type='text/javascript'>
//<![CDATA[
!function(t){"use strict";var n=function(n){return this.each(function(){var e,i,a=t(this),o=a.data(),c=[a],r=this.tagName,d=0;e=t.extend({content:"body",headings:"h1,h2,h3"},{content:o.toc||void 0,headings:o.tocHeadings||void 0},n),i=e.headings.split(","),t(e.content).find(e.headings).attr("id",function(n,e){return e||function(t){0===t.length&&(t="?");for(var n=t.replace(/\s+/g,"_"),e="",i=1;null!==document.getElementById(n+e);)e="_"+i++;return n+e}(t(this).text())}).each(function(){var n=t(this),e=t.map(i,function(t,e){return n.is(t)?e:void 0})[0];if(e>d){var a=c[0].children("li:last")[0];a&&c.unshift(t("<"+r+"/>").appendTo(a))}else c.splice(0,Math.min(d-e,Math.max(c.length-1,0)));t("<li/>").appendTo(c[0]).append(t("<a/>").text(n.text()).attr("href","#"+n.attr("id"))),d=e})})},e=t.fn.toc;t.fn.toc=n,t.fn.toc.noConflict=function(){return t.fn.toc=e,this},t(function(){n.call(t("[data-toc]"))})}(window.jQuery);
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
function shortCodeIfy(t,i,o){for(var e=t.split("$"),c=/[^{\}]+(?=})/g,n=0;n<e.length;n++){var a=e[n].split("=");if(a[0].trim()==i)return null!=(o=a[1]).match(c)&&String(o.match(c)).trim()}return!1}$(".post-body b").each(function(){var t=$(this),i=t.text();i.toLowerCase().trim().match("{tocify}")&&(i=0!=shortCodeIfy(i,"title")?shortCodeIfy(i,"title"):"Table of Contents",t.replaceWith('<div class="tocify-wrap"><div class="tocify-inner"><a href="javascript:;" class="tocify-title" role="button" title="'+i+'"><span class="tocify-title-text">'+i+'</span></a><ol id="tocify"></ol></div></div>'),$(".tocify-title").each(function(t){(t=$(this)).on("click",function(){t.toggleClass("is-expanded"),$("#tocify").slideToggle(170)})}),$("#tocify").toc({content:"#post-body",headings:"h2,h3,h4"}),$("#tocify li a").each(function(t){(t=$(this)).click(function(){return $("html,body").animate({scrollTop:$(t.attr("href")).offset().top-20},500),!1})}))});
//]]>
</script>

5. Menentukan letak posisi table of content (TOC)

Langkah ini merupakan langkah terakhir cara memasang HTML table of content (TOC) pada blog. dimana kalian bebas menentukan posisi letak TOC sesuai keinginan. caranya dengan meletakkan kode berikut ini:

{tocify} $title={Table of Contents}

Silahkan letakkan kode diatas untuk menentukan tampilan letak table of content pada artikel blog kalian. Letak table of content (TOC) bisa di tempatkan di awal paragrap atau juga kalian dapat memasangnya sebelum subjudul. Jangan lupa untuk memberikan tanda Bold pada kode tersebut.

Semoga tulisan ini bermanfaat. Jika ada pertanyaan seputar cara memasang HTML table of content (TOC) pada blog silahkan tulis pada kolom komentar dibawah ini. Apabila tulisan ini dirasa bermanfaat silahkan share atau bagikan ke teman terbaik kalian. Terima Kasih.