Cara Membuat Baca Juga di Blog (Updated 2019)

Cara membuat baca juga di blog (Updated 2019) – Hallo sahabat blogger indonesia, pada kesempatan kali ini Admin akan mencoba untuk membagikan kode css dan html keren untuk membuat kotak baca juga atau sering disebut Related Post yang bisa Anda tempatkan di akhir postingan, diawal postingan, diawal paragrafh ataupun di tengah postingan, tujuannya adalah agar pengunjung mengetahui apa saja artikel yang ada di blog Anda, dan tentunya menurunkan bounce rate, dan meningkatkan Angka pageviews, bagi Anda yang belum tahu cara membuat dan pasang related post di blog, Admin akan membuat tutorialnya di artikel ini.
Cara Memasang Baca Juga di Postingan Blog
Apakah Anda pernah melihat beberapa blog orang lain yang terdapat kotak related post ditengah postingan? Salah satunya adalah template viomagz buatan blogger indonesia yaitu Mas Sugeng, didalamnya sudah mendukung artikel terkait di tengah tengah artikel dengan desain yang simple, namun dalam segi SEO sebenarnya lebih baik manual dibanding yang otomatis, tetapi jika Anda tidak mau cape menyalin link, maka jalan alternatifnya adalah membuat related post otomatis.
Manfaat memasang kotak baca juga di blog salah satunya adalah dapat memudahkan pengunjung dalam menjelajahi blog Anda, dan ini adalah salah satu hal yang dimaksud Human Friendly atau ramah pada pengunjung dalam artian membuat pengunjung nyaman saat membaca artikel buatan Anda.
Sebenarnya sudah banyak tutorial mengenai ini, namun Admin akan membagikan yang paling keren dan tidak pasaran, jika Anda tidak puas dalam segi desain, seperti warna dan yang lainnya, Anda bisa memodifikasinya lagi, asalkan paham sedikitnya mengenai kode warna, ataupun kode html lainnya, namun Anda jangan khawatir dan jangan takut kecewa, karena desain yang Admin sediakan sudah cukup keren dan elegan, dijamin bisa membuat blog kamu nambah keren.

Cara Membuat Kotak Baca Juga di Blog Dengan CSS

Sebelum melakukan ini, disarankan untuk membackup template lama Anda terlebih dahulu untuk menghindari hal hal yang tidak diinginkan.
  • Langkah pertama, buka blogger com
  • Lalu lihat dasboard dan klik tulisan “Tema”.
  • Selanjutnya klik ” Edit HTML”
  • Lalu tempel kode berikut ini tepat diatas kode </head>.

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<script type=”text/javascript”>
//<![CDATA[
var relatedTitles = new Array(); var relatedTitlesNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedTitles[relatedTitlesNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == ‘alternate’) {relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length – 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length – 1] = relatedTitles[i];}} relatedTitles = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((relatedTitles.length – 1) * Math.random()); var i = 0; document.write(‘<ul>’); while (i < relatedTitles.length && i < 20) { document.write(‘<li><a href=”‘ + relatedUrls[r] + ‘”>’ + relatedTitles[r] + ‘</a></li>’); if (r < relatedTitles.length – 1) { r++; } else { r = 0;} i++;} document.write(‘</ul>’);}
//]]>
</script>
</b:if>

  • Selanjutnya cari kode <data:post.body/>, akan ada banyak kode tersebut, tetapi biasanya adalah yang kedua.
  • Ganti kode tersebut dengan kode dibawah ini:

<div expr:id=’&quot;post1&quot; + data:post.id’/>
<div class=’post-terkait’>
<b:if cond=’data:post.labels’>
<b:loop values=’data:post.labels’ var=’label’>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<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;’ type=’text/javascript’/>
</b:if>
</b:loop>
</b:if>
<h4>Baca Juga</h4>
<script type=’text/javascript’>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
<div expr:id=’&quot;post2&quot; + data:post.id’ class=’artbody’ itemprop=’articleBody description’><data:post.body/></div>
<script type=’text/javascript’>
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/3);
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>

  • Sudah selesai? Belum, ada langkah yang terakhir yaitu cari kode CSS dibawah ini tepat diatas kode </style> tujuan pemasangan CSS ini adalah untuk mempercantik tampilan “Baca Juga” yang nantinya akan tampil didalam postingan blog Anda.

/* Related Post di dalam postingan by Bung Frangki */
.post-terkait {position:relative;background:#fff;padding:0;margin:10px 15px 0 0;float:left;width:165px;border:1px solid #1b71bc}
.post-terkait h4{background:#1b71bc !important;padding:5px 0 !important;margin:0;text-align:center !important;font-size:15px !important;font-weight:400;text-transform:uppercase;color:#fff !important}
.post-terkait ul {margin:0;padding:0}
.post-terkait ul li {list-style:none !important;padding:7px 0;margin:0 7px;border-bottom:2px dotted #ddd;line-height:1.4em !important;text-align:left !important}
.post-terkait ul li:last-child{border:none !important}
.post-terkait a {color:#1b71bc;font-size:13px !important}
.post-terkait a:hover {text-decoration:underline}

Jika Anda kurang puas dengan tampilan related post diatas, Anda bisa memodifikasi Kode CSSnya, seperti menambah jumlah artikel terkait yang ditampilkan, mengganti warna margin, mengganti warna font, ukuran dan jenisnya, kode tersebut akan tampil ditengah postingan blog Anda, jika anda ingin menampilkannya di laman tertentu, maka tambahkan tag conditional laman yang ingin Anda pasang related post.
Demikian tutorial singkat tentang cara membuat baca juga di blog, semoga wawasan tentang dunia blogging Anda makin bertambah setelah membaca artikel ini, dan jika Anda merasa puas, Admin akan sangat berterimakasih jika artikel ini dibagikan, sekian dan terimakasih.

Tinggalkan komentar