Weblog of Novia Agustiar Rahmat » Web http://opik.unitiga.com Selalu rindu akan baris-baris code Tue, 31 May 2011 05:05:49 +0000 en hourly 1 Membuat Tulisan Diatas File Gambar Menggunakan PHP http://opik.unitiga.com/2009/02/05/membuat-tulisan-diatas-file-gambar-menggunakan-php/ http://opik.unitiga.com/2009/02/05/membuat-tulisan-diatas-file-gambar-menggunakan-php/#comments Wed, 04 Feb 2009 21:17:54 +0000 opik http://opik.unitiga.com/?p=243 Apakah anda sering merasa tidak nyaman karena file-file gambar yang anda publikasikan di website sering diambil dan digunakan oleh orang lain tanpa seijin anda sebagai pemilik dari file tersebut? Kebetulan ada beberapa teman yang pernah mengeluhkan hal tersebut kepada saya, terutama teman-teman yang mempunyai bisnis toko online.

Saya juga paling ndak “sreg” kalau gambar-gambar di website saya dipakai oleh orang lain tanpa mencantumkan sumber aslinya.

Itu kan sudah resiko mbah…
Mempublikasikan file di website berarti boleh diambil dan dipakai oleh siapapun.

Untuk itu saya iseng-iseng membuat sebuah class php kecil-kecilan yang berfungsi untuk membuat text on the fly pada file gambar yang kita publikasikan. Nantinya pada setiap file gambar yang dipublikasikan secara otomatis akan muncul sebuah tulisan diatasnya.

Contoh file gambar yang telah disisipkan tulisan

Contoh file gambar yang telah disisipkan tulisan

Cara penggunaan class php tersebut :
<?php
// Memanggil file class txtonimg
include_once ("txtonimg.class.php");
// Deklarasikan class
$txtonimg = new txtonimg;
// Buat aturan, setiap variabel dengan nama image, secara otomatis akan digenerate teks/tulisan diatasnya
if (isset($_GET['image'])) {
$txtonimg->txtoverlay($_GET['image']);
}
// Contoh penggunaan - ( ganti nama_file.jpg menjadi nama file gambar anda )
echo ("<img src=\"?image=nama_file.jpg\" border=\"0\" alt=\"\" />");
?>

Source code selengkapnya dapat di unduh disini.

]]> http://opik.unitiga.com/2009/02/05/membuat-tulisan-diatas-file-gambar-menggunakan-php/feed/ 7 Membuat Tulisan dengan Efek Shadow Menggunakan CSS http://opik.unitiga.com/2008/04/28/membuat-tulisan-dengan-efek-shadow-menggunakan-css/ http://opik.unitiga.com/2008/04/28/membuat-tulisan-dengan-efek-shadow-menggunakan-css/#comments Mon, 28 Apr 2008 15:58:32 +0000 opik http://opik.unitiga.com/2008/04/28/membuat-tulisan-dengan-efek-shadow-menggunakan-css/ Dengan memanfaatkan kemampuan Cascading Style Sheets (CSS) yang sangat powerfull kita dapat membuat tampilan website menjadi sangat indah. Salah satu kemampuan CSS yang akan dibahas disini adalah kemampuan membuat tulisan dengan efek shadow (tulisan dengan bayangan). Berikut script lengkapnya :

<html>
<head>
<title>Teks Dengan Efek Shadow</title>
<style type="text/css">
#teks_shadow:before { content: 'Teks Dengan Efek Shadow'; }
.teks {
font-size: 3em;
font-family: tahoma, verdana, arial;
color: #d20000;
text-align: left;
font-weight: bold;
}
.shadow {
/* untuk tampilan pada browser internet explorer */
height: 1em;
filter: shadow(color=#666, direction=135, strength=5);
line-height: 2em;
white-space: normal;
}
.shadow:before {
display: block;
margin: 0 0 -2.05em 0.05em;
padding: 0;
color: #666;
}
</style>
</head>
<body>
<div style="height:100px;" class="shadow teks" id="teks_shadow">Teks Dengan Efek Shadow</div>
</body>
</html>

Akan menghasilkan tulisan seperti berikut ini,

Tulisan Dengan Efek Shadow

]]> http://opik.unitiga.com/2008/04/28/membuat-tulisan-dengan-efek-shadow-menggunakan-css/feed/ 4 Membuat Navigasi Interaktif Menggunakan CSS http://opik.unitiga.com/2008/01/05/membuat-navigasi-interaktif-menggunakan-css/ http://opik.unitiga.com/2008/01/05/membuat-navigasi-interaktif-menggunakan-css/#comments Sat, 05 Jan 2008 00:53:45 +0000 opik http://opik.unitiga.com/2008/01/05/membuat-navigasi-interaktif-menggunakan-css/ Untuk membuat sebuah navigasi/menu yang interaktif tidak melulu harus dilakukan dengan animasi flash atau dengan menggunakan kombinasi 2 image yang berbeda.
Dengan memanfaatkan kemampuan CSS (Cascading Style Sheets) yang maha dahsyat, kita dapat membuat sebuah navigasi yang cantik.

Berikut contoh sederhana mempercantik navigasi menggunakan CSS.

<html>
<head>
<title>Tes Menu</title>
<style type="text/css">
#menu {
padding: 0px;
background: #000;
float: left;
margin: 0px;
width: 550px;
}
#menu ul {
padding: 0px;
margin: 0px;
}
#menu ul li {
padding: 0px;
display: block;
float: left;
margin: 0px;
font: 11px/30px Tahoma;
list-style-type: none;
text-align: center;
}
#menu li a {
display: block;
width: 110px;
color: #fff;
text-decoration: none;
border-bottom-style: double
}
#menu LI#active {
background: #0033cc;
color: #000;
}
#menu LI#active A {
background: #0033cc;
color: #000;
}
#menu A:hover {
background: #99cc00;
color: #fff;
border-bottom-style: none;
}
</style>
</head>
<body>
<div id=menu>
<ul>
<li><a href="#">Menu Satu</a></li>
<li><a href="#">Menu Dua</a></li>
<li><a href="#">Menu Tiga</a></li>
<li><a href="#">Menu Empat</a></li>
<li><a href="#">Menu Lima</a></li>
</ul>
</div>
</body>
</html>

Selamat mencoba!
PS: Banyak sekali situs yang menyediakan tutorial gratis tentang css. Coba googling saja dengan kata kunci “CSS Tutorial”.

]]> http://opik.unitiga.com/2008/01/05/membuat-navigasi-interaktif-menggunakan-css/feed/ 0 Menempelkan Aplikasi ‘Google Talk’ Pada Website http://opik.unitiga.com/2007/12/29/menempelkan-aplikasi-google-talk-pada-website/ http://opik.unitiga.com/2007/12/29/menempelkan-aplikasi-google-talk-pada-website/#comments Fri, 28 Dec 2007 20:50:18 +0000 opik http://opik.unitiga.com/2007/12/29/chat-gtalk/ Dear gugel mania…

Anda ingin memiliki aplikasi Google talk ‘berjalan’ yang dapat digunakan setiap saat dimanapun anda berada (tentunya harus ada koneksi internet), dan tanpa perlu proses instalasi aplikasi? Tempelkan saja aplikasi Google talk di dalam website anda.

Berikut source code dan penjelasannya :

<script src="http://gmodules.com/ig/ifr?url=http://www.google.com/
ig/modules/googletalk.xml&synd=open&w=320&h=451&
title=Google+Talk+Opik<=en&country=US&
border=%23ffffff%7C3px%2C1px+solid+%23999999&
output=js"></script>

Keterangan :

  • Google+Talk+Opik, adalah judul aplikasi Google talk anda. Dapat anda rubah sesuai selera
  • %23ffffff%7C3px%2C1px+solid+%23999999, adalah jenis & warna bingkai (border) aplikasi. Dapat dirubah sesuai selera.

Ada beberapa jenis bingkai (border) yang dapat digunakan :

Google Talk Border = %23ffffff%7C3px%2C1px+solid+%23999999

Google Talk Border = http%3A%2F%2Fgmodules.com%2Fig%2Fimages%2F

Google Talk Border = %23ffffff%7C1px%2C1px+solid+black%7C1px%2C1px+
solid+black%7C0px%2C1px+black

Google Talk Border = %23ffffff%7C0px%2C1px+solid+%2382CAFA%7C0px
%2C2px+solid+%23BDEDFF%7C0px%2C3px+solid+%23E0FFFF

Google Talk Border = %23ffffff%7C0px%2C1px+solid+%23595959%7C0px
%2C1px+solid+%23797979%7C0px%2C2px+solid+%23898989

Google Talk Border = %23ffffff%7C0px%2C1px+solid+%2399BB66%7C0px
%2C2px+solid+%23AACC66%7C0px%2C2px+solid+%23BBDD66

Google Talk Border = %23ffffff%7C0px%2C1px+solid+%23993333%7C0px
%2C1px+solid+%23bb5555%7C0px%2C1px+solid+%23DD7777
%7C0px%2C2px+solid+%23EE8888

Google Talk Border = %23ffffff%7C0px%2C1px+solid+%23004488%7C0px
%2C1px+solid+%23005599%7C0px%2C1px+solid+%230077BB
%7C0px%2C1px+solid+%230088CC

Google Talk Border = %23ffffff%7C1px%2C1px+solid+%2366ccff%7C1px
%2C2px+solid+%2366ccff

Google Talk Border = %23ffffff%7C0px%2C1px+solid+%23998899%7C0px
%2C1px+solid+%23aa99aa%7C0px%2C2px+solid+%23bbaabb
%7C0px%2C2px+solid+%23ccbbcc

Google Talk Border = %23ffffff%7C0px%2C1px+solid+%23ffdd00%7C0px
%2C2px+solid+%23ffdd33%7C0px%2C2px+solid+%23ffee99

Google Talk Border = %23ffffff%7C0px%2C1px+solid+%23ff9977%7C0px
%2C1px+solid+%23ffddcc%7C0px%2C1px+solid+%23ff9977
%7C0px%2C1px+solid+%23ffddcc%7C0px%2C1px+solid+%23ff9977

Hasilnya kurang lebih seperti ini,

Google Talk

]]> http://opik.unitiga.com/2007/12/29/menempelkan-aplikasi-google-talk-pada-website/feed/ 2