Cara Membuat Anime List di Blogger

 Anime list merupakan suatu list yang berisikan indeks dari anime yang di posting, sehingga memudahkan pengunjung melacak anime yang mereka suka. 

Apa yang di maksud auto index?, arti kata dari auto indexing dalam kamus komputer online adalah penentuan kata kunci yang dilakukan oleh PC secara otomatis sebagai indeks masukan sebuah dokumen. 

Apa Manfaat dari Index atau Indexing?

Pengindeksan adalah langkah penting bagi situs web agar muncul di halaman google. 

Tidak hanya muncul di halaman google, hal ini juga memiliki peran besar lain bagi situs web SEO loh, contohnya membuat konten mudah untuk di ranking oleh mesin pencarian google atau lainnya. 

Selain itu pengindeksan juga memiliki sejumlah manfaat lain yang bisa menguntungkan perusahaan. 

Salah satunya adalah membuat situs web lebih mudah dicari di mesin pencarian, marketer untuk mengambil data lebih cepat, dapat digunakan untuk menyortir dokumen dalam situs, dan masih banyak lagi. 

Cara Membuat Anime List Auto Index

Step 1 : Login pada akun blogger kalian, lalu buka dasbord blog. 

Step 2 : Selanjutnya, silahkan tempelkan kode 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>

Step 3 : Lalu di bawah kode tersebut, silahkan tambah JavaScript di bawah ini. Fungsinya untuk memanggil CSS dan juga JavaScriptnya. 

<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>

Step 4 : Dan tambahkan kode JavaScript lagi di bawahnya (terakhir), silahkan salin kode di bawah ini

<script> //<![CDATA[
/* Blogger Sitemap Alphabetically with Letter Heading by ESP.MY.ID */
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>

Step 5 : Selesai, silahkan simpan dan publish. 

Penutup

Bagaimana? Mudah bukan Cara Membuat Anime List Di Blogger. 

Bagi kalian yang belum paham silahkan komen di kolom komentar yang sudah di sediakan dan jangan lupa centang notif me, agar jika saya balas akan muncul notifikasi di email kalian. 

Jika kalian suka dengan artikel kali ini jangan lupa share ke grup blog kalian dan jangan lupa komen ya, terimakasih.

Dokumentasi Video