Coba pelototin dulu gambar berikut ini:

Masih bingung ya? sori aku juga sebenernya bingung, gak ada ide banget neh..

Langsung aja ke TKP sono… Klik di Sini

Tidak Puas Dengan Posting di Atas? Coba Yang di Bawah Ini...

• Cara menginstal template oscommerce
• Membuat Custom Block Region di Drupal
• Situs Siapa yang Ganti Kulit? Ya SitusKamu!
• Mengupdate Drupal, Caraku
• Table to CSS Converter, Convert Table to DIV in Seconds

.

Upload plugins dan aktifkan melalui dashboard, setelah itu lakukan penyetingan (Settings –> Watermark) posisi watermark, jenis huruf, warna, termasuk transparansi dan tulisan yang akan dijadikan watermark. Klik preview untuk melihat hasil penyetingan, ulangi sampai dapat hasil yang pas. Kalau sudah pas dan puas tekan Save sambil tahan napas.

Halaman setting watermark:

Download puginnya di sini: http://www.wp-watermark.com/download

Tutorial instalasinya di sini: http://www.wp-watermark.com/installation

Reviews:

• Lumayan bagus, simple dan praktis terutama kalau yang posting gambarnya diupload langsung dari wordpress.
• Belum bisa untuk membuat watermark di pipi maupun di leher

Tidak Puas Dengan Posting di Atas? Coba Yang di Bawah Ini...

• Wordpress Automatic upgrade, otomatis jadi Version 2.5
• Iseng Mengganti ThemePath Wordpress
• Situs Siapa yang Ganti Kulit? Ya SitusKamu!
• Integrasi Wordpress dengan SMF (Wordpress + SMF Integration)
• Apa itu blog dan bagaimana cara membuatnya?

.

Beralih ke table dalam kontent website, sebenarnya ada toolsnya yakni “table2css converter” yang bisa langsung mengkonvert table menjadi div hanya dengan beberapa klik. Namun sayangnya tool ini hanya bisa membuat tabel statik dengan ukuran-ukuran absolut. Bagaimana jika table tersebut merupakan table dinamis, multicolumn, multirow seperti daftar harga barang, statistik atau member, dimana data diambil secara loop dari database?

.

Berikut contoh membuat tabel div yang mempunyai 8 kolom (columns) dan 2 baris (rows).

.

Pertama, buat kontainer yang bertidak sebagai <table> </table>.

<div class=“kontainer”></div>

Properti css nya adalah:

.kontainer {
width:100%;    /* penuh layar atau fluid/flexible, gunakan ukuran px untuk fixed width */
margin:0 auto; /* opsional, supaya table berada di tengah jika dalam mode fixed,*/
               /* bertindak seperti <table align=”center”>*/
border: 1px solid #000 /* border, opsional */
}

Kedua, tambahkan row/baris di dalam div kontainer tadi, yang bertindak sebagai <tr></tr>.

<div class=“kontainer”>
   <div class=“baris”></div>
</div>

Properti cssnya:

.baris {
width: 100%    /* harus 100% supaya penuh ke area table */
}

Ketiga, tambahkan beberapa kolom (contoh ini 8 kolom) diantara div baris tadi, yang bertindak sebagai <td></td>.

<div class=“kontainer”>
   <div class=“baris”>
      <div class=“kolom”>1</div>
      <div class=“kolom”>2</div>
      <div class=“kolom”>3</div>
      <div class=“kolom”>4</div>
      <div class=“kolom”>5</div>
      <div class=“kolom”>6</div>
      <div class=“kolom”>7</div>
      <div class=“kolom”>8</div>
   </div>
   <div style=”clear: both;” /> <!– tambahkan ini, supaya div kontainer
                                melingkupi semua div yang ada di dalamnya –>
</div>

Properti css nya:

.kolom {
width: 12.2%; /* pembagian 100% dengan 8 kolom, seharusnya 12.5%, */
              /* diberikan kompensasi seperlunya karena penggunaan margin,*/
              /* padding maupun border nantinya akan mempengaruhi lebar kolom */
float: left;  /* kolom yang lebih duluan akan ditempatkan di kiri, begitu seterusnya */
}

.

Berikut screenshot hasil sementara:

.

.

Untuk menambahkan baris lainnya, baris kedua, ketiga dan seterusnya, cukup ulangi div baris beserta div kolom sebanyak baris yang diperlukan. Berikut contoh setelah diatambahkan baris (baris ke 2):

<div class=“kontainer”>
   <div class=“baris”>
      <div class=“kolom”>1</div>
      <div class=“kolom”>2</div>
      <div class=“kolom”>3</div>
      <div class=“kolom”>4</div>
      <div class=“kolom”>5</div>
      <div class=“kolom”>6</div>
      <div class=“kolom”>7</div>
      <div class=“kolom”>8</div>
   </div>
   <div class=“baris”> <!– baris ke dua –>
      <div class=“kolom”>1</div>
      <div class=“kolom”>2</div>
      <div class=“kolom”>3</div>
      <div class=“kolom”>4</div>
      <div class=“kolom”>5</div>
      <div class=“kolom”>6</div>
      <div class=“kolom”>7</div>
      <div class=“kolom”>8</div>
   </div>
<div style=”clear: both;” /> <!– jangan lupa untuk selalu menempatkan tag ini
                             sebelum penutup div kontainer –>
</div>

.

Kode lengkapnya adalah:

.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1″>
<title>Contoh Table menggunakan div</title>
<style type=“text/css”>
.kontainer {
width:100%;    /* penuh layar atau fluid/flexible, gunakan ukuran px untuk fixed width */
margin:0 auto; /* opsional, supaya table berada di tengah jika dalam mode fixed,*/
               /* bertindak seperti <table align=”center”>*/
border: 1px solid #000 /* border, opsional */
}
.baris {
width: 100%    /* harus 100% supaya penuh ke area table */
}
.kolom {
width: 12.2%; /* pembagian 100% dengan 8 kolom, seharusnya 12.5%, */
              /* diberikan kompensasi seperlunya karena penggunaan margin,*/
              /* padding maupun border nantinya akan mempengaruhi lebar kolom */
float: left;  /* kolom yang lebih duluan akan ditempatkan di kiri, begitu seterusnya */
}
</style>
</head>

<body>
<div class=“kontainer”>
   <div class=“baris”>
      <div class=“kolom”>1</div>
      <div class=“kolom”>2</div>
      <div class=“kolom”>3</div>
      <div class=“kolom”>4</div>
      <div class=“kolom”>5</div>
      <div class=“kolom”>6</div>
      <div class=“kolom”>7</div>
      <div class=“kolom”>8</div>
   </div>
   <div class=“baris”> <!– baris ke dua –>
      <div class=“kolom”>1</div>
      <div class=“kolom”>2</div>
      <div class=“kolom”>3</div>
      <div class=“kolom”>4</div>
      <div class=“kolom”>5</div>
      <div class=“kolom”>6</div>
      <div class=“kolom”>7</div>
      <div class=“kolom”>8</div>
   </div>
<div style=”clear: both;” /> <!– jangan lupa untuk selalu menempatkan tag ini
                             sebelum penutup div kontainer –>
</div>
</body>
</html>

.

Sesuaikan style tambahan seperti warna background, border, text dan sabagainya. Selanjutnya, untuk pengisian data bisa menggunakan parameter-parameter php sesuai dengan kebutuhan.

.

Dalam contoh ini sengaja menggunakan atribut class bukan id dalam mengidentifikasi css properties karena sesuai dengan standard W3C bahwa id adalah harus unik untuk menamai suatu elemen dalam sebuah halaman web.

.

Demo: Klik di sini
Download: Klik di sini

.

Sementara untuk tutorial membuat layout menggunakan css lihat referensi ini:

http://kusaeni.com/blog/blueprint-css
http://bimoweb.com/layout-web-tanpa-tabel-untuk-ajax.html

Tidak Puas Dengan Posting di Atas? Coba Yang di Bawah Ini...

• Table to CSS Converter, Convert Table to DIV in Seconds

1. Langkah pertama, aktifkan Maintenance Mode, terutama kalau forumnya sudah ramai dan selalu user online. Tujuannya untuk menghindari kemungkinan-kemungkinan tertentu yang bisa terjadi ketika proses upgrade dikarenakan adanya member yang sedang melakukan posting dan sebagainya. Caranya Masuk ke Admin, pilih Server Settings. Berikan centang pada Maintenance Mode, pesan maintenance bisa diganti sesuka nya.

.

.

2. Masih di halaman Admin, klik menu Packages di sebelah kiri. Di halaman kanan akan ada peringatan bahwa forum mesti diupgrade untuk alasan keamanan dan sebagainya. klik Instal This Patch.

.

.

3. SMF akan mengecek file-file yang berubah ketika proses upgrade, pastikan semua file kondisinya Test Successfull. Jika ada yang failed, perhatikan chmod file yang bersangkutan. Setelah semua dipastikan successfull, klik Install Now dan proses upgrade akan dimulai.

.

.

4. Selesai coba refresh halaman dan lihat bagian footer, versi SMF sudah berganti dengan yang terbaru. Jangan lupa, non aktifkan lagi Maintenance Mode di Servers Settings.

.

NB:

Biasanya ini hanya berlaku untuk upgrade kecil, untuk upgrade besar-besaran misalnya dari smf 1.x.x ke 2.0 kemungkinan caranya berbeda.

Tidak Puas Dengan Posting di Atas? Coba Yang di Bawah Ini...

• Integrasi Wordpress dengan SMF (Wordpress + SMF Integration)
• Cara menginstal template oscommerce
• Wordpress Automatic upgrade, otomatis jadi Version 2.5
• Hemat bandwidth, stop image hotlink dengan htaccess
• Mengupdate Drupal, Caraku

http://blog.situskamu.com

Karena perubahan path ini biasanya theme yang dipakai akan kembali ke default theme, untuk mengembalikannya, masuk ke Dashboard -> Design, dan kembali aktifkan theme yang sebelumnya digunakan.

http://blog.situskamu.com

Selain path theme yang bisa dirubah, path admin wordpress juga bisa diganti dari wp-admin menjadi folder lainnya sesuai keinginan. Tapi aku sendiri belum mengetesnya apakah mempengaruhi kinerja wordpress, seperti plugins-plugins maupun proses upgrade nantinya. Eh, sekarang Wordpress udah versi 2.5.1 loh, untung udah pakai Wordpress automatic upgrade.

Tidak Puas Dengan Posting di Atas? Coba Yang di Bawah Ini...

• Situs Siapa yang Ganti Kulit? Ya SitusKamu!
• Integrasi Wordpress dengan SMF (Wordpress + SMF Integration)
• Apa itu blog dan bagaimana cara membuatnya?
• Wordpress watermark plugins, mesin stempel
• Wordpress Automatic upgrade, otomatis jadi Version 2.5

http://blog.situskamu.com

Jadi bagaimana caranya? Aku sendiri merasa shock ketika pertama menggunakan cms ini yang ternyata sangat-sangat merepotkan untuk sekedar mengganti template. Menurut informasi yang kudapat dari Google, satu-satunya cara untuk menginstal template adalah dengan mengganti secara keseluruhan dengan script yang sudah ada templatenya. Ya, karena templetnya sudah tergabung dengan script-scriptnya. Kalaupun ada alternatif paling modifikasi template oscommerce asli, itupun makan banyak waktu karena template / theme asli desainnya asli norak banget. Parah! Nggak jadi deh pake Oscommerce.

http://blog.situskamu.com

Sorry yah! Aku di sini sebenarnya mau curhat, bukan mau ngasih tutorial. Wakakakaka…

http://blog.situskamu.com

Bonus:

http://blog.situskamu.com

Buat yang udah terlanjur membaca posting ini, berikut ini adalah link untuk mendownload Free Oscommerce Template. Tapi sorry lagi, dari sekitar 30-an template yang tersedia hanya satu yang GRATIS! Untuk cara menginstallnya coba-coba aja sendiri, jangan lupa komentarkan caranya di sini.

http://blog.situskamu.com

Click here to download Free Oscommerce Template

Tidak Puas Dengan Posting di Atas? Coba Yang di Bawah Ini...

• Wordpress Automatic upgrade, otomatis jadi Version 2.5
• Hemat bandwidth, stop image hotlink dengan htaccess
• <1 Menit Upgrade Forum SMF
• Mengupdate Drupal, Caraku
• Spyware, Lebih Menjengkelkan Daripada Sapitri?

Karena masih baru dalam menggunakan vitur ini, aku memilih yang Click here daripada automated version. Setelah diklik, plugin ini akan memulai membackup file dan menyarankan untuk mendownload backupnya sebelum melanjutkan ke langkah selanjutnya.

Klik pada Click here untuk memulai proses backup database, kemudian klik Sart DB Backup, download backup db nya.

Klik pada CLICK HERE untuk memulai mengambil versi terakhir wordpress.

klik Let’s Go untuk mulai mentransfer wordpress terbaru dari http://wordpress.org/latest.zip

Proses transfer file wordpress selesai, klik CLICK HERE untuk mengeset situs ke maintenance mode. Sukses maitenance mode ditandai dengan pesan berikut ketika mengetikkan alamat url:

We succesfully completed the task which, Puts the site into maintenance mode. Next Task -> De-activates all the plugins Please CLICK HERE to go to the next task. ( Sorry bagian ini screenshotnya hilang, atau lupa?)

Klik CLICK HERE untuk menonaktifkan semua plugin aktif.

Tugas selanjutnya mengupgrade file instalasi, klik CLICK HERE untuk mengupgrade file-file.

*) File upgrade sukses, klik CLICK HERE TO COMPLETE THE FINAL STEP (terbuka di jendela baru) untuk menjalankan file /wp-admin/upgrade.php yang bertugas mengupgrade database.

Klik, Upgrade Wordpress.

Continue.

Login.

Kemudian kembali ke langkah *) di atas, klik pada Please CLICK HERE to go to next task untuk mengaktifkan kembali plugin-plugin.

Plugin telah kembali aktif, klik pada link CLICK HERE untuk melihat bahwa proses upgrade selesai disertai dengan laporan (log) perubahan selama proses upgrade.

Selesai! Hmm.. mudah kan, no more than just click, click, and click. Sepertinya plugin Automatic Upgrade ini jadi bawaan Wordpress pada versi-versi selanjutnya. Buktinya di versi 2.5 ini Wordpress sudah ada fitur Automatic Plugin Update, sehingga proses update plugin bisa dilakukan hanya dengan sekali klik.

Tidak Puas Dengan Posting di Atas? Coba Yang di Bawah Ini...

• Wordpress watermark plugins, mesin stempel
• Cara menginstal template oscommerce
• Hemat bandwidth, stop image hotlink dengan htaccess
• Upgrade Wordpress, Bukan Hal yang Menakutkan
• <1 Menit Upgrade Forum SMF

http://blog.situskamu.com

Mengapa bisa terjadi pencurian bandwidth? Pencurian bandwidth lebih banyak terjadi pada website yang memuat gambar-gambar. Dimana pengunjung website dengan sengaja melakukan hotlinking ke gambar-gambar tersebut untuk di tampilkan di halaman website mereka atau mempostingnya di forum. Ketika halaman website atau forum tersebut diakses, maka secara langsung ia memanggil source gambar dari website ‘korban’. Dan jika ini terjadi terus menerus dengan jumlah request page yang banyak, kemungkinan bandwidth website pemilik gambar akan terkuras habis. Selain disebut pencurian bandwidth sebenarnya hal ini termasuk pencurian gambar itu sendiri.

http://blog.situskamu.com

Hal ini bisa diatasi dengan sedikit trik yaitu penambahan baris anti image hotlink di file htaccess dengan syarat server yang bersangkutan sudah terinstal modul rewrite. Misalnya situs yang akan di tutup hotlink nya adalah situskamu.com, berikut ini adalah baris yang perlu ditambahkan di htaccess.

http://blog.situskamu.com

RewriteEngine on

RewriteCond %{HTTP_REFERER} !^http://(.+\.)?situskamu\.com/ [NC]

RewriteCond %{HTTP_REFERER} !^$

RewriteRule .*\.(jpeg|gif|bmp|png|jpg)$ /gambar/dilarangmencuri.jpe [L]

http://blog.situskamu.com

• Baris pertama untuk mengaktifkan mod rewrite.
• Baris kedua menyatakan hanya domain situskamu.com yang diperbolehkan hotlink.
• Baris ketiga menyatakan diperbolehkannya akses langsung ke image. (klik kanan, view image kalau di browser Firefox).
• Baris keempat, parameter ekstensi gambar apa saja yang tidak boleh di hotlink, dan menentukan lokasi gambar penggantinya.
  Jangan lupa untuk menyediakan file gambar pengganti misalnya ditempatkan dalam path /gambar/dilarangmencuri.jpe. File pengganti memakai ekstensi .jpe supaya
  tidak ikut terblokir, untuk membuatnya cukup rename file berektensi jpg menjadi jpe.

http://blog.situskamu.com

Untuk mencegah hotlink dari situs-situs tertentu saja, misalnya blogspot atau wordpress (karena kebanyakan mereka melakukan hotlink ) dan memperbolehkan situs lainnya untuk melakukan hotlink, kode htaccess-nya adalah sebagai berikut:

http://blog.situskamu.com

RewriteEngine On

RewriteCond %{HTTP_REFERER} ^http://(.+\.)?wordpress\.com/ [NC,OR]

RewriteCond %{HTTP_REFERER} ^http://(.+\.)?blogspot\.com/ [NC,OR]

RewriteCond %{HTTP_REFERER} ^http://(.+\.)?blogsome\.com/ [NC]

RewriteRule .*\.(jpeg|gif|bmp|png|jpg)$ /gambar/dilarangmencuri.jpe [L]

http://blog.situskamu.com

Hal ini sekaligus menjawab kenapa gambar yang diupload di imageshack, akan berubah menjadi kodok ketika diposting di forum kaskus.us. Jelas saja, kaskus kan trafiknya nauzubillah.

http://blog.situskamu.com

Catatan:
- Hal ini bisa juga dilakukan dari cPanel dari menu Hotlink Protection
- Anehnya, salah seorang temanku malah menyebarkan gambarnya dimana-mana untuk menghabiskan bandwidth nya lho. Nggak akan habis karena unlimited, katanya

Tidak Puas Dengan Posting di Atas? Coba Yang di Bawah Ini...

• Cara menginstal template oscommerce
• Wordpress Automatic upgrade, otomatis jadi Version 2.5
• <1 Menit Upgrade Forum SMF
• Mengupdate Drupal, Caraku
• Spyware, Lebih Menjengkelkan Daripada Sapitri?

Hal yang sama juga terjadi di komunitas maya terbesar kaskus.us dimana April Mop ini juga ‘dirayakan’ setiap tahunnya dengan membuat thread berisi berita-berita bohongan (harap dibedakan dengan berita bohong). Mimin (sebutan untuk Admin kaskus) sendiri sepertinya memberi lampu hijau yaitu dengan membiarkan kebebasan seluas-luasnya kepada kaskuser untuk berbohong ria setiap tanggal 1 April. Bahkan tahun lalu (2007) semua id kaskuser diberikan status tambahan Kaskus Donamop, tidak lain adalah Kaskus Donator bohongan. Namun di tahun 2008 ini tidak ada lagi lelucon dari sang Mimin, barangkali karena terlalu sibuk menentramkan warganya yang banyak memprotes atas ditutupnya akses ke forum 17+ atas dikeluarkannya UU-ITE oleh pemerintah pada tanggal 25 Maret lalu.

Aku sendiri ikut berpartisipasi di forum tersebut dengan juga membuat thread berita bohongan alias tipuan, at least untuk meminimalisir kekesalan setelah kena tipu. Ya, karena memang untuk mengindari kena tipu di sini bisa dibilang sulit, coba saja perhatikan screenshot topik-topik berikut:

Hmm… perhatikan judul-judul topik yang kuberi lingkaran merah, sangat memancing orang lain untuk membukanya bukan? Nggak tahunya isinya semuanya bohongan, wajar saja kalau yang sudah terlanjur membuka nya akan memaki dirinya sendiri sekaligus memaki si TS (Topic Starter, pembuat topic) karena merasa ditipu. Tapi yang serunya lagi tidak ada satupun orang yang marah di sini, tidak ada lempar-lemparan bata merah (sebutan untuk pemberian bad reputation karena tidak senang atas postingan orang lain) sepertinya mereka sudah sama-sama maklum kalau nggak mau jadi korban tipuan ya harus ikut jadi penipunya. Hehehe.. Tapi ingat, hal ini tidak boleh dibawa-bawa ke dunia nyata apalagi setelah tanggal 1 April, karena bisa-bisa kamu kena lempar bata betulan.

Untuk informasi mengenai apa itu April Mop, sejarahnya, siapa-siapa yang merayakannya dan dampak-dampak apa saja yang terjadi akibat April Mop, silahkan klik di sini.

Tidak Puas Dengan Posting di Atas? Coba Yang di Bawah Ini...

• Upgrade Wordpress, Bukan Hal yang Menakutkan
• Situs Siapa yang Ganti Kulit? Ya SitusKamu!
• Pak Soeharto, Mantan Presiden Indonesia Meninggal
• Spyware, Lebih Menjengkelkan Daripada Sapitri?
• Waktu Itu Tahun 2007

Selepas itu mendownload Drupal terbaru dan mengextract ke folder Drupal-5.7
Hapus semua file yang telah dibackup, kecuali: .htaccess, sites, themes, files ( jika ada). Copykan isi folder Drupal-5.7 kecuali .htaccess, sites, dan themes ke public_html.

Sepertinya sudah beres, oops.. masih ada yang ketinggalan, yaitu modules. Ya, beberapa modul tambahan yang pernah di instal di Drupal sebelumnya juga perlu di kembalikan. Caranya, kembali ke folder backup lama, kemudian masuk ke folder modules, pilihlah modul yang bukan modul standard Drupal dan kemudian copykan ke folder modules di Drupal yang baru di public_html.

Kalau sudah siap, sekarang waktunya eksekusi, hahaha. macam betol aja…
Buka tab/window baru dan eksekusi file update.php, e.g. http://situskamu.com/update.php

Oops.. Access Denied, karena belum login sebagai admin, kalau begitu login dulu deh.

Kalau males login juga boleh, tapi mesti mengedit file update.php

// Enforce access checking?
$access_check = TRUE;

Diganti dengan:

// Enforce access checking?
$access_check = FALSE;

Tapi jangan lupa nanti dibalikin lagi ke TRUE setelah selesai.

Setelah tampilan seperti gambar di atas, klik pada run the database upgrade script untuk memulai proses update.

Klik Update

Selesai.

Tidak Puas Dengan Posting di Atas? Coba Yang di Bawah Ini...

• <1 Menit Upgrade Forum SMF
• Cara menginstal template oscommerce
• Wordpress Automatic upgrade, otomatis jadi Version 2.5
• Hemat bandwidth, stop image hotlink dengan htaccess
• Membuat Custom Block Region di Drupal