√ Cara Menciptakan Artikel Terkait (Baca Juga) Otomatis Di Tengah Postingan

Banyak para blogger yang menciptakan artikel terkait (baca juga) di tengah postingan blognya. Ini memang sangat bermanfaat, salah satu nya yakni untuk Menurunkan Nilai Bounce Rate Blog. jadi saat pengunjung memasuki salah satu artikel blog kita. Mereka akan melihat artikel lainnya yang masih satu topik "relevan", dengan cara tersebut tentu pengunjung akan lebih mengeksplor isi blognya.

Contohnya ibarat di blog ini, Saya menciptakan artikel terkait di tengah postingan blog, dengan judul Baca Juga, sanggup Anda lihat ke bawah.

Ada beberapa template yang sudah memiliki fitur ibarat ini,namun kalau template yang Anda gunakan tidak mempunyainya, jangan khawatir alasannya pada kali ini Saya akan menunjukkan cara menciptakan artikel terkait (baca juga) di tengah postingan blog yang keren.

Cara Membuat Artikel Terkait (Baca Juga) di Tengah Postingan Blog

1. Masuk ke Dashboard Blogger

2. Masuk ke Tema > Edit HTML

3. Letakkan aba-aba dibawah ini, sempurna diatas aba-aba </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'> <script type="text/j4vascript"> //<![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. Cari dan ganti aba-aba <data:post.body/> dengan aba-aba 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/j4vascript'/> </b:if> </b:loop> </b:if> <h4>Baca Juga</h4> <script type='text/j4vascript'> 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/j4vascript'> 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. Biar tampilannya lebih ganteng ibarat Admin, letakkan aba-aba CSS dibawah ini sempurna diatas aba-aba </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. Simpan templatenya

Untuk mengetahui hasilnya, silahkan masuk ke salah satu artikel dan lihat di tengah - tengah nya. Jika berhasil maka artikel terkait (baca juga) akan muncul. Namun kalau masih belum muncul, coba Anda ulangi langkah ke 4, alasannya aba-aba <data:post.body/> dalam setiap template itu terdapat banyak, coba ganti satu persatu hingga berhasil.

Mungkin itulah cara menciptakan artikel terkait ibarat baca juga ditengah postingan blog. Semoga bermanfaat, salam blogger...
Sumber http://www.siddiqrn.net/