Cara Pasang Previous Next Chapter pada Median Ui 1.7

Sebelum melakukan suatu perubahan pada template silahkan Back Up atau cadangkan template sebelumnya.

Cara pasang previous next chapter ala template plus ui pada median ui terbaru 1.7

Selamat pagi untuk semua. Pada postingan pertama ini saya mencoba menulis sebuah tutorial tentang cara pasang auto chapter next and previous chapter pada template median ui version 1.7

Next Previous Chapter ini pungsinya adalah untuk menampilkan postingan terlama dan postingan terbaru, biasanya pada halaman postingan blog paling bawah terdapat tulisan Previous Chapter dan Next Chapter. Tampilan ini biasa kita melihatnya pada template Plus Ui.

Pada kesempatan pagi ini saya akan memberikan sebuah tutorial untuk memasang menu Previuos Chapter pada template median ui terbaru 1.7. Untuk caranya mari kita simak sama-sama.

Cara Pasang Next Previous Chapter di Template Median UI 1.7

Untuk tampilan nya kamu bisa melihatnya langsung pada blog ini dibagian akhir bawah postingan ini.

1. Seperti biasa silahkan kamu masuk ke akun blogger milk kamu
2. Kemudian pilih menu Tema lalu pilih Edit Html
3. Silahkan kamu copy kode yang ada dibawah lalu paste kode tersebut tepat diatas kode tag ]]></b:skin>

/* Post Next or Prev */ 
.rahprNx{margin:4em 0 0;display:flex;justify-content:space-between;flex-wrap:wrap;position:relative;width:calc(100% + 20px);left:-10px;right:-10px; font-size:14px;font-family:var(--rahfontB);line-height:1.6em} .rahprNx >*{margin:0 10px;flex:0 0 calc(50% - 20px);display:inline-flex;flex-direction:column;color:inherit!important;cursor:default} 
.rahprNx >*::before{content:'Previous Chapter'} 
.rahprNx >*:not(:first-child)::before{content:'Next Chapter'} .rahprNx >*::after{content:attr(data-text);display:block; /*display:-webkit-box;*/-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; opacity:.6; font-size:12px;font-family:var(--rahfontBa);line-height:1.5em;margin-top:4px;cursor:pointer} .rahprNx >*:hover::after{text-decoration:underline} 
.rahprNx >*:not(:first-child){align-items:flex-end; text-align:right} .rahprNx.n{justify-content:flex-end} 
.rahprNx.p{justify-content:flex-start}

Info : Kamu bisa menyimpan kode tersebut di antara kode tag <style> </style>

4. Selanjutnya silahkan kamu salin kode yang ada dibawah lalu paste kode tersebut dibawah kode tag <b:defaultmarkup type='Common'>

<b:includable id='post-authorChap'>
<div id='rahnxPr'/>
<script>
// Auto Chapter
var rahautoChapterConfig = {
homePage: &quot;<data:blog.homepageUrl.canonical/>&quot;,
titleLength: &quot;69&quot;,
newTabLink: false,
callBack:function(){}
}
</script>
<script>/*<![CDATA[*/ 
var rahautoChapterIndex,showChapterRelated;!function(a,n){var e,c={homePage:"https://blog.ongky.eu.org",titleLength:"auto",containerId:"rahnxPr",newTabLink:!1,callBack:function(){}};for(e in rahautoChapterConfig)c[e]=("undefined"==rahautoChapterConfig[e]?c:rahautoChapterConfig)[e];function r(e){var t=a.createElement("script");t.async="async",t.rel="preload",t.src=e,n.appendChild(t)}function s(e){var t,a,n=e.length;if(0===n)return!1;for(;--n;)t=Math.floor(Math.random()*(n+1)),a=e[n],e[n]=e[t],e[t]=a;return e}var l="object"==typeof labelArray&&0<labelArray.length?"/-/"+s(labelArray)[0]:"";rahautoChapterIndex=function(e){var t=e.feed.openSearch$totalResults.$t-2,e=(e=1,t=0<t?t:1,Math.floor(Math.random()*(t-e+1))+e);r(c.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+l+"?alt=json-in-script&orderby=updated&start-index="+e+"&max-results=2&callback=showChapterRelated")},showChapterRelated=function(e){var t,a,n=document.getElementById(c.containerId),r=s(e.feed.entry),l="<div class='rahprNx'>",o=c.newTabLink?' target="_blank"':"";if(n){for(var i=0;i<2&&i!=r.length;i++){a=r[i].title.$t,a="auto"!==c.titleLength&&c.titleLength<a.length?a.substring(0,c.titleLength)+"&hellip;":a;for(var h=0,d=r[i].link.length;h<d;h++)t="alternate"==r[i].link[h].rel?r[i].link[h].href:"#";l+='<a href="'+t+'" '+o+' data-text="'+a+'"></a>'}n.innerHTML=l+="</div>",c.callBack()}},r(c.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+l+"?alt=json-in-script&orderby=updated&max-results=0&callback=rahautoChapterIndex")}((window,document),document.getElementsByTagName("head")[0]);/*]]>*/</script>
</b:includable>

5. Terakhir silahkan salin kode yang ada dibawah lalu paste dibawah kode tag   <b:include data='post' name='postBody'/>

<b:include cond='data:view.isPost and !data:view.isPreview' data='post' name='post-authorChap'/>

6. Jika sudah semua silahkan kamu simpan perubahan template

Jangan lupa ganti alamat url blog https://blog.bhaonks.eu.org dengan alamat blog kalian.

Harap pastikan bahwa kamu sudah benar dalam menyimpan kode tersebut dalam template, jika pemasanganya benar maka menu Previous Next Chapter akan tampil dibagian bawah postingan.

Baca juga