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 == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<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
16 komentar
mantap mas bintang.
kalo tumbnail gimana kang supaya valid html5?
Mantab Templatenya :)
mantapp dijamin lariss nih template
mantep nih templatenya :) ditunggu versi finalnya aja deh baru pake :D
http://sch-xp.blogspot.com/
ijin komengnya mastah :v
Keren Nih Mas Template Nya , Mantep Deh :D
info-sahabatku.blogspot.com
mantap, sangat cepat loadingnya :)
cepet bgt yak, mantap
karimunjawa jepara
bagus banget,,,thanks
karimunjawa jepara
salam kenal mas, ijin make yaaa...
ijin make jg y Mas..!
test
test
test
test