√ Cara Membuat Artikel Terkait (Baca Juga) di tengah postingan - Satriaryan22

Cara Membuat Artikel Terkait (Baca Juga) di tengah postingan

Hasil gambar untuk artikel terkait
contoh gambar artikel terkait

Banyak para blogger yang membuat artikel terkait atau baca juga yang posisi nya ada di tengah postingan blognya. Tentu ini memang sangat bermanfaat, salah satu nya yaitu sebagai Menurunkan Nilai Bounce Rate Blog. jadi ketika para pengunjung memasuki salah satu artikel pada blog kita. Mereka pun akan melihat artikel lainnya yang masih satu label topik "relevan", nah dengan cara tersebut tentu para pengunjung akan lebih dalam mengeksplor isi blog kita.

Contohnya yaa seperti pada blog ini, Saya membuat artikel terkait di tengah postingan blog, dengan judul Baca Juga, bisa kamu lihat ke bawah.

Ada beberapa template yang sudah mempunyai fitur seperti ini, namun jika template yang kamu gunakan tidak mempunyai nya, kamu tak perlu khawatir karena pada kali ini saya akan memberikan cara membuat artikel terkait atau baca juga yang posisi nya ada di tengah postingan blog yang keren.

Cara Membuat Artikel Terkait atau Baca Juga di Tengah Postingan Blog


Langkah-langkahnya :


1. Masuk ke Dashboard Blogger kamu

2. Kemudian kamu Masuk ke Tema >> Edit HTML

3. Letakkan kode dibawah ini, tepat diatas kode tag </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

4. Kemudian kamu cari dan ganti kode berikut <data:post.body/> 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>

5. Agar tampilannya lebih ganteng seperti admin 😁, letakkan kode CSS dibawah ini tepat diatas kode </style> atau ]]></b:skin>

.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}

6. Lalu kamu Simpan templatenya

Untuk mengetahui hasilnya, silahkan kamu masuk ke salah satu artikel blog kamu dan lihat di tengah - tengah nya. Jika berhasil maka artikel terkait atau baca juga akan muncul.

Namun jika masih belum muncul, coba kamu ulangi langkah ke 4, karena kode berikut <data:post.body/> di dalam setiap template itu terdapat banyak, coba kamu ganti satu persatu sampai berhasil.

Mungkin itu saja cara membuat artikel terkait seperti baca juga ditengah postingan blog. Semoga bermanfaat untuk kawan blogger semua.. Terima kasih
Buka Komentar
Tutup Komentar

0 Response to "Cara Membuat Artikel Terkait (Baca Juga) di tengah postingan"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel