Cara Membuat Artikel Terkait / Related Post

Salam sukses selalu buat sobat semua, Belajar Komputer Melalui Internet saat ini akan sedikit membahas tentang Cara Membuat Artikel Terkait / Related Post dan semoga artikel ini bermanfaat.


Cara Membuat Artikel Terkait / Related Post, pada kesempatan kali ini saya akan berbagi cara membuat Artikel Terkait yang hanya menampilkan judul postingannya saja, ini memenuhi permintaan sahabat yang berkomentar diblog ini. Sahabat tersebut sebenarnya meminta untuk dikirim langsung lewat Email namun ga ada salahnya saya punya inisiatif mempostingnya biar lebih jelas dan mungkin ada sahabat lain yang membutuhkannya. sahabat tersebut meminta script artikel terkait seperti pada blog ini;

Cara Membuat Artikel Terkait / Related Post
sebelum saya pasang artikel terkait diblog ini yang ada gambar/thumbnailnya namun setelah dipikir-pikir artikel terkait seperti itu apalagi yang bergerak / pake marque ternyata kurang efektif karena kelihatannya hanya sekilas, kalau memakai seperti ini mungkin pengunjung yang ingin mencari artikel lainnya dimudahkan dalam pencariannya.
Artikel terkait ini sangat cocok kalau dipadukan dengan Cara Membuat 2 kolom widget dibawah postingan  karena ini sesuai permintaan sahabat saya.

Langkah-langkah Membuat Artikel Terkait / Related Post sebagai berikut;

Langkah Pertama :

  • Seperti biasa saja login ke blogger
  • klik rancangan/template jangan lupa setiap mau ngedit HTML download lengkap dulu ya sobat, buat jaga-jaga aja. kalau ada salah tinggal ngembaliin.
  • Klik edit HTML klik lanjutkan centang Expand Template Widget kemudian cari kode ]]></b:skin> setelah ketemu letakan kode dibawah ini tepat diatas kode tersebut.
#related{height:160px;overflow:auto}
#related ul{margin:0;padding:5px 5px 5px 25px}
#related li{font-size:10px;margin:0;padding:0;line-height:15px;text-align:left}
  • Selanjutnya cari kode </head> kemudian letakkan script di bawah ini tepat di atas 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>
  • Atau kalau sobat mau yang simple boleh menggunakan script dibawah ini sebagai ganti kode diatas, kode dibawah ini sudah saya hosting namun kalau sobat mau menghosting sendiri script diatas silahkan sobat hosting terlebih dahulu.
<script src='http://my-project-favicon.googlecode.com/files/Related-post.js' type='text/javascript'/>

Langkah Kedua

Pada langkah kedua ini kalau sobat mau memasangnya pada kolom yang telah disediakan atau sudah memasang Cara Membuat 2 kolom widget dibawah postingan maka sobat tinggal memasukan kode dibawah ini pada kolom yang telah disediakan pada tutorialtersebut atau pada ( Letakan Widget disini.), namun jika sobat mau memasang secara langsung maka sobat cari kode <data:post.body/> kemudian letakkan script berikut ini di bawah kode <data:post.body/> apabila menemukan kode tersebut lebih dari satu maka simpan kode dibawah ini setelah kode  <data:post.body/> yang kedua.
<div style='font-size:12px;text-align:center;padding-top:0px;background:#000;'><font color='#ffffff'><b>BACA JUGA ARTIKEL TERKAIT LAINNYA</b></font></div>
<div id='related'>
    <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=100&quot;' type='text/javascript'/>
    </b:if>
    </b:loop>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script type='text/javascript'>
    removeRelatedDuplicates();
    printRelatedLabels();
    </script>
    </b:if> </div>
Keterangan;
- height:160px itu adalah tingginya sobat bisa sesuaikan.

Itulah Cara Membuat Artikel Terkait / Related Post seperti pada blog ini, semoga berhasil. Oh iya mungkin sobat mau artikel terkait lainnya Membuat Atikel Terkait dengan Gambar thumbnail bergerak

Mungkin sampai disini dulu Belajar Komputer Melalui Internet tentang Cara Membuat Artikel Terkait / Related Post kali ini, semoga bermanfaat bagi Anda.

DAPATKAN ARTIKEL VIA EMAIL

Masukan Alamat Email Sobat:

Delivered
feedburner

Dipublish oleh : Abdul Kohar - Jatinangor Rating 5 Belajar Komputer Melalui Internet, Updated at: 22:29

13 komentar :

  1. terimakasih juragan :)lihat hasil editan saya gratis lho juragan

    BalasHapus
  2. gan kok tiba tiba nggak muncul semuanya,padahal saya cek scriptnya masih ada semua,mohon bantuannya gan

    BalasHapus
  3. sangat bermanfaat apalagi bagi saya yang pemula
    thanks gan..n salam sukses

    BalasHapus
  4. related postnya pake scroll ya Kang
    kalo saya lebih suka yg gak pake scroll

    BalasHapus
    Balasan
    1. kalau mau ga pake scroll tinggal hapus height dan overflownya aja pada CSSnya.

      Hapus
  5. Wah makasih banget nih, saya coba ya bos. Ni lagi belajar ngeblog, kebetulan dapet ginian. Tengkyu banget ilmunya

    BalasHapus
  6. Makasih atas trik dan tips nya semoga bermanfaat untuk para pembacanya khususnya saya pribadi

    BalasHapus
Silahkan Tinggalkan jejak sobat, bila mau menggunakan emotion silahkan klik emotionnya kemudian copy dengan ctrl+c dan paste kodenya didalam kotak komentar...

close
GUESTBOOK
Google PageRank Checker Powered by  MyPagerank.Net
backlink
Dashboard
| Copyright © 2012 |
| Belajar Komputer Melalui Internet |
| Desain by: Abdul Kohar | Powered by: Blogger |