Hello sobat ICloudzer kali ini admin bakalan menjabarkan mengenai bagaimana cara membuat auto chapter atau post next dan post prev di blogger
Info: Jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama
Auto Chapter
Auto chapter merupakan fitur yang menampilkan artikel ataupun postingan sebelumnya dan postingan selanjutnya sesuai label atau kategori menurut artikel yang sedang di baca tersebut, dan tampilan dari auto chapter tersebut hanya berisi text di sertai link internal dari artikel yang memiliki kesamaan label dan juga kategori sebagaimana yang telah admin jelaskan sebelumnya
Di bawah postingan
Nah nantinya tampilan dari auto chapter tersebut akan muncul persis tepat di bawah postingan blog, dan memang seharusnya auto chapter tersebut di tampilkan setelah atau di bawah postingan, hal tersebut akan sangat memudahkan pengguna mendapatkan informasi lebih dari pembahasan yang sedang ia baca sesuai label atau kategori tersebut, jika anda mengikuti arahan yang admin jabarkan sebentar lagi maka tampilan auto chapter tersebut akan muncul tepat di bawah postingan blog anda
Ringan dan responsif
Hal yang menarik dari auto chapter tersebut adalah adalah tampilan yang ringan dan juga cepat, pasalnya script akan di bungkus di dalam tag includable dan tag includable harus berada di paling atas blog setelah element CSS
Contoh Tampilan
Baiklah agar kamu tidak penasaran dengan bagaiamana kah contoh tampilan dari auto chapter tersebut, silahkan periksa di dalam postingan yag sedang kamu baca ini, tepat dibawah postingan blog
Info: Bagaimana sobat keren kan, oh pastilah
Cara pembuatan
Baiklah sobat sekarang saatnya admin bakalan menjabarkan megenai cara membuat auto chapter di bloger, silahkan baca dan ikuti setiap arahan yang admin jelaskan di bawah ini ok
Kode CSS
Langkah pertama seperti biasa silahkan salin dan tempelkan kode CSS di bawah ini tepat di atas kode ]]></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: Atau sobat bisa menggunakan tag kode <style> untuk meletakkan kode CSS di atas
Kode Javascript
Selanjutnya salin dan tempelkan kode script yang sudah di bungkus menggunakan tag includable di bawah ini tepat di bawah kode <b:defaultmarkup type=#&39;Common'>
<b:includable id='post-authorChap'>
<div id='rahnxPr'/>
<script>
// Auto Chapter
var rahautoChapterConfig = {
homePage: "<data:blog.homepageUrl.canonical/>",
titleLength: "69",
newTabLink: false,
callBack:function(){}
}
</script>
<script>/*<![CDATA[*/
var rahautoChapterIndex,showChapterRelated;!function(a,n){var e,c={homePage:"https://www.icloudice.com",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)+"…":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>Info: Kamu mungkin bisa mengubah url blog www.icloudice.com ke url blog antum
Kode HTML
Terakhir silahkan salin kemudian tempelkan kode HTML di bawah ini tepat di bawah <data:post.body/>
<b:include cond='data:view.isPost and !data:view.isPreview' data='post' name='post-authorChap'/>Info: Mungkin kode <data:post.body/> lebih dari satu silahkan cari yang berada pada kategori <!--[ Post body ]-->, kemudian simpan dan lihat bagaimana hasilnya