Cara Membuat Artikel Baca Juga Pada Tengah-tengah Postingan Blog ~ On News

Pada Kesempatan kali ini saya akan membagikan tentang Cara Membuat Artikel Baca Juga Pada Tengah-tengah Postingan Blog. Masukkan Css Pada theme blog kamu.

Pertama-tama carilah code berikut ini ]]></b:skin> dan paste CSS di atas code tersebut.

/* postTextRelated */
.postTextRelated{position:relative;margin:42px 0;padding:1.5em 0;border:1px solid #eceff1;border-left:0;border-right:0; font-size:14px;line-height:1.8em;display:none}
.postTextRelated a{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent}
.postTextRelated a:hover{opacity:.8}
.postTextRelated b{font-size:13px;font-weight:400;margin:0;padding:2px 14px;background-color:#fefefe;border:1px solid #e6e6e6;border-radius:15px; position:absolute;top:-15.5px;left:20px}
.postTextRelated ul{margin:8px 0 0;padding-left:20px}
.postTextRelated li:hover{margin-left:5px}
.postTextRelated li{background:url(&amp;quot;data:image/svg+xml,&amp;lt;svg xmlns=&amp;#039;http://www.w3.org/2000/svg&amp;#039; viewBox=&amp;#039;0 0 24 24&amp;#039;&amp;gt;&amp;lt;g transform=&amp;#039;translate(12.000000, 12.000000) rotate(-90.000000) translate(-12.000000, -12.000000) translate(6.500000, 3.000000)&amp;#039;&amp;gt;&amp;lt;line fill=&amp;#039;none&amp;#039; stroke=&amp;#039;%23f89000&amp;#039; x1=&amp;#039;5.3939&amp;#039; y1=&amp;#039;9.7001&amp;#039; x2=&amp;#039;5.3939&amp;#039; y2=&amp;#039;0.7501&amp;#039;&amp;gt;&amp;lt;/line&amp;gt;&amp;lt;path fill=&amp;#039;none&amp;#039; stroke=&amp;#039;%23f89000&amp;#039; d=&amp;#039;M5.3998,17.3539 C6.6558,17.3539 10.6708,10.9899 9.9488,10.2679 C9.2268,9.5459 1.6418,9.4769 0.8508,10.2679 C0.0598,11.0599 4.1448,17.3539 5.3998,17.3539 Z&amp;#039;&amp;gt;&amp;lt;/path&amp;gt;&amp;lt;/g&amp;gt;&amp;lt;/svg&amp;gt;&amp;quot;) left / 20px no-repeat;list-style-type:none;padding:0 25px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f89000;transition:all .4s ease}
/* css darkmode sesuaikan class (.drK) */
.drK .postTextRelated b{background-color:#1e1e1e;}
.drK .postTextRelated,.drK .postTextRelated b{border-color:rgba(255,255,255,.15)}

Langkah berikutnya: Sekarang tambahkan code berikut ini Javascript di atas </body> tag. Jika kamu tidak menemukannya, mungkin sudah di Parse menjadi: </body>.

<!-- letakkan kode ini harus di bawah kode <data:post.body/> -->
<div class='postTextRelated' id='postTextRelated'>
<script>/*<![CDATA[*/ var relatedTitles=new Array,relatedTitlesNum=0,relatedUrls=new Array;function related_results_labels(e){for(var t=0;t<e.feed.entry.length;t++){var l=e.feed.entry[t];relatedTitles[relatedTitlesNum]=l.title.$t;for(var r=0;r<l.link.length;r++)if("alternate"==l.link[r].rel){relatedUrls[relatedTitlesNum]=l.link[r].href,relatedTitlesNum++;break}}}function removeRelatedDuplicates(){for(var e=new Array(0),t=new Array(0),l=0;l<relatedUrls.length;l++)contains(e,relatedUrls[l])||(e.length+=1,e[e.length-1]=relatedUrls[l],t.length+=1,t[t.length-1]=relatedTitles[l]);relatedTitles=t,relatedUrls=e}function contains(e,t){for(var l=0;l<e.length;l++)if(e[l]==t)return!0;return!1}function printRelatedLabels(){for(var e=Math.floor((relatedTitles.length-1)*Math.random()),t=0;t<relatedTitles.length&&t<20;){var l=document.createElement("ul"),r=document.createElement("li"),a=document.createElement("a");a.setAttribute("href",relatedUrls[e]),a.setAttribute("target","_blank"),a.innerText=relatedTitles[e],l.appendChild(r),r.appendChild(a),document.querySelector(".postTextRelated").appendChild(l),e<relatedTitles.length-1?e++:e=0,t++}} /*]]>*/</script>
<b:if cond='data:post.labels'>
<b:loop index='i' values='data:post.labels' var='label'>
<b:if cond='data:i&lt;1'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' rel='preload'/>
</b:if>
</b:loop>
</b:if>
<b>Baca juga :</b>
<script>removeRelatedDuplicates(); printRelatedLabels();</script>
</div>
<script>/*<![CDATA[*/
// (postBody) sesuaikan dengan kode di template kalian, biasanya dapat di lihat pebungkus kode ini <data:post.body/> contoh <div class='postBody'><data:post.body/></div>
!function() {
    let c = document.querySelector("#postTextRelated");
    if (c) {
        let a = document.querySelectorAll(".postBody p"),
            b = parseInt(a.length / 2);
        if (a.length > 0) {
        c.style.display = 'block';
        "P" == a[b].nodeName ? a[b].parentNode.insertBefore(c, a[b]) : a[b].parentNode.insertBefore(c, a[b].nextSibling)
    }
}
}()
/*]]>*/</script>

Next... Selanjut yang Terakhir, Simpan perubahan dengan mengklik ikon ini

Cukup mudahkan!

Sekian artikel dari admin semoga bisa bermanfaat untuk para blogger semuanya

Cara Membuat Artikel Baca Juga Pada Tengah-tengah Postingan Blog

Bacaan Menarik