√ Membuat Sitemap (Daftar Isi) Berdasarkan Abjad

Membuat Sitemap (Daftar Isi) Berdasarkan Abjad – Bagi kalian para Blogger pemula atau yang sudah lama (bahkan sudah di sebut mastah), sudah tidak asing lagi dengan yang namanya daftar isi atau yang dalam bahasa indonesianya di artikan sebagai Peta Situs.

Sitemap ini banyak style dan gayanya sob, biasanya teman-teman Blogger tinggal mencontoh atau mengambil dan menerapkan pada blognya yang di ambil dari educational teman-teman sesama blogger.

Sama dengan yang sobat baca sekarang ini, turorial Membuat Sitemap (Daftar Isi) Berdasarkan Abjad saya juga dapat dari lainnya hehehehe

Manfaat dari Sitemap (Daftar Isi) Berdasarkan Abjad ini akan memudahkan customer dalam mencari artikel yang di sesuaikan dengan huruf depan dari artikel yang dicari. Biasanya bagi weblog yang kontennya atau nichenya tentang buku, movie, novel, lagu dan lain sebagainya, pasti cocok menggunkan Sitemap ini

Oia, sobat, Sitemap (Daftar Isi) Berdasarkan Abjad yang sekarang akan kita buat ini menggunakan kode JavaScript dan CSS, itu artinya tidak akan bisa Valid AMP, karena di dalamnya terdapat Kode JavaScript, jadi Sitemap ini bisanya di gunakan oleh Template weblog yang Non-AMP.
Yuks.. langsung saja.

Cara Membuat Sitemap (Daftar Isi) Berdasarkan Abjad

1. Silahkan sobat Masuk ke Blogspot
2. Pilih menu “Tema” atau “Theme” Lalu “Edit HTML“
3. Cari Kode </genre> atau </b:pores and skin> dan letakkan CSS ini tepat di atasnya

<genre>
#sitemap5 {font-size:14px; font-weight:400}
#sitemap5 .judul {font-size:150%; background-color:#008c5f; shade:#fff; font-weight:600; text-align:middle; margin-bottom:20px; padding:15px;}
#sitemap5 a {shade:#666; text-decoration:none; transition:all .3s ease;}
#sitemap5 a:hover {shade:#000;}
#sitemap5 .isi .abjad {background-color:#2196f3; shade:#fff; padding:10px 15px; font-size:110%; font-weight:600; text-transform:uppercase; place:relative;}
#sitemap5 .isi .abjad #peak:sooner than {content material:''; width:12px; peak:calc(100% - 20px); place:absolute; appropriate:0px; peak:0px; padding:10px; cursor:pointer; background:rgba(0,0,0,.2) url("knowledge:symbol/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3Ep.c3Cpath d='M15,20H9V12H4.16L12,4.16L19.84,12H15V20Z' fill='%23fff'/%3Ep.c3C/svgp.c3E") middle / 20px no-repeat;}
#sitemap5 ol, #sitemap5 ol li {list-style-type:none;}
#sitemap5 .nav ol {margin:0px 0px 15px; padding:0px; show:-webkit-box; show:-webkit-flex; show:-moz-box; show:-ms-flexbox; show:flex; flex-wrap:wrap; align-items:middle; justify-content:middle;}
#sitemap5 .nav ol li {background-color:#444; shade:#fff; padding:7px 0px; cursor:pointer; margin:0px 5px 5px 0px; text-align:middle; text-transform:uppercase; width:40px;}
#sitemap5 .nav ol li:last-child {margin-right:0px;}
#sitemap5 .isi ol {margin:0px 0px 20px; padding:0px; border:1px forged #ccc; border-top:0px;}
#sitemap5 .isi ol li {shade:#666; margin:0px; padding:10px 15px; line-height:1.5em; -webkit-margin-start:0px !vital;}
#sitemap5 .isi ol li:nth-of-type(even) {background-color:#e9e9e9;}
#sitemap5 .isi ol li:nth-of-type(strange) {background-color:#fff}
@media display and (max-width:480px) {
#sitemap5 {font-size:13px;}
#sitemap5 .judul {padding:10px;}
#sitemap5 .isi .abjad {padding:7px 15px;}
}
@media display and (max-width:360px) {
#sitemap5 {font-size:12px;}
#sitemap5 .judul {padding:10px;}
#sitemap5 .isi .abjad {padding:7px 12px;}
#sitemap5 .isi ol li {padding:7px 12px;}
}

4. Kemudian Save
5. Sekarang kita pindah ke menu “Halaman” atau “Web page“
6. Buatlah halaman baru “New Web page“
7. Pilih mode “HTML” yang berada di samping kanan “Compose“
8. Replica kode script di bawah ini dan pastekan di dalam menu “HTML“

</genre>
<div identification="sitemap5">Harap Tunggu...</div>
<script> //<![CDATA[
/* Daftar Isi Abjad by tipsku05.blogspot.com */
var scroll = 'smooth';
eval(function(p,a,c,k,e,d){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--)e(c)ok=[function(e){return d[e]}];e=serve as(){go back'w+'};c=1};whilst(c--){if(ok[c]){p=p.change(new RegExp('b'+e(c)+'b','g'),ok[c])}}go back p}('q a=["","fsigod","sicbdcWecxckd","fis","uJcchfuojfdfufrxxbiG1Vbedvzfjk1nsbeeNbs1bvfgdcxboK1nfdbidZgkhc1ov","1nxb1oZicfredfv","boockh1JEgeh","NjhG","fgdcxboK","1HcdWecxckd1KG1Fh","gkkci1X1i1Y1k","Jcch","eck1HdE","ckdiG","1Qd","dgdec","egk1b","ice","bedcikbdc","EicJ","orfE","dj1kj1Eci1Jbfc","sEbi1xd","zrhre","gkhc1o2dJ","rie","fjid","mhgwlsebffvpbNzbhpnmfobklhbdbZwbercvp","pn","mufobknmfobklghvpdjopldgdecvp1Kbs1bldjl1ijopnmufobknmuhgwnmjen","megnmblEicJvp","pldgdecvp","mubnmuegn","mujen","megn","muegn","mhgwlsebffvpzrhrepn1ijdbel2hjfd2il","muhgwnmhgwlsebffvpkbwpnmjen","mujenmuhgwnmhgwlsebffvpgfgpn","muhgwn","segs1b","OfgdcxboKlHgfglHbNzbhl2jhbdbZwbercvp","p2e","fdbid","fsijee1Fkdj2sgc1E","obickd2tjhc","1wrciG1tcecsdji","bhhWwckd1kgfdckci","JjiWbsE","OfgdcxboKlHkbwljeleg","1wrciG1tcecsdji1xee","OfgdcxboKlHkbw","OfgdcxboKlHgfglHbNzbhlOdjo"];q 1f=1,V=2c,1a=1l 1h(),Q=1l 1h(),1p=1l 1h(),1j=a[0],T=a[0],1q=a[0];B 1g(){q 1e=D[a[2]](a[1]);1e[a[3]]=a[4]+1f+a[5]+V;D[a[7]][a[6]](1e)}B 2f(1B){q Y=D[a[9]](a[8]);F(!Y){1L};Y[a[10]]=a[0];q S=1B[a[11]];F(S[a[13]][a[12]]>0){I(q U=0;U<S[a[13]][a[12]];U++){q P=S[a[13]][U];q 1d=P[a[15]][a[14]];I(q M=0;M<P[a[16]][a[12]];M++){F(P[a[16]][M][a[17]]==a[18]){q 1c=P[a[16]][M][a[19]];F(1c&&1c[a[12]]>0&&1d&&1d[a[12]]>0){1a[a[20]]({"rie":1c,"zrhre":1d})};2k}}};F(S[a[13]][a[12]]>=V){1f+=V;1g()}1I{I(q t=1a,A=0;A<t[a[12]];A++){q R=t[A][a[23]][a[22]](0)[a[21]]();F(1j[a[24]](R)==-1){1j+=R;Q[R]=[{2l:t[A][a[25]],2m:t[A][a[23]]}]}1I{Q[R][a[20]]({"rie":t[A][a[25]],"zrhre":t[A][a[23]]})}};I(q y 1O Q){1p[a[20]](y)};q t=1p[a[26]]();I(q C=0;C<t[a[12]];C++){T+=a[27]+t[C]+a[28]+t[C]+a[29];I(q L=0,1m=Q[t[C]];L<1m[a[12]];L++){q X=1m[a[26]](B(y,t){1L y[a[23]]>t[a[23]]?1:-1});T+=a[1W]+X[L][a[25]]+a[1U]+X[L][a[23]]+a[28]+X[L][a[23]]+a[2u]};T+=a[2o];1q+=a[2n]+t[C]+a[2r]};Y[a[10]]=a[2g]+1a[a[12]]+a[2p]+1q+a[1Z]+T+a[1R];1A()}}}B 1A(){D[a[1D]](a[1P])[a[1y]](B(y){y[a[1s]](a[1u],B(){q t=a[1S]+1N[a[10]]+a[2b];D[a[1r]](t)[a[1T]][a[1z]]({1C:1v,1G:a[1M]})})});D[a[1D]](a[2a])[a[1y]](B(y){y[a[1s]](a[1u],B(){D[a[1r]](a[2q])[a[1z]]({1C:1v,1G:a[1M]})})})}1g()',62,155,'||||||||||_0x764c|var|x75|x63|_0xd28cx14|x2F|x3D|x76|x6D|_0xd28cx17|x6A|_0xd28cx15|serve as|_0xd28cx18|report|x68|if|x79|x2E|for|x66|x35|_0xd28cx19|_0xd28cx12|x62|x23|_0xd28cx10|grup|_0xd28cx16|_0xd28cxe|print|_0xd28cxf|max|x45|_0xd28cx1b|_0xd28cxd|x2D|||||||||||sitemap5Arr|x6B|_0xd28cx13|_0xd28cx11|_0xd28cxa|delivery|runSitemap5|Array|x54|abjad|x4C|new|_0xd28cx1a|x26|x78|key|nav|46|47|x53|40|scroll|x71|x41|48|44|scrollSitemap5|_0xd28cxc|habits|50|x77|x49|block|x67|else|x43|x42|go back|43|this|in|49|x24|39|41|45|31|x3F|30|x48|x4D|38|||||||||||52|42|150|x4F|x5D|sitemap5|36|x50|x3A|x5B|destroy|url|judul|34|33|37|51|35|x56|x4E|32'.cut up('|'),0,{}));
//]]> </script>

View on Codepen

Nah, begitulah cara Membuat Sitemap (Daftar Isi) ini, semoga bermanfaat.

Sumber : igniel