Membuat Related Post (Artikel Terkait) Di Sidebar Valid HTML5

Membuat Related Post (Artikel Terkait) Di Sidebar Valid HTML5 - Gara-gara pemasangan Related Post (Artikel Terkait) Di Sidebar, Aditya Blogs yang tadinya sudah valid HTML5 menjadi tidak valid lagi, Ini disebabkan adanya 2 buah script yang memang agak bermasalah dengan html5 namun setelah beberapa hari saya bisa mengatasi hal tersebut sehingga Aditya Blogs sudah kembali Valid Html5.
Tutorial ini tidak sama dengan Related Post yang ada dibawah artikel karena dari kode script dan penempatannya juga sudah berbeda.
Related post ini juga hanya muncul ketika Anda maupun pengunjung membuka artikel di blog. Karena kode script yang digunakan sudah berbeda dengan related post yang ada dibawah postingan maka secara otomatis cara pemasangan atau instalasinya juga akan ikut berbeda .
Jika berminat untuk memasang related post yang saya maksud, berikut langkah instalasinya

1. Buka editor html blog Anda
2. Letakkan kode berikut di atas </head>

<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 < 10) {
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>

3. Kemudian cari kode berikut

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>

Ganti dengan kode dibawah ini

<b:if cond='data:post.labels'><data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
<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=10&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

Pada kode yang berwarna merah max-result=10 bisa Anda ganti sesuai selera untuk memunculkan berapa banyak Related Post yang akan ditampilkan

4. Simpan Template

5. Cara Penempatan Gadget Di Sidebar
Klik menu Tata Letak
Klik Add Gadget
Pilih HTML/JavaScript
Copy dan paste kode berikut pada kotak yang muncul

<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>

Kurang lebih begitu Cara Membuat Related Post (Artikel Terkait) Di Sidebar Valid HTML5, Selamat Mencoba

Next: Cara Membuat related post dengan thumbnail seperti linkwithin

Tweet