2010-03-21

Related Post Widget Untuk Blogspot

Disini saya hanya memberi penjelasan bagaiman cara memasang Related Post Widget atau Artikel terkait dibawah posting blog kita, kegunaan widget ini tentu untuk mengundang pembaca untuk melihat dan membaca posting lain dari tulisan kita. Entah mengapa akhir-akhir ini blog saya berisi tulisan tentang tutorial mengedit dan memasang widget, mungkin karena ada rekan atau sobat yang sering nyenggol untuk bertanya pada saya untuk menjelaskannya...

Tambah amburadul deh tujuan isi dari blog saya, seandainya saya mendaftar di directory dmoz pasti bingung mau masukkan dikategori mana blog saya ini, pasti di tolak mentah-mentah deh. hehehe. Ok deh lupakan saja basa-basi dmoz td, terus kita lanjutkan bagaimana membuat artikel terkait atau related post widget, pasti ada yang bete deh...

Karena kode scriptnya bukan saya punya, lagipula saya tidak mampu bikin script sendiri, jadi saya menganjurkan saudara ambil dulu scriptnya di sini, lihat gambar di bawah ini jika mau jelasnya lagi, ingat disitu diperingatkan widget tersebut akan diblokir alias tidak berjalan jika blog sobat memiliki artikel kurang dari 20 buah (egois juga ya, ayo tak kebut update blog sampai 20 luebih), maaf ya bukan saya loh yang buat peraturan.


Lihat contoh di gambar, klik untuk lihat tampilan lebih besar :

Gambar 1: Lihat di mana harus diklik contohnya pada gambar di bawah ini 
Gambar 2: Masukkan alamat blog kamu dan klik "Get Key and Installation Step"
Gambar 3 : Simpan script yg dilingkar dalam notepad terlebih dahulu

Ingat Script yang dicopy kemudian sobat tambah kode ini di notepad tadi  :

<script src='http://www.google.com/jsapi'/>

jadi kira-kira begini hasilnya :


<script src='http://www.google.com/jsapi'/>
<script src='http://brps.appspot.com/brps.js?key=b83d1dff' type='text/javascript'/>

Selanjutnya Sobat cari kode berikut ditemplate ya, awas kalo tidak ketemu, he... ( Oppps...centang tanda kotak expand widget )

<div class='post-footer-line post-footer-line-3'/>
    </div>
  </div>

Jika sudah ketemu silahkan copas kode berikut dan letakkan dibawah kode yang di atas tadi,
 <div id='related_posts'/>

Maka hasilnya kalau sudah dipaste kelihatan seperti ini :

<div class='post-footer-line post-footer-line-3'/>
    </div>
  </div>
<div id='related_posts'/>

Langkah Terakhir Copy kode yang telah di simpan di notepad sebelumnya dan letakkan di atas kode :

</body>
</html>

Sehingga akan tampak begini :

<script src='http://www.google.com/jsapi'/>
<script src='http://brps.appspot.com/brps.js?key=b83d1dff' type='text/javascript'/>
</body>
</html>

Kemudian jangan lupa simpan template sobat.

Untuk mempercantik tanpilan widget ini silahkan copas kode css dibawah ini dan letakkan di atas kode ]]></b:skin> :


#related_posts h2 {
  font-size: 120%;
  font-weight: normal;
  padding-top:0.25em;
  margin:0 0 0.25em;
  padding:0.25em .0em .0em;
  }
#related_posts ul li{ 
  background: url("icon/gambar judul artikel terkait") no-repeat;   
  list-style-type: none;
  border-bottom: 1px dashed #ccc;
  margin:0 0 0.45em;
  padding-$startSide: 14px !important;
  background-position: 0 0px;
  text-indent:0;
}

Catatan : Mengenai kode css ini silahkan sobat utak atik sendiri untuk menyesuaikan template masing-masing. Simpan lagih template sobat dan lihat hasilnya.

12 comments:

  1. banyak sepertinya feature2 blogger yang saiia sampe kini baru engeh... ternyata makin banyak dan makin seru iia kang...

    ReplyDelete
  2. makasih bro...posting di blog saya belum 20 kayaknya...
    jadi terpaksa haus kebut posting nih...

    btw. permasalahanny udah terselesaikan....

    ReplyDelete
  3. Genial@ iya mas, semakin mantap B-)
    rizal@ mantap!

    ReplyDelete
  4. klo untuk wordpress piye mas??hihihi

    ReplyDelete
  5. Postingku udah 160 an mas... Berarti bisa di-'related' semuanya?
    Ato cuma 20 aja?

    ReplyDelete
  6. O ya, yg di'related' pake batasan waktu posting..? Misal posting 1 tahun terakhir...?

    ReplyDelete
  7. makasih sob infonya,, kabarnya d'moz itu di kendalikan secara manual ya? saya belum daftar nieh..

    ReplyDelete
  8. Ususpanjang@:-tmaaf, untuk diatas khusus untuk blogspot ya:D

    om srex@related post ini tergantung label tulisan kita, misalnya ada beberapa tulisan saya yang diatas, saya beri label/kategori "sekedar arip, tips", maka yang akan keluar nanti khusus tulisan yang mencakup tentang "sekedar arip, tips" saja, kira-kira begitu om. apalagi artikel sudah berjumlah ratusan, alangkah bagusnya jika dipasang artikel terkait ini, karena judul dan isi halaman posting yang berkaitan kita akan otomatis keluar berdasarkan label-label yang kita buat.Kalo soal jangka waktu tisak ada batasan, jd initnya tiap tulisan kita harus beri nama label dahulu om.

    Fauzan upz@ mksh jg sdh mampir mas, iya dmoz itu memang dikendalikan oleh orang langsung bukan robot seperti gugle, yahoo, bing, jd berbanggalah jika blog kita diterima oleh dmoz karena semua mesin pencari besar mengacu kepada dmoz tsb.

    ReplyDelete
  9. Hasilnya kayaknya artikel terkait di blog ini ya..??
    :-?
    Jadi pengen cepet nyoba dech..
    Thx buat info tutorialnya... :)

    ReplyDelete
  10. Wah ok bangt... http://nofianto777.blogspot.com/

    ReplyDelete
  11. Tks ya, sungguh sgt berguna dan bermanfaat...

    ReplyDelete

 
© 2012 Planet Jingga. Natuna Network Natuna | Abrizal.