Cara Membuat Artikel Terkait atau sering juga disebut Related Post, bisa dibilang bukan hal yang susah apalagi buatnya di Blogspot, semakin mudah !
Mungkin ada yang belum tahu apa itu Artikel Terkait, ok ok tidak masalah, akan saya jelaskan. sesuai namanya Artikel Terkait adalah artikel tambahan yang kita sajikan ke pengunjung berdasarkan apa yang sedang pengunjung baca dengan memanfaatkan label atau tag.
Masih bingung nih, contohnya mana woi ? oke ini contoh sederhananya, misal ada seorang pengunjung yang sedang membaca Artikel kita dengan judul Cara Cepat Kaya Tanpa Kerja ! nah disini kita wajib memberi nama label pada artikel tersebut, misalnya lebelnya kita kasih nama 'Kerja'
Selanjutnya saat kita buat artikel baru dengan judul, misalnya Tanpa Kerja Bisa Kaya ? Ngimpi ! pada artikel kedua kita juga harus memberinya sebuah label yang sama dengan label yang ada di artikel pertama tadi yaitu 'Kerja'
Selanjutnya mereka akan saling terkait, saat pengunjung membuka Artikel 1 mereka akan disarankan oleh Artikel Terkait untuk membaca Artikel 2 dan begitu sebaliknya
Sudah jelas atau Tambah bingung ? lupakan artikel diatas jika justru membuat Anda bingung, karena sejujurnya tulisan saya diatas itu hanya untuk membuat artikel ini terlihat banyak dan sukur sukur bisa masuk pejawan dan bisa duduk di peringkat satu
Kembali ke Topik, disini kita akan membuat Artikel Terkait Sederhana tapi tetap Menarik atau enak dipandang mata, tanpa Thumnail, ingat ya, disini saya akan mejelaskan Cara Membuat Artikel Terkait tanpa Thumnbail. Kenapa tanpa Thumnail ? karena Ringan !
Yap, artikel terkait polosan atau tanpa Thumnail tidak akan terlalu membebani pengunjung saat mengakses situs atau artikel kita.
So, saya putuskan untuk menuliskan Tutorial ini.
Baik, karena Tangan saya sudah pegel itu artinya kita siap masuk pada pembahasan utama kita.
Cara Membuat Artikel Terkait
Agar pembuatan atau cara membuat artikel terkait ini sukses diperlukan ketelitian yang matang, jadi pastikan Anda melakukan step by step dengan benar.
1. Klik Menu Template dan Pilih Edit HTML
2. Backup Template jika dirasa perlu (tapi saya rasa tidak perlu)
3. Tekan CTRL + F dan ketikkan </head>
4. Jika sudah menemukan kode diatas, letakkan kode dibawah ini tepat diatas </head>
Script atau kode diatas fungsinya untuk mengatur Artikel Terkait kita agar nanti setiap artikelnya masuk dalam Unordered List ( ul ) jadi nanti kita bisa mengeditnya dengan mudah melalui css.
5. Selanjutnya cari juga kode <data:post.body/> dengan menggunakan CTRL + F lalu letakkan script dibawah tepat setelah kode <data:post.body/> (dibawahnya) namun disini biasanya banyak terjadi kesalahan, karena <data:post.body/> terkadang ada lebih dari satu buah (tergantung template) jika template standar dari blogspot akan ada 4 <data:post.body/> jadi letakkan letakkan pada kode ke 3, untuk template yang lain yang mempunya 2 <data:post.body/> solusinya letakkan pada kode kedua atau terakhir, template lain silahkan dicoba coba sendiri. Kode yang harus diletakkan dibawah <data:post.body/> adalah sebagai berikut.
6. Simpan, dan lihat hasilnya
2. Backup Template jika dirasa perlu (tapi saya rasa tidak perlu)
3. Tekan CTRL + F dan ketikkan </head>
4. Jika sudah menemukan kode diatas, letakkan kode dibawah ini tepat diatas </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>
//<![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>
Script atau kode diatas fungsinya untuk mengatur Artikel Terkait kita agar nanti setiap artikelnya masuk dalam Unordered List ( ul ) jadi nanti kita bisa mengeditnya dengan mudah melalui css.
5. Selanjutnya cari juga kode <data:post.body/> dengan menggunakan CTRL + F lalu letakkan script dibawah tepat setelah kode <data:post.body/> (dibawahnya) namun disini biasanya banyak terjadi kesalahan, karena <data:post.body/> terkadang ada lebih dari satu buah (tergantung template) jika template standar dari blogspot akan ada 4 <data:post.body/> jadi letakkan letakkan pada kode ke 3, untuk template yang lain yang mempunya 2 <data:post.body/> solusinya letakkan pada kode kedua atau terakhir, template lain silahkan dicoba coba sendiri. Kode yang harus diletakkan dibawah <data:post.body/> adalah sebagai berikut.
<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=5"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<h4>Artikel Terkait</h4>
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>
<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=5"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<h4>Artikel Terkait</h4>
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>
6. Simpan, dan lihat hasilnya
Jike berhasil, penampakan Artikel Terkait akan seperti punya saya dibawah ini :
Penentu kesuksesan lain dari pembuat Artikel Terkait adalah penamaan pada Label, misalnya dalam 1 Artikel terdapat dua Label, contohnya 'Kerja' dan 'Online' nah jika ingin Artikel Terkait dimuncul dalam salah satu artikel tentu kedua artikel tersebut juga harus diberi kedua label tersebut, Tidak bisa Satu !
Sampai disini dulu tutotial cupu mengenai Cara Membuat Artikel Terkait Yang Menarik di Blogspot yang bisa saya bagikan ke Anda, selamat mencoba dan semoga berhasil.
Post a Comment