Tạo Thanh điều hướng chuyển chapter cho Template Truyện tranh Blogger

How To Make Navigation Next And Prev For Manga Blogger Template

Thanh điều hướng chuyển chapter là tính năng đặc trưng của template truyện so với các template khác. Thanh điều hướng sẽ giúp bạn di chuyển qua lại giữa các chapter truyện thuận tiện hơn ngay trong trang đọc truyện. Bài viết này sẽ hướng dẫn cho các bạn mang tính năng chuyển chapter lên các template khác.

Cách thực hiện

1Vào Chủ đề >> Chỉnh sửa HTML tìm đến dòng code <b:includable id='nextprev'> và dán đoạn code bên dưới vào ngay sau dòng code trên

<b:includable id='pager_chapter' var='type'>
<style type='text/css'>
/*<![CDATA[*/
.pager-js{margin:auto;text-align:center}
.pager-js>div{display:inline-block;border:1px solid #ddd;padding:4px 20px;border-radius:3px;}
.pager-js>div a{color:#333;}
.pager-js>div a:hover{color:#264e86;}
.pager-js-nolink{text-decoration:line-through;color:#999!important;cursor:not-allowed}
.pager-js>._index{margin:0 6px}
#pager-js-clone{margin:15px auto 0}
/*]]>*/
</style>
<b:if expr:cond='data:post.labels any (label => label.name != &quot;data:type.name&quot;)'><script type='text/javascript'>var selectchap = false;</script></b:if>
<b:if expr:cond='data:post.labels any (label => label.name == &quot;data:type.name&quot;)'><script type='text/javascript'>var selectchap = true;</script></b:if>
<b:loop index='i' values='data:post.labels' var='label'>
<b:if cond='data:i == 0'>
<div class='pager-js' id='pager-js'>
  <div class='_next' id='nextjs'><a class='pager-js-nolink'>Next</a></div>
  <div class='_index' id='indexjs'><a class='pager-js-nolink'>Index</a></div>
  <div class='_prev' id='prevjs'><a class='pager-js-nolink'>Prev</a></div>
</div>
<script type='text/javascript'>
var postPrev = &quot;Chapter trước&quot;;
var postNext = &quot;Chapter sau&quot;;
var postIndex = &quot;Trang chủ&quot;;
var postID = <data:post.id/>;
/*<![CDATA[*/
if(selectchap==false){var yktocs=function(data){var i=0;for(;i<data.feed.entry.length;i++){var j=0;for(;j<data.feed.entry[i].link.length;j++){if("alternate"==data.feed.entry[i].link[j].rel){var entityUrl=data.feed.entry[i].link[j].href;break}}document.getElementById("indexjs").innerHTML="<a href='"+entityUrl+"'>"+postIndex+"</a>"}};var ykpager=function(data){var node={postlist:[]};var i=0;for(;i<data.feed.entry.length;i++){var j=0;for(;j<data.feed.entry[i].link.length;j++){if("alternate"==data.feed.entry[i].link[j].rel){var murl=data.feed.entry[i].link[j].href;break}}var videoId=data.feed.entry[i].id.$t;var CAPTURE_ID=videoId.substr(51,19);node.postlist.push({url:murl,id:CAPTURE_ID})}var v=node.postlist.findIndex((timeline_mode)=>{return timeline_mode.id==postID});var id=v+1;var cbs=node.postlist[id];if(null!=cbs){var g=Object.values(cbs)[0];var lnkDiv=document.getElementById("prevjs");lnkDiv.innerHTML="<a href='"+g+"'>"+postPrev+"</a>"}var q=v-1;var val=node.postlist[q];if(null!=val){var k=Object.values(val)[0];lnkDiv=document.getElementById("nextjs");lnkDiv.innerHTML="<a href='"+k+"'>"+postNext+"</a>"}}}else{document.write("<style>.pager-js{display:none;}</style>")};
/*]]>*/</script>
<script defer='' expr:src='&quot;/feeds/posts/summary/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=ykpager&quot;' type='text/javascript'/>
<script defer='' expr:src='&quot;/feeds/posts/summary/-/&quot; + data:type.name + &quot;/&quot; + data:label.name + &quot;?orderby=published&amp;alt=json-in-script&amp;callback=yktocs&amp;max-results=1&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:includable>

2Tiếp tục dán đoạn code sau vào trước thẻ <data:post.body/>

<b:include cond='data:view.isPost' data='{name : &quot;Manga&quot;}' name='pager_chapter'/>

Với: Manga là nhãn bài viết trong blog của bạn

3Để tạo tiếp 1 thanh điều hướng nữa ngay cuối mỗi chapter bạn hãy dán dòng code sau là ngay sau thẻ <data:post.body/>

<b:if cond='data:view.isPost'><div id='pager-js-clone'/></b:if>

4Tiếp tục dán đoạn JS dưới đây vào trước thẻ </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
var itm=document.getElementById(&quot;pager-js&quot;),cln=itm.cloneNode(!0);document.getElementById(&quot;pager-js-clone&quot;).appendChild(cln);
</script>
</b:if>

5Lưu ý với nhãn kèm theo bài đăng:

+ Đối bài đăng chính (giới thiệu truyện) bạn cần 2 nhãn: 1 là nhãn Manga như ở bước 2, nhãn thứ 2 là tên truyện.
+ Đối bài đăng là các chapter truyện bạn chỉ cẩn để 1 nhãn là tên truyện là đủ.

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by yuukithemes/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm