Tahukah Anda?
Pencarian di blog ini menggunakan Mesin Pencari Buatan Indonesia!
Mari kita dukung!  Kunjungi dan gunakan Penjejak.com ! »

Rabu, 04 April 2012

Cara Menampilkan Artikel Terkait di Posting Blogger/Blogspot

Penasaran bagaimana cara menampilkan daftar link terkait di akhir posting pada Blogspot Anda? Meskipun Blogger / Blogspot tidak menyediakan widget atau fasilitas khusus untuk membuat atau menambahkannya, Anda bisa membuat sendiri daftar link yang biasanya diberi judul Artikel Terkait atau Related Links itu.

Prinsip kerjanya, daftar link artikel terkait akan ditampilkan berdasarkan label atau tag posting tulisan Anda. Hal ini akan membuat pengunjung lebih betah dan merasa diberi kemudahan karena bisa menelusuri tema atau topik sejenis dengan yang posting yang sedang dibacanya.


Tampilan Link Artikel/Posting Terkait
 Ada banyak cara untuk membuatnya. Berikut ini salah satu cara paling praktis:
  1. Buka Layout / Template > Edit HTML di Dashboard Blogger Anda. Kode HTML penyusun template blog Anda akan ditampilkan.
  2. Pastikan Anda centang kotak Expand Widget Templates.
  3. Sebelum mengutak-atik, sebaiknya salin seluruh kode dan simpan dalam file tersendiri di komputer Anda sebagai cadangan. Tujuannya agar Anda bisa meng-copy paste template awal tersebut ke blog Anda jika ternyata nanti terjadi masalah saat menerapkan hasil utak-atik kode.
  4. Mari kita mulai, cari tag </head>. Biar cepat, gunakan fitur pencarian teks, tekan Ctrl + F, ketikkan </head> dan cari.
  5. Setelah ketemu, tambahkan kode berikut dan letakkan persis sebelum tag </head>.

  6. <style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiunTPcURlrLpN26HtyFSZWWPdc04hlsw8RVFFlXQJoSbp-neHxzEG35NnzT5FVFB_DR6-JjWpGUH1yQxHBubxafcaDG8YDJuGy3uaakAPtzNuuDIQ-NHih26D8u3uGB_HHo-62IXBPHvs/") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='https://sites.google.com/site/widgetsforfree/scripts/Related_posts_hack.js' type='text/javascript'/>
  7. Kemudian cari <data:post.body/>, biasanya ada 2 buah. Jika tidak ketemu, Anda bisa mencoba mencari <div class='post-body>.
  8. Jika sudah ketemu, tempatkan kode berikut persis di bawahnya (jika bingung menentukan yang mana, tempatkan saja kodenya di bawah semua <data:post.body/>.

  9. <b:if cond='data:blog.pageType == "item"'>
    <div id="related-posts">
    <font face='Arial' size='3'><b>Artikel Terkait : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><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=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
    <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
    </script>
    </div></b:if>
  10. Kode di atas akan menghasilkan maksimal 5 link artikel terkait. Jika Anda ingin mengubah jumlah link yang akan ditampilkan, ganti angka di max-results=5 dengan jumlah yang Anda inginkan.
  11. Simpan perubahan template, selesai. Silakan periksa hasilnya.


15 komentar:

  1. terimakasih tipsnya, sudah saya coba dan berhasil..
    kunjungi juga blog saya:
    http://muhafialifakhri.blogspot.com

    BalasHapus
  2. kalau menampilkan picturenya juga bagaimana pak?
    Buka Abiz Blog's

    BalasHapus
  3. makasi boz untuk tutorialnya ....

    BalasHapus
  4. Terimakasih. Sudah dipraktekkan. Ternyata berhasil

    BalasHapus
  5. maksi tipnya kunjungi juga blog saya
    http://smbjagasatru.blogspot.com/
    thanks

    BalasHapus
  6. Saya sudah oba gan dan berhasil...
    Saya masih pemula nih dan baru saja buat blog
    kunjungi balik yach dan mohon sarannya ...
    Trimakasih
    http://certainlytips.blogspot.com

    BalasHapus
  7. sukses.....http://myblogistoshare.blogspot.com/

    BalasHapus
  8. informasi yang membantu untuk blogger yang masih belajar seperti saya. Terimakasih, jika berkenan silahkan kunjungi kembali blog sederhana saya. http://www.opraywinter.blogspot.com

    BalasHapus
  9. Terima kasih mas tutorialnya.lumayan buat tambah ilmu aku yang seorang newbie,kapan-kapan mampir mas klo sekalian lewat rumah saya di http://ainkmadeingandaria.blogspot.com tar kita ngopi-ngopi
    salam

    BalasHapus
  10. wah keren
    visit blog saya ya OhMyKom.blogspot.com

    BalasHapus
  11. gan bikin floating related post gmn gan..
    http://drafharyono.blogspot.com

    BalasHapus
  12. Tipsnya bagus Gan...http://accunik.blogspot.com/

    BalasHapus