Thursday, August 6, 2009

Membuat Artikel Terkait (Versi 2.0)

Blogger, a.k.a. Blogger.com, Blogspot, atau Blog*Spot, telah bertahun-tahun beroperasi, tetapi masih banyak pemilik blog merasa kesulitan dalam teknik pemasangan Widget Artikel Terkait ini. Berbagai teknik telah diperkenalkan oleh para master blog, begitupun Blogger TuneUp pada artikel sebelumnya pernah membahas blogger hack artikel terkait. Berbagai komentar, email bahkan SMS melaporkan kegagalan pemasangan teknik artikel terkait ini. Entah kesalahan dalam hal apa, tapi teknik sebelumnya memang rumit, wajarlah beberapa blogger mengalami kegagalan pemasangan teknik pemasangan Artikel Terkait ini.
Dalam artikel tips trik blog kali ini Blogger TuneUp akan mencoba memperkenalkan pemasangan Artikel Terkait yang termasuk sangat sederhana baik dari jumlah script maupun dari teknik pemasangannya. Script yang digunakan sangatlah sedikit, sehingga bagi para pemula mudah-mudahan hal ini tidak menyulitkan. Fasilitas Artikel Terkait kali ini di buat oleh Yu-Jie Lin dengan bantuan Blogger Data API sebagai teknik pemanggilan database-nya. Hal inilah yang membuat fasilitas Artikel Terkait menjadi lebih sederhana, ringan, mudah, dan cepat dalam proses loading datanya.
Tetapi sebelum memasang tips trik blog artikel terkait, perhatikan hal-hal berikut ini :
  • Fasilitas ini hanya untuk blog umum dan terbuka.
  • Pemilik fasilitas ini akan memblok blog kita jika melanggar hal-hal berikut :
  • Melanggar hak cipta (Jika blog kita mengandung link yang mengarahkan ke download data illegal, langsung atau tidak langsung, diupload sendiri atau tidak, JANGAN menggunakan fasilitas ini. Yang fatal, blog kita akan di BLOK),
  • Gambar-gambar kategori dewasa dan mengandung unsur pornografi,
  • Artikel berisi provokasi atau bentuk kebencian terhadap suatu kelompok yang dilindungi,
  • Mempromosikan hal-hal berbahaya dan aktifitas illegal,
  • Blog mengandung fasilitas fishing atau account hijacking,
  • Menyimpan identitas pengunjung atau
  • Penyalahgunaan fasilitas ini.
Ingin tahu lebih jauh silahkan kunjungi website Blogger Related Posts Service.

Langsung ke TKP (Teknik Kejadian Pemasangan)
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Expand Template Widget
Langkah 4
Cari kode dibawah ini:
<data:post.body/>
Langkah 5
Masukan (copy paste) kode dibawah ini dibawah kode langkah 4:
<div id='related_posts'/>
Langkah 6
Scroll template sampai akhir dan cari kode dibawah ini:
</body>
</html>
Langkah 7
Masukan (copy paste) kode dibawah ini tepat diatas kode pada langkah 6:
<script src='http://www.google.com/jsapi'/>
<script type='text/javascript'>
window.brps_options = {
"title": "<h3>Artikel lain yang terkait:</h3>",
"max_results": 5
}
</script>
<script src='http://brps.appspot.com/brps.js' type='text/javascript'/>
Langkah 8
Simpan template dan preview blog anda

Perhatikan langkah 7!
  • "title": "<h3>Artikel lain yang terkait:</h3>" : kode ini digunakan untuk memberikan nama widget.
  • "max_results": 5 : nilai 5 (lima) digunakan untuk menentukan jumlah artikel yang akan ditampilkan
Tips trik artikel terkait diatas sebenarnya sudah bisa berjalan dengan baik tetapi dengan tampilan yang sangat sederhana, jika kita mau memodifikasi dari segi tampilan, maka kita perlu menambahkan kode CSS untuk mempengaruhi/mempercantik tampilan artikel terkait pada blog kita.

Perhatikan penambahan CSS (Cascading Style Sheet) dibawah ini:
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Cari kode dibawah ini:
]]></b:skin>
Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:
#related_posts{float:left;width:580px;margin-top:20px;margin-left:5px;font:11px verdana;margin-bottom:10px}
#related_posts h2{color:#940f04;font-size:20px;font-weight:400;margin:5px 7px 0;padding:0 0 5px}
#related_posts a{color:#054474;font-size:11px;text-decoration:none}
#related_posts a:hover{color:#054474;text-decoration:none}
#related_posts ul{list-style-type: none; border:medium none;margin:10px;padding:0}
#related_posts ul li{display:block; background:url(http://dedehendriono.googlepages.com/weed-bullet.gif) no-repeat 0 0;line-height:2em; border-bottom:1px dotted #ccc; margin:0 0 5px; padding:0 0 1px 15px}
Langkah 5
Simpan template dan preview blog anda

Artikel Terkait (Blogger Related Posts Service) ini sebenarnya dapat diterapkan pada widget tanpa harus mengikuti teknik diatas, cukup klik tombol dibawah ini:

Semoga berhasil... Jika mengalami kegagalan tinggalkan komentar. Happy Blogging :)
Update! Artikel Terkait Versi 2.0