Cara Membuat dan Memasang Related Post Artikel Terkait Blog - Cara ini saya buat sesuai dengan request pada salah satu komentar pada sebuah judul Bagaimana Cara Membuat Pengunjung Betah pada Bloglazir. komentar tersebut terucapkan dari pemikiran sebuah otak yang langsung disampaikan di jemarinya untuk menulis dan bertanya
.
.
Melisa Anindita
| Mas, maaf ini OOT. Mau tanya, gimana sih cara bikin related post seperti di blog ini? Itu lho, daftar judul di bawah tulisan "Baca Juga Artikel Dibawah Ini". Saya udah pakai script dari linkwithin, tapi kok hasilnya gak bagus, karena ada tumbnail/gambarnya. Saya inginnya related post kayak di blog ini. Keren sekali. Tadi saya udah cari2 artikel di blog ini yang mungkin membahas "Cara membuat related post", tapi kok nggak ada. Kalau bisa, kasih tutorialnya dong, biar para pembaca blog ini bisa tahu cara membuatnya. Nuwun. |
Dari komentar diatas saya berniat juga menerima tantangannya.
Relatedpost atau biasa disebut artikel terkait adalah untuk memudahkan pembaca agar tidak kebingungan dimana label yang saling berhubungan seperti gambar yang bisa anda lihat dibawah ini
Langsung saja kita menuju langkahnya, yang bisa anda peragakan pada blog kesayangan anda dengan catatan back-up terlebih dahulu template anda untuk berjaga-jaga.
1. Login ke blog anda
2. Template
3. Edit HTML
4. Centang tulisan Expand Template Widget
5. Cari kode </head>
6. Letakan kode dibawah ini, tepat diatas kode </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>
|
7. Lalu silahkan anda cari kembali kode <data:post.body/>
8. Taruh kode dibawah ini, tepat dibawah kode <data:post.body/> tadi
<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&callback=related_results_labels&max-results=15"' type='text/javascript'/> </b:if>
</b:loop>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<h4>Artikel Terkait <b:loop values='data:post.labels' var='label'><data:label.name/>
<b:if cond='data:label.isLast != "true"'>,</b:if></b:loop></h4>
<script type="text/javascript"> removeRelatedDuplicates(); printRelatedLabels();
</script>
</b:if>
|
9. Simpan template
Mungkin sekian tutorial yang bisa saya berikan kepada anda semua. lebih dan kurangnya saya minta maaf dan mohon dibenarkan jika menemukan kesalahan. karena semakin banyak membaca, semakin banyak bertanya, maka kita juga akan semakin lupa, keterbatas berpikir manusia tidak bisa sempurna.
0 komentar:
Posting Komentar