For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

Membuat auto chapter (next and prev post) di blogger

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: &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://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)+"&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>

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

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

إرسال تعليق

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.