Ikuti langkah - langkah Cara Membuat Artikel Terkait di Sidebar Blog dibawah ini.
1. Pastikan sobat sudah login terlebih dahulu ke blogger dengan akun sobat.
2. Masuk ke Rancangan/Design >> Edit HTML. Jangan lupa centang pada "Expand Widget Templates".
3. Copy-paste kode dibawah ini, sebelum tag </head>
1. Pastikan sobat sudah login terlebih dahulu ke blogger dengan akun sobat.
2. Masuk ke Rancangan/Design >> Edit HTML. Jangan lupa centang pada "Expand Widget Templates".
3. Copy-paste kode dibawah ini, sebelum tag </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>
4. Kemudian, tekan CTRL + F. Untuk melakukan pencarian kode berikut.
<b:if cond='data:post.labels'>5. Jika sobat sudah menemukan kode diatas. Lalu tambahkan kode warna biru berikut diantara kode diatas.
<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>
<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 teks yang berwarna merah menunjukkan maksimal artikel terkait yang akan ditampilkan per-label. Jadi bisa ditampilkan hanya 5, bila anda ingin menampilkannya tidak terlalu banyak atau juga bisa hingga 20 artikel terkait yang ditampilkan apabila postingan anda memiliki lebih dari satu label.
6. Kemudian, klik " Save Template".
7. Kemudian sobat masuk pada halaman "Rancangan" >> "Elemen Laman". Lalu klik "Tambah Gadget". Copy pastekan kode dibawah ini kedalamnya. Dan jangan lupa memberikan judul "Artikel Terkait", pada widget tersebut.
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
Jika sudah, Lalu klik "Simpan".
8. Lalu, sobat kembali lagi ke halaman "Rancangan" >> "Edit HTML". Jangan lupa juga centang "Expand Template Widget".
9. Lakukan pencarian pada kata " Artikel Terkait". Lalu, sisipkan kode berwarna biru, Mirip-miripnya seperti kode dibawah ini, milik saya.
<b:widget id='HTML7' locked='false' title='Artikel Terkait' 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>
Keterangan :
- Pada kode yang bercetak tebal adalah kode/kata judul widget yang tadi sobat buat.
- Kemudian pada kode yang bercetak Kuning, itu hanya urutuan widget pada blog saja.
- Nah, pada kode yang berwarna biru, itu sebenarnya kode yang berfungsi agar widget Artikel Terkait hanya tampil pada postingan blog saja.
0 komentar:
Posting Komentar