Sebenarnya Artikel semacam ini sudah banyak dibawas oleh rekan-rekan blogger yang lain, tujuan saya posting artikel ini hanyalah untuk arsib saya pribadi, namun siapa tau dari rekan blogger yang berkunjung ke blog KotaTahuku.info mau meng-aplikasikan silahkan, atau mungkin ingin memposting ulang dipersilahkan... tp kalo bisa kasih link untuk kotatahuku ini yach...
Sebelumnya saya juga pernah memposting tips yang serupa "Cara Buat Related Post Flexible" hanya bedanya untuk Artikel terkait (Related Post) yang ini berada di sidebar (widget) sedangkan yang sebelumnya berada di bawah postingan.
Langsung saja aku share caranya....
Langkah I:
Masuk pada Template -> Edit HTML -> kemudian masukan kode javascript dibawah ini diantara kode <head>..</head>..atau lebih mudahnya cari kode saja </head>, kemudian letakan kodenya diatas kode </head> jangan lupa disimpan
Langkah II:
Masuk pada Template -> Edit HTML -> jangan lupa beri tanda centang pada Expand Widget Template -> cari kode dibawah ini.
Jika sudah ketemu, masukan kode berwarna merah dibawah diantara kode diatas.
Pada proses ini pengeditan pada kode HTML sudah selesai, Jangan lupa disimpan
Langkah III:
Masuk pada Template -> Elemen halaman -> kemudian buat elemet baru atau klik "Tambahkan sebuah Elemen Halaman" -> copy-paste kode dibawah ini dan jangan lupa memberikan nama judul misal, "Artikel Terkait" -> kemudian jangan lupa disimpan.
Langkah IV:
Agar Artikel Terkait ini tidak tampil pada halaman utama dan hanya tampil pada halaman posting tunggal maka kita perlu penambahan beberapa kode, caranya:
Masuk pada Template -> Edit HTML -> jangan lupa beri tanda centang pada Expand Widget Template -> cari kode dibawah ini, sebisanya cari sesuai dengan title yang kita masukan, sebagai contoh, tadi saya memberi mana dengan Artikel Terkait, jika sudah ditemukan masukan ke dua kode berwarna merah dibawah.
Catatan: dibawah ini ada kode HTML3 ini jangan dijadikan patokan pencarian, sebaiknya abaikan saja karena setiap elemen pasti berbeda-beda, cukup cari title saja.
Selesai...
Sebelumnya saya juga pernah memposting tips yang serupa "Cara Buat Related Post Flexible" hanya bedanya untuk Artikel terkait (Related Post) yang ini berada di sidebar (widget) sedangkan yang sebelumnya berada di bawah postingan.
Langsung saja aku share caranya....
Langkah I:
Masuk pada Template -> Edit HTML -> kemudian masukan kode javascript dibawah ini diantara kode <head>..</head>..atau lebih mudahnya cari kode saja </head>, kemudian letakan kodenya diatas kode </head> jangan lupa disimpan
<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>
Langkah II:
Masuk pada Template -> Edit HTML -> jangan lupa beri tanda centang pada Expand Widget Template -> cari 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 != "true"'>,</b:if>
</b:loop>
</b:if>
Jika sudah ketemu, masukan kode berwarna merah dibawah diantara kode diatas.
<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 != "true"'>,</b:if>
<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=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
Pada proses ini pengeditan pada kode HTML sudah selesai, Jangan lupa disimpan
Langkah III:
Masuk pada Template -> Elemen halaman -> kemudian buat elemet baru atau klik "Tambahkan sebuah Elemen Halaman" -> copy-paste kode dibawah ini dan jangan lupa memberikan nama judul misal, "Artikel Terkait" -> kemudian jangan lupa disimpan.
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
Langkah IV:
Agar Artikel Terkait ini tidak tampil pada halaman utama dan hanya tampil pada halaman posting tunggal maka kita perlu penambahan beberapa kode, caranya:
Masuk pada Template -> Edit HTML -> jangan lupa beri tanda centang pada Expand Widget Template -> cari kode dibawah ini, sebisanya cari sesuai dengan title yang kita masukan, sebagai contoh, tadi saya memberi mana dengan Artikel Terkait, jika sudah ditemukan masukan ke dua kode berwarna merah dibawah.
Catatan: dibawah ini ada kode HTML3 ini jangan dijadikan patokan pencarian, sebaiknya abaikan saja karena setiap elemen pasti berbeda-beda, cukup cari title saja.
<b:widget id='HTML13' locked='false' title='Artikel pada kategori yang sama' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
Selesai...
Baca Juga Artikel menarik di bawah ini :
1 comments to "Membuat Widget Artikel Terkait"
E' says:
Mantap.... dicoba deh...