Senin, 12 September 2011

Menambahkan You Might Also Like/Related Post Blogger


Related Post pada akhir artikel dapat menjadi hal yang sangat penting untuk mendapatkan traffic atau kunjungan dari para surfer atau pembaca. Ini yang akan kita buat pada tutorial kali ini. Bagaimana cara membuat atau menambahkan related post atau menambahkan You Might Also Like di posting. Pada tutorial ini, saya akan memberikan cara yang dapat di modifikasi, tidak menggunakan layanan website seperti http://linkwithin.com. Cara yang saya gunakan juga memungkinkan widget ini tidak muncul di halaman utama. Hanya di halaman posting saja.

Baiklah, langsung saja ke tutorial. Segeralah mendapat pengunjung, SEO is good.


Langkah pertama yang harus di lakukan, login ke blogger. Kemudian masuk ke Design --> Edit HTML. Kemudian klik pada checkbox expand widget template.

Kedua, cari kode </head> Kemudian copy code dibawah ini tepat di atas code tersebut.
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
float:center;
height:100%;
min-height:100%;
padding-top:10px;
padding-left:15px;
padding-right:15px;
}

#related-posts h2{
font-size: 1.3em;
color: black;
font-family: Arial;
margin-bottom: 0.75em;
}

#related-posts a{
color:black;
}

#related-posts a:hover {
background-color:#eeeeee;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUOUV_0J7iPJvMb4tz2-naCb6T3oUPgYYvrFstA4peMniAkORoawToYVwqWXRAssmLp02M5tILKxm9rTI29ftHS2Z80bvTjUFx5c_vOSyUxN3kOeHUaevnHgPPi3a_zTJly2AMGPXeOmTM//";
var maxresults=5;
var splittercolor="#cccccc";
var relatedpoststitle="You might also like:";
</script>
<script src='http://hbhost.googlecode.com/files/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/>
</b:if>
Kemudian, cari kode <div class='post-footer-line post-footer-line-1'> Copy code di bawah ini tepat di bawah code tadi.
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("");
</script>
</div><div style='clear:both'/>
</b:if><br/>
Anda bisa memodifikasi bagaimana widget akan ditampilkan. Seperti berapa banyak related post yang akan ditampilkan, bagaimana mengatur lebar untuk menyesuaikan dengan template kita. Anda bisa langsung mengedit berapa related post yang akan ditampilkan dengan mengganti angka pada code "var maxresult=5;" sesuai dengan banyaknya data yang ingin ditampilkan.

8 komentar:

  1. info yg bagus,

    skalian promo:
    gan linkmu udah aku pasang di blogku
    jgn lupa di backlink ya.
    haha...
    thanks

    BalasHapus
    Balasan
    1. sip2.. thanks bro.. btw link blog'mu mana?

      Hapus
  2. ini bisa gak..?
    gak ada screenshot jadi gak yakin...
    seolah penulis belum prnah nyoba..,

    BalasHapus
  3. ngga bisa udah dicoba bbp kali atau saya yg salah?

    BalasHapus
  4. Dulu pas waktu saya posting sudah saya coba dulu. Dan berhasil. Coba diperhatikan baik-baik penempatan code nya. Barangkali ada yang salah.

    Saya tidak memakai code itu lagi karena dari templatenya sudah ada.

    Terimakasih. :)

    BalasHapus
  5. Visit ane gan , Rizkiawlia.blogspot.com :D

    BalasHapus
  6. mau tanya kalo webset gimana caranya sob

    BalasHapus
  7. Kok div class='post-footer-line post-footer-line-1' ga ketemu gan , gimana???

    BalasHapus