Cara Membuat Anime List di Blogger (Auto Index)

Anime List merupakan suatu list yang berisikan indeks dari anime yang telah di upload/di posting, agar memudahkan pangunjung mencari anime yang mereka suka.

Apa maksudnya auto index? maksudnya gini, script yang akan saya bagikan di bawah itu fungsinya auto. Jadi kalian tidak usah menulis secara manual, kalau ada postingan baru sudah auto muncul di list ini. Maksudnya gitu...

Tutorial Membuat Anime List Auto Index :

Selanjutnya, silahkan tempel ini semua (yang di bawah ini) di Tampilan HTML.

<style> 
#sitemap5 .judul {
    display: none;
}
.isi ol li {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid #717171;
    transition: 0.3s;
    width: calc(100% / 2 - 10px);
    column-gap: 10px;
    margin: 0 5px;
}
.isi ol {
    font-size: 13px;
    line-height: 25px;
    padding: 0 !important;
    margin: 5px 0px 15px 0 !important;
    display: flex;
    flex-wrap: wrap;
}
.abjad {
    font-size: 17px;
    font-weight: 700;
    display: block;
    margin-top: 10px;
    padding: 2px 0 2px 10px;
    background-color: #2282d6;
    border-left: 5px solid #ddd;
  	text-transform: uppercase;
  	color: #fff;
}
.isi ol li a::before {
    content: '\22D7';
    display: block;
    float: left;
    margin-right: 8px;
    font-weight: 400;
    font-size: 16px;
}
#sitemap5 .nav ol li {
    margin: .5rem 0;
    display: inline-block;
    padding: 5px 13px;
    color: #FFF;
    background: #333;
    transition: all .5s;
    margin: 1px;
  	text-transform: uppercase;
}
#sitemap5 .nav ol {
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    width: 100%;
    margin: auto;
    display: inline-block;
    margin: 10px 0;
}
.isi ol li:hover {
    border-bottom: 1px solid #ddd;
    transition: 0.3s;
}
.isi ol li a {
    text-decoration: none;
  	color: #444;
}
#sitemap5 .nav ol li:hover {
    text-decoration: none;
    background: #004cff;
    transition: all .5s;
    cursor: pointer;
}
.abjad::after {
    content: '\2261';
    padding-right: 8px;
    float: right;
}
@media screen and (max-width:640px){.isi ol li {width:100%;}}
@keyframes ldio-g4hy3lc4p0d {
  0% { transform: rotate(0) }
  100% { transform: rotate(360deg) }
}
.ldio-g4hy3lc4p0d div { box-sizing: border-box!important }
.ldio-g4hy3lc4p0d > div {
  position: absolute;
  width: 144px;
  height: 144px;
  top: 28px;
  left: 28px;
  border-radius: 50%;
  border: 16px solid #000;
  border-color: #ec1c24 transparent #ec1c24 transparent;
  animation: ldio-g4hy3lc4p0d 1s linear infinite;
}

.ldio-g4hy3lc4p0d > div:nth-child(2), .ldio-g4hy3lc4p0d > div:nth-child(4) {
  width: 108px;
  height: 108px;
  top: 46px;
  left: 46px;
  animation: ldio-g4hy3lc4p0d 1s linear infinite reverse;
}
.ldio-g4hy3lc4p0d > div:nth-child(2) {
  border-color: transparent #fdbd10 transparent #fdbd10
}
.ldio-g4hy3lc4p0d > div:nth-child(3) { border-color: transparent }
.ldio-g4hy3lc4p0d > div:nth-child(3) div {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(45deg);
}
.ldio-g4hy3lc4p0d > div:nth-child(3) div:before, .ldio-g4hy3lc4p0d > div:nth-child(3) div:after { 
  content: "";
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  top: -16px;
  left: 48px;
  background: #ec1c24;
  border-radius: 50%;
  box-shadow: 0 128px 0 0 #ec1c24;
}
.ldio-g4hy3lc4p0d > div:nth-child(3) div:after {
  left: -16px;
  top: 48px;
  box-shadow: 128px 0 0 0 #ec1c24;
}

.ldio-g4hy3lc4p0d > div:nth-child(4) { border-color: transparent; }
.ldio-g4hy3lc4p0d > div:nth-child(4) div {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(45deg);
}
.ldio-g4hy3lc4p0d > div:nth-child(4) div:before, .ldio-g4hy3lc4p0d > div:nth-child(4) div:after {
  content: "";
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  top: -16px;
  left: 30px;
  background: #fdbd10;
  border-radius: 50%;
  box-shadow: 0 92px 0 0 #fdbd10;
}
.ldio-g4hy3lc4p0d > div:nth-child(4) div:after {
  left: -16px;
  top: 30px;
  box-shadow: 92px 0 0 0 #fdbd10;
}
.loadingio-spinner-double-ring-rppvohedb1h {
  width: 200px;
  height: 200px;
  display: inline-block;
  overflow: hidden;
  background: transparent;
}
.ldio-g4hy3lc4p0d {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0) scale(1);
  backface-visibility: hidden;
  transform-origin: 0 0;
}
.ldio-g4hy3lc4p0d div { box-sizing: content-box; }
</style>

Lalu Bawahnya di isiin ini, Fungsinya buat manggil javascript & cssnya.

<div id="sitemap5">

<center>
<div class="loadingio-spinner-double-ring-rppvohedb1h"><div class="ldio-g4hy3lc4p0d">
<div></div>
<div></div>
<div><div></div></div>
<div><div></div></div>
</div></div></center>
</div>

Bawahnya lagi (Terakhir), tempelin javascript yang ada di bawah ini.

<script> //<![CDATA[
/* Blogger Sitemap Alphabetically with Letter Heading by igniel.com */
var scroll  = 'instant'; /* '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\\1V\\b\\e\\d\\v\\z\\f\\j\\k\\1n\\s\\b\\e\\e\\N\\b\\s\\1b\\v\\f\\g\\d\\c\\x\\b\\o\\K\\1n\\f\\d\\b\\i\\d\\Z\\g\\k\\h\\c\\1o\\v","\\1n\\x\\b\\1o\\Z\\i\\c\\f\\r\\e\\d\\f\\v","\\b\\o\\o\\c\\k\\h\\1J\\E\\g\\e\\h","\\N\\j\\h\\G","\\f\\g\\d\\c\\x\\b\\o\\K","\\1H\\c\\d\\W\\e\\c\\x\\c\\k\\d\\1K\\G\\1F\\h","\\g\\k\\k\\c\\i\\1X\\1i\\1Y\\1k","\\J\\c\\c\\h","\\e\\c\\k\\1H\\d\\E","\\c\\k\\d\\i\\G","\\1Q\\d","\\d\\g\\d\\e\\c","\\e\\g\\k\\1b","\\i\\c\\e","\\b\\e\\d\\c\\i\\k\\b\\d\\c","\\E\\i\\c\\J","\\o\\r\\f\\E","\\d\\j\\1k\\j\\1E\\c\\i\\1J\\b\\f\\c","\\s\\E\\b\\i\\1x\\d","\\z\\r\\h\\r\\e","\\g\\k\\h\\c\\1o\\2d\\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\\1K\\b\\s\\1b\\l\\d\\j\\l\\1i\\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\\1i\\j\\d\\b\\e\\l\\2h\\j\\f\\d\\2i\\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\\1b","\\O\\f\\g\\d\\c\\x\\b\\o\\K\\l\\H\\g\\f\\g\\l\\H\\b\\N\\z\\b\\h\\l\\2j\\h\\b\\d\\b\\Z\\w\\b\\e\\r\\c\\v\\p","\\p\\2e","\\f\\d\\b\\i\\d","\\f\\s\\i\\j\\e\\e\\1F\\k\\d\\j\\2s\\g\\c\\1E","\\o\\b\\i\\c\\k\\d\\2t\\j\\h\\c","\\1w\\r\\c\\i\\G\\1t\\c\\e\\c\\s\\d\\j\\i","\\b\\h\\h\\W\\w\\c\\k\\d\\1k\\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","\\1w\\r\\c\\i\\G\\1t\\c\\e\\c\\s\\d\\j\\i\\1x\\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>

Dah, Selesai. Tinggal di publish aja.

Bagaimana? Mudah bukan? "Cara Membuat Anime List" Wooiya Jelass (tinggal copy).. Bagi yang belum paham, kolom komentar terbuka lebar. Silahkan tulis saja disitu, admin akan berusaha bantu sebisa mungkin.

Kauruka

Cara Membuat Anime List di Blogger (Auto Index)

Tutorial Membuat Anime List Auto Index :

Cara Mudah Download File di TeraBox Tanpa Aplikasi dan Login

Manual Update Genshin Impact 4.6 PC

Manual Instalasi Genshin Impact PC (Full Data)

Manual Instalasi Honkai Star Rail PC (Full Data)

Manual Update Honkai Star Rail 2.1 PC

Cara Membuat Anime List di Blogger (Auto Index)

Tutorial Membuat Anime List Auto Index :

Gabung dalam percakapan