How to Create an Automatic Chapter List in Blogger

Creating a chapter list in Blogger is easy but takes a long time if typed manually. So, the automatic chapter list that I took from the MegumiNovel template created by Codepelajar might be a solution.

This script automatically displays a list of links to posts with a specific label. For example, if the label is “Hero,” then all post links and titles with the “Hero” label will appear in a list. To create it, you need to go into the HTML edit mode in your theme, and don’t forget to back up your template first in case something unexpected happens, so you can restore it.

Let’s go to the tutorial, and I assume you are already in HTML edit mode. Now, find the code:

 <b:includable id='post' var='post'>

Now add the following code right above it:

<b:includable id='select_chapter'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.name != &quot;Novel&quot; and data:label.name != &quot;Anime&quot; and data:label.name != &quot;Manga&quot;'><script>var postID = <data:post.id/>;//<![CDATA[if(autlist==true){function autolist(e){for(var t=0;t<e.feed.entry.length;t++){for(var r=0;r<e.feed.entry[t].link.length;r++)if("alternate"==e.feed.entry[t].link[r].rel){var n=e.feed.entry[t].link[r].href;break}var f=e.feed.entry[t].title.$t;e.feed.entry[t].id.$t.substr(51,19)!=postID&&document.write("<li><a href="+n+">"+f+"</a></li>")}}}}//]]></script><div class='auto-listchap'><ul><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?orderby=published&amp;max-results=99999&amp;alt=json-in-script&amp;callback=autolist&quot;' type='text/javascript'/></ul></div></b:if></b:loop></b:includable>

“Novel, Anime, and Manga” are exception labels that will not be executed, so the script will not add posts with those labels. If you want to add more exceptions, add them with the code and data:label.name != "Label Name". Next, you just need to add the following code below the <data:post.body/> code:

<b:if cond='data:view.isPost'><b:include name='select_chapter'/></b:if>

Now save and open the post where you want to add the automatic chapter list, and insert the following code at the very bottom of the post:

<script>var autlist = true</script>

Please create your own style to make the automatic chapter list look good. If you want the style I used, please add the following code above the ]]></b:skin> or </style> code, and of course, you need to go back to HTML mode.

.auto-listchap {
max-height: 244px;
overflow: auto;
}
.auto-listchap ul {
padding: 0.1rem;
margin: 0;
}
.auto-listchap li {
background-color: #eee;
padding: 0.3rem;
margin: 0.3rem;
}

Now, view the post. If this automatic chapter list script in Blogger fails, please ask in the comments, maybe I can help. And we should be grateful to Codepelajar who created this script.

Menu