Membuat Related Articles Sederhana Dan Responsive

Related Articles Sederhana Dan Responsive ini sangat mendukung dalam hal mengenalkan bagian lain dari sekian banyak judul dan entri posting yang terdapat dalam blog yang dikelola untuk mengundang para visitor membuka halaman pada artikel terkait. Kali ini saya bagikan tentang artikel terkait yang sangat sederhana, tampilannya kurang lebih seperti gambar diatas. Hal pertama yang harus dilakukan adalah masuk pada akun blog.

Masuk ke akun blogger.
Masuk ke menu tab Template > Edit HTML.
Letakkan kode dibawah ini diatas kode </head>.

<style>

#related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; }

#related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; }

#related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; }

#related-posts a { text-decoration : none; }

#related-posts a:hover { text-decoration : none; }

#related-posts ul { border : medium none; margin : 10px; padding : 0; }

#related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghrAO2NI0fiM5k0dEmqO5g806qthhpsHBZQHzB4bgnor3idNX-KixEOpNVHt_-1z5eqOTdupddChtFD98heDiMXkKNy6-QIQKbFWoFBGJ984iXMC1cslgtw4bKH166dBvj5pSZBRK34XQ/") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; }

</style>

Letakkan juga script dibawah ini diatas kode </head>.

<script>

//<![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>');

document.write('<a style="font-size:18px;font-color:#FF0000;" rel="dofollow" href="http://sk1ndesign.blogspot.com/">Skin Design</a></font>');

}

//]]>

</script>

Setelah proses diatas lalu melangkah pada peletakan kode selanjutnya yaitu, letakkan kode dibawah ini tepat dibawah kode <data:post.body/>.

<b:if cond='data:blog.pageType == "item"'>

<div id="related-posts">

<font face='Arial' size='3'>

<b>Related Posts : </b>

</font>

<font color='#FFFFFF'>

<b:loop values='data:post.labels' var='label'>

<data:label.name/>

<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=5&quot;' type='text/javascript'/>

</b:if>

</b:loop>

</font>

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

</script>

</div>

</b:if>

Setelah semuanya selesai dan sesuai dengan dengan tutorial, maka langkah selanjutnya SAVE template dan bisa dilihat hasilnya.
Demikian tutorial dari kami mudah mudahan ada manfaatnya, jika kurang jelas bisa tinggalkan pesan.