Cara membuat daftar isi Blogger sesuai dengan Abjad – Daftar isi adalah sebuah halaman yang berisi semua list post atau artikel pada sebuah website. Fungsi halaman ini untuk mempermudah pengujung mencari artikel di Web tersebut, halaman ini sangat berguna, terlebih lagi jika Web yang dikelola memiliki banyak artikel.
[toc]
Pada kali ini Emalution akan membagikan bagaimana cara membuat daftar isi Blogger sesuai dengan Abjad. Daftar isi ini cocok untuk website yang membahas mengenai Film, Anime, Download, Buku, Lirik Musik, Wallpaper, dan sebagainya.
Berikut tahapan untuk membuat halaman daftar isinya,
- Silahkan Login ke Blogger.com
- Masuk ke menu Theme > Edit HTML > Masukkan kode berikut diatas </style> atau ]></b:skin>
/* Daftar isi Blogger berdasarkan Abjad atau Huruf */
#sitemap5 {font-size:14px; font-weight:400}
#sitemap5 .judul {font-size:150%; background-color:#008c5f; color:#fff; font-weight:600; text-align:center; margin-bottom:20px; padding:15px;}
#sitemap5 a {color:#666; text-decoration:none; transition:all .3s ease;}
#sitemap5 a:hover {color:#000;}
#sitemap5 .isi .abjad {background-color:#2196f3; color:#fff; padding:10px 15px; font-size:110%; font-weight:600; text-transform:uppercase; position:relative;}
#sitemap5 .isi .abjad #top:before {content:\'\'; width:12px; height:calc(100% - 20px); position:absolute; right:0px; top:0px; padding:10px; cursor:pointer; background:rgba(0,0,0,.2) url(\"data:image/svg+xml,%3Csvg viewBox=\'0 0 24 24\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M15,20H9V12H4.16L12,4.16L19.84,12H15V20Z\' fill=\'%23fff\'/%3E%3C/svg%3E\") center / 20px no-repeat;}
#sitemap5 ol, #sitemap5 ol li {list-style-type:none;}
#sitemap5 .nav ol {margin:0px 0px 15px; padding:0px; display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
#sitemap5 .nav ol li {background-color:#444; color:#fff; padding:7px 0px; cursor:pointer; margin:0px 5px 5px 0px; text-align:center; 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 solid #ccc; border-top:0px;}
#sitemap5 .isi ol li {color:#666; margin:0px; padding:10px 15px; line-height:1.5em; -webkit-margin-start:0px !important;}
#sitemap5 .isi ol li:nth-of-type(even) {background-color:#e9e9e9;}
#sitemap5 .isi ol li:nth-of-type(odd) {background-color:#fff}
@media screen and (max-width:480px) {
#sitemap5 {font-size:13px;}
#sitemap5 .judul {padding:10px;}
#sitemap5 .isi .abjad {padding:7px 15px;}
}
@media screen 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;}
}
3. Setelah menambahkan CSS, selanjutnya buat halaman statis pada Blogger dan masuk ke HTML Editor dan masukkan kode berikut,
<div id=\"sitemap5\">Loading....</div>
<script> //<![CDATA[
/* Daftar isi Blogger berdasarkan Abjad atau Huruf */
var scroll = \'smooth\'; /* \'smooth\' OR \'instant\' */
/*
\'smooth\' for smooth scroll
OR
\'instant\' for quick scroll
*/
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--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[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}(\'q a=[\"\",\"\\\\f\\\\s\\\\i\\\\g\\\\o\\\\d\",\"\\\\s\\\\i\\\\c\\\\b\\\\d\\\\c\\\\W\\\\e\\\\c\\\\x\\\\c\\\\k\\\\d\",\"\\\\f\\\\i\\\\s\",\"\\\\u\\\\J\\\\c\\\\c\\\\h\\\\f\\\\u\\\\o\\\\j\\\\f\\\\d\\\\f\\\\u\\\\f\\\\r\\\\x\\\\x\\\\b\\\\i\\\\G\\\V\\\\b\\\\e\\\\d\\\\v\\\\z\\\\f\\\\j\\\\k\\\n\\\\s\\\\b\\\\e\\\\e\\\\N\\\\b\\\\s\\\b\\\\v\\\\f\\\\g\\\\d\\\\c\\\\x\\\\b\\\\o\\\\K\\\n\\\\f\\\\d\\\\b\\\\i\\\\d\\\\Z\\\\g\\\\k\\\\h\\\\c\\\o\\\\v\",\"\\\n\\\\x\\\\b\\\o\\\\Z\\\\i\\\\c\\\\f\\\\r\\\\e\\\\d\\\\f\\\\v\",\"\\\\b\\\\o\\\\o\\\\c\\\\k\\\\h\\\J\\\\E\\\\g\\\\e\\\\h\",\"\\\\N\\\\j\\\\h\\\\G\",\"\\\\f\\\\g\\\\d\\\\c\\\\x\\\\b\\\\o\\\\K\",\"\\\H\\\\c\\\\d\\\\W\\\\e\\\\c\\\\x\\\\c\\\\k\\\\d\\\K\\\\G\\\F\\\\h\",\"\\\\g\\\\k\\\\k\\\\c\\\\i\\\X\\\i\\\Y\\\k\",\"\\\\J\\\\c\\\\c\\\\h\",\"\\\\e\\\\c\\\\k\\\H\\\\d\\\\E\",\"\\\\c\\\\k\\\\d\\\\i\\\\G\",\"\\\Q\\\\d\",\"\\\\d\\\\g\\\\d\\\\e\\\\c\",\"\\\\e\\\\g\\\\k\\\b\",\"\\\\i\\\\c\\\\e\",\"\\\\b\\\\e\\\\d\\\\c\\\\i\\\\k\\\\b\\\\d\\\\c\",\"\\\\E\\\\i\\\\c\\\\J\",\"\\\\o\\\\r\\\\f\\\\E\",\"\\\\d\\\\j\\\k\\\\j\\\E\\\\c\\\\i\\\J\\\\b\\\\f\\\\c\",\"\\\\s\\\\E\\\\b\\\\i\\\x\\\\d\",\"\\\\z\\\\r\\\\h\\\\r\\\\e\",\"\\\\g\\\\k\\\\h\\\\c\\\o\\\d\\\\J\",\"\\\\r\\\\i\\\\e\",\"\\\\f\\\\j\\\\i\\\\d\",\"\\\\m\\\\h\\\\g\\\\w\\\\l\\\\s\\\\e\\\\b\\\\f\\\\f\\\\v\\\\p\\\\b\\\\N\\\\z\\\\b\\\\h\\\\p\\\\n\\\\m\\\\f\\\\o\\\\b\\\\k\\\\l\\\\h\\\\b\\\\d\\\\b\\\\Z\\\\w\\\\b\\\\e\\\\r\\\\c\\\\v\\\\p\",\"\\\\p\\\\n\",\"\\\\m\\\\u\\\\f\\\\o\\\\b\\\\k\\\\n\\\\m\\\\f\\\\o\\\\b\\\\k\\\\l\\\\g\\\\h\\\\v\\\\p\\\\d\\\\j\\\\o\\\\p\\\\l\\\\d\\\\g\\\\d\\\\e\\\\c\\\\v\\\\p\\\K\\\\b\\\\s\\\b\\\\l\\\\d\\\\j\\\\l\\\i\\\\j\\\\o\\\\p\\\\n\\\\m\\\\u\\\\f\\\\o\\\\b\\\\k\\\\n\\\\m\\\\u\\\\h\\\\g\\\\w\\\\n\\\\m\\\\j\\\\e\\\\n\",\"\\\\m\\\\e\\\\g\\\\n\\\\m\\\\b\\\\l\\\\E\\\\i\\\\c\\\\J\\\\v\\\\p\",\"\\\\p\\\\l\\\\d\\\\g\\\\d\\\\e\\\\c\\\\v\\\\p\",\"\\\\m\\\\u\\\\b\\\\n\\\\m\\\\u\\\\e\\\\g\\\\n\",\"\\\\m\\\\u\\\\j\\\\e\\\\n\",\"\\\\m\\\\e\\\\g\\\\n\",\"\\\\m\\\\u\\\\e\\\\g\\\\n\",\"\\\\m\\\\h\\\\g\\\\w\\\\l\\\\s\\\\e\\\\b\\\\f\\\\f\\\\v\\\\p\\\\z\\\\r\\\\h\\\\r\\\\e\\\\p\\\\n\\\i\\\\j\\\\d\\\\b\\\\e\\\\l\\\h\\\\j\\\\f\\\\d\\\i\\\\l\",\"\\\\m\\\\u\\\\h\\\\g\\\\w\\\\n\\\\m\\\\h\\\\g\\\\w\\\\l\\\\s\\\\e\\\\b\\\\f\\\\f\\\\v\\\\p\\\\k\\\\b\\\\w\\\\p\\\\n\\\\m\\\\j\\\\e\\\\n\",\"\\\\m\\\\u\\\\j\\\\e\\\\n\\\\m\\\\u\\\\h\\\\g\\\\w\\\\n\\\\m\\\\h\\\\g\\\\w\\\\l\\\\s\\\\e\\\\b\\\\f\\\\f\\\\v\\\\p\\\\g\\\\f\\\\g\\\\p\\\\n\",\"\\\\m\\\\u\\\\h\\\\g\\\\w\\\\n\",\"\\\\s\\\\e\\\\g\\\\s\\\b\",\"\\\\O\\\\f\\\\g\\\\d\\\\c\\\\x\\\\b\\\\o\\\\K\\\\l\\\\H\\\\g\\\\f\\\\g\\\\l\\\\H\\\\b\\\\N\\\\z\\\\b\\\\h\\\\l\\\j\\\\h\\\\b\\\\d\\\\b\\\\Z\\\\w\\\\b\\\\e\\\\r\\\\c\\\\v\\\\p\",\"\\\\p\\\e\",\"\\\\f\\\\d\\\\b\\\\i\\\\d\",\"\\\\f\\\\s\\\\i\\\\j\\\\e\\\\e\\\F\\\\k\\\\d\\\\j\\\s\\\\g\\\\c\\\E\",\"\\\\o\\\\b\\\\i\\\\c\\\\k\\\\d\\\t\\\\j\\\\h\\\\c\",\"\\\w\\\\r\\\\c\\\\i\\\\G\\\t\\\\c\\\\e\\\\c\\\\s\\\\d\\\\j\\\\i\",\"\\\\b\\\\h\\\\h\\\\W\\\\w\\\\c\\\\k\\\\d\\\k\\\\g\\\\f\\\\d\\\\c\\\\k\\\\c\\\\i\",\"\\\\J\\\\j\\\\i\\\\W\\\\b\\\\s\\\\E\",\"\\\\O\\\\f\\\\g\\\\d\\\\c\\\\x\\\\b\\\\o\\\\K\\\\l\\\\H\\\\k\\\\b\\\\w\\\\l\\\\j\\\\e\\\\l\\\\e\\\\g\",\"\\\w\\\\r\\\\c\\\\i\\\\G\\\t\\\\c\\\\e\\\\c\\\\s\\\\d\\\\j\\\\i\\\x\\\\e\\\\e\",\"\\\\O\\\\f\\\\g\\\\d\\\\c\\\\x\\\\b\\\\o\\\\K\\\\l\\\\H\\\\k\\\\b\\\\w\",\"\\\\O\\\\f\\\\g\\\\d\\\\c\\\\x\\\\b\\\\o\\\\K\\\\l\\\\H\\\\g\\\\f\\\\g\\\\l\\\\H\\\\b\\\\N\\\\z\\\\b\\\\h\\\\l\\\\O\\\\d\\\\j\\\\o\"];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]]({\"\\\\r\\\\i\\\\e\":1c,\"\\\\z\\\\r\\\\h\\\\r\\\\e\":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]]({\"\\\\r\\\\i\\\\e\":t[A][a[25]],\"\\\\z\\\\r\\\\h\\\\r\\\\e\":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|x61|x65|x74|x6C|x73|x69|x64|x72|x6F|x6E|x20|x3C|x3E|x70|x22|var|x75|x63|_0xd28cx14|x2F|x3D|x76|x6D|_0xd28cx17|x6A|_0xd28cx15|function|_0xd28cx18|document|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|start|runSitemap5|Array|x54|abjad|x4C|new|_0xd28cx1a|x26|x78|key|nav|46|47|x53|40|scroll|x71|x41|48|44|scrollSitemap5|_0xd28cxc|behavior|50|x77|x49|block|x67|else|x43|x42|return|43|this|in|49|x24|39|41|45|31|x3F|30|x48|x4D|38|||||||||||52|42|150|x4F|x5D|sitemap5|36|x50|x3A|x5B|break|url|judul|34|33|37|51|35|x56|x4E|32\'.split(\'|\'),0,{}));
//]]> </script>
Terdapat 2 pilihan Scroll yaitu Smooth, dan Instant. Perbedaannya ada di efek pada saat memilih abjad, jika Smooth maka pergerakan scroll akan lambat, sedangkan kalau Instant akan langsung berpindah tanpa efek. Jika Jumlah artikel kamu ada ratusan atau ribuan saya sarankan pakai Instant.
4. Publish Halaman, dan lihat hasilnya.
Demikian tutorial Cara membuat daftar isi Blogger sesuai dengan Abjad. Selamat mencoba, dan semoga bermanfaat. jika ada pertanyaan mengenai artikel ini kamu bisa komentar dibawah.