Bagaimana Cara Menambahkan Fungsi Custom JavaScript?

Disini saya menggunakan template blogger Mantul dari kurteyki, namun saya kurang paham terhadap javascript.

Saya ingin menambahkan 4 script ini di template, bagaimana ya cara penerapannya

// Table Of Contents
var contentContainer=document.querySelectorAll(".post-body")[0];const dataTracking=contentContainer.setAttribute("data-tracking-container","true");var headings=contentContainer.querySelectorAll("h1,h2,h3,h4,h5,h6"),showtoc=contentContainer.querySelectorAll(".post-body h1,.post-body h2,.post-body h3,.post-body h4,.post-body h5,.post-body h6");if(headings.length>3)for(i=0;i<=showtoc.length-1;i++){showtoc[i].insertAdjacentHTML("beforebegin",'<div class="toc-auto"><input id="toc-sh" type="checkbox"><label class="toc-title" for="toc-sh">Table of Contents</label><div class="toc" id="toc"></div></div>'),(tocatr=document.querySelectorAll(".toc-auto")[0]).setAttribute("data-tracking-container","true");var e,t=document.querySelectorAll(".toc-auto");[].filter.call(t,function(e){return![].some.call(e.attributes,function(e){return/^data-tracking-container/i.test(e.name)})}).forEach(function(e){e.parentNode.removeChild(e)})}class TableOfContents{constructor({from:e,to:t}){this.fromElement=e,this.toElement=t,this.headingElements=this.fromElement.querySelectorAll("h1, h2, h3, h4, h5, h6"),this.tocElement=document.createElement("div")}getMostImportantHeadingLevel(){let e=6;for(let t=0;t<this.headingElements.length;t++){let n=TableOfContents.getHeadingLevel(this.headingElements[t]);e=n<e?n:e}return e}static generateId(e){return e.textContent.toLowerCase().replace(/ /g,"_").replace(/\//g,"_").replace(/&lt;/g,"").replace(/&gt;/g,"").replace(/&amp;/g,"").replace(/&amp;nbsp;/g,"").replace(/&nbsp;/g,"").replace(/\xA0/g,"").replace(/[\n\r\f]+/g,"").replace(/[.,\#!$%\^&\*;:{}=\-@`~()<>?"'“+”]/g,"")}static getHeadingLevel(e){switch(e.tagName.toLowerCase()){case"h1":default:return 1;case"h2":return 2;case"h3":return 3;case"h4":return 4;case"h5":return 5;case"h6":return 6}}generateToc(){let e=this.getMostImportantHeadingLevel()-1,t=this.tocElement;for(let n=0;n<this.headingElements.length;n++){let o=this.headingElements[n],a=TableOfContents.getHeadingLevel(o),r=a-e,l=document.createElement("a");if(o.id||(o.id=TableOfContents.generateId(o)),l.href=`#${o.id}`,l.textContent=o.textContent,r>0){for(let c=0;c<r;c++){let s=document.createElement("ul"),h=document.createElement("li");s.appendChild(h),t.appendChild(s),t=h}t.appendChild(l)}else{for(let d=0;d<-r;d++)t=t.parentNode.parentNode;let g=document.createElement("li");g.appendChild(l),t.parentNode.appendChild(g),t=g}e=a}this.toElement.appendChild(this.tocElement.firstChild)}}document.addEventListener("DOMContentLoaded",()=>new TableOfContents({from:document.querySelector(".post-body"),to:document.querySelector(".toc")}).generateToc());

// Youtube
setTimeout(function(){$(".video-youtube").each(function(){$(this).replaceWith('<iframe class="lazy video-youtube loader" data-src="'+$(this).data("src")+'" allowfullscreen="allowfullscreen" height="281" title="YouTube Post" width="500"></iframe>')})},5e3);

/* Imgur Upload Script */
!function(t,e){"use strict";"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?module.exports=e():t.Imgur=e()}(this,function(){"use strict";var t=function(e){if(!this||!(this instanceof t))return new t(e);if(e||(e={}),!e.clientid)throw"Provide a valid Client Id here: https://api.imgur.com/";this.clientid=e.clientid,this.endpoint="https://api.imgur.com/3/image",this.callback=e.callback||void 0,this.dropzone=document.querySelectorAll(".dropzone"),this.infoimg=document.querySelectorAll(".infoimg"),this.run()};return t.prototype={createEls:function(t,e,i){var a,s=document.createElement(t);for(a in e)e.hasOwnProperty(a)&&(s[a]=e[a]);return i&&s.appendChild(document.createTextNode(i)),s},insertAfter:function(t,e){t.parentNode.insertBefore(e,t.nextSibling)},post:function(t,e,i){var a=new XMLHttpRequest;a.open("POST",t,!0),a.setRequestHeader("Authorization","Client-ID "+this.clientid),a.onreadystatechange=function(){if(4===this.readyState){if(this.status>=200&&this.status<300){var t="";try{t=JSON.parse(this.responseText)}catch(e){t=this.responseText}i.call(window,t)}else throw Error(this.status+" - "+this.statusText)}},a.send(e),a=null},createDragZone:function(){var t,e,i;t=this.createEls("p",{},"Seret file gambar ke sini"),e=this.createEls("p",{},"Atau klik untuk memilih foto"),i=this.createEls("input",{type:"file",className:"input",accept:"image/*"}),Array.prototype.forEach.call(this.infoimg,(function(i){i.appendChild(t),i.appendChild(e)}).bind(this)),Array.prototype.forEach.call(this.dropzone,(function(t){t.appendChild(i),this.status(t),this.upload(t)}).bind(this))},loading:function(){var t,e,i;t=this.createEls("div",{className:"loading-modal"}),e=this.createEls("table",{className:"loading-table"}),i=this.createEls("img",{className:"loading-image",src:"https://cdn.jsdelivr.net/gh/astectic/imgur/src/svg/loading-spin.svg"}),t.appendChild(e),e.appendChild(i),document.body.appendChild(t)},status:function(t){var e=this.createEls("div",{className:"status"});this.insertAfter(t,e)},matchFiles:function(t,e){var i=e.nextSibling;if(t.type.match(/image/)&&"image/svg+xml"!==t.type){document.body.classList.add("loading"),i.classList.remove("bg-success","bg-danger"),i.innerHTML="";var a=new FormData;a.append("image",t),this.post(this.endpoint,a,(function(t){document.body.classList.remove("loading"),"function"==typeof this.callback&&this.callback.call(this,t)}).bind(this))}else i.classList.remove("bg-success"),i.classList.add("bg-danger"),i.innerHTML="Invalid archive"},upload:function(t){var e,i,a,s;t.addEventListener("change",(function(n){if(n.target&&"INPUT"===n.target.nodeName&&"file"===n.target.type)for(a=0,s=(i=n.target.files).length;a<s;a+=1)e=i[a],this.matchFiles(e,t)}).bind(this),!1),["dragenter","dragleave","dragover","drop"].map(function(e){t.addEventListener(e,function(t){t.target&&"INPUT"===t.target.nodeName&&"file"===t.target.type&&("dragleave"===e||"drop"===e?t.target.parentNode.classList.remove("dropzone-dragging"):t.target.parentNode.classList.add("dropzone-dragging"))},!1)})},run:function(){document.querySelector(".loading-modal")||this.loading(),this.createDragZone()}},t});var feedback=function(t){if(!0===t.success){var e=t.data.link.replace(/^http:\/\//i,"https://");document.querySelector(".status").classList.add("bg-success"),document.querySelector(".status").innerHTML='<div class="linkimg"><input class="image-url" id="copylinkimg" onclick="this.select()" value="'+e+'"/></div><div class="showimg"><img class="img" alt="Imgur-Upload" src="'+e+'"/></div>'}};new Imgur({clientid:"e5a2167b11581f6",callback:feedback});

// Threaded Blogger Gambar Video
const img=/\b(http(?:s)?:\/\/\S+(?:png|jpe?g|gif|bmp|svg|tif)\S*)\b/gi,ytb=/(http:|https:)?\/\/(www\.)?(youtube.com|youtu.be)\/(watch)?(\?v=)?(\S+)?/gi;for(var cmts=document.getElementsByClassName("commentBody"),i=0;i<cmts.length;i++){var e=cmts[i].innerHTML;if(img.test(e))for(var t=e.match(img),a=0;a<t.length;a++)e=e.replace(t[a],"<img alt='image' class='lazy' data-src='"+t[a]+"' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=' loading='lazy'/>");if(ytb.test(e))for(var s=e.match(ytb),c=0;c<s.length;c++)e=e.replace(s[c],"<div class='embed'><iframe class='lazy' loading='lazy' data-src='https://www.youtube.com/embed/"+s[c].split("=")[1]+"' title='YouTube Comment' frameborder='0' allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen=''></iframe></div>");cmts[i].innerHTML=e}

Aurealisa Ada rasa suasana lembut. 🍃 Itu menggambarkan pesona temperamen dari generasi wanita berbakat ～ 🌺

Share :