Menampilkan Artikel Terkait di Sidebar

Newspaper_Feed_128x128_thumb[1] Postingan tentang artikel terkait (related post) ini sudah sering saya bahas, tepatnya disini, disono dan nengkene. Namun ketiga postingan tersebut tidak ada yang membahas cara menampilkan artikel terkait di sidebar.

 

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. Lalu sisipkan kode yang berwarna hijau, sehingga hasilnya menjadi seperti berikut :

     

    <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=10"' 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.

 

 

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.

     

  5. Untuk tulisan HTML 11 dan Artikel Terkait Lainnya, hanya mengambil dari template saya, silahkan sobat sesuaikan dengan template dan judul artikel terkait yang tadi sudah sobat buat.

 

Mudahkan? yang bilang susah berarti orang yang malas berpikir ! Laughing

Selamat mencoba ! have a nice day..

Berlangganan artikel terbaru via Email
Artikel Lainnya :

53 comments

26 November 2009 pukul 07.20

tapi rada aneh kalo ada artikel terkait di pinggir. si Bos ini suka bereksplorasi saja nih. good good...emang males mikir Bos...wkwkwkwkkw

28 November 2009 pukul 07.01

Patut dicoba nie sob. Makasi ya.

30 November 2009 pukul 16.57

bagus banget mad artikelnya!!!
Q udah pake n Q taro bawah postingan..

boleh tanya gak mas?
caranya bikin gambar/gadget always on top bisa gak?

1 April 2010 pukul 08.56

mas ko kodenya tidak bisa, diblog saya tidak ada kalimat artikel yang terkait. mohon mencerahannya.

1 April 2010 pukul 09.56

@ firdaus : pada saat sobat memasukan kode HTML/javascript pada langkah I poin 10, kan pasti sobat beri judul tuh, nah judul itu yang dicari pada langkah II

1 April 2010 pukul 12.47

waw....thx atas infonya ya mas...ini berguna sekali bagi saya yang masih baru...http://www.cintapendidikan.co.cc

1 April 2010 pukul 14.21

@ risal : sy sudah lihat blog sobat risal, berhasil ya buat artikel terkait di sidebar..blognya bgs tuh..

20 April 2010 pukul 13.41

makasi Sob

11 Mei 2010 pukul 20.23

gimana nich gak nongol ...

28 Mei 2010 pukul 11.40

makasih tipsnya aogut pake ahhhhh

31 Mei 2010 pukul 01.05

yes!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!wiuh.....bolak-balik saya cari artikel ini gan....baru nemu di blog anda......matur nuwun gan.....tapi gak saya taruh di sidebar gan, tapi saya taruh di bawah postingan....soalnya cara yang lain gagal terus....kalo sempat mampir di tempat saya...

1 Juni 2010 pukul 00.02

kok ngak muncul ya artikelnya ...
apa ada yang salah .. mohon bantuannya mas ..
masih gaptek neh .. hehehehe ..

7 Juni 2010 pukul 06.52

kalo boleh jawab nih @Poetra anoegrah : musti pasang label dulu nuh.
Kang admin Dody salam kenal aza.

12 Juni 2010 pukul 10.53

ya aq malas berpikir emang :D, templetku ada readmore.. dmnanya tu taruh kode2 kalo bgt pak?

12 Juni 2010 pukul 11.31

@ okayana : klo ingin meletakkan kode ini dibawah postingan dan munculnya hanya pd halaman postingan maka kode pada poin 10 diletakkan setelah kode <data:post.body/> yg pertama, jgn lupa tambahkan kode <b:if cond='data:blog.pageType == "item"'> sehingga menjadi seperti ini :

<data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>

23 Agustus 2010 pukul 02.06

makasih artikel terkait sidebarnya, akhirnya bisa bro..jadi kyk kompas.com gto deh..:-)

5 September 2010 pukul 05.19

Artikelnya memang hebat-hebat, semoga bisa diterapkan diblog kami. Top habis Pokoknya.

1 Oktober 2010 pukul 20.11

sudah dicoba mas.. n berhasil, makasih.

9 November 2010 pukul 07.51

Ok banget nih artikel.. http://nofianto777.blogspot.com/

10 November 2010 pukul 12.55

MAs,,,, numpang tanya , kan llist linknya itu tidak pake ordered list,, jadi tampilannya kurang user friendly. nah cara agar tampilan list artikel terkait itu biar ada penanda misalnya pakai kode ordered list <ul> <li></u/> menaruhnya dimana????

28 November 2010 pukul 16.10

mantab, bang...

12 Desember 2010 pukul 18.23

wah akhirnya uda cari lama nemu juga . makasih infonya :)

29 Desember 2010 pukul 13.53

berhasil bro....tapi jadi aneh......mendingan dibawah post aja.... :D

13 Januari 2011 pukul 04.06

thx bnged y kang..

3 Februari 2011 pukul 17.04

Top bangetz. langsung saya coba. Thaks infonya. Ohya, ijin ku posting di blog saya ya. Ntar sumbernya saya cantumkan. Thanks again. :D

10 Maret 2011 pukul 11.27

bos udah saya coba tapi kok gak muncul yah, saya ikutin semua instruksinya n ga kelewatan kok, n yang muncul cuman judulnya aja, mohon dijelaskan bos :), trmksh sblmnya

22 April 2011 pukul 03.36

langkah 10 gak ada di kode html saya,, gmn mas...

24 April 2011 pukul 10.09

Makasih,, om.,,,

11 Juni 2011 pukul 20.53

berhasil pasang artikel terkait di sidebar, tapi suka nongol judul "undefined" padahal gk ada artikel berjudul itu, gimana dong ngatasinnya..thanks brader..

16 Juni 2011 pukul 01.50

Gan bwat yang nie mah gagal trus, udah dicoba lebih 10 x gagal trus.. kalo bkin yang dbawah posting mah sukses v bwat yang di side bar gagal.. mhon bantuannya gan!

29 Juni 2011 pukul 11.52

mkasih y gan.,
:)

5 Juli 2011 pukul 08.43

mas punya saya tidak ada dalam pencarian langkah 1 point 6 , gimana donk mas???,,, mohon pencerahannya mas

www.monoton.co.cc

6 Juli 2011 pukul 13.49

ijin nyedot sob....

19 Juli 2011 pukul 22.46

thax atas infonya,,

11 Agustus 2011 pukul 05.34

makasih tutorialnya, agak ribet tapi "ok"!!!!!

19 Agustus 2011 pukul 08.07

thanks bro ini sudah berhasil

19 Agustus 2011 pukul 15.52

Keren,, ane sudah coba dan BERHASIL!!
http://share-comp.blogspot.com/

26 Agustus 2011 pukul 08.21

bagus bagus bagus.

12 September 2011 pukul 15.27

kok masih blom bisa yah ?

27 September 2011 pukul 18.43

Terimakasih infonya gan, perlu di coba juga neh

5 Oktober 2011 pukul 21.39

Tutorialnya sangat bermanfaat gan, udah sy coba dan berhasil
terima kasih gan.

9 Oktober 2011 pukul 07.51

Mohon petunjuk nih senior.. pasang artikel terkait... dengan read more dah di coba beberapa kali gak bisa.. ada yang salah ... atau pemasangan script kurang tepat, jd gak ada efek apa2.. thanks... Rilexnet.blogspot.com

16 Oktober 2011 pukul 15.31

rumit kali gan...
gk da yg simple tinggal tambah widget ajaj.

http://internet-hijau.blogspot.com

Anonim
23 Oktober 2011 pukul 18.46

Thank's gan .....

hore ... sudah bisa :D

24 Oktober 2011 pukul 16.07

Sudah berkali -kali aku masang artikel terkait kok gagal terus ya?....
Semoga saja kali ini bisa....

31 Oktober 2011 pukul 13.08

thanks bangets..
udah jadi .sekalian nitip nih
http://peace-reggae.blogspot.com/

8 Desember 2011 pukul 00.10

Terima kasih tutorialnya, sukses mas diblog saya.

9 Februari 2012 pukul 01.48

kang coba periksa blog saya apa sudah ada related post/artikel terkaitnya mohon bantuanya di www.dixynet.co.cc

28 Maret 2012 pukul 10.25

ma'af nie mau tanya,, tuk artikel terkait disidebar untuk set maksimal yang di tampilkan gmn?? mohon bantuannya..

Anonim
18 Juli 2012 pukul 05.45

izin coba masbro....

10 Desember 2012 pukul 07.12

Info yang baguz sekali untuk disimak.....
Bermanfaat sekali untuk saya....

Mohon kunjungan baliknya yaa....
Dan saya juga sangat berterima kasih sekali kalau anda berkenan FOLLOW dan Backlink Blog sederhana saya.... :-)

Title: Zamrud News
( zamrudnews.blogspot.com )

6 Maret 2013 pukul 00.27

tutorialnya keren mas, terimakasih jadi dapat ilmu lagi saya, kalau ada waktu kunjungi balik ia mas, dan saya sudah follow, di tunggu follow baliknya.

8 Mei 2013 pukul 02.00

dijelaskan secara mendetail lagi. mantap infonya.

Posting Komentar

Reader Community

Recent Comments