shad0w-share

Cara Membuat Artikel Terkait Didalam Post ini juga merupakan artikel request dari mas Imam yang telah berkomentar Disini seumpama dimasukkan dalam post gimana ya caranya?? Cara membuat artikel terkait sudah saya ulas di cara membuat artikel terkait dan memang tampilannya adalah tampilan umum yang biasa digunakan oleh setiap blog yaitu berada dibawah artikel dan sesuai permintaan dari mas Imam maka secara khusus saya buatkan artikel lanjutan ini dari artikel sebelumnya yaitu Cara Membuat Artikel Terkait Didalam Post

Berikut gambar dari hasil menerapkan cara membuat artikel terkait didalam post yang telah saya terapkan kedalam blog saya yang lain



Berikut Cara Membuat Artikel Terkait Didalam Post

1. Masuk ke akun Blogger anda>/li>
2. Klik Template >> Edit HTML >> centang Expand Widget Template >> tekan Ctrl+F pada keyboard
3. Cari kode </head>
   Tambahkan kode berikut tepat diatas atau sebelum </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. Cari kode <div class='post-header-line-1'/>
5. Letakkan kode berikut tepat dibawah <div class='post-header-line-1'/>
   <div style='width: 640px;'> <div style='background:#DCDCDC;clear: right; float: right; margin-right: 10px;margin-left: 10px;margin-top: 15px;'>
   <b:if cond='data:post.labels'>
   <b:loop values='data:post.labels' var='label'>
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/>
   </b:if>
   </b:loop>
   </b:if>
   
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <h4>Artikel Terkait</h4>
   <script type='text/javascript'>
   removeRelatedDuplicates();
   printRelatedLabels();
   </script>
   </b:if>
   </div></div>
6. Preview blog terlebih dahulu. Jika tidak error, silahkan Simpan
7. Selesai

Tambahan :
Ganti width: 640px; dengan lebar area postingan blog anda
Ganti float: right; jika anda ingin menampilkan widget aertikel terkait berada disebelah kiri menjadi float: left;

Terimakasih telah berkunjung dan jangan lupa untuk meninggalkan sedikit komentar untuk artikel ini, Cara Membuat Artikel Terkait Didalam Post

Salam kangen semua para blogger, lama sekali saya gak posting-posting sudah hampir satu bulan lebih, ya dikarenakan kesibukan pribadi yang tidak mau ditinggalin hehe.



Baik para sobat semua kita langsing aja kali ini saya akan membahas tutorial tentang cara membuat Artikel Terkait di Sidebar (related post)dimana pengunjung akan disuguhkan artikel terkait milik sobat di sebelah postingan atau di sidebar, bukan dibawah postingan yang selama ini kita lihat.







Sebenarnya artikel terkait ini bisa juga diletakkan dibawah postingan, tapi saya tidak akan membahasnya karena sudah pernah saya bahas di postingan saya yang lalu.







Baiklah, sekarang ikuti langkah-langkahnya dibawah ini :







Langkah I



1. Seperti biasa login dulu ke blogger.

2. Masuk ke Elemen Halaman.

3. Kemudian Tuju Edit HTML.

4. Klik Expand Template Widget.

5. Letakkan kode berikut ini sebelum 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>

6. Kemudian cari kode seperti 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>

7. Kemudian ganti kode di atas dengan kode di bawah 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 != &quot;true&quot;'>,</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=15&quot;' type='text/javascript'/>

</b:if>

</b:loop>

</b:if>

8. Simpan Template, sampai disini proses Edit HTML sudah selesai.

9. Sekarang sobat tuju Tata Letak, kemudian klik Tambah Gadget pada sidebar milik sobat.

10. Pilih yang HTML/Javascript, kemudian masukkan kode berikut :

<script type="text/javascript">

removeRelatedDuplicates();

printRelatedLabels();

</script>

11. Jangan lupa beri judul, lalu klik Simpan.







Sampai disitu sudah selesai pembuatan artikel terkait di sidebar. Namun artikel terkait akan selalu muncul di halaman depan blog, untuk membuat artikel terkait hanya muncul pada halaman postingan saja, maka sobat harus mengubah beberapa kode lagi.



Berikut langkah-langkahnya.



Langkah II



1. Klik Edit HTML.

2. Klik Expand Template Widget.

3. Cari kode yang seperti ini, dan sisipkan kode yang berwarna merah :

<b:widget id='HTML11' locked='false' title='Artikel Terkait Lainnya' 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>

4. Kemudian klik Simpan Template.









OK, Mungkin tutorial kali ini sampai disini saja dulu, selamat mencoba aja dan semoga berhasil dan bermanfaat di hati para soba.





KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI