Dijual Rumah di Kota Bandung
LT 140 m2 LB 110 m2 Harga Nego
untuk info KLIK disini

Rabu, 09 Maret 2011

Membuat Related Post pada Blog - cara 2

Kemarin ada seorang sobat yang bertanya kepada saya, 'bagaimana cara membuat widget related posts seperti yang saya gunakan pada blog ini'. Sebenarnya cara membuat widget related posts sudah pernah saya posting di blog ini, hanya saja memang versi related posts yang saya gunakan sekarang ini berbeda dengan versi related posts yang sudah pernah posting diblog ini. Oleh karena itu, pada postingan ini saya akan menjelaskan cara membuat related posts seperti yang saya gunakan pada blog ini atau yang saya beri nama related posts v2.


Mungkin anda akan bertanya apa perbedaan antara related posts v1 dan v2?

Kalau pada related posts v1, related posts akan ditampilkan bersamaan dengan judul labelnya dan dikelompokan berdasarkan labelnya masing-masing. Sebagai contoh, perhatikan screenshot dibawah ini.


Sedangkan versi 2, related posts atau artikel yang berhubungan hanya menampilkan judul posting saja (tanpa judul label) dan semua artikel yang berhubungan digabung menjadi satu sehingga mirip dengan widget related posts milik Wordpress. Contoh tampilannya seperti ini:


Bagi anda yang ingin memasang related posts v2 atau related posts ala wordpress silahkan ikuti langkah-langkah dibawah ini:

  1. Pada halaman dashboard blogger, buka menu Design -> Edit HTML
  2. Beri centang pada "Expand Widget Templates"
  3. Cari kode ]]></b:skin>
  4. Letakkan kode css berikut diatasnya,



    #related-posts { float : left; width : 250px; margin-left : 5px; font-size: 12px; line-height : 1.8em; margin-bottom:10px; } #related-posts a{ color:#4b4b4b; }
    #related-posts a:hover{ color:#ca1717; }
    #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 { margin : 10px 5px 5px 20px; padding : 0; }

  5. Selanjutnya cari </head>
    Letakkan kode javascript berikut diatasnya


    <script src='http://hermanblog.googlecode.com/files/Related-posts.js' type='text/javascript'/>

  6. Kemudian cari <p><data:post.body/></p> atau <data:post.body/>
  7. Jika ada dua kode yang sama, pilih yang pertama
  8. Letakkan kode berikut dibawahnya:


    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='related-posts'>
    <div style='font-size:18px'><b>Related Posts:</b></div>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast != &quot;true&quot;'/>
    <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>
    <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
    </script>
    </div>
    </b:if>

  9. Keterangan: Teks yang dicetak tebal adalah judul widget dan angka 5 adalah jumlah postingan yang muncul dalam related posts. Silahkan ganti sesuai keinginan
  10. Jika sudah, simpan template anda dan lihat hasilnya.
  11. Cara lain membuat related post dan tidak kalah bagusnya, kunjungi di cara membuat related post 3
hermanblog

2 comments:

  1. Be First :D

    Ko ga bisa ya??padahal kode"nya udh sukses tapi ga muncul tuh??mohon pencerahannya..bisa kasih tau di saya yaa..

    BalasHapus
    Balasan
    1. Saya bahas pada posting yang lain, ternyata ada beberapa perubahan dari sananya sehingga related postnya tidak work 100%. Nah untuk itu saya mencoba meng-update related post ini melalui link dibawah ini: - silahkan klik

      related post update

      atau bisa juga pakai sidebar realetd post dimana related post muncul pada disamping bukan di bawah seperti biasanya. klik link dibawah ini:

      sidebar related post update
      semoga membantu.

      Hapus