Cara Membuat Anime List di Blogger

Dezign Desu - Hallo para pemuja web anime, saya kembali.. Kali ini Admin mau bagi bagi tutorial "Cara Membuat Anime List Auto Index". Jadi, gini....................... jika kalian pada tanya "kok mirip kek benime.my.id?" ya emang.. saya yang redesign itu theme. Kalau mau di beli satu paket sama themenya sekalian yaa silahkan, walaupun uda di bilang theme ketinggalan jaman muehehe.

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

Ok, yg atas skip aja kalau dah ngerti.. langsung kesini

Tutorial Membuat Anime List Auto Index :

Login pada akun blogspot kalian (ini wajib).
Setelah masuk ada dashbord blogger, buatlah halaman baru di menu halaman.
Di kasih judul (jangan lupa, lupa juga gakpapa sih).

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.

DzDesu

Cara Membuat Anime List di Blogger

1 komentar untuk "Cara Membuat Anime List di Blogger"

Menu Halaman Statis