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.

Membuat komentar di blog via aplikasi facebook

Berawal dari iri ketika melihat situs MetroTV, pada live streaming bisa ngirim komentar via facebook. Saya coba menggunakan facebook developer ternyata harus mengupload file xd_receiver.htm. Padahal, di blogger tidak bisa mengupload file tersebut. Namun, ternyata ada alternatif lain. Caranya sebagai berikut.

• Klik link ini lalu beri nama aplikasi. Klik Create Application.

• Catat API Key yang diberikan. Kalau punya, upload ikon maupun logo blog Anda.

• Klik tab Connect lalu isi Connect URL dengan blog Anda.

• Klik tab Widget. Lakukan pengaturan sesuai keinginan Anda. Misalnya, tidak mengizinkan orang tak dikenal memberi komentar, pilih No pada Allow Anonymous Comments. Klik Save Changes.

• Login ke blog Anda. Klik Layout.

• Klik Edit HTML.

• Klik Download Full Template untuk berjaga-jaga terjadi kesalahan. Ceklis Expand Widget Templates. Cari kode di bawah ini.

xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

• Simpan xmlns:fb='http://www.facebook.com/2008/fbml' di akhir kode tersebut seperti di bawah ini.

xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://www.facebook.com/2008/fbml'>

• Letakkan kode di bawah ini sebelum tag </head>.

<script src='http://static.ak.connect.facebook.com/js/api_lib/v0.4/

FeatureLoader.js.php'type='text/javascript'/>

• Letakkan kode di bawah ini sebelum tag </body>.

<script type='text/javascript'>
FB.init(&quot;LETAKKAN_API_KEY_ANDA_DISINI&quot;, &quot;&quot;);
</script>

• Letakkan kode di bawah ini di tempat yang Anda inginkan. Misalnya, Gadget HTML/JavaScript.

<fb:comments width='250'/>

Hasilnya seperti gambar berikut.

Menggabungkan banyak dokumen menjadi satu

Ketika membuat artikel untuk blog, saya biasa menulisnya dalam Ms. Word satu dokumen untuk satu artikel. Jika sudah banyak, saya suka menggabungkannya dalam satu dokumen. Biasanya, saya buka satu per satu dokumen lalu copy – paste.

Jika puluhan dokumen kayaknya bisa memakan waktu dan tenaga. Ternyata, ada fasilitas supaya proses itu dilakukan lebih cepat. Caranya sebagai berikut.

• Buat dokumen baru. Klik ribbon Insert lalu klik Object > Text for File.

• Seleksi dokumen yang akan disisipkan lalu klik Insert.

• Semua dokumen yang dipilih, otomatis masuk ke dalam satu dokumen.

Catatan:

1. Jika ingin memasukkan bab secara berurutan, klik di akhir bab, tekan Shift lalu klik di bab pertama. Jika di klik dari bab pertama, urutannya menjadi bab terakhir, bab pertama sampai satu bab sebelum akhir.
2. Jika dokumen yang dimasukkan puluhan, sebaiknya diseleksi per tiga puluh dokumen. Jika dipilih semua, kadang tidak masuk seluruhnya. Supaya berurutan, ikuti catatan ke-1.

Menghilangkan tulisan di header

Setiap template memiliki desain yang berbeda. Salah satunya ada yang menyertakan nama situs dan slogan dari situs tersebut. Ketika akan menggunakannya, mungkin di situs kita tidak perlu.

Kita bisa menghilangkannya dengan cara sebagai berikut.

• Buka folder template > nama template. Klik kanan file index.php lalu klik Open with > WordPad.

• Cari dan hapus kode seperti ini.

<div class="art-Logo">

<h1 id="name-text" class="art-Logo-name"><a href="<?php echo $baseUrl; ?>/">mediakita</a></h1>

<div id="slogan-text" class="art-Logo-text">agar kita lebih tahu</div>

</div>

• Refresh halaman utama situs. Hasilnya seperti gambar berikut.

Membuat module YM di Joomla! 1.5.15

Kalau kita menggunakan modul Yahoo! Messenger yang sudah ada, kebanyakan hanya ada satu akun. Padahal, mungkin kita ingin menampilkan lebih dari akun bila website kita terdiri dari beberapa admin atau kontributor.

Untuk mengatasinya, bikin modul sendiri saja. Kali ini saya mencobanya di Joomla! 1.5.15. Caranya sebagai berikut.

• Klik Extensions > Module Manager.

• Klik New.

• Pilih Custom HTML.

• Klik Next.

• Ketik nama modul.

• Klik ikon HTML.

• Masukkan kode berikut ini. Tag <br> supaya antar ikon YM beda baris. Klik Update. Angka pada (t) bisa diganti antara 1 sampai 15.

<a href="ymsgr:sendIM?id_ym"><img src="http://opi.yahoo.com/online?u=id_ym&m=g&t=1" border=0></a>

• Hasil sementara seperti ini.

• Klik Save.

• Buka atau refresh tampilan website Anda. Hasilnya seperti ini.