msgbartop
komunitas para newbie
msgbarbottom

09 May 09 Image Gallery dengan CMotion Library

Membuat Image Gallery tidak hanya dapat dibuat dengan menggunakan flash, namun dapat pula dibuat dengan mengunakan CMotion library yang dibuat oleh Dynamic Drive DHTML code library (www.dynamicdrive.com).

Image Gallery yang akan kita buat kali ini adalah Image Gallery yang bebas dari penggunaan database dalam artian script yang otomatis akan mendeteksi image pada folder yang telah ditentukan. Jadi kita hanya tinggal meng-upload image saja dan script otomatis akan menampilkan images tersebut.

Komunitas Kami | Image Gallery dengan CMotion Library

Komunitas Kami | Image Gallery dengan CMotion Library

Script ini kita modifikasi sehingga Tampilan Image Gallery ini terdiri dari gambar besar disebelah kiri dan beberapa thumbnail disebelah kanan yang dapat bergerak naik turun mengikuti banyaknya gambar. Jika thumbnail diklik, maka akan tampil disebelah kirinya.

Image Gallery ini terdiri dari 1 File induk (index.php), 1 File CSS (style.css) dan 2 File Javascript (motiongallery.js dan global.js).

Langkah-langkah :

1. File Induk (Index.php)

<html>
<head>
<title>Komunitas Kami | Image Gallery</title>
<link href=”style.css” rel=”stylesheet” type=”text/css” />
</script>
<script language=”JavaScript” type=”text/javascript” src=”global.js”></script>
<script type=”text/javascript” src=”motiongallery.js”></script>
</head>
<body>
<br />
<!– bid pfotos –>
<div class=”content”>
<div class=”job”>
<img src=”images/GLSS_90108_0370.jpg” name=”big” id=”big”>
</div>
<!– end big photos –>
<div class=”jobthumb”>
<div style=”overflow:hidden;”>
<div id=”motioncontainer” style=”width:166px; height:533px; overflow:hidden; position: relative;”>
<div id=”motiongallery” style=”position:absolute; left:0; top:0;”>

<!– detect image auto –>
<?php
$dir = ‘images/’;
$scan = scandir($dir);
for ($i=0; $i<count($scan); $i++) {
if ($scan[$i] != ‘.’ && $scan[$i] != ‘..’) {
echo ‘
<a href=”#”><img src=”‘. $dir . $scan[$i] . ‘” height=”111″ width=”166″ border=”0″ onclick=”MM_swapImage(\’big\’,\’\',\”. $dir . $scan[$i] . ‘\’,1)” /></a>’; } } ?>

<!– end detect image –>
</div></div></div></div></div>
<div id=”copi”>copyright © 2009 Komunitas kami</div>
</div>
</body>
</html>

2. File Style (Style.css)

body { font-family: Verdana, Arial, Helvetica, sans-serif;color:#484848;margin: 0px;padding: 0px; font-size:100%; background-color:#000000;}
h1,h2,h3 { margin-top:0; display:inline; font-weight: normal; font-size:100% }
p {margin:6px 2px 2px 2px;}
/*links*/
a { color:#33738E; text-decoration:none; }
a.current {color:#ffffff; text-decoration:none; }
a:hover {color:#ffffff; text-decoration:none;}
a:visited:hover {color:#ffffff; text-decoration:none;}
.skype a:hover { text-decoration:none;}
/*ids*/
#wrap {width:970px;margin-right:auto;margin-left:auto; margin-top:20px; padding:0; }
body#home #wrap {width:800px;margin-right:auto;margin-left:auto; margin-top:20px; padding:0; }
#headerBOX { border-bottom: dotted #33738E 1px; padding: 0 0 4px 0; }
#header { font-size:16pt; color:#cccccc; font-weight:normal!important; clear:none; display:inline; text-transform:;}
#header a { color:#CCCCCC; text-decoration:none;}
#header a:hover { color:#cccccc; text-decoration:none;}
#menu { display: block; text-transform:uppercase; font-size:9.5pt; text-align:right; color:#33738E;float:right;/* padding:3px 0 6px 0;*/ clear:both; padding: 1px 0 3px 0; }
#copi { clear:both; font-size:8pt; border-top: #33738E dotted 1px; display:block; text-align:right; padding-top:2px; margin-bottom:14px;}
#title { font-size:14pt; line-height:15pt; color:#ff0000; clear:none; margin:8px 0 2px 0; }
#jobtitle { font-size:14pt; line-height:15pt; color:#ff0000; clear:none; margin:8px 0 2px 0; padding:0 0 2px 0; border-bottom: dotted #33738E 1px; }
#BOXcontatti {padding:40px; float:none; clear:both; display:block; text-align:right;}
#contatti {height:200px;}
#hidden { display:none;}
/*mud style*/
#imgs-frame {width: 800px;height: 533px;background-color: black;clear:both; z-index:1;}
#controller {border-bottom: dotted #33738E 1px; padding: 8px 0 8px 20px; text-align:right;}
ul.hidden {display:none;}
.inline {display:inline; font-size:9.5pt;}
/* vertical gallery style*/
#motioncontainer a img {border-left: 3px dotted #000000;}
#motioncontainer a:hover img{ border-left: 3px solid #33738E;}
#motioncontainer a:hover{color:#FFFF00; /* Dummy definition to overcome IE bug */}
/*#statusdiv {position: absolute; padding:2px; left:-300px; background-color:lightyellow; border: 1px dotted gray;visibility: hidden;}*/
/*class*/
.big_header { font-size:30pt!important; padding-bottom:20px; }
img.logo {margin-bottom:-17px; }
.paragrafo { font-size:11pt; padding: 4px 0 8px 0; }
.paragrafoCORTO { font-size:9pt; padding: 4px 0 8px 0; padding-right:10px; }
.paragrafoR { font-size:9.5pt; padding: 4px 0 8px 0; width:298px; float:right;}
.miniaturaTXT { font-size:9.5pt; line-height:11pt;}
.miniaturaTXT p{ margin: 0 0 0 10px;}
.miniatura { float:left; clear:left; }
div.miniatura img{ padding: 0 10px 0 0;}
div.miniatura img.lastIMG{ padding: 0 10px 0 0;}
div.striscia { height:108px; display:block; float:none; clear:both; padding: 4px 0 0 0; border-top: dotted #33738E 1px;}
div.job {padding: 0 0 4px 0; float:left; margin:0;}
div.jobthumb {width:140px; display:inline; }
.white { color:#FFFFFF; font-size:9pt;}
div.jobthumb img{ margin: 0 0 4px 0;}
div.miniaturaTXT p a strong { font-style:normal!important; color:#FFFFFF;}
.whitetext {color:#FFFFFF;}
span.bullet { font-size:9.5pt; color:#666666; }
.content { clear:both;}
.bio { margin:80px 90px 80px 240px; padding:0 0 0 0; display:block; color:#999999; font-size:10pt; text-align:justify;}
.contacts { margin:80px 100px 80px 240px; padding:0 0 0 0; display:block; color:#999999; font-size:10pt;}
.spacer10 { clear:both; height:10px;}
.skypeicons { padding:0 0 0 60px;}
/*page specific*/
h1 { display:none;}
/*chrome ddmenu*/
.chromestyle{ width: 100%; font-weight: normal; font-weight:normal; font-size:9.5pt; font-family: Verdana, Arial, Helvetica, sans-serif; text-transform:uppercase; padding: 1px 0 4px 0;}
.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/content: “.”; display: block; height: 0; clear: both; visibility: hidden;}
.chromestyle ul{ width: 100%; padding: 4px 0; margin: 0; text-align: right; }
.chromestyle ul li{display: inline;}
.chromestyle ul li a { padding:0 4px 0 7px; margin: 0; text-decoration: none;}
.dropmenudiv { position:absolute; top: 0; font-weight:normal; font-size:9.5pt; font-family: Verdana, Arial, Helvetica, sans-serif; text-transform:uppercase; line-height:18px; border-bottom-width: 0; z-index:100; background-color:#000000; width: auto; visibility: hidden; padding: 0 5px 2px 7px; filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/}
.dropmenudiv a{ width: auto; display: block; text-indent: 3px; padding: 2px 0; text-decoration: none; font-weight:normal; color: #33738E;}
* html .dropmenudiv a{ /*IE only hack*/ width: 100%;}
.dropmenudiv a:hover{ color: #ffffff;}
/*form*/
fieldset { border:none; margin: 0; padding:10px 0 0 0;}
textarea { background-color:#484848; border: 1px solid #999999; color:#ffffff; font-size:11pt; margin: 4px 0 8px 0;} input.textfield, ol.forms li input#emailfrom { background-color:#484848; border: 1px solid #999999; color:#ffffff; font-size:11pt; margin: 4px 0 8px 0;}
.alert, .error { color:#FF0000; font-size:10pt; padding:0 0 10px 0;} ol.forms { list-style:none; margin:0; padding:0;}
ol.forms li {clear: left; float:none; padding: 4px 0 0 0;} ol.forms .error { display: block; }
ol.forms label { cursor: pointer; display: block;} ol.forms label {color:#999999; font-size:10pt;}

3. File Library (motiongallery.js)

/***********************************************
* CMotion Image Gallery II- ? Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for source code
* Modified by jscheuer1 for vertical orientation, at http://www.dynamicDrive.com/forums
***********************************************/
var restarea=6 //1) width of the “neutral” area in the center of the gallery in px
var maxspeed=7 //2) top scroll speed in pixels. Script auto creates a range from 0 to top speed.
var endofgallerymsg=”" //3) message to show at end of gallery. Enter “” to disable message.
function enlargeimage(path, optWidth, optHeight){ //function to enlarge image. Change as desired.
var actualWidth=typeof optWidth!=”undefined” ? optWidth : “600px” //set 600px to default width
var actualHeight=typeof optHeight!=”undefined” ? optHeight : “500px” //set 500px to  default height
var winattributes=”width=”+actualWidth+”,height=”+actualHeight+”,resizable=yes”
window.open(path,”", winattributes)
}
////NO NEED TO EDIT BELOW THIS LINE////////////
var iedom=document.all||document.getElementById
var scrollspeed=0
var movestate=”"
var actualheight=”
var cross_scroll
var loadedyes=0
function ietruebody(){
return (document.compatMode && document.compatMode!=”BackCompat”)? document.documentElement : document.body
}
function creatediv(){
statusdiv=document.createElement(“div”)
statusdiv.setAttribute(“id”,”statusdiv”)
document.body.appendChild(statusdiv)
statusdiv=document.getElementById(“statusdiv”)
statusdiv.innerHTML=endofgallerymsg
}
function positiondiv(){
menuwidth=parseInt(crossmain.offsetWidth)
mainobjoffsetW=getposOffset(crossmain, “left”)
statusdiv.style.left=mainobjoffsetW+(menuwidth/2)-(statusdiv.offsetWidth/2)+”px”
statusdiv.style.top=menu_height+mainobjoffset+10+”px”
}
function showhidediv(what){
if (endofgallerymsg!=”")
statusdiv.style.visibility=what
}
function getposOffset(what, offsettype){
var totaloffset=(offsettype==”left”)? what.offsetLeft: what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype==”left”)? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}
function moveup(){
if (loadedyes){
movestate=”up”
if (iedom&&parseInt(cross_scroll.style.top)>(menu_height-actualheight)){
cross_scroll.style.top=parseInt(cross_scroll.style.top)-scrollspeed+”px”
showhidediv(“hidden”)
}
else
showhidediv(“visible”)
}
uptime=setTimeout(“moveup()”,10)
}
function movedown(){
if (loadedyes){
movestate=”down”
if (iedom&&parseInt(cross_scroll.style.top)<0){
cross_scroll.style.top=parseInt(cross_scroll.style.top)+scrollspeed+”px”
showhidediv(“hidden”)
}
else
showhidediv(“visible”)
}
downtime=setTimeout(“movedown()”,10)
}
function motionengine(e){
var dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft;
var dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop;
var curposy=window.event? event.clientY : e.clientY? e.clientY: “”
curposy-=mainobjoffset-dsocy
var leftbound=(menu_height-restarea)/2
var rightbound=(menu_height+restarea)/2
if (curposy>rightbound){
scrollspeed=(curposy-rightbound)/((menu_height-restarea)/2) * maxspeed
if (window.downtime) clearTimeout(downtime)
if (movestate!=”up”) moveup()
}
else if (curposy<leftbound){
scrollspeed=(leftbound-curposy)/((menu_height-restarea)/2) * maxspeed
if (window.uptime) clearTimeout(uptime)
if (movestate!=”down”) movedown()
}
else
scrollspeed=0
}
function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}
function stopmotion(e){
if ((window.event&&!crossmain.contains(event.toElement)) || (e && e.currentTarget && e.currentTarget!= e.relatedTarget && !contains_ns6(e.currentTarget, e.relatedTarget))){
if (window.downtime) clearTimeout(downtime)
if (window.uptime) clearTimeout(uptime)
movestate=”"
}
}
function fillup(){
if (iedom){
crossmain=document.getElementById? document.getElementById(“motioncontainer”) : document.all.motioncontainer
menu_height=parseInt(crossmain.style.height)
mainobjoffset=getposOffset(crossmain, “top”)
cross_scroll=document.getElementById? document.getElementById(“motiongallery”) : document.all.motiongallery
actualheight=cross_scroll.offsetHeight
crossmain.onmousemove=function(e){
motionengine(e)
}
crossmain.onmouseout=function(e){
stopmotion(e)
showhidediv(“hidden”)
}
}
if (window.opera){
cross_scroll.style.top=menu_height-actualheight+’px’
setTimeout(‘cross_scroll.style.top=0′, 10)
}
loadedyes=1
if (endofgallerymsg!=”"){
creatediv()
positiondiv()
}
}
window.onload=fillup

4. File Javascript yang dimodifikasi (global.js)

// JavaScript Document
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf(“#”)!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x;  if(!d) d=document; if((p=n.indexOf(“?”))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

5. Selanjutnya anda tinggal membuat folder dengan nama “images” dan file gambar di upload difolder tersebut.

6. Selesai

Download source :

- Source file index.php – here

- Source file style.css – here

- Source file motiongallery.js – here

- Source file global.js – here

- Manual – here

04 May 09 Teknik Glossy

PR lama yang tertunda, pengen belajar design. Setelah wara – wiri eh malah ketemu tutorial buatan anak dalam negeri, klop lah sudah, gak harus nerjemahin. Berikut tutorial dari www.ilmuwebsite.com

Ya…. selamat pagi menjelang siang, selamat siang menjelang sore, selamat sore menjelang malam…. ZzzZzZzzzz…. :D Banyaknya komentar yang masuk membuat penulis merasa tertantang untuk mencoba kembali membawakan satu buah tutorial coreldraw dengan teknik shaping yang sedikit berbeda dari tutorial sebelumnya. Dalam tutorial kali ini penulis mencoba beberapa teknik pewarnaan untuk  menghasilkan sebuah box yang terlihat seperti gelas dalam sebuah ruangan yang menyerupai kaca. Mohon maaf jika terdengar berlebihan. Padahal hasil akhirnya tidak seperti itu… :D . Dan tentunya penulis menyadari teknik yang akan penulis bawakan masih memiliki banyak sekali kekurangan. Sangat membutuhkan campur tangan anda dalam proses penyempurnaan, sehingga objek yang dibuat nantinya benar-benar terlihat seperti glossy box dalam glossy environment. Apapun istilahnya yang jelas intro tutorial kali ini di cukupkan saja. Penulis akan coba langsung ke inti pembahasan.

Seperti biasa siapkan terlebih dahulu sebuah lembar kerja yang kosong.

Untuk memudahkan proses pekerjaan, samakan konfigurasi lembar kerja, silahkan ubah nilai Units, dari inches menjadi pixels.

Dengan rectangle tools,
atau anda bisa menekan tombol F6 di keyboard untuk membuat objek persegi panjang dengan ukuran width 774px dan height-nya 281 px

Kemudian dengan shape tools  lekukan di ujung-ujung persegi tersebut dengan mengklik dan drag kotak hitam kecil.

sehingga hasil menjadi seperti ini :

Selanjutnya, dengan Interactive Fill Tools  atau dengan menekan tombol G di keyboard, berikan pewarnaan gradien kepada objek yang tadi. Menjadi seperti ini …

Ganti warna defaultnya, dalam keadaan objek terpilih lakukan double klik pada fill color yang terletak di kanan bawah aplikasi coreldraw.

Kemudian akan muncul sebuah windows baru, Fountain Fill :

kemudian ganti color blend-nya dari Two Color menjadi Custom

Ganti warna hitamnya menjadi warna biru, caranya klik kotak putih kecil di bagian kiri window fountain fill, sampai warnanya berubah menjadi kotak hitam kecil kemudian klik button Others. Setelah itu akan muncul windows kecil baru, yaitu Select Color.

ganti Nilai model dari RGB menjadi CMYK, kemudian isi nilai :

C dengan 61
M dengan 61
Y dengan 0
K dengan 37

kemudian klik button Ok.

Isi Fountain color secara otomatis berubah.

Lakukan ulang untuk warna yang satunya lagi, klik kotak putih di kanan fountain fill, kemudian sampai warna kotak kecil tersebut menjadi putih, kemudian klik Others. Akan muncul satu windows select color, ganti CMYK dengan RGB, kemudian isi :

R dengan 191
G dengan 255
B dengan 255

kemudian klik Ok. Fountain color pun menjadi berubah :

Langkah selanjutnya adalah double klik di antara 2 warna tadi.
Double klik di bagian yang telah penulis beri tanda seperti gambar di bawah …

sehingga hasilnya ada 1 segitiga kecil berwarna hitam di bagian yang di klik tadi

Klik kembali segitiga kecil tersebut, kemudian klik button others ganti warnanya isi :
C dengan 65
M dengan 43
Y dengan 0
K dengan 27

selesai, klik ok. Kemudian klik ok kembali untuk keluar dari windows Fountain Fill.

Hasilnya …

Dengan Rectangle Tools ( F6) buat kembali satu objek persegi di atas persegi yang tadi …

Kemudian convert to curves, bisa dengan menekan ctrl + Q di keyboard, atau klik kanan objek yang baru di buat kemudian convert to curves. Kemudian engan shape tools ( F10) lekuk-lekukan objek tersebut, hingga menjadi seperti ini :

Kemudian, pilih kembali kedua objek tersebut, pertama klik terlebih dahulu objek yang baru di lekukan tersebut, setelah itu pilih objek yang telah di beri warna.
Dalam keadaan kedua objek terpilih, kemudian klik icon intersect ada di toolbar atas.

Delete objek yang di lekukan tadi, sisakan objek hasil intersect. Hasilnya seperti ini :

Beri warna putih objek hasil intersect tersebut, kemudian dengan Interactive Transparency tool, beri efek transparan objek tersebut sehingga menjadi seperti ini …

Selanjutnya dengan Pick Tool

, buat objek yang baru saja di beri efek transpan tersebut tidak terlalu menempel di ujung-ujung objek dibawahnya, buat menjadi seperti ini …

Buat duplikat dengan cara copy paste objek yang telah di beri transparansi tersebut, kemudian beri warna hitam,

kemudian lakukan mirror pada objek yang di beri warna hitam transparansi tersebut

letakkan di atas objek yang di beri warna gradien biru.

Pilih objek yang memiliki transparasi hitam tersebut, kemudian klik menu Bitmaps | Convert to Bitmap,

isi Resolution dengan 600 dpi. Nilai 600 dpi di berikan agar pemberian efek kepada bitmap menjadi sangat halus.  Klik ok.

Masih dalam objek tersebut terpilih, masuk kembali menu Bitmap | Blur | Gaussian Blur, isi radiusnya dengan 2.2 pixels


Mohon maaf, artikel di percepat .. :D
Buat 2 buah objek baru, sehingga objek keseluruhan akan seperti ini …

Buat satu buah persegi di atas, objek button cari …

Convert to curves ( ctrl + Q ) Lekukan objek baru tersebut, hingga menjadi seperti ini

Pilih objek yang sudah di lekukan tersebut kemudian pilih objek yang di bawahnya, lakukan intersect kepada kedua objek tersebut, dengan mengklik icon intersect di toolbar atas.

Beri warna putih …

kemudian beri transparansi … dan dengan pick tool kecilkan objek tersebut … hasilnya seperti ini …

kemudian duplikasi objek yang tadi, kemudian lakukan mirror, dan ubah transparansinya, buat menjadi seperti ini …

Seleksi semua objek kemudian lakukan group dengan menekan ctrl + G di keyboard, atau klik kanan Group.

Duplikasi objek yang di group tersebut, kemudian lakukan mirroring hingga hasilnya seperti ini ..

Pilih objek yang di bawahnya … kemudian masuk menu Bitmaps | Convert to Bitmap

Kemudian masuk kembali menu Bitmap | Blur | Gaussian Blur, beri nilai 4.0 untuk Resolution-nya

Lakukan transpansi untuk objek yang baru saja di beri efek blur, sehingga hasilnya menjadi seperti ini :

Buat kembali sebuah objek baru, atau dapat mengambil dari objek persegi yang sebelumnya ukurannya adalah :
width : 774 px
height : 281 px,

buat menjadi seperti ini …

Pilih persegi berwarna hitam tersebut, kemudian klik menu Bitmaps | Convert to Bitmap … Klik ok. Masih dalam keadaan objek hitam terpilih, masuk kembali menu Bitmap | Blur | Gaussian Blur beri nilai 45 px untuk resolutionnya, hasilnya menjadi seperti ini :

Letakkan di bawah objek search box, caranya pilih objek hitam tersebut, kemudian tekan shift + page down, atau bisa juga klik kanan | order | to back of layer, menjadi seperti ini …

Ya benar ! Si objek tersebut di jadikan sebagai bayang bagi objek box di atasnya. Berikan transparansi hingga hasilnya menjadi seperti ini ..

Buat satu objek persegi sebagai backgroundnya … dengan ukuran sebagai berikut :
Width : 1865 px
Height : 1038 px

Berikan warna abu ( 40 % black ) Letakkan di belakang search box
Seperti ini …

Dengan interactive fill tool lakukan gradasi pada objek yang akan di jadikan background tersebut …

Buat kembali satu buah objek sebagai alas dari search box … beri warna putih letakkan di belakang dari box …

Kemudian lakukan transparansi kepada objek putih tersebut …

Buat kembali satu objek persegi berwarna putih, dan letakkan di belakang search box.

Lakukan transparansi objek persegi putih tersebut …

Buat satu buah objek lingkaran  dengan ukuran 522 x 522 px. Letakkan di atas objek search box.

Pilih lingkaran tersebut kemudian masuk menu Bitmaps | Convert to bitmap, klik Ok. Kemudian Masuk kembali menu Bitmap | Blur | Gaussian Blur, isi radiusnya dengan 200 pixels

Letakkan di bawah objek search box, lakukan pembesaran. Kemudian berikan transparansi hingga hasil akhir menjadi seperti ini ..

Lakukan duplikasi objek yang menjadi kilapan search box dengan cara copy paste, hasilnya seperti ini …

Kemudian klik objek duplikat tersebut, kemudian masuk menu bitmaps | convert to bitmap, masih dalam keadaan terpilih masuk menu Bitmap | Blur | Gaussian Blur, isi radiusnya dengan 78 pixels, dan letakkan di atas search box…

Hasil akhirnya …

Fiuhh… akhirnya selesai juga tutorial Coreldraw kali ini…. selamat mencoba. Jika ada yang di tanyakan, kirim saja pertanyaannya ke email penulis …
alkemail@gmail.com

File corelnya dapat di download di sini ….

Selamat … :D

Greetz : b_scorpio, abuzahra, peterpanz, kandar, phii_, syahrilrohman, ivan, dr.emi, safril, najwa, Lapak-online Team!

Sumber dari situs Ilmu Website dalam kategori coreldraw dengan judul Teknik Shaping Glossy Environment

04 May 09 Warning: Visiting this site may harm your computer!

Monday fever lagi neh… tiap senin pasti monday fever… ya iyalah… masa sunday fever… namanya juga senen ;)

Monday fever adalah sindrom bagi orang yang ngantor setelah week end. Seperti yang lalu – lalu, kami biasa nya di senen pagi selalu ada acara bincang – bincang ringan seputar evaluasi kegiatan minggu lalu dan planning pekerjaan di minggu ini.

Biasanya kami akan melakukan pengumpulan data – data tambahan sebagai bahan dalam penyusunan agenda kerja minggu ini, salah satunya adalah mencari update berita dari berbagai sumber.

Nah, pas mau akses www.balipost.com ? muncul gambar merah, isinya :

Warning: Visiting this site may harm your computer!
The website at balipost.com contains elements from the site googleanalytlcs.net, which appears to host malware – software that can hurt your computer or otherwise operate without your consent. Just visiting a site that contains malware can infect your computer.
For detailed information about the problems with these elements, visit the Google Safe Browsing diagnostic page for googleanalytlcs.net.
I understand that visiting this site may harm my computer.

wah parah nih… situs sebesar www.balipost.com kena harm juga. tapi anehnya pas di cek pake firefox, warning ini tidak muncul.

penasaran juga jadinya, ternyata biang keroknya adalah adanya link ke sebuah situs mirip google analytics yang URL nya plesetan dari link google.

kesimpulannya, kita kudu hati – hati kalau memasukan script analytics, jangan sampai salah ketik atau memakai script dari sebuah situs yang URL nya mirip punya google.

supaya tidak disangka melakukan fitnah, berikut screenshotnya

Bali Post