Cara Membuat Daftar Isi Berdasarkan Label, Cantik & Unik

Rafiqi, S.Kom.
Rafiqi, S.Kom.
Juli 19, 2024
7
Cara Membuat Daftar Isi Berdasarkan Label, Cantik & Unik
Hi Web Developer kali ini Guru Design akan berbagi tutorial Cara Membuat Daftar Isi Berdasarkan Label, Cantik & Unik sebuah widget daftar isi yang disortir berdasarkan label dengan animasi cantik dan unik.

Sebelumnya saya pernah membagikan widget daftar isi atau sitemap di blog ini pada postingan Cara Mudah Membuat Sitemap Untuk Mempermudah Google Mengindex Artikel Kita.

Widget yang akan saya bagikan sekarang berbeda dengan widget sebelumnya, widget daftar isi yang akan kita buat sekarang memiliki tampilan dan animasi yang lebih enak di pandang. Tentunya kalian sudah mengetahui fungsi dari widget daftar isi ini.

Oke lanjut ke tutorial

Pertama

Silakan buka blogger > Laman > Kemudian klik Laman baru

Kedua

Tambahkan kode di bawah ini pada tab HTML

<style type="text/css">
.toc-blogger{background-color:#fff;color:#444;font-family:Verdana,Geneva,Tahoma,Arial,Sans-serif;font-size:13px;font-weight:400;overflow:hidden;border-radius:4px;box-shadow:0 0 10px rgba(0,0,0,.2)}
.toc-blogger .toc-header{color:#444;font-family:inherit;font-weight:400;font-size:14px;background-color:#fff;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-bottom:1px solid #ccc;transition:initial}
.toc-blogger .toc-header:hover{background-color:#fdfdfd}
.toc-blogger .toc-header:before{content: "";margin-right: 8px;font-weight: normal;background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z' fill='%23222'/%3E%3C/svg%3E");width: 17px;height: 17px;display: inline-block;margin-bottom: -4px;}
.toc-blogger .toc-header:after{content: "";float: right;font-weight: normal;background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13,9L15.5,6.5L16.92,7.92L12,12.84L7.08,7.92L8.5,6.5L11,9V3H13V9M3,15H21V17H3V15M3,19H13V21H3V19Z' fill='%23222'/%3E%3C/svg%3E");width: 17px;height: 17px;display: inline-block;margin-bottom: -4px;}
.toc-blogger .toc-header.active{color:#039be5;}
.toc-blogger .toc-header.active:after{border-color:#666 transparent transparent;top:16px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)}
.toc-blogger .toc-header.active:before{content: "";margin-right: 8px;font-weight: normal;background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4H10L12,6H19A2,2 0 0,1 21,8H21L4,8V18L6.14,10H23.21L20.93,18.5C20.7,19.37 19.92,20 19,20Z' fill='%23222'/%3E%3C/svg%3E");width: 17px;height: 17px;display: inline-block;margin-bottom: -4px;}
.toc-blogger .toc-loading{display:block;padding:15px;text-decoration:blink}
.toc-blogger ol{margin:0;padding:0;list-style:none;transition:initial}
.toc-blogger li{line-height:normal!important;margin:0!important;padding:8px 8px 8px 40px!important;white-space:normal;text-align:left;overflow:hidden;background:#444359!important;transition:initial}
.toc-blogger a:before{content: "";margin-right: 8px;font-weight: normal;background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19,15L13,21L11.58,19.58L15.17,16H4V4H6V14H15.17L11.58,10.42L13,9L19,15Z' fill='%23d9d9d9'/%3E%3C/svg%3E"); width: 17px;height: 17px;display: inline-block;margin-bottom:-4px;}
.toc-blogger a{color:#d9d9d9;text-decoration:none;font-size:86%;transition:initial;margin-left:-25px}
.toc-blogger a:visited{color:#a2a2a9;transition:initial}
.toc-blogger a:hover,.toc-blogger a:visited:hover{color:#039be5;text-decoration:none;transition:initial}
.post ol li:before{display:none}
.newtext{font-weight:normal;font-style:normal;color:white;font-size:11px;background:#039be5;padding:0px 6px 2px 6px;line-height:normal;float:right;border-radius:50px;}
</style>
<div class="toc-blogger" id="toc-blogger-by-gurudzgn">
<span class="toc-loading">Loading Content...</span></div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
//<![CDATA[
//by www.gurudzgn.com
var url_kalian='https://moslemgreen.blogspot.com/'; //Tidak support spasi
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('10 11=["\\2\\7\\5\\i\\n\\3\\7\\c\\c\\0\\9\\i\\n\\o\\i\\c\\d\\9\\d\\8\\D\\c\\6","\\j\\8\\a\\p\\r\\5\\3\\1\\4\\4\\e\\s\\6\\0\\f\\2\\0\\t\\2\\s\\k\\6\\0\\f\\j\\l\\8\\a\\p\\k","\\H\\2\\7\\5","\\5\\7\\6\\2\\1\\a\\6\\0\\9\\I\\8","\\c\\0\\2\\A\\3\\0\\g\\0\\6\\2\\J\\o\\I\\8","\\b\\0\\1\\8","\\c\\0\\2\\A\\3\\0\\g\\0\\6\\2\\4\\J\\o\\E\\1\\c\\F\\1\\g\\0","\\w\\4\\7\\6\\q\\1\\3\\3\\n\\1\\5\\u","\\0\\6\\2\\9\\o","\\B\\0\\0\\8","\\5\\1\\2\\0\\c\\7\\9\\o","","\\3\\0\\6\\c\\2\\b","\\2\\0\\9\\g","\\h\\d\\4\\b","\\4\\b\\7\\f\\F\\0\\f","\\12\\2","\\2\\a\\2\\3\\0","\\r\\x\\6\\0\\f\\x","\\2\\b\\0\\K\\a\\4\\2","\\4\\7\\9\\2\\y\\3\\h\\b\\1\\n\\0\\2\\a\\5\\1\\3\\3\\o","\\3\\7\\5\\1\\3\\0\\q\\7\\g\\h\\1\\9\\0","\\4\\7\\9\\2","\\2\\b\\0\\C\\1\\6\\0\\3","\\j\\b\\L\\r\\5\\3\\1\\4\\4\\e\\s\\2\\7\\5\\i\\b\\0\\1\\8\\0\\9\\s\\k","\\j\\l\\b\\L\\k","\\j\\8\\a\\p\\r\\5\\3\\1\\4\\4\\e\\s\\2\\7\\5\\i\\5\\7\\6\\2\\0\\6\\2\\s\\k\\j\\7\\3\\k","\\3\\a\\6\\u","\\1\\3\\2\\0\\9\\6\\1\\2\\0","\\9\\0\\3","\\b\\9\\0\\B","\\j\\3\\a\\k\\j\\1\\r\\b\\9\\0\\B\\e\\s","\\s\\k","\\9\\0\\h\\3\\1\\5\\0","\\j\\l\\1\\k","\\g\\1\\2\\5\\b","\\r","\\6\\0\\f\\E\\0\\t\\2","\\j\\l\\3\\a\\k","\\j\\l\\7\\3\\k\\j\\l\\8\\a\\p\\k","\\a\\6\\6\\0\\9\\M\\E\\13\\K","\\d\\6\\8\\0\\B\\a\\6\\0\\8","\\b\\a\\8\\0","\\R","\\r\\z\\2\\7\\5\\i\\5\\7\\6\\2\\0\\6\\2","\\8\\7\\f\\6","\\4\\3\\a\\8\\0\\S\\h\\0\\0\\8","\\4\\3\\a\\8\\0\\A\\1\\4\\a\\6\\c","\\4\\3\\a\\8\\0\\q\\1\\3\\3\\n\\1\\5\\u","\\4\\3\\a\\8\\0\\T\\7\\f\\6","\\6\\0\\t\\2","\\1\\5\\2\\a\\p\\0","\\1\\8\\8\\q\\3\\1\\4\\4","\\1\\5\\2\\a\\p\\0\\C\\1\\6\\0\\3","\\0\\N","\\b\\1\\4\\q\\3\\1\\4\\4","\\5\\3\\a\\5\\u\\q\\1\\3\\3\\n\\1\\5\\u","\\d\\h","\\4\\3\\a\\8\\0\\U\\h","\\9\\0\\g\\7\\p\\0\\q\\3\\1\\4\\4","\\r\\z\\2\\7\\5\\i\\b\\0\\1\\8\\0\\9","\\5\\3\\a\\5\\u","\\4\\5\\9\\a\\h\\2","\\5\\9\\0\\1\\2\\0\\A\\3\\0\\g\\0\\6\\2","\\4\\9\\5","\\d\\9\\3","\\l\\B\\0\\0\\8\\4\\l\\h\\7\\4\\2\\4\\l\\4\\d\\g\\g\\1\\9\\o\\V\\1\\3\\2\\e\\w\\4\\7\\6\\i\\a\\6\\i\\4\\5\\9\\a\\h\\2\\m\\g\\1\\t\\i\\9\\0\\4\\d\\3\\2\\4\\e","\\g\\1\\t\\O\\0\\4\\d\\3\\2\\4","\\m\\5\\1\\3\\3\\n\\1\\5\\u\\e","\\7\\6\\3\\7\\1\\8","\\8\\0\\3\\1\\o\\K\\7\\1\\8\\a\\6\\c","\\1\\h\\h\\0\\6\\8\\q\\b\\a\\3\\8","\\4\\0\\2\\E\\a\\g\\0\\7\\d\\2","\\p\\1\\3","\\R\\2\\7\\5\\i\\n\\3\\7\\c\\c\\0\\9\\i\\n\\o\\i\\c\\d\\9\\d\\8\\D\\c\\6","\\3\\7\\5\\1\\2\\a\\7\\6","\\b\\2\\2\\h\\4\\14\\l\\l\\f\\f\\f\\z\\c\\7\\7\\c\\3\\0\\z\\5\\7\\g\\l\\d\\9\\3\\V\\4\\1\\e\\2\\m\\9\\5\\2\\e\\w\\m\\N\\e\\m\\0\\4\\9\\5\\e\\4\\m\\4\\7\\d\\9\\5\\0\\e\\f\\0\\n\\m\\5\\8\\e\\v\\m\\5\\1\\8\\e\\9\\w\\1\\m\\d\\1\\5\\2\\e\\P\\m\\p\\0\\8\\e\\v\\1\\b\\U\\W\\A\\f\\a\\C\\15\\P\\C\\F\\t\\8\\6\\7\\y\\b\\X\\F\\5\\6\\Q\\W\\M\\1\\16\\H\\T\\t\\5\\Y\\G\\w\\y\\J\\0\\c\\Y\\I\\q\\O\\y\\q\\m\\d\\9\\3\\e\\b\\2\\2\\h\\4\\x\\L\\y\\x\\v\\G\\x\\v\\G\\f\\f\\f\\z\\c\\d\\9\\d\\8\\D\\c\\6\\z\\5\\7\\g\\x\\v\\G\\m\\d\\4\\c\\e\\y\\17\\p\\Z\\1\\f\\Q\\g\\w\\H\\5\\18\\D\\M\\O\\v\\n\\v\\8\\b\\S\\Q\\Z\\N\\P\\X\\C\\19","\\9\\0\\1\\8\\o"]',62,72,'x65|x61|x74|x6C|x73|x63|x6E|x6F|x64|x72|x69|x68|x67|x75|x3D|x77|x6D|x70|x2D|x3C|x3E|x2F|x26|x62|x79|x76|x43|x20|x22|x78|x6B|x32|x6A|x25|x41|x2E|x45|x66|x50|x7A|x54|x4E|x46|x5F|x49|x42|x4C|x33|x48|x71|x52|x38|x30|x23|x53|x44|x55|x3F|x4B|x58|x51|x56|var|_0x1832|x24|x4D|x3A|x34|x39|x4F|x35|x36'.split('|'),0,{}));var toc_config={url:url_kalian,containerId:_0x1832[0],showNew:15,newText:_0x1832[1],sortAlphabetically:{thePanel:true,theList:true},maxResults:9999,activePanel:1,slideSpeed:{down:400,up:400},slideEasing:{down:null,up:null},slideCallback:{down:function(){},up:function(){}},clickCallback:function(){},jsonCallback:_0x1832[2],delayLoading:0};!function(_0x3fd6x2,_0x3fd6x3){var _0x3fd6x4=_0x3fd6x3[_0x1832[4]](toc_config[_0x1832[3]]),_0x3fd6x5=_0x3fd6x3[_0x1832[6]](_0x1832[5])[0],_0x3fd6x6=[];_0x3fd6x2[toc_config[_0x1832[7]]]= function(_0x3fd6x2){for(var _0x3fd6x3,_0x3fd6x5,_0x3fd6x7=_0x3fd6x2[_0x1832[9]][_0x1832[8]],_0x3fd6x8=_0x3fd6x2[_0x1832[9]][_0x1832[10]],_0x3fd6x9=_0x1832[11],_0x3fd6xa=0,_0x3fd6xb=_0x3fd6x8[_0x1832[12]];_0x3fd6xb> _0x3fd6xa;++_0x3fd6xa){_0x3fd6x6[_0x1832[14]](_0x3fd6x8[_0x3fd6xa][_0x1832[13]])};for(var _0x3fd6xc=0,_0x3fd6xd=_0x3fd6x7[_0x1832[12]];_0x3fd6xd> _0x3fd6xc;++_0x3fd6xc){(toc_config[_0x1832[15]]|| toc_config[_0x1832[15]]> 0)&& _0x3fd6xc< toc_config[_0x1832[15]]+ 1&& (_0x3fd6x7[_0x3fd6xc][_0x1832[17]][_0x1832[16]]+= _0x1832[18])};_0x3fd6x7= toc_config[_0x1832[20]][_0x1832[19]]?_0x3fd6x7[_0x1832[22]](function(_0x3fd6x2,_0x3fd6x3){return _0x3fd6x2[_0x1832[17]][_0x1832[16]][_0x1832[21]](_0x3fd6x3[_0x1832[17]].$t)}):_0x3fd6x7,toc_config[_0x1832[20]][_0x1832[23]]&& _0x3fd6x6[_0x1832[22]]();for(var _0x3fd6xe=0,_0x3fd6xf=_0x3fd6x6[_0x1832[12]];_0x3fd6xf> _0x3fd6xe;++_0x3fd6xe){_0x3fd6x9+= _0x1832[24]+ _0x3fd6x6[_0x3fd6xe]+ _0x1832[25],_0x3fd6x9+= _0x1832[26];for(var _0x3fd6x10=0,_0x3fd6x11=_0x3fd6x7[_0x1832[12]];_0x3fd6x11> _0x3fd6x10;++_0x3fd6x10){_0x3fd6x3= _0x3fd6x7[_0x3fd6x10][_0x1832[17]][_0x1832[16]];for(var _0x3fd6x12=0,_0x3fd6x13=_0x3fd6x7[_0x3fd6x10][_0x1832[27]][_0x1832[12]];_0x3fd6x13> _0x3fd6x12;++_0x3fd6x12){if(_0x1832[28]== _0x3fd6x7[_0x3fd6x10][_0x1832[27]][_0x3fd6x12][_0x1832[29]]){_0x3fd6x5= _0x3fd6x7[_0x3fd6x10][_0x1832[27]][_0x3fd6x12][_0x1832[30]];break}};for(var _0x3fd6x14=0,_0x3fd6x15=_0x3fd6x7[_0x3fd6x10][_0x1832[10]][_0x1832[12]];_0x3fd6x15> _0x3fd6x14;++_0x3fd6x14){_0x3fd6x6[_0x3fd6xe]== _0x3fd6x7[_0x3fd6x10][_0x1832[10]][_0x3fd6x14][_0x1832[13]]&& (_0x3fd6x9+= _0x1832[31]+ _0x3fd6x5+ _0x1832[32]+ _0x3fd6x3[_0x1832[33]](/ \%new\%$/,_0x1832[11])+ _0x1832[34]+ (_0x3fd6x3[_0x1832[35]](/\%new\%/)?_0x1832[36]+ toc_config[_0x1832[37]]:_0x1832[11])+ _0x1832[38])}};_0x3fd6x9+= _0x1832[39]};_0x3fd6x4[_0x1832[40]]= _0x3fd6x9,_0x1832[41]!=  typeof jQuery&& ($(_0x1832[43]+ toc_config[_0x1832[3]]+ _0x1832[44])[_0x1832[42]](),$(_0x1832[43]+ toc_config[_0x1832[3]]+ _0x1832[60])[_0x1832[61]](function(){$(this)[_0x1832[55]](_0x1832[51])|| (toc_config[_0x1832[56]](this),$(_0x1832[43]+ toc_config[_0x1832[3]]+ _0x1832[60])[_0x1832[59]](_0x1832[51])[_0x1832[50]]()[_0x1832[58]](toc_config[_0x1832[46]][_0x1832[57]],toc_config[_0x1832[47]][_0x1832[57]],toc_config[_0x1832[48]][_0x1832[57]]),$(this)[_0x1832[52]](_0x1832[51])[_0x1832[50]]()[_0x1832[49]](toc_config[_0x1832[46]][_0x1832[45]],toc_config[_0x1832[47]][_0x1832[45]],toc_config[_0x1832[48]][_0x1832[45]]))})[_0x1832[54]](toc_config[_0x1832[53]]- 1)[_0x1832[52]](_0x1832[51])[_0x1832[50]]()[_0x1832[49]](toc_config[_0x1832[46]][_0x1832[45]],toc_config[_0x1832[47]][_0x1832[45]],toc_config[_0x1832[48]][_0x1832[45]]))};var _0x3fd6x7=_0x3fd6x3[_0x1832[63]](_0x1832[62]);_0x3fd6x7[_0x1832[64]]= toc_config[_0x1832[65]][_0x1832[33]](/\/$/,_0x1832[11])+ _0x1832[66]+ toc_config[_0x1832[67]]+ _0x1832[68]+ toc_config[_0x1832[7]],_0x1832[69]== toc_config[_0x1832[70]]?_0x3fd6x2[_0x1832[69]]= function(){_0x3fd6x5[_0x1832[71]](_0x3fd6x7)}:_0x3fd6x2[_0x1832[72]](function(){_0x3fd6x5[_0x1832[71]](_0x3fd6x7)},toc_config[_0x1832[70]])}(window,document);$(document)[_0x1832[77]](function(){var _0x3fd6x16=$(_0x1832[74])[_0x1832[73]]();if(_0x3fd6x16== null){window[_0x1832[75]][_0x1832[30]]= _0x1832[76]}})
//]]>
</script>
Yang di blok warna merah silahkan di ganti dengan url kalian

 

Terakhir

Klik Simpan laman, dan lihat hasilnya.
Result
Jika ada kendala atau kesalahan silahkan tulis di kolom komentar
Sekian Semoga Bermanfaat Terimakasih
Rafiqi, S.Kom.