Cara Membuat Related Post Valid HTML5 dan Fast Load di Blog

Artikel terkait merupakan sebuah fitur yang harus dimiliki semua blog agar pengunjung dapat mengetahui artikel mana yang berkaitan dengan artikel yang sedang mereka baca. Nah, tutorial untuk membuat sebuah artikel terkait memang sangat banyak. Kebanyakan artikel terkait tersebut memakai javascript yang disimpan di server atau hosting luar sehingga membuat loading blog sedikit lambat. Juga, banyak related post yang tidak sesuai dengan aturan HTML5 sehingga memunculkan invalid pada validator HTML5. Setelah mencari-cari di google akhirnya saya menemukan related post yang tidak membutuhkan penggunaan javascript di server luar. Masalah loading selesai. Bagaimana dengan HTML5? Saya pernah mengecek di validator dan masalahnya hanya satu yaitu pada karakter "&" yang terbaca dan harus diganti dengan "&" namun, tetap terbaca "&" dan akhirnya saya mencoba mengakalinya dengan kode numerik.

Nah, ScreenShot di atas merupakan sebuah solusi untuk kode & yang masih terbaca menjadi &.

Tutorial

Letakkan kode berikut tepat 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 < 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>

Letakkan Kode berikut tepat di bawah <data:post.body/>

<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;amp;callback=related_results_labels&amp;amp;max-results=5&quot;' type='text/javascript'/>
    </b:if>
    </b:loop>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='rel-noval'>
    <h3>Artikel Terkait</h3>
    <script type='text/javascript'>
    removeRelatedDuplicates();
    printRelatedLabels();
    </script>
      </div>
    </b:if>

Letakkan kode berikut tepat di atas ]]</b:skin>

#rel-noval {
line-height: 1.7em;
font-size: 13px;
margin: 6px 0 0;
padding: 0 5px;
background: #f8f8f8;
border: 1px solid #e2e2e2;
color: #333;
overflow: hidden;
}
#rel-noval h3 {
color: #fff;
background: #2c3e50;
padding: 5px;
border-bottom: 0px;
margin-top: 5px;
display: block;
}

Kemudian simpan template