Cara Membuat Artikel Terkait (Baca Juga) di Tengah Postingan Blog
1. Masuk ke Dashboard Blogger
2. Masuk ke Tema > Edit HTML
3. Letakkan kode dibawah ini, tepat diatas kode </head>
Baca Juga
- Kominfo Berantas Ribuan Akun Pasca Teror Bom Surabaya
- Banyak Hoax, Pemuka Agama Dituntut Melek Medsos
- Beredar Pesan Mitra Ojol Bubuhkan Racun, Mabes Polri: Hoax Itu
- Jangan Ditiru! Begini Cara Haikal, Hacker Berusia 19 Tahun Membobol Situs Tiket.com
- Cara Membuat Artikel Terkait (Baca Juga) Otomatis di Tengah Postingan
<div style="text-align: justify;">
<span style="background-color: initial; font-size: 0.85rem; font-style: inherit; font-variant-caps: inherit; font-variant-ligatures: inherit; font-weight: inherit;"><b:if cond='data:blog.pageType == "item"'></span></div>
<script type="text/javascript">
//<![CDATA[
<div style="text-align: justify;">
<span style="background-color: initial; font-size: 0.85rem; font-style: inherit; font-variant-caps: inherit; font-variant-ligatures: inherit; font-weight: inherit;">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>');}</span></div>
//]]>
</script>
<div style="text-align: justify;">
<span style="background-color: initial; font-size: 0.85rem; font-style: inherit; font-variant-caps: inherit; font-variant-ligatures: inherit; font-weight: inherit;"></b:if></span></div>
4. Cari dan ganti kode <data:post.body/> dengan kode dibawah ini
<div style="text-align: justify;">
<span style="font-family: "courier new" , "courier" , monospace;"><span style="font-size: 13.6px;"><div expr:id='"post1" + 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 == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=3"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<h4>Baca Juga</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
<div class='artbody' expr:id='"post2" + data:post.id' itemprop='articleBody description'><data:post.body/></div>
<script type='text/javascript'>
var obj0=document.getElementById("post1<data:post.id/>");
var obj1=document.getElementById("post2<data:post.id/>");
var s=obj1.innerHTML;
var t=s.substr(0,s.length/3);
var r=t.lastIndexOf("<br>");
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script></span></span></div>
5. Biar tampilannya lebih ganteng seperti Admin, letakkan kode CSS dibawah ini tepat diatas kode </style> atau ]]></b:skin>
<div style="text-align: justify;">
<span style="background-color: initial; font-size: 0.85rem; font-style: inherit; font-variant-caps: inherit; font-variant-ligatures: inherit; font-weight: inherit;">.post-terkait {position:relative;background:#fff;padding:0;margin:10px 15px 0 0;float:left;width:165px;border:1px solid #1b71bc}</span></div>
<div style="text-align: justify;">
<span style="background-color: initial; font-size: 0.85rem; font-style: inherit; font-variant-caps: inherit; font-variant-ligatures: inherit; font-weight: inherit;">.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}</span></div>
.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}
<div style="text-align: justify;">
<span style="background-color: initial; font-size: 0.85rem; font-style: inherit; font-variant-caps: inherit; font-variant-ligatures: inherit; font-weight: inherit;">.post-terkait a:hover {text-decoration:underline}</span></div>
.post-terkait ul li:last-child{border:none !important}
<div style="text-align: justify;">
<span style="background-color: initial; font-size: 0.85rem; font-style: inherit; font-variant-caps: inherit; font-variant-ligatures: inherit; font-weight: inherit;">.post-terkait a {color:#1b71bc;font-size:13px !important}</span></div>
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 jika masih belum muncul, coba Anda ulangi langkah ke 4, karena kode <data:post.body/> dalam setiap template itu terdapat banyak, coba ganti satu persatu sampai berhasil.
Mungkin itulah cara membuat artikel terkait seperti baca juga ditengah postingan blog. Semoga bermanfaat, salam blogger...
