Muhasabah

Saat awal membuat blog menggunakan wordpress, saya ingin setiap orang yang mengomentari akan saya masukkan ke Daftar Situs Keren. Saya sengaja tidak menggunakan fasilitas Blogroll yang sudah built-in di wordpress karena akan memakan banyak tempat di sidebar. Jika panjang vertikal sidebar melebihi panjang vertikal content, blog akan terlihat tidak sedap. Untuk itulah saya membuat halaman tersendiri dan url teman-teman saya masukkan secara manual.

Seiring bertambahnya komentar, lama-lama capek juga ya...

Akhirnya setelah semalaman mencoba, saya berhasil membuatnya otomatis. Jadi setiap orang yang berkomentar di blog yang menyabet juara 2 Lomba LiveBlogging nix 2008 di JEC 7 Mei 2008 lalu, maka link ke situsnya akan otomatis tampil di halaman itu.

Di halaman "Daftar Situs Keren" tersebut saya hanya menggunakan kode <!-- GravatarLinks -->. Kode itu nantinya akan digantikan oleh Page Template (page.php) di template yang saya pakai.

Langsung saja (karena kodenya lumayan panjang...), ini adalah isi dari page.php :
<?php
// letakkan ini di bagian paling atas
ob_start();
?>

....
....
....

<?php
// letakkan ini dibagian paling bawah
$getGravatar = ob_get_clean();

// Cek apakah ada kode <!-- GravatarLinks -->
if (strstr($getGravatar, "<!-- GravatarLinks -->")) {
 // Kode SQL untuk mengambil data komentar
 // Pingback dan komentar admin tidak usah diambil
 // Alamat email di kode SQL ini harus
 // sama dengan alamat email admin
 $sql = "SELECT comment_author_url, comment_author_email, comment_author " .
        "FROM $wpdb->comments WHERE comment_type <> 'pingback' " .
        "AND comment_author_email <> 'admin@bloganda.com' " .
        "ORDER BY comment_author";

 // Query Database
 $getSites = $wpdb->get_results($sql);

 if ($getSites) { // Jika ada hasilnya
  foreach ($getSites as $Sites) {
   $tmpSites = explode("/", $Sites->comment_author_url);
   // Ambil nama domainnya saja : $tmpSites[2]
   $commData[$tmpSites[2]]["Email"] = $Sites->comment_author_email;
   // Perbesar setiap huruf awal dari kata
   $commData[$tmpSites[2]]["Author"] = ucwords($Sites->comment_author);
  }
  $commOutput = array();
  foreach ($commData as $Site => $commID) {
  $commOutput[] = "<a target=\"_blank\" class=\"commAvatarLink\" " .
                  "href=\"http://" . $Site . "/\" title=\"" .
                  $commID["Author"] . "\">" .
                  "<img src=\"http://www.gravatar.com/avatar/" .
                  md5($commID["Email"]) .
                  "?s=8&d=monsterid\" class=\"commAvatarImg\" alt=\"" .
                  $commID["Author"] . "\"/> " . $commID["Author"] .
                  "</a>\n";
  }
 }

 // Ubah <!-- GravatarLinks -->
 echo ($commOutput) ? str_replace("<!-- GravatarLinks -->", implode("", $commOutput), $getGravatar) : $getGravatar;
} else { // Jika kode <!-- GravatarLinks --> tidak ada
 echo $getGravatar; // tampilkan apa adanya
}
?>

Daftar url yang dihasilkan akan menampilkan gambar Gravatar berukuran 8x8 pixel dari email komentator.

Untuk mengcustom tampilannya, Anda bisa menggunakan CSS dengan class yang tersedia, yaitu : commAvatarLink untuk tag <a>, dan commAvatarImg untuk tag <img>.

Saya sendiri mengcustomnya seperti di bawah ini melalui style.css :


.commAvatarImg {
 border: none;
}
a.commAvatarLink {
 padding: 0 5px;
}
a.commAvatarLink:hover {
 background: #f2f2f2;
}


Jika Anda tertarik, silahkan mencobanya :-)

Beberapa hari lalu mungkin Anda menjumpai tulisan berjalan dari kiri ke kanan : maaf, tampilannya masih kacau... saya sedang berusaha meluangkan waktu untuk memperbaikinya. Akhirnya selesai juga walaupun masih ada 1 hal yang mengganjal.

Satu masalah itu adalah transparancy gambar berformat PNG (Portable Network Graphics) untuk browser yang menggunakan Internet Explorer. Saya menggunakan Maxthon karena di komputer saya sudah tidak ada lagi browser yang berinisial IE kecuali tinggal enginenya saja.

Ini sudah yang kesekian kalinya saya dipusingkan oleh browser tersebut. Background outer-wrapper template ini adalah warna hitam dengan transparancy 80% berdimensi 1 pixel berulang sehingga harapan saya background utama berupa garis miring selang-seling masih terlihat. Untuk firefox sih tidak ada masalah. Tetapi untuk engine IE yang terlihat warna abu-abu. Saya cari kesana kemari dan saya coba penyelesaian yang ada (solusi menggunakan CSS dan JavaScript) tetapi itu hanya bekerja untuk gambar tunggal, bukan berulang.

Dan katanya sih ini hanya terjadi di IE 6 ke bawah. Saya tidak mencoba install IE 7 atau 8 karena saya sudah malas menggunakannya.

Tetapi ternyata setelah saya lihat statistik, yang menggunakan IE hanya sedikit. Jadi saya simpulkan tidak masalah apabila di IE yang tampil warna abu-abu.

Tentang Template Ini

Template ini sebenarnya adalah Template Dots Dark oleh Douglas Bowman yang saya pindahkan sidebarnya ke sebelah kanan dan sidebar tersebut saya lebarkan dan dibagian bawahnya saya pecah menjadi dua. Pada awalnya template ini menggunakan resolusi 800x600 tetapi kemudian saya rubah ke standar 1024x768. Lebar template ini adalah 1000 pixel. 24 pixel sisa screen saya asumsikan untuk keperluan vertical scroller.

Gambar background dan header saya buat sendiri. Sedangkan sebagian besar warna dan jenis tulisan masih sama seperti aslinya.

Link / URL di Bagian Komentar

Semua link / URL yang Anda masukkan melalui komentar tidak mempunyai atribut "nofollow". Silahkan berkomentar sepuasnya, bercanda juga boleh. Tetapi saya mohon jangan spam yaa... Semua spam akan saya hapus.

Terimakasih.