Related Post Pada Sidebar

Toturial cara pasang related post pada sidebar (bukan bawah entri) kali ni bagus untuk blog blogspot. Wordpress guna plug in. Antara widget related post untuk blog ada banyak sebenarnya. Tapi masing-masing ada baik buruknya.

Aku ada terbaca post kat AriffShah.com tentang kebaikan dan keburukan LinkWithin. Dari situ aku setuju dengan pendapat tu dan ingat bagi inisiatif lain disini gantikan widget tu dengan pasang related post pada sidebar pula.

Aku lama dah sedar perkara ni sebab tu tak pakai. Paling tak best widget LinkWithin ni di akan menghoskan link ke site mereka dahulu baru redirect ke Entri lain di blog kita. Contoh : bila klik satu gambar di atas, dia akan ke site dorang dahulu, barulah redirect ke entri kita yang sepatutnya. Ini bermakna, kita memberikan backlink pada mereka (ada orang sedar, ada yang tak sedar sebab dia redirect laju). So setiap entri kita ada banyak link keluar lah kan? kurang baik untuk SEO bila banyak sangat link keluar di sesebuah blog. Tengok gambar di bawah ni.

So "Related Post Pada Sidebar" untuk blog blogspot ini adalah inisiatif yang boleh di gunakan sebagai widget yang boleh tambah pageview korang. Mari tengok cara pasang related post di sidebar macam kat blog aku ni.



Cara Pasang Related Post Pada Sidebar


1. Klik Dashboard > Design > Edit HTML.

2. Masukkan code yang aku sediakan di bawah ni tepat di atas code </head> template seperti gambarah di atas.

<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>

3. Masih di HTML, cari code seperti di bawah ( tekan Ctrl + F keyboard ).

<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>

4. Bila dah jumpa code diatas. Padam semua kod tu dan gantikan dengan code baru di bawah ni.

<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&amp;callback=related_results_labels&amp;max-results=7"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

5. Klik button preview untuk lihat jika ada sebarang kerosakan atau kecacatan berlaku. Jika tiada apa berubah dan tak eror , terus klik button save template.

*********

6. Seperti gambarajah di atas. Klik Design > Add Page Elemen Bahagian sidebar > HTML/JavaScript. Namakan Title Sebagai "Related Posts". Pada bahagian Content pula masukkan code dibawah.

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

Kemudian Save. Siap dah memasang related post pada sidebar blog.

**********

Tambahan 

Kalo nak related post ni muncul kat setiap entri sahaja ( Homepage takyah keluar ), ikuti langkah ini.

7. Pergi Edit HTML > tandakan Expand Template Widget > Cari Keyword Related Posts. 

<b:widget id='HTML7' locked='false' title='Related Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<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>

AMARAN : Item no.7 - Edit dengan tambah code berwarna biru seperti diatas. Adakalanya code template tidak terlalu sama seperti di atas. Apa pun PASTIKAN PREVIEW dulu, jika tiada sebarang kecacatan dan tiada eror, baru lah save template. Jika ada eror, cancel sahaja dulu kemudian tinggal komen disini dengan berikan code template bermula dari <b:widget id= hingga </b:widget> seperti di atas.

 Semoga berjaya pasang Related Post Sidebar seperti di blog aku ini.

Sumber : xaonsite.com

Related : Cara pasang related post blogger blog blogspot.

Ranking: 5