Chapter List Otomatis Blogger

Pada kesempatan kali ini saya akan membagikan cara membuat Chapter List Otomatis berdasarkan label tertentu untuk Blogger.

Chapter List ini mempunyai fitur pencarian yang mana jika kalian menulis nomor chapter tersebut, maka chapter tersebut akan muncul.

Ada dua cara untuk memasang nya, pertama menambahkan script kedalam template dan taruh pemanggilnya kedalam postingan, cukup mudah bukan? langsung saja.

Chapter List Otomatis Blogger
Dagruel

Chapter List Otomatis

Pertama buka Blogger > Template > Edit HTML > tempelkan script berikut di atas tag </head>.

<script>
 //<![CDATA[
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;}('1S I=["\\A\\q\\X\\e\\c\\m\\O\\e\\c\\R\\m\\19\\e\\1E\\q\\1D\\E\\Z\\q\\1g\\o\\p\\N\\A\\q\\d\\e\\16\\f\\c\\T\\o\\b\\c\\i\\b\\p\\E\\d\\f\\c\\r\\e\\b\\C\\c\\H\\C\\c\\u\\C\\c\\d\\C\\M\\C\\b\\n\\c\\s\\n\\b\\1t\\c\\Q\\e\\c\\L\\G\\c\\J\\e\\1p\\G\\X\\M\\c\\z\\e\\b\\n\\X\\n\\b\\G\\O\\M\\c\\V\\e\\b\\n\\O\\m\\16\\f\\c\\D\\f\\c\\U\\o\\d\\p\\P\\Z\\q\\1p\\o\\d\\p\\N\\A\\q\\g\\e\\16\\f\\c\\19\\o\\c\\O\\p\\E\\U\\o\\g\\p\\N\\g\\f\\1K\\e\\b\\b\\E\\A\\q\\h\\e\\d\\f\\c\\x\\E\\U\\o\\h\\f\\14\\f\\T\\w\\K\\p\\N\\1c\\o\\A\\q\\j\\e\\K\\E\\j\\y\\h\\f\\14\\f\\T\\E\\j\\n\\n\\p\\1c\\o\\A\\q\\i\\e\\h\\f\\14\\v\\j\\t\\m\\l\\e\\i\\f\\c\\1v\\f\\1C\\g\\m\\r\\e\\i\\f\\c\\Y\\f\\1C\\g\\m\\u\\e\\K\\E\\u\\y\\i\\f\\1d\\f\\T\\E\\u\\n\\n\\p\\U\\o\\b\\c\\k\\b\\e\\e\\i\\f\\1d\\v\\u\\t\\f\\c\\h\\p\\N\\A\\q\\x\\e\\i\\f\\1d\\v\\u\\t\\f\\13\\E\\x\\G\\G\\x\\f\\T\\w\\K\\G\\G\\l\\G\\G\\l\\f\\T\\w\\K\\G\\G\\r\\G\\G\\r\\f\\T\\w\\K\\G\\G\\19\\f\\c\\g\\o\\N\\1i\\1a\\x\\m\\R\\1a\\l\\m\\c\\1r\\1a\\r\\P\\p\\E\\c\\l\\P\\U\\o\\h\\f\\14\\f\\T\\w\\e\\O\\p\\X\\n\\e\\O\\m\\1g\\o\\p\\E\\17\\N\\1c\\o\\A\\q\\k\\m\\B\\e\\b\\b\\m\\k\\e\\b\\c\\1v\\b\\e\\e\\e\\c\\j\\1t\\19\\f\\c\\1y\\o\\Z\\o\\d\\m\\g\\p\\N\\c\\B\\q\\d\\f\\R\\w\\g\\f\\R\\1t\\c\\1a\\M\\c\\P\\p\\1a\\19\\m\\s\\e\\K\\E\\s\\y\\k\\f\\T\\E\\s\\n\\n\\p\\N\\A\\q\\z\\e\\k\\v\\s\\t\\f\\c\\1r\\m\\J\\e\\z\\f\\10\\o\\K\\m\\1f\\p\\m\\L\\e\\z\\f\\10\\o\\18\\m\\1q\\p\\m\\Q\\e\\z\\f\\10\\o\\1y\\m\\c\\K\\p\\m\\D\\e\\1E\\q\\1D\\E\\D\\v\\c\\t\\e\\b\\c\\A\\b\\m\\D\\v\\1H\\t\\e\\b\\c\\1o\\b\\m\\D\\v\\1r\\t\\e\\b\\c\\1q\\b\\m\\D\\v\\1f\\t\\e\\b\\c\\1z\\b\\m\\D\\v\\18\\t\\e\\b\\c\\12\\b\\m\\D\\v\\1v\\t\\e\\b\\c\\1g\\b\\m\\D\\v\\1q\\t\\e\\b\\c\\1m\\b\\m\\D\\v\\1y\\t\\e\\b\\c\\Z\\b\\m\\D\\v\\1o\\t\\e\\b\\c\\X\\b\\m\\D\\v\\c\\K\\t\\e\\b\\c\\15\\b\\m\\D\\v\\c\\c\\t\\e\\b\\c\\17\\b\\m\\D\\v\\c\\1H\\t\\e\\b\\c\\1e\\b\\E\\c\\16\\N\\U\\o\\k\\v\\s\\t\\f\\R\\f\\1x\\o\\b\\1u\\b\\p\\p\\N\\A\\q\\H\\e\\k\\v\\s\\t\\f\\R\\f\\1s\\o\\b\\1u\\b\\p\\v\\c\\t\\E\\H\\e\\H\\f\\c\\18\\o\\C\\v\\1J\\K\\M\\1o\\1j\\f\\M\\t\\n\\C\\J\\m\\b\\b\\p\\P\\17\\q\\U\\o\\k\\v\\s\\t\\f\\R\\f\\1x\\o\\b\\1m\\b\\p\\p\\N\\A\\q\\H\\e\\k\\v\\s\\t\\f\\R\\f\\1s\\o\\b\\1m\\b\\p\\v\\c\\t\\E\\H\\e\\H\\f\\c\\18\\o\\C\\v\\1J\\K\\M\\1o\\1j\\f\\M\\t\\n\\C\\J\\m\\b\\b\\p\\P\\17\\q\\A\\q\\H\\e\\b\\1z\\C\\15\\b\\P\\c\\1d\\o\\d\\p\\N\\c\\10\\f\\c\\1u\\o\\b\\c\\1x\\b\\p\\P\\B\\n\\e\\S\\y\\1I\\q\\Y\\e\\b\\c\\11\\b\\w\\y\\11\\q\\Y\\e\\b\\12\\M\\c\\14\\b\\w\\y\\V\\q\\Y\\e\\b\\1e\\b\\w\\y\\j\\q\\13\\e\\b\\S\\n\\k\\v\\s\\t\\f\\1i\\n\\S\\b\\w\\y\\c\\1f\\w\\S\\n\\H\\n\\S\\y\\C\\c\\1f\\w\\y\\C\\j\\w\\y\\C\\V\\w\\y\\C\\11\\w\\y\\11\\q\\Y\\e\\b\\12\\M\\c\\1i\\b\\w\\y\\V\\q\\Y\\e\\b\\1e\\M\\c\\1c\\b\\w\\y\\j\\q\\13\\e\\b\\S\\n\\k\\v\\s\\t\\f\\1i\\n\\S\\b\\w\\S\\n\\k\\v\\s\\t\\f\\R\\n\\S\\y\\C\\j\\w\\y\\C\\V\\w\\y\\V\\q\\Y\\e\\b\\1e\\M\\c\\13\\b\\w\\S\\n\\Q\\n\\b\\q\\b\\n\\D\\v\\c\\1s\\o\\L\\m\\c\\K\\p\\t\\n\\b\\q\\b\\n\\J\\n\\b\\y\\C\\V\\w\\y\\C\\11\\w\\y\\C\\1I\\w\\b\\P\\g\\f\\1K\\e\\S\\y\\1F\\q\\Y\\e\\b\\12\\M\\c\\1p\\b\\w\\S\\n\\B\\n\\b\\y\\C\\1F\\w\\b\\P\\P\\P\\P","\\a","\\l\\k\\i\\u\\g","\\a\\a\\a\\a\\a\\a\\a\\a\\a\\a\\a\\D\\j\\h\\a\\a\\a\\a\\a\\a\\a\\a\\i\\d\\r\\J\\g\\L\\a\\T\\x\\s\\x\\i\\a\\a\\a\\a\\a\\a\\B\\i\\j\\l\\l\\a\\a\\a\\a\\a\\a\\l\\k\\j\\r\\a\\u\\Q\\a\\H\\j\\U\\a\\d\\k\\10\\u\\l\\g\\15\\h\\h\\a\\a\\d\\r\\g\\h\\O\\a\\l\\g\\j\\h\\g\\a\\s\\u\\D\\a\\Q\\x\\r\\B\\g\\u\\z\\r\\a\\d\\i\\l\\d\\a\\x\\h\\i\\a\\Q\\z\\h\\a\\s\\z\\B\\x\\H\\d\\r\\g\\a\\L\\h\\d\\Q\\a\\d\\k\\l\\a\\l\\x\\A\\l\\g\\h\\u\\r\\J\\a\\d\\k\\a\\a\\i\\u\\r\\R\\a\\d\\k\\10\\u\\l\\g\\a\\u\\r\\B\\i\\x\\s\\d\\l\\a\\l\\k\\i\\u\\g\\a\\Z\\k\\u\\l\\z\\s\\d\\a\\h\\x\\r\\Z\\k\\10\\u\\l\\g\\a\\X\\L\\j\\k\\g\\d\\h\\a\\15\\h\\h\\j\\O\\a\\r\\d\\V\\a\\i\\u\\a\\x\\i\\a\\u\\r\\r\\d\\h\\1c\\1g\\12\\10\\a\\a\\a\\a\\g\\j\\r\\J\\J\\j\\i\\a\\B\\L\\j\\k\\g\\d\\h\\a\\h\\d\\k\\i\\j\\B\\d\\a\\g\\u\\g\\i\\d\\a\\12\\j\\h\\a\\l\\z\\h\\g\\a\\17\\d\\A\\a\\l\\z\\h\\g\\A\\O\\a\\13\\j\\r\\a\\h\\d\\g\\x\\h\\r\\a\\i\\j\\A\\d\\i\\a\\s\\d\\Q\\j\\x\\i\\g\\a\\j\\i\\g\\a\\B\\j\\i\\i\\A\\j\\B\\R\\a\\T\\l\\z\\r\\a\\k\\z\\l\\g\\l\\a\\B\\h\\d\\j\\g\\d\\Z\\i\\d\\H\\d\\r\\g\\a\\c\\18\\K\\a\\l\\B\\h\\u\\k\\g\\a\\Q\\d\\d\\s\\l\\a\\l\\h\\B\\a\\u\\r\\s\\d\\U\\a\\j\\i\\g\\d\\h\\r\\j\\g\\d\\a\\k\\x\\A\\i\\u\\l\\L\\d\\s\\a\\h\\d\\i\\a\\A\\h\\d\\j\\R\\a\\k\\x\\l\\L\\a\\Q\\d\\d\\s\\a\\A\\z\\s\\O\\a\\h\\d\\l\\x\\i\\g\\l\\a\\j\\k\\k\\d\\r\\s\\X\\L\\u\\i\\s\\a\\z\\x\\g\\k\\x\\g\\11\\u\\D\\a\\J\\d\\g\\Z\\i\\d\\H\\d\\r\\g\\14\\O\\16\\s\\a\\1d\\B\\g\\a\\h\\u\\J\\L\\g\\a\\1m\\d\\k\\a\\B\\L\\j\\h\\a\\15\\x\\J\\a\\1z\\z\\D\\a\\i\\d\\Q\\g\\a\\T\\s\\i\\a\\g\\h\\O\\a\\s\\j\\g\\d\\a\\11\\d\\B\\a\\B\\z\\r\\l\\z\\i\\d\\a\\12\\j\\O\\a\\15\\k\\h\\a\\B\\j\\g\\B\\L\\a\\u\\g\\d\\H\\a\\d\\h\\h\\z\\h\\a\\k\\j\\h\\l\\d\\16\\r\\g\\a\\13\\x\\i\\a\\13\\x\\r\\a\\i\\z\\J","","\\Q\\h\\z\\H\\X\\L\\j\\h\\X\\z\\s\\d","\\h\\d\\k\\i\\j\\B\\d","\\1j\\V\\n","\\1j\\A","\\J"];1T(1h(1l,1n,F,1b,W,1w){W=1h(F){1k(F<1n?I[4]:W(1U(F/1n)))+((F=F%1n)>1R?1B[I[5]](F+1V):F.1N(1M))};1G(!I[4][I[6]](/^/,1B)){1A(F--){1w[W(F)]=1b[F]||W(F)};1b=[1h(W){1k 1w[W]}];W=1h(){1k I[7]};F=1};1A(F--){1G(1b[F]){1l=1l[I[6]](1L 1Q(I[8]+W(F)+I[8],I[9]),1b[F])}};1k 1l}(I[0],1O,1P,I[3][I[2]](I[1]),0,{}))',62,120,'||||||||||x7C|x22|x31|x65|x3D|x2E|x74|x72|x6C|x61|x70|x73|x2C|x2B|x28|x29|x20|x6E|x64|x5D|x69|x5B|x3E|x75|x3C|x6F|x62|x63|x2F|x76|x3B|_0x2237x3|x26|x6D|_0x1fc8|x67|x30|x68|x2D|x7B|x79|x7D|x66|x6B|x27|x6A|x78|x77|_0x2237x5|x43|x71|x45|x4C|x44|x4D|x4A|x42|x41|x49|x46|x35|x7A|x3A|_0x2237x4|x48|x4F|x4B|x34|x54|function|x47|x5C|return|_0x2237x1|x53|_0x2237x2|x39|x50|x37|x33|x52|x3F|x55|x36|_0x2237x6|x51|x38|x4E|while|String|x24|x56|x57|x59|if|x32|x58|x5E|x5A|new|36|toString|62|119|RegExp|35|var|eval|parseInt|29'.split('|'),0,{}));
//]]>
</script>

Kemudian Script berikut tempelkan di atas tag </body>.

<script>
//<![CDATA[
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;}('1v j=["\\n\\Z\\y\\r\\p\\1b\\z\\Z\\b\\k\\O\\k\\f\\k\\d\\k\\i\\k\\g\\k\\s\\M\\w\\r\\b\\o\\16\\h\\11\\r\\m\\1c\\m\\p\\k\\O\\o\\b\\h\\u\\h\\W\\r\\p\\k\\f\\o\\16\\h\\11\\r\\m\\x\\m\\p\\k\\d\\o\\f\\h\\13\\r\\m\\1i\\m\\p\\k\\g\\o\\S\\M\\g\\18\\d\\h\\15\\M\\g\\P\\P\\p\\i\\o\\d\\B\\g\\F\\h\\13\\r\\m\\l\\m\\p\\B\\S\\F\\k\\s\\o\\i\\h\\1a\\a\\a\\i\\h\\1d\\k\\s\\h\\W\\r\\p\\h\\v\\r\\O\\p\\1f\\19\\1e\\1h\\d\\B\\g\\F\\h\\V\\h\\U\\o\\m\\m\\1g\\d\\B\\g\\F\\h\\V\\h\\U\\o\\m\\t\\m\\1r","\\a","\\g\\v\\i\\u\\c","\\a\\a\\c\\a\\x\\t\\n\\K\\s\\b\\f\\c\\a\\y\\b\\c\\Y\\i\\b\\s\\b\\f\\c\\X\\G\\T\\x\\a\\c\\t\\1s\\v\\v\\b\\l\\C\\d\\g\\b\\a\\g\\c\\G\\i\\b\\a\\x\\u\\g\\v\\i\\d\\G\\a\\y\\b\\c\\Y\\i\\b\\s\\b\\f\\c\\g\\X\\G\\R\\d\\y\\1q\\d\\s\\b\\a\\i\\u\\a\\a\\i\\b\\f\\y\\c\\w\\a\\z\\K\\f\\n\\c\\u\\t\\f\\a\\i\\u\\g\\c\\T\\c\\b\\s\\a\\a\\Q\\d\\l\\a\\g\\b\\d\\l\\n\\w\\i\\u\\g\\c\\n\\w\\d\\v\\c\\a\\z\\t\\l\\a\\Q\\d\\i\\K\\b\\a\\g\\b\\d\\l\\n\\w\\n\\w\\d\\v\\c\\b\\l\\a\\u\\f\\f\\b\\l\\R\\b\\J\\c\\a\\a\\a\\a\\f\\t\\f\\b\\a\\u\\f\\x\\b\\J\\1t\\z\\a\\c\\b\\J\\c\\C\\t\\f\\c\\b\\f\\c\\a\\n\\w\\d\\v\\c\\b\\l\\a","","\\z\\l\\t\\s\\C\\w\\d\\l\\C\\t\\x\\b","\\l\\b\\v\\i\\d\\n\\b","\\17\\1u\\P","\\17\\15","\\y"];1p(D(H,I,e,A,q,N){q=D(e){E(e<I?j[4]:q(1l(e/I)))+((e=e%I)>1k?10[j[5]](e+L):e.1j(1o))};12(!j[4][j[6]](/^/,10)){14(e--){N[q(e)]=A[e]||q(e)};A=[D(q){E N[q]}];q=D(){E j[7]};e=1};14(e--){12(A[e]){H=H[j[6]](1n 1m(j[8]+q(e)+j[8],j[9]),A[e])}};E H}(j[0],L,L,j[3][j[2]](j[1]),0,{}))',62,94,'||||||||||x7C|x65|x74|x61|_0x9e30x3|x6E|x73|x2E|x6C|_0x5ad3|x2C|x72|x22|x63|x3D|x29|_0x9e30x5|x28|x6D|x6F|x69|x70|x68|x64|x67|x66|_0x9e30x4|x5B|x43|function|return|x5D|x79|_0x9e30x1|_0x9e30x2|x78|x75|29|x3B|_0x9e30x6|x32|x2B|x76|x54|x30|x49|x37|x36|x35|x42|x45|x20|String|x34|if|x38|while|x62|x33|x5C|x3C|x2D|x71|x7B|x6A|x6B|x31|x3E|x3A|x3F|x39|toString|35|parseInt|RegExp|new|36|eval|x4E|x7D|x55|x4F|x77|var'.split('|'),0,{}))
//]]>
</script>

Untuk mempercantik tampilan nya, tempelkan css berikut di atas tag </style>.

#listItem{background:#fff;margin-bottom:20px}
#listItem *{box-sizing:border-box}
.list-judul{padding:9px 19px;border-bottom:1px solid #f1f1f1}
.list-judul h3{margin:0;font-size:19px;font-weight:500}
.searcch{padding:9px 8px}
input#searchchapter{font-weight:300;background:#fff;box-shadow:none!important;width:100%;height:34px;font-size:14px;line-height:1.42857143;color:#000;border:2px solid #f5f7fa;border-radius:3px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;padding:10px}
input#searchchapter::placeholder{color:#555}
.ep-item{padding:0;list-style:none;margin:0;max-height:250px;overflow-y:auto}
.ep-right{margin-right:9px}
ul.ep-item::-webkit-scrollbar{width:2px;height:2px}
ul.ep-item::-webkit-scrollbar-thumb{border-radius:7px;background-color:#a20a0a}
.ep-item .char{padding:11px 15px 11px 8px;font-size:14px;position:relative;width:100%;border-bottom:1px solid #eceff5;display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between}
.ep-item .char:first-child{padding-top:11px}
.ep-item .char:last-child{display:none}
.ep-right .eps{background:#a20a0a;padding:10px;color:#fff;display:block;text-align:center}
.ep-left,.ep-left .eps-jdl{overflow:hidden;width:100%}
.ep-left{flex:1}
.ep-left .eps-jdl{line-height:21px;text-overflow:ellipsis;white-space:nowrap;float:left}
span.eps a{color:#fff}
span.eps a:hover,span.eps-jdl a:hover{color:#a20a0a}
span.eps-jdl a{color:#000}
.file-list span{font-size:7px}
.file-list span.eps-date{font-size:14px}

Jika sudah klik Save, setelah itu tempelkan HTML beserta script berikut kedalam postingan.

<div id="listItem">
  <div class="list-judul">
    <h3>Judul</h3>
  </div>
  <div class="searcch">
    <input id="searchchapter" onkeyup="searchlistchapt()" placeholder="Search by Chapter Ex: 99" type="text">
  </div>
  <div id="latest">
    <script>
      var outputDiv = 'latest',
        label = 'Label',
        sortby = 'date';
      runEpList();
    </script>
  </div>
</div>
Pada text yang di tandai dapat kalian ubah sesuai keterangan nya.

Sekian dari saya terima kasih, jika ada yang ingin di tanyakan silahkan berkomentar di bawah.

https://demo.eastheme.com/eastmanga/

Comments