Menyisipkan JavaScript di Facebook page

Akhirnya bisa juga menyisipkan JavaScript di Facebook page. Meskipun belum menerima semua kode JavaScript selain FBJS (Facebook JavaScript), tetapi lumayan untuk menghias Facebook page lebih interaktif.

Kali ini saya akan mencoba yang sederhana, membuat image carousel (slideshow). Kalau Anda mau mencobanya, silakan ikuti langkah berikut.

• Download kodenya di sini lalu modifikasi sesuai kebutuhan.
• Buat FBML atau edit yang sudah ada lalu sisipkan kode FBJS di situ. Klik Save Changes.

• Hasilnya seperti gambar berikut. Atau, bisa dilihat di sini.

Menyembunyikan isi tab fbml di facebook page

Jika kita menambahkan informasi di Facebook page, semua orang bisa melihatnya meskipun bukan fans. Misalkan, kita menambahkan FBML yang didalamnya ada fasilitas untuk download, form kontak, dan lain-lain. Tidak ada fasillitas untuk menyembunyikannya sehingga siapapun bisa mengaksesnya.

Untuk mengakalinya, sembunyikan saja halamannya dengan cara sebagai berikut.

• Buka FBML yang akan disembunyikan. Misalnya, Contact Me.

• Sisipkan kode <fb:visible-to-connection> di awal FBML dan </fb:visible-to-connection> di akhir FBML. Klik Save Changes.

Jika bukan fans, tampilannya seperti ini.

Kalau sudah menjadi fans, form kontak langsung muncul.

Mudah, bukan? Silakan kembangkan sendiri.

Menjalankan Joomla! 1.5 di jaringan lokal

Pada artikel terdahulu, saya menjelaskan cara mengakses Joomla! di jaringan. Saat itu saya menjelaskan untuk versi Joomla! 1.0. Jika Anda menggunakan Joomla! 1.5, caranya sedikit berbeda. Silakan ikuti langkah berikut.

• Buka folder Joomla! di htdocs lalu buka configuration.php menggunakan notepad atau wordpad.

• Cari var $smtphost = 'localhost'; lalu ganti localhost dengan ipaddress komputer yang diinstal Joomla!. Misalnya, var $smtphost = '154.132.1.14';.

• Simpan lalu tutup wordpad.

Sekarang coba di komputer lain buka, http://ipaddress/namafolderjoomla.

Template blogger polos

Jika Anda sangat mengandalkan tulisan, mungkin tidak ingin terlalu ramai diisi gadget pada tampilan blognya. Pengunjung akan langsung fokus ke tulisan yang Anda publikasikan. Kalau pun ingin menambahkan gadget, bisa ditempatkan di bawah template.

Saya mencoba memodifikasi template blogger yang sangat sederhana. Tidak ada gadget di sisi template, melainkan di bawah. Selain itu, artikel otomatis dirangkum (readmore otomatis), sehingga tidak perlu repot mengaturnya bila artikel yang dipublikasikan cukup panjang.

Jika diperlukan, Anda juga bisa mengubah id Twitter di halaman Layout template, serta banner iklan. Jika tidak diperlukan, bisa Anda buang.

Jika tertarik menggunakannya, silakan download di sini. Sebelum menggunakannya, silakan lihat contoh penggunaannya di blog ini.

Rangkuman pengalaman ngeblog, saya bukukan

Akhir tahun 2006 saya membuat blog ini. Namun, dibiarkan begitu saja. Baru April 2008 mulai aktif menulis. Bongkar pasang template, gadget, dan modifikasi telah dilakukan. Mungkin akan terus dilakukan sampai menemukan atau bahkan mampu membuat tampilan sendiri yang lebih nyaman dilihat.

Semuanya saya tulis dan kumpulkan dalam beberapa artikel. Akhirnya, memenuhi kriteria menjadi sebuah buku. Jika Anda tertarik membacanya, silakan beli buku ini di toko buku Gramedia terdekat. Informasi harga, bisa dilihat di sini.

Menghilangkan border pada kumpulblogger

Meskipun tampak sepele, tetapi bisa saja mengganggu. Misalnya, jika kita memasang kode kumpulblogger, ada garis tepi (border). Jika kita pasang di gadget yang memiliki garis tepi, tentu akan terlihat ada dua garis tepi di gadget tersebut. Untuk itu, dengan sedikit trik, garis tepi pada kumpulblogger bisa kita hilangkan.

Caranya sebagai berikut.

• Salin kode di bawah ini.

.garping,.garpinghor {
border: none !important;
}
.garping table,.garpinghor table {
border:#FFFFFF solid 1px !important;
background-color:#FFFFFF !important;
}
.garping td,.garpinghor td{
color:#000000 !important;
background-color:#FFFFFF !important;
font-family:arial !important;
font-weight: !important;
font-style: !important;
}
.garping a,.garpinghor a{
color:#000080 !important;
font-family:arial !important;
font-weight: !important;
font-style: !important;
}
.garping a:hover,.garpinghor a:hover{
color:#FF0000 !important;
}

• Klik Edit HTML lalu cari kode <b:skin><![CDATA[LETAKKAN KODE DISINI/*.
• Klik SAVE TEMPLATE.

Membuat readmore otomatis di blogger

Secara default, artikel pada blogger tidak dipenggal. Kita bisa saja menyisipkan kode untuk memenggal artikel. Namun, tetap merepotkan bila harus selalu menyertakan kode untuk memenggal saat menulis artikel. Supaya hal itu tidak dilakukan, kita bisa membuat penggalan artikel secara otomatis.

Caranya sebagai berikut.

• Sisipkan kode ini di atas kode </HEAD> pada halaman EDIT HMTL.

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 350;
summary_img = 350;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

• Klik SAVE TEMPLATE.

• Ceklis Expand Widget Templates.
• Cari kode <data:post.body/> lalu ganti (replace) menjadi kode di bawah ini.

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

• Klik SAVE TEMPLATE.

Hasilnya seperti blog ini.

Jika Anda sudah menyisipkan kode readmore sebelumnya, hapus dulu kode tersebut baru masukkan kode seperti di atas.

Memasang random banner di blog

Punya banyak banner yang mau dipasang di blog? Pasti bingung menempatkannya di mana. Kalau dipasang semua kemungkinan memenuhi tampilan blog. Untuk mengatasinya, buat saja random banner. Kita hanya menempatkan satu banner dan berubah otomatis ketika blog kita direfresh.

Caranya sebagai berikut.

• Salin kode berikut.

<script language="JavaScript"> <!-- Begin var jumlah_iklan = 4; var waktu_sekarang = new Date() var detik = waktu_sekarang.getSeconds() var pasang_iklan = detik % jumlah_iklan; pasang_iklan +=1; if (pasang_iklan==1) { url="alamat url"; alt="alamat url"; banner="alamat gambar"; width="468"; height="60"; } if (pasang_iklan==2) { url="alamat url"; alt="httpalamat url"; banner="alamat gambar"; width="468"; height="60"; } if (pasang_iklan==3) { url="alamat url"; alt="alamat url"; banner="alamat gambar"; width="468"; height="60"; } if (pasang_iklan==4) { url="alamat url"; alt="alamat url"; banner="alamat gambar"; width="468"; height="60"; } document.write('<center>'); document.write('<a href=\"' + url + '\" target=\"_top\">'); document.write('<img src=\"' + banner + '\" width=') document.write(width + ' height=' + height + ' '); document.write('alt=\"' + alt + '\" border=0><br>'); document.write('</center>'); // End --> </script>

• Ganti tulisan yang berwarna merah dan biru sesuai kebutuhan lalu masukkan ke gadget HMTL/JavaScript atau tempat lain yang Anda inginkan.

• Untuk melihat hasilnya, refresh (F5) browser beberapa kali.

Jumlah iklan bisa ditambah maupun kurangi. Jika ingin menambah, cukup menambahkan kode berikut ini.

if (pasang_iklan==4) {

url="alamat url";

alt="alamat/nama url";

banner="alamat gambar";

width="468";

height="60";

Hasilnya bisa dilihat di blog ini.