Cara membuat Related post atau baca juga didalam postingan blog Otomatis

Helo sobat desain kami akan terus memberikan informasi terbaru dan bermanfaat untuk anda, kali ini saya akan membahas mengenai desain web didalam pembuatan Related post terkait yang muncul atau akan ditampilkan ditengah tengah Artikel secara otomatis

Script related posts ditengah artikel ini juga bisa dikatakan sebagai widget baca juga yang sering kita lihat pada setiap blog yang memang memiliki fitur ini

Oke sobat pembuatan nya emang sedikit sulit tetapi jangan khawatir saya 😎 akan memberikan penjelasan secara detail dan rapi, ok 👌


Cara Penerapan


Oke sobat untuk memulai membuat Related post terkait ditengah artikel, kamu bisa menyalin kode CSS berikut kemudian letakkan diatas kode ]]</b;skin> atau sebelum kode ]]</b;skin>
/* BACA JUGA By Desain Limited */

#DLbaca-juga{display:none}.post-body #DLbaca-juga{display:block;overflow:hidden;clear:both;margin:24px 0;margin:1.5rem 0}.post-body .DLbaca-juga-wrap{font-size:14.4px;font-size:.9rem;background:#fff;padding:16px 16px 20.8px;padding:1rem 1rem 1.3rem}.post-body #DLbaca-juga h2{display:inline-block;font-size:14px;font-size:.875rem;text-transform:uppercase;margin-bottom:9.6px;margin-bottom:.6rem}.post-body #DLbaca-juga a{color:#e8ad11;font-weight:bold;text-decoration:none;padding:0}.post-body #DLbaca-juga ul{margin:0 0 0 20px;padding-left:0}.post-body #DLbaca-juga li{padding:0;margin:0 0 9.6px;margin:0 0 .6rem}.post-body #DLbaca-juga li:last-child{margin:0}


Kemudian kamu bisa simpan Template atau melanjutkan kelangkah berikutnya 👩‍🔧

Atur Pakai true dan false

Setelah kamu meletakkan kode CSS diatas selanjutnya kamu bisa menyimpan script kode dibawah ini yaitu sebelum kode </head>
<script>

var DLwidgetBacaJuga = trueOrfalse;

</script>

Penjelasan mengenai script diatas adalah ketika kamu ingin menampilkan atau menghilangkan Tampilan baca juga didalam postingan kamu, kamu bisa mengatur nya didalam script diatas

Jika akmu ingin menampilkan widget Baca Juga didalam postingan gunakan kode true dan jika kamu ingin menghilangkan tampilan widget baca juga kamu bisa menggunakan kode false, ok sudah paham ya 🤔

Sebagi saran Kemudian kamu bisa menyimpan Template kamu, dan cadangkan atau Backup Template kamu itu supaya template kamu aman, dikarnakan langkah berikutnya akan sedikit menyulitkan, ok 🤨


Cari Kode <data:post.body/>


Nah pada proses ini kamu harus mencari dulu kode <data:post.body/> seperti ini biasanya kode tersebut terdapat dua hingga Tiga didalam setiap Template, tetapi kamu harus mencari kode tersebut

Jika sudah ketemu kamu bisa menyalin kode dibawah ini kemudian letakkan dibawah kode tadi
<script>

//<![CDATA[

var relatedTitles=new Array,relatedTitlesNum=0,relatedUrls=new Array;function bacadljuga(e){for(var l=0;l<e.feed.entry.length;l++){var t=e.feed.entry[l];relatedTitles[relatedTitlesNum]=t.title.$t;for(var r=0;r<t.link.length;r++)if("alternate"==t.link[r].rel){relatedUrls[relatedTitlesNum]=t.link[r].href,relatedTitlesNum++;break}}}function removeRelatedDuplicates(){for(var e=new Array(0),l=new Array(0),t=0;t<relatedUrls.length;t++)contains(e,relatedUrls[t])||(e.length+=1,e[e.length-1]=relatedUrls[t],l.length+=1,l[l.length-1]=relatedTitles[t]);relatedTitles=l,relatedUrls=e}function contains(e,l){for(var t=0;t<e.length;t++)if(e[t]==l)return!0;return!1}function printRelatedLabels(e){for(var l=0;l<relatedUrls.length;l++)relatedUrls[l]==e&&(relatedUrls.splice(l,1),relatedTitles.splice(l,1));var t=Math.floor((relatedTitles.length-1)*Math.random());l=0;if(DLwidgetBacaJuga==1&&relatedTitles.length>1){for(document.write("<div class='DLbaca-juga-wrap'>" + DLjudulbacajuga + "<ul>");l<relatedTitles.length&&l<20&&l<DLjumlahbacajuga;)document.write('<li><a href="'+relatedUrls[t]+'">'+relatedTitles[t]+"</a></li>"),t<relatedTitles.length-1?t++:t=0,l++;document.write("</ul></div>")}relatedUrls.splice(0,relatedUrls.length),relatedTitles.splice(0,relatedTitles.length)}

//]]>

</script>

    

  <div id='DLbaca-juga'>

  <b:loop values='data:post.labels' var='label'>

  <b:if cond='data:label.isLast != &quot;true&quot;'>

  </b:if>

  <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=bacadljuga&amp;max-results=5&quot;'/>

  </b:loop>

  <script>

  var DLjudulbacajuga=&quot;<b:switch var='data:blog.locale'><b:case value='id'/><h2>Baca Juga:</h2><b:default/><h2>Related:</h2></b:switch>&quot;

  var DLjumlahbacajuga=3;

  removeRelatedDuplicates();

  printRelatedLabels(&quot;<data:post.url/>&quot;);

  </script>

  </div>

Nah kamu bisa mencoba menaruh pada kode yang pertama, jika tampilan baca juga belum muncul pindahkan dibawah kode <data:post.body/> yang lainnya ya 🤓


Sobat desain bagaiamana dengan informasi kita kali ini, mengenai pembuatan Related post terkait ditengah atau didalam postingan artikel, apakah kamu punya pertanyaan seputar bembahasn kita kali inj

Kalau seandainya didalam widget baca juga saya telah ada didalam Template namun tidak muncul, kode mana yang harus saya digunakan? Ok untuk masalah yang itu kamu mungkin bisa melihat antara kode CSS dan kode HTML apakah setiap kode atau elemen sudah sama jika belum kamu harus mengeditnya dulu


Baca Juga :
Ar-rahim 🇵🇸