Salam Kenal

Sunday 29 November 2009

Memodifikasi ReadMore ...


Dulu Read More... atau dalam Bahasa Indonesianya Baca Selengkapnya... sering ditampilkan dalam bentuk teks...


nha sekarang kita coba tampilkan dalam bentuk gambar ... Gmana Yha ?!?


Cari Kode seperti ini di template Kamu <p><data:post.body/></p>, jangan lupa di expand dulu isi template kamu ya... biar ketemu kodenya...


trus aku contoh scriptnya di blog orang, tapi lupa dimana, untuk aku save ke notepad...


Ini script dasarnya... :


<b:if cond='data:blog.pageType == "item"'>

<style>.fullpost{display:inline;}</style>

<p><data:post.body/></p>

<b:else/>

<style>.fullpost{display:none;}</style>


<p><data:post.body/></p>


<a expr:href='data:post.url'>Read More... </a>


pada text Read More yang kita modifikasi...


Ganti dengan Script ini :


<img src="read more.gif" width="300" height="100" />


Yang warna hijau itu URL tempat Kamu nyimpen gambar.


Yang warna Biru tua itu ukuran lebar dan tinggi gambar Kamu, itu harus sesuai sama gambarnya biar nggak rusak resolusi gambarnya...


Yang perlu diperhatikan, warna background gambar read more-nya... kalo template Kamu ada maen-maen gradasinya... itu bakal bikin susah... aku saranin gambarnya diformat gif aja... trus backgroundnya dihilangin... atau baca dulu artikel yang satu ini... Mendesign Read More...





Saturday 28 November 2009

Buat Equalizer Music 3d dengan CorelDRAW


Meski menggambar di aplikasi vector, Anda tetap bisa bermain-main dengan gambar 3D. Ya, aplikasi ini dapat dipakai membuat gambar tiga dimensi dalam proses menggambar obyek. Ini dapat dipakai membuat gambar tiga dimensi dalam proses menggambar obyek. Ini berkat hadirnya fasilitas “Extrude Tool” yang membuat proses penciptaan kesan 3D menjadi lebih mudah.

Untuk memanfaaatkannya, Anda bisa mengikuti panduan membuat gambar equalizer musik 3D CorelDRAW berikut ini. Tool yang sama juga dapat Anda terapkan pada obyek lain seperti teks, misalnya. Untuk membuat teks 3D seperti judul komik Superman.




  1. Equalizer adalah susunan kotak berwarna-warni yang biasanya muncul di peranti amplifier. Untuk awal pembuatan, buatlah sebuah kotak dengan [Rectangle Tool]. Klik-tarik pointer sambil menekan [Ctrl] untuk membentuk segi empat sama sisi.


  2. Untuk membuat jajaran kotak, klik [Edit] > [Step and Repeat...]. Docker Step and Repeat akan muncul. Buatlah jajaran kotak vertikal. Isikan jumlah kotak yang hendak dibuat kotak “Number of copies:”. Pada “Horizontal Settings”, pilih [offset], dan isikan kotak “Distance” dengan 0,0.


  3. Pada “Vertical Settings”, pilih [spacing Between Objects], dan isikan angka jarak antar kotak pada kotak “Distance”. Di sini, nilai jarak diisi 0.3 inci. Selanjutnya, klik [Apply]. Maka kotak baru, sejumlah nilai yang telah dumasukkan ke “Number of copies”, akan muncul.


  4. Seleksi semua kotak dengan click dan drag pointer di sekeliling jajaran. Buat jajaran kotak secara horizontal. Pilih [offset] dan isikan 0,0 pada “Distance” di “Vertical Settings”. Pilih [Spacing Between Objects] dan isikan 0,3 jarak antar kotak di “Distance” pada “Horizontal Settings”.

  5. Isikan Jumlah duplikasi kotak pada “Number of copies:”, lalu [Apply]. Jajaran kotak akan muncul.


  6. Jajaran kotak equalizer selalu tidak sama tinggi, maka hilangkan sebagian kotak dengan mengkliknya, lalu tekan [Delete]. Seleksi semua kotak, klik-kanan kotak, dan pilih [Combine].


  7. Tampilkan efek 3D. Klik [Extrude] di toolbox. Klik pada bagian tengah jajaran kotak, lalu sambil menekan tombol [Ctrl], klik pointer ke arah bawah. Tampilan tiga dimensi kini muncul. Cobalah mewarnainya dengan mengklik salah satu warna di palet warna.


  8. Untuk memulai mewarnai, klik [Pick Tool]. Klik jajaran kotak, lalu pilih [Arrange] > [Break Extrude Group Apart], atau tekan [Ctrl] + [K]. Klik-kanan pada kotak, lalu pilih [Break Curve Apart]. Seleksi satu jajaran kotak vertikal, boleh dari kiri atau kanan.


  9. Pilih warna untuk jajaran tersebut dari palet warna di kanan jendela aplikasi. Selanjutnya beri warna satu per satu hingga tuntas. Seleksi semua kotak, lalu klik [Klik] + [G]. Anda bisa mengetikkan teks untuk mempercantik desain ini.


yang pasti ini hanya tutorial pembuatan efect 3D mendasar, selanjutnya bisa anda kembangkan sendiri tekhnik diatas.


Yang pasti sebelumnya saya ucapkan banyak-banyak maaf kalo ada yang kurang... hehehe






TIPS SEO !!!


SEO merupakan singkatan dari Search Engine Optimization, yang berarti melakukan optimasi Blog agar ditampilkan pada halaman utama / halaman atas pada search engine bila seseorang mengetikkan kata pencarian pada kotak search engine tersebut. Prosesnya adalah seseorang membuka search engine Google, Yahoo, maupun MSN, dan selanjutnnya ia akan mengetikkan kata pencarian pada kotak search engine dan kemudian akan ditampilkan list halaman yang memuat Blog-Blog yang sesuai dengan kata pencarian yang diketikkan orang tersebut.


Beberapa TIPS SEO dari saya :


Content:Isi dari Blog Kamu harus memuat banyak kata kunci pencarian sesuai dengan katakunci pencarian yang dibidik. Kata kunci pencarian adalah kata-kata yang diketikkan oleh pengguna internet pada search engine dalam mencari informasi yang diinginkannya. Dalam contoh diatas kata kunci pencarian penulis adalah bisnis internet, bisnis online, bisnis
internet indonesia, bisnis internet di indonesia, bisnis online indonesia, dan bisnis online di
indonesia.


Back Link:
back link ini merupakan link Blog Kamu yang ditampilkan pada Blog orang
lain. Kualitas back link ini bisa mempengaruhi page rank (rangking) Blog Kamu, semakin
tinggi page rank maka search engine menilai Blog Kamu memuat content (isi) Blog yang
berkualitas untuk ditampilkan pada hasil pencarian. Kualitas back link ini berasal dari Blog
yang menaruh link ke Blog Kamu.


Domain:
Dalam pemilihan nama domain Kamu pertama kali, usahakan agar terdapat keyword
(kata kunci pencarian) pada nama domain Kamu.


Title dan Metatags:
Untuk Blog Kamu, Kamu perlu membuat title dan meta tags yang memuat
kata kunci pencarian yang Kamu bidik. Untuk membuat code title dan meta tags Kamu bisa
menggunakan
http://freewebsubmission.com/meta-tags.html atau yang lainnya.


Sitemaps: sitemaps adalah halaman yang menampilkan peta link pada Blog Kamu, sitemaps
memudahkan spider dari search engine untuk menelusuri isi Blog Kamu dan mengupdate
setiap perubahan yang terjadi di Blog Kamu pada database search engine. Untuk membuat
sitemaps Kamu bisa menggunakan
http://www.xml-sitemaps.com/ atau yang lainnya.


Natural Listing: natural listing merupakan kegiatan mendaftarkan Blog Kamu pada search
engine. Ada 4 buah search engine directory utama dimana Kamu dapat mendaftarkan Blog
Kamu.


- Google.com melalui
http://www.google.com/addurl

- Yahoo.com melalui
http://www.submit.search.yahoo.com

- MSN.com melalui
http://search.msn.com.sg/docs/submit.aspx

- Dmoz.org melalui
http://www.dmoz.org



Dan masih banyak lagi search engine directory lainnya.


Tambahan, setiap kita nulis postingan usahakan banyak artikel yang saling terkait... hahaha ini yang aku terapkan pada Blogku Sendiri Bali di Mataku





Friday 27 November 2009

Objek hidden multiple dengan TAB


Banyak artikel yang terkait dengan artikel ini, diantaranya : Objek Tersembunyi dengan Tab, Membuat Tab untuk Objek Tersembunyi, Buat Objek Tersembunyi, Objek Hiddennya Multiple dan CSS, Nha masing-masingnya itu harus kamu pada pahami semuanya.. wuhhh puaszti bingun ya, hahaha... tapi emang itu dasarnya


Lanjoot.... ( BAB II PEMBAHASAN )


CSS


#gb{

position:fixed;

top:50px;

z-index:+1000;

}

#gb2{

position:fixed;

top:170px;

z-index:+1001;

}

* html #gb, * html #gb2{position:relative;}

.gbtab{

height:100px;

width:30px;

float:left;

cursor:pointer;

background:url('images/tabs-ani.gif') no-repeat;

}

.gbtab2{

height:100px;

width:30px;

float:left;

cursor:pointer;

background:url('images/tabsjadi1.gif') no-repeat;

}

.gbcontent{

float:left;

border:2px solid #ff0000;

background:#F5F5F5;

padding:10px;

}

.gbcontent2{

float:left;

border:2px solid #000000;

background:#F5F5F5;

padding:10px;

}


yang perlu diprehatikan... adalah text yang berwarna lain dari code CSS diatas


merah : menunjukkan adalah bagian milik tab yang ke 2


ungu tua : warna border pada tab ke 2 harus disesuaikan dengan tab yang kamu pakai


hijau tua : url dari gambar tab yang kamu pakai, coba di upload ke Photobucket.com


biru : posisi / jarak tab ke-2 : 170px dari atas


ungu muda : z-index itu layer, jadi harus ditambah nilainya jadi +1001 biar berada 1 tingkat dari tab yang pertama.


Body


<!-- Hidden 2 -->

<script type="text/javascript">

function showHideGB2(){

var gb2 = document.getElementById("gb2");

var w2 = gb2.offsetWidth;

gb2.opened ? moveGB2(0, 30-w2) : moveGB2(20-w2, 0)

gb2.opened = !gb2.opened;

}

function moveGB2(x0, xf){

var gb2 = document.getElementById("gb2");

var dx2 = Math.abs(x0-xf) > 10 ? 5 : 1;

var dir2 = xf>x0 ? 1 : -1;

var x = x0 + dx2 * dir2;

gb2.style.right = x.toString() + "px";

if(x0!=xf){setTimeout("moveGB2("+x+", "+xf+")", 10);}

}

</script>

<div id="gb2">

<div class="gbtab2" onclick="showHideGB2()"> </div>

<div class="gbcontent2">

<div style="float:left;width:100%">

<div style="float:left;"><h3 style="margin:0px">Title</h3></div>

<div style="float:right;"><a href="javascript:showHideGB2()" style="text-decoration:none">[x]</a>

</div>

</div>

<br><br>


Kuda Bodho

<br>

<br>

<a href="http://balidimataku.blogspot.com">Get Hidden Floating Objek</a></div>

</div>

<script type="text/javascript">

var gb2 = document.getElementById("gb2");

gb2.style.right = (30-gb2.offsetWidth).toString() + "px";

</script></div></div>


Code diatas adalah sebagian code untuk tab yang ke-2, yang jadi langsung aja download lewat link dibawah ...


Source code jadinya di HTML dan di Berblogging ria di Blogger dan juga passwordnya


untuk penjelasannya hampir sama seperti postingan yang Objek Hiddennya Multiple





Objek Hiddennya Multiple ?!?


Mau tau to cara buatnya, kan sebelumnya udha pernah buat Buat Objek Tersembunyi, nha ini temennya artikel itu cuman disini yang sembunyi jadi lebih, okeh deh wele...weleh... let's cek'e dol... hahaha



Bagian yang perlu diperhatikan biar pun di HTML atau Berbloging ria di Blogger adalah :


#gb2{

position:fixed;

top:50px;

z-index:+1001;

}

*html #gb2{
position:relative;}

.gbcontent{

float:left;

border:2px solid #A5BD51;

background:#F5F5F5;

padding:10px;

}


Kita perlu buat wrapper baru, itu yang id gb2 itu tu... hehehe... kalo ga ngerti mana id mana class baca ini dulu CSS


trus di JavaScriptnya...


<script type="text/javascript">

function aboutMe(){

var gb2 = document.getElementById("gb2");

var w2 = gb2.offsetWidth;

gb2.opened ? moveGB2(0, 0-w2) : moveGB2(0-w2, 0)

gb2.opened = !gb2.opened;

}

function moveGB2(x0, xf){

var gb2 = document.getElementById("gb2");

var dx2 = Math.abs(x0-xf) > 15 ? 10 : 1;

var dir2 = xf>x0 ? 1 : -1;

var x = x0 + dx2 * dir2;

gb2.style.right = x.toString() + "px";

if(x0!=xf){setTimeout("moveGB2("+x+", "+xf+")", 10);}

}

</script>

<div id="gb2">

<div class="gbcontent">

Kuda Bodoh<br />

Kuda Bodoh<br />

Kuda Bodoh<br />

Kuda Bodoh<br />

Kuda Bodoh<br />

Kuda Bodoh<br />

</div>

</div>

</div>

<script type="text/javascript">

var gb2 = document.getElementById("gb2");

gb2.style.right = (-50-gb.offsetWidth).toString() + "px";

</script>

</div></div>


Yang cetak merah itu yang pasti harus ditambahkan, aku pakai angka 2 biar gampang kalo mau tambah objek sembunyinya... trus kan ada : [ function aboutMe(){ ], tulisan aboutMe bisa diganti terserah tapi jangan yang aneh-aneh dan jangan dilupakan tulisan itu soalnya terkait ketika kita panggil melalui tombol menubar nantinya...


nah yang warna ungu itu posisi awalnya, biasanya dia akan bertengkar dengan objek hiden yang pertama jadi -50 perlu ditambahkan biar objeknya jauh ke kanan halaman hingga tak terlihat, kalau masih kelihatan tambahan nilainya jadi -100 gitu, ( mungkin )


Biar ga bingung ini script code jadinya yang di HTML dan ini yang di Berbloging ria di Blogger dan juga passwordnya...


Buat yang di Blogger kalo masih ga ngerti ?!?, comment lewat shoutmix ya...


Atau mau coba Objek Hidden yang Pakai TAB, tapi yang pasti harus baca 2 artikel ini dulu, yang Objek tersembunyi dengan Tab dan yang Membuat Tab untuk Objek Tersembunyi


kalo ada yang salah dimaafin plus di comment ke shoutmix atau di form comment artikelnya ya... Makasih sebelumnya...





Thursday 26 November 2009

Membuat Tab untuk Objek Tersembunyi









Sebelumnya kan udah pernah buat Objek tersembunyi dengan Tab, nah ini tutorialnya untuk buat TAB-nya.


Langsung dhe :



Pertama buka Program Photoshop CS3 keatas, kalo CS2 masih harus pake ImageReady.


lagi-lagi sebelumnya kamu harus baca Objek tersembunyi dengan Tab, kan di bagian CSSnya untuk class "gbtab" nya kan ukuran tingginya : 100px dan lebarnya : 30px.


Jadi sekarang buatlah ukuran Canvas width :30px dan height : 100px.


dan mulai pembuatan.... ( jeng jeng jeng ) tapi dipersingkat ya...


Gunakan Rectangular Marquee Tool untuk membuat seleksi kotak



Click dua kali pada layer background agar menjadi layer yang dapat kita edit



Perhalus ujung seleksi atau rubah bentuknya agar rounded dengan cara click menu [ Select ] lalu [ Modify ] [ Smooth... ] beri nilai Sample Radiusnya 4 pixels lalu OK!!!



setelah seleksinya jadi, gunakan Magic Wand tool untuk menggeser seleksi sedikit ke kanan dengan mengaktifkan Magic Wand tool dan gunakan tombol kanan atur sesuai selera kamu...



tambahkan seleksi pada bagian dasarnya menggunakan Rectangular Marquee tool.



Buat layer baru dengan menekan tombol kombinasi CTRL + SHIFT + N dan Beri Warna hitam #000000 atau terserah kamu.


Biarkan Seleksi dan buat layer baru lagi sekali, lalu gunakan Gradient tool untuk membuat gradasi pastikan warna foreground menjadi putih #ffffff dengan type gradasi linear dan jenis gradient foreground to transparent... hingga hasilnya seperti berikut :



Buat teks terserah kamu, nah tu kan teksnya horizontal biar jadi vertikal atau tegak lurus tekan tombol kombinasi CTRL + T lalu klik kanan pilih Rotate 90o CCW sekalian atur posisinya agar ditengah-tengah... Trus di rasterize dengan cara click menu Layer > Rasterize > Type


Hapus layer 0,, dan sekarang kita mulai tambah sedikit pemanis ( ciahhhhh!!! hahaha pemanis ?!? )...


Animation


Click menu Window lalu pilih Animation... hingga muncul palletenya...


Duplicate layer text tadi dengan cara CTRL + J, lalu click dua kali pada layer thumbnail hingga muncul kotak dialog Blending Options.


beri efek outer Glow, lihat gambar dibawah :



Duplicate lagi layer yang sedang aktif, ulangi langkah tadi edit efek outer Glow dan tambahkan nilai spread : 5 dan size : 15, OK


Mulai mengatur animasi, hilangkan tanda mata ( indicates layer visibility ) pada layer tabs copy 2 dan tabs copy.


pada pallete animation buat frame baru, lihat gambar dibawah :



munculkan kembali layer tabs copy...


select kedua frame lalu click tweens animation frame... beri nilai frame to add 1 ...



duplicate frame lagi sama seperti buat frame baru... di frame terakhir ganti layer visibilitynya tabs copy hilang dan tabs copy 2 muncul...


select kedua frame lagi dan lakukan proses tweening seperti tadi, beri nilai frames to add 1 ...


lagi-lagi duplicate frames dan atur visibilitynya tabs copy 2 hilang tabs muncul ...


select kedua frames lakukan proses tweening, beri nilai frames to add 2, dan pada frame terakhir atur delaynya menjadi 5.0 second



Hasil akhirnya ada pada halaman atas tadi. Simpan file dengan cara File > Save for Web and Devices pilih gif dan cilck tombol save... jadi dha...


Filenya jangan lupa disimpan bentuk psdnya juga ya ( password ), soalnya kalo mau buat tabs lain untuk objek hidden multiple dengan tab, tinggal diganti warnanya aja deh... dan layer 2 bisa dinaikkan opacitynya biar gradasi lebih jelas... whehehe

Membuat Objek Tersembunyi dengan Tab


Nha, aku punya postingan lain berjudul Membuat Objek Tersembunyi itu memiliki hasil, tombolnya terpisah dengan wrapper objek tersembunyi-nya.


tapi kalo yang ini akan ditambahkan tab untuk memanggil objek tersebut.


Langsung dhe Cara Buatnya :



di HTML


Letakkan Code ini pada file CSSnya :


#gb{

position:fixed;

top:50px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:100px;

width:30px;

float:left;

cursor:pointer;

background:url('tabs-ani.gif') no-repeat;

}

.gbcontent{

float:left;

border:2px solid #ff0000;

background:#ffffff;

padding:10px;


dan letakkan ini pada bagian bodynya :


<script type="text/javascript">

function showHideGB(){

var gb = document.getElementById("gb");

var w = gb.offsetWidth;

gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);

gb.opened = !gb.opened;

}

function moveGB(x0, xf){

var gb = document.getElementById("gb");

var dx = Math.abs(x0-xf) > 10 ? 5 : 1;

var dir = xf>x0 ? 1 : -1;

var x = x0 + dx * dir;

gb.style.right = x.toString() + "px";

if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}

}

</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<!-- isi ini dengan content yang kamu mau kalo bisa jangan dihapus credit di bawah ya... please -->

<br/>

<div style="float:left;width:100%">

<div style="float:left;"><h3 style="margin:0px">Title</h3></div>

<div style="float:right;"><a href="javascript:showHideGB()" style="text-decoration:none">[x]</a>

</div>

</div>

<br>

<br>

<a href="http://balidimataku.blogspot.com">Get Hidden Floating Objek</a></div>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (30-gb.offsetWidth).toString() + "px";

</script></div></div>



Untuk ber-Blogging ria di Blogger


Pertama, sudah pasti login di blogger


kedua masuk edit HTML, edit halaman, lalu buat gadget baru pilih html text


ketiga copy code dibawah :


<style type="text/css">

#gb{

position:fixed;

top:50px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:100px;

width:30px;

float:left;

cursor:pointer;

background:url('tabs-ani.gif') no-repeat;

}

.gbcontent{

float:left;

border:2px solid #ff0000;

background:#ffffff;

padding:10px;

}

</style>

<script type="text/javascript">

function showHideGB(){

var gb = document.getElementById("gb");

var w = gb.offsetWidth;

gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);

gb.opened = !gb.opened;

}

function moveGB(x0, xf){

var gb = document.getElementById("gb");

var dx = Math.abs(x0-xf) > 10 ? 5 : 1;

var dir = xf>x0 ? 1 : -1;

var x = x0 + dx * dir;

gb.style.right = x.toString() + "px";

if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}

}

</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<!-- isi ini dengan content yang kamu mau kalo bisa jangan dihapus credit di bawah ya... please -->

<br/>

<div style="float:left;width:100%">

<div style="float:left;"><h3 style="margin:0px">Title</h3></div>

<div style="float:right;"><a href="javascript:showHideGB()" style="text-decoration:none">[x]</a>

</div>

</div>

<br>

<br>

<a href="http://balidimataku.blogspot.com">Get Hidden Floating Objek</a></div>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (30-gb.offsetWidth).toString() + "px";

</script></div></div>


Yang Perlu diganti :


teks yang berwarna merah perlu diganti sesuai dengan yang Anda inginkan... pada Title itu bisa diganti dengan judul gadget Anda.


untuk tabnya juga bisa Anda ganti, mungkin saja itu tidak cocok dengan keinginan Anda... hehe


Nih Saya buat tutorialnya Membuat Tab untuk Objek Tersembunyi


Tampilkan Foto Offline dan Online

Koleksi foto Anda di Harddisk atau Flickr bisa Anda simak dari sebuah software. Caranya pun mudah saja...


Aplikasi yang satu ini terbilang unik. Ia memungkinkan koleksi foto Anda, baik di harddisk dalam PC maupun yang sudah tayang di jagat maya (seperti di layanan simpan foto Flickr, Picasa, atau Facebook), dapat ditampilkan dari sebuah program. Hasil pencarian gambar di Google dapat ditayangkan di luar browser.

Cara penayangan setiap fotonya juga unik karena ditampilkan melalui jendela yang berkesan tiga dimensi. Mengelolanya sangat gambang ditambah efek pegerakan 3D yang menyenangkan untuk diperhatikan.


Maaf, judul aplikasi ini malah belum disebut. Namanya Cooliris. Sang pembuat menyebutnya sebagai full-screen 3D wall. Sebenarnya ia merupakan plugin untuk berowser internet yang kompatibel dengan Mozilla Firefox, Internet Explorer, dan Safari, sehingga cocok untuk Windows, Linux, serta Mac OS, juga beberapa Sistem Operasi lainnya.



Meski berwujud browser plugin, Anda bisa mengaktifkannya lewat daftar program dalam menu Start di Windows. Karena bersifat tiga dimensi, kartu grafis yang Anda miliki memang kudu mumpuni, meski tak mensyaratkan spesifikasi tinggi atau terbaru.


Untuk dapat memanfaatkannya, Anda harus install dulu plugin ini dengan mengunjungi situs ini . Cara instalasinya mudah, sama seperti pengelolaannya. Cooliris juga bisa dipakai menampilkan koleksi video.



  1. Jalankan browser Anda yang terdukung Cooliris (Mozilla Firefox, Safari, atau Internet Explorer). Masuklah ke alamat Cooliris. Pilih apliasi yang sesuai dengan browser dan sistem operasi yang Anda pakai, lalu klik [Download] yang ada di sisi kanan.

  2. Jika Anda menggunakan Firefox, akan muncul bar pop-up di bawah toolbar browser bagian atas. Klik saja [Allow]. Boks “Software Installation” akan muncul. Klik tombol [Install Now]. Setelahnya, restart browser (matikan lalu jalankan kembali).

  3. Sekarang, setiap kali muncul gambar atau foto di sejumlah situs web (seperti Google Image, Flickr, atau Facebook), maka gambar/ foto tersebut dapat ditampilan mandiri di Cooliris. Pertama, arahkan pointer ke gambar hingga muncul ikon dua tombol bertana panah di atas gambar.

  4. Klik gambar, maka gambar akan muncul di Cooliris 3D wall. Untuk memperbesar tampilan gambar, Anda tinggal klik salah satu gambar sehingga membesar. Kualitas gambar yang muncul akan disesuaikan dengan resolusi gambar asli. Jika kecil, tapi dipaksa menjadi besar, maka gambar akan pecah-pecah.

  5. Wall 3D ini bisa Anda geser-geser ketika sedang memilih foto. Klik tarik area gambar ke arah yang Anda suka, maka wall akan bergerak secara tiga dimensi. Untuk memperbesar atau memperkecil tampilan jajaran gambar, gunakan tombol scroll pada mouse.

  6. Cobalah login ke akun Facebook dan masuklah ke koleksi foto. Arahkan foto pada koleksi foto di sana, lalu klik foto ketika muncul ikon dua tombol dengan tanda panah. Kini semua koleksi foto Anda di Facebook akan ditampilkan di wall. Logo Facebook secara otomatis akan muncul di bagian atas wall.

  7. Jika hendak menampilkan foto yang ada di dalam harddisk PC, klik [My Computer] pada sidebar di sisi kiri atas wall. Jika Anda menyimpannya di folder My Pictures, klik [My Pictures]. Jika tersimpan di desktop, klik [Desktop].

  8. Jika Anda menyimpannya di sebuah folder dalam sebuah direktori, partisi harddisk, atau tersimpan dalam flash drive atau harddisk eksternal, klik dulu link [Disk]. Selanjutnya, pilih direktori atau drive, dan telusuri keberadaan gambar dari root folder yang muncul.

  9. Aplikasi ini bisa diakses langsung dari daftar program dengan mengklik [Start] > [All Programs] > [Cooliris] > [Launch Cooliris]. Cooliris juga bisa berfungsi sebagai search engine untuk gambar dan video. Untuk menggunakannya, arahkan pointer ke kotak “Search” di sisi kanan atas.

  10. Ketikkan kata kunci, lalu pilih situs web di mana gambar atau video hendak dicari mulai dari Google, Yahoo, Flickr, Picasa, hingga YouTube. Selanjutnya, klik ikon kaca pembesar atau tekan [Enter]. Hasilnya akan ditampilkan di wall. Klik gambar atau video tersebut untuk menamplkannya.


Membuat Objek Tersembunyi


Pernahkan liat ShoutBox / ShoutMix yang pada sembunyi ?!?, hehehe... Tutorialnya udha banyak yang pake tapi kenapa tetep aku tulis ya ?!? tau ah?!?


Cara Buatnya :




Pada HTML,,


Letakkan Code ini pada file CSSnya :


#gb{

position:fixed;

top:50px;

z-index:+1000;

}

*html #gb {
position:relative;}

.gbcontent{


float:left;

border:2px solid #A5BD51;

background:#F5F5F5;

padding:10px;

}


Code ini di bagian Body-nya... [ <body>...</body> ]


<script type="text/javascript">

function shoutmix(){

var gb = document.getElementById("gb");

var w = gb.offsetWidth;

gb.opened ? moveGB(0, 0-w) : moveGB(0-w, 0)

gb.opened = !gb.opened;

}

function moveGB(x0, xf){

var gb = document.getElementById("gb");

var dx = Math.abs(x0-xf) > 15 ? 10 : 1;

var dir = xf>x0 ? 1 : -1;

var x = x0 + dx * dir;

gb.style.right = x.toString() + "px";

if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}

}

</script>

<div id="gb">

<div class="gbcontent">

<!-- isi ini dengan content yang kamu mau kalo bisa jangan dihapus credit di bawah ya... please -->

<br>

<br>

<a href="http://balidimataku.blogspot.com">Get Hidden Floating Objek</a>

</div>

</div>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (0-gb.offsetWidth).toString() + "px";

</script>

</div></div>


( penjelasannya kapan-kapan ya, yang penting ini biar cepet jadi, hehehe )



Untuk ber-Blogging ria di Blogger


Pertama, sudah pasti login di blogger


kedua masuk edit HTML, edit halaman, lalu buat gadget baru pilih html text


ketiga copy code dibawah :


<style type="text/css">

<!--


#gb{

position:fixed;

top:50px;

z-index:+1000;

}

*html #gb {
position:relative;}

.gbcontent{


float:left;

border:2px solid #A5BD51;

background:#F5F5F5;

padding:10px;

}




-->

</style>


<script type="text/javascript">

function shoutmix(){

var gb = document.getElementById("gb");

var w = gb.offsetWidth;

gb.opened ? moveGB(0, 0-w) : moveGB(0-w, 0)

gb.opened = !gb.opened;

}

function moveGB(x0, xf){

var gb = document.getElementById("gb");

var dx = Math.abs(x0-xf) > 15 ? 10 : 1;

var dir = xf>x0 ? 1 : -1;

var x = x0 + dx * dir;

gb.style.right = x.toString() + "px";

if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}

}

</script>

<div id="gb">

<div class="gbcontent">

<!-- isi ini dengan content yang kamu mau kalo bisa jangan dihapus credit di bawah ya... please -->

<br>

<br>

<a href="http://balidimataku.blogspot.com">Get Hidden Floating Objek</a>

</div>

</div>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (0-gb.offsetWidth).toString() + "px";

</script>

</div></div>


Terus di save, beres dah


Penjelasan keseluruhan :


function shoutmix(){


code di atas sangat penting ( tapi semuanya penting sih, hehehe ), [ function shoutmix() { ] , yang dicetak tebal bisa diganti dengan apa saja ( asal jangan simbol yang aneh-aneh ), code shoutmix adalah fungsi ketika javaScript dipanggil menggunakan tag [ href ].


aku jelaskan ini terkait dengan penjelasan selanjutnya...


Lanjoot... Cara Pemanggilannya...


<a href="javascript:shoutmix()">ShoutMix</a>, nah itu contohnya...


Untuk Isinya, terletak pada text yang berwarna merah, ganti itu dengan isi yang kamu mau...


Tips sedikit, kalo template kamu ada Menubarnya, tambahkan kode href tadi, seperti :


<li><a href="javascript:shoutmix()">ShoutMix</a></li>, rata-rata template di blogger pake tag <li> ... </li> jadi tag keseluruhannya ya seperti itu deh.. hehehe


Moga-moga mudeng deh...


Kapan-kapan saya coba buat artikel biar objek hiddennya multiple...


Jegeg Jegeg Singaraja


"Cantik-cantiknya Singaraja", Benarkah ?!?


Aku setuju karena aku orang Singaraja, hahaha


Photo Orang diatas adalah Pengarangnya lagu dengan judul yang sama seperti judul post ini Jegeg - Jegeg Singaraja.


Katanya, "aku kagum sama cewek - cewek Bali terutama Singaraja,... Cantiknya, Moleknya, Seksinya, Spiritnya... dan sebagainya deh..."



Bukan hanya lagu tadi saja, selama 3 bulan sebelumnya dia ( Mahesa ) sudah membuat gempar dunia Singaraja bahkan Bali, bahkan pula hingga keluar Bali... hahaha, gmana caranya ya?!?


katanya sih dari HP ke HP. Meskipun banyak yang ga suka sama lagunya,, tapi banyak pula yang suka bahkan pengen kenal sosoknya lebih dekat. (sebenarnya aku sendiri juga takut buat post ini, soalnya banyak pro kontra di lagu-lagunya, heee... serem)


Kisah atau jalan ceritanya Mahes puanjang,, mungkin bisa dilihat dari lagu-lagu yang ia buat.


Sekarang aku bahas lagunya, mungkin hanya orang Bali saja yang bisa mengerti lagu ini... intinya lagu ini menyindir kaum Hawa ( ciah!!! hawa, hahaha ), karena memang pada kenyataanya cewek-cewek jaman sekarang banyak yang salah pergaulan... ( aku juga ikut sedih, kecantikannya, kemolekannya direnggut pacar, teman, bahkan ada pula yang jadi cewek ******** disensor aja deh ).


Tapi bukan hanya kaum Hawa karena ia sakit hati bukan karena kaum hawa saja, pernah seorang temannya mengatakan sesuatu yang tidak benar tentang dirinya... wahh!!!... 2 harinya langsung keluar lagunya... wkwkwk,... judulnya "Bungut Corah".


Memang orang yang satu ini bener-bener kreatif... Dulu dia buka usaha sewa PS, tapi sekarang usahanya sudah sepi jadi dia beralih ke usaha Distro. ( wadhu.. memang ga abis akalnya untuk nghasilin duit... ).


Langsung aja deh, biar ga bertele-tele... aku resmi'in sendiri Blog ini sebagai blog link download untuk lagu-lagunya si Mahesa... ( aku upload filenya bertahap jadi tergantung kalo ada duit buat internet aja, hehehe ) untuk link downloadnya bisa dilihat di bagian Sidebar (sebelah kanan bagian postingan ini).


Mahes pas Ngaca ( berkaca )!!!, Sambil Berkata :



Emang sih kalo dinikmatin secara sepintas lagu ini banyak mengandung unsur kritikan yang pedas untuk kaum hawa bahkan bagi orang-orang yang menganggap dirinya sempurna. Tapi kalo di artikan secara lebih dalam, kalian semua pasti akan mengerti bahwa lirik yang ditulis mengandung sebuah arti dan pelajaran bahwa apa yang terjadi saat ini maupun kesalah-kesalahan yang dibuat mungkin bisa dibenahi dengan mendengarkan lagu-lagu ini.


Meskipun banyak pro dan kontra, tapi saya tetap mengutamakan unsur kesederhanaan dalam penggunaan bahasa agar bisa di mengerti lebih dalam terutama oleh orang Buleleng karena selama ini lagu-lagu Bali terasa malu untuk didengarkan oleh anak-anak muda makanya saya berusaha untuk mengajak kaum muda untuk lebih mencintai lagu berbahasa Bali dengan lirik-lirik yang sederhana dan gampang untuk dimengerti.
Disini saya sengaja membangkitkan bahasa Buleleng, karena disisi lain saya ingin mengajak masyarakat Bali lebih akrab dan tidak salah mengartikan ataupun mencerna bahasa-bahasa yang ada di Buleleng, karena pula ( karena lagi, karena lagi, hahaha ) bahasa ini adalah bahasa-bahasa keseharian bahkan menjadi sebuah keakraban bagi masyarakat Buleleng seperti Cai, Nyai, Siga dan temen-temennya itulah.


Mudah-mudahan lagu-lagu ini tidak hanya sebatas didengar dan dicela, tapi artikan lebih dalam lirik-lirik dan nasehat yang ditulis.


Jaya Buleleng !!! ( D'Laskar Banyuning )



Nah itu Pesannya Bli Mahes... Aku sempat rundingin masalah ini... sekalian aku resmikan perundingannya tanggal 25 November 2009. ( gak tau kapan bakal tak terbit'in Post'annya ini... hehehe )


Aku juga ikut kasi pesan sama kalian yang mau dengerin,, Melaang gen ngabe Ibe... hehehe ( Hati-hati bawa diri sendiri )


Sunday 22 November 2009

Abstract Art dengan Adobe Photoshop CS3...


Jika biasanya kita melihat gambar-gambar berbentuk abstract itu dibuat menggunakan Adobe Ilustrator... tapi saya mencoba untuk membuatnya menggunakan Adobe Photoshop CS3 yang saya miliki...



  1. Pertama buat dokumen baru dengan ukuran 1024 x 768 pixels...

  2. Buatlah sebuah layer baru dan beri nama [ abstract_line1 ]


  3. Terus... kita buat objek menggunakan Rectangular marquee tool... buatlah seleksi dengan bentuk garis yang memanjang...


  4. Setting warna foreground menjadi warna hijau, misal...

  5. Tekan alt + del... ( alt + del digunakan untuk memberi fill objek dengan warna foreground, ctrl + del digunakan untuk memberi fill objek dengan warna background )

  6. Tekan ctrl + D untuk menonaktifkan seleksi, ( deselect )

  7. nah... Sekarang kita mulai merusak suatu objek menjadikan bentuk abstract... hahaha...

  8. Pastikan layer [ abstract_line1 ] sedang dalam keadaan aktif...

  9. lalu tekan menu [ filter ] >> [ liquify ... ctrl + shift + X ] ... tunggu hingga muncul kotak dialog seperti gambar berikut...


  10. Gunakan Forward warp tool... atur ukuran brush yang diperlukan


  11. Mulailah menggoreskan brush dari arah kiri ke kanan... ( lihat gambar dibawah )


  12. Tambahkan gerakan lagi sekali dengan pola sebagai berikut...


  13. Pada intinya gerakan tersebut sesuai dengan seni yang kita miliki...

  14. Cobalah dengan bentuk objek yang lain...

  15. untuk memperindah gunakan Filter >> [ Render ] >> [ Lens Flare ]... ikuti settingannya sesuai keinginan...

  16. Langkah-langkah diatas hanya tipsnya saja... sekarang tergantung kekreatifan Anda menggunakan tips diatas... Semoga membantu... kalo ada yang salah dimaafin ya...he Peace...


Hasil Akhir...




Tipsnya gunakan object awal yang sederhana... dan ukurannya jangan terlalu besar... agar tampilan hasil liquify jadi cantik...


Salam Narayana Yein...





Mengenal CSS ?!?


Sebelumnya kita pernah membahasa tentang Mendesign Web Sederhana + CSS, Seharusnya saya menjelaskan Apa itu CSS terlebih dahulu sebelum menulis bagian itu...


tapi ya sudahlah, udah terlanjur diposting duluan, hahaha


tidak berlama-lama, mari kita kenal CSS lebih lanjut!!!


Sebenarnya saya juga kurang begitu paham dan jelas tentang pengertian CSS, Cascading Style Sheet, itu kepanjangannya... kalo dilihat dari hasil penerapan saya menggunakan CSS...


dapat saya artikan sebagai berikut :




  1. Dengan CSS, kita dapat dengan mudah mengatur bagian atau divisi yang kita inginkan... dengan mensetting propertinya pada file CSS lalu dapat kita panggil id atau class tersebut dari file html atau php atau yang lainnya, hehehe

  2. Dapat merubah semua tipe atau element dari tag-tag html dasar, seperti : h1 (heading), ul, ol dan li (ordered dan unordered list), p (paragraph) dan attribute yang lainnya.

  3. Menggabungkan beberapa element dengan nilai atau pengaturan yang sama, contoh : h1, h2, h3 {font-family:arial, dan selebihnya dapat Anda pelajari dari file yang bisa Anda download disini dan passwordnya disini


Baru segitu yang saya tahu, kalo ada yang salah atau tambah bingung dimaafin ya... ( lo minta maaf terus, hahaha ... )

Saturday 21 November 2009

Download Program Design


Ada beberapa Program Design yang Saya tawarkan, Macromedia Dreamweaver 8, Adobe Photoshop CS3 dan CorelDRAW X3.


untuk sementara Saya masih menggunakan itu, karena keterbatasan daya komputer, hahaha...



tapi Software-software itu gak kalah sama versi diatasnya, bedanya cuman sedikit kok...


Langsung aja download sendiri filenya ok...




Macromedia Dreamweaver 8




CorelDRAW X3




Adobe Photoshop CS3



Membuat pola bunga dengan polygonal tool


Mungkin tips tutorial ini sudah banyak yang tahu, biasanya ditulis di buku-buku. tapi kini saya coba tulis untuk orang yang belum tahu dan pengen tahu dengan dana yang minim, hehehe...




langsung saja, pertama-tama buatlah sebuah lembar kerja dengan ukuran terserah anda... atau bisa dibilang abaikan semua settingan awal.


lalu buatlah objek polygon dengan ukuran sesuai anda, pada panel properties atur [ Number of point or sides on polygon, star and complex star ], yang saya gunakan adalah 8, tapi nilai ini tidak mutlak anda bisa menggunakan nilai yang lain. ( untuk lebih jelasnya lihatlah pada gambar dibawah... )



Lalu gunakan shape tool untuk memulai membentuk objek polygon tadi



seteleah membuat lekukan pertama, lalu klik salah satu node ( node adalah titik kecil point dari sebuah garis dari sebuah objek ) lalu convert node tadi ke bentuk Curve, option ini terdapat pada Properties Panel



Pada gambar paling kiri saya beri nomor 1, pada objek ini salah satu nodenya sudah di convert dan sudah dirubah bentuknya menggunakan shape tool.


Lalu lakukan pada Node yang lain dan ulangi langkah sebelumnya ( pada gambar 2 atau tengah-tengah ).


Pada gambar ketiga atau paling kanan, adalah hasil dari pengolahan Polygonal tool atau bisa dibilang hasil akhir, hehehe...



Kalo ada yang kurang mohon dimaafkan ya... maklum namanya juga masih belajar...



Tuesday 17 November 2009

Mendesign web sederhana dengan Adobe Photoshop + CSS




Untuk designnya mungkin tidak akan saya jelaskan cara pembuatannya karena sangat sederhana...





Usahakan hasil potongan atau slicenya ada 4 bagian seperti gambar dibawah.....




























bg body


bg atas


bg tengah



bg bawah


 





  1. Pertama buka Aplikasi Dreamweaver...


  2. Atur Page Propertiesnya seperti gambar dibawah






    • Keterangan Gambar :


    • Untuk margin beri nilai 0 pixel (margin-left, margin-top, margin-right, margin-bottom)


    • Background-image : pilih browse, lalu cari gambar background yang telah anda buat designya sendiri... ( bg body pada gambar diatas )


    • Beri repeat : repeat-x


    • Background-Color : #ffffff ( putih )


    • Text-color : pilih sesuai selera ( saya menggunakan kode warna= #333333 ) dengan sizenya : 12px dan Font : arial...


    • sehingga hasilnya seperti berikut :








  3. lalu tambahkan syntax CSSnya sedikit :


  4. <style type="text/css">


    <!--


    body {


    background-color: #FFFFFF;


    margin-left: 0px;


    margin-top: 0px;


    margin-right: 0px;


    margin-bottom: 0px;


    background-image: url(images/lat1_01.gif);


    background-repeat: repeat-x;
    }



    body,td,th {


    font-family: Arial, Helvetica, sans-serif;


    font-size: 12px;


    color: #333333;


    }



    #wrapper {


    width:774px;


    margin:180px auto 0px;


    }


    #bg_atas {


    background-image:url(images/lat1_04.gif);


    background-repeat:no-repeat;


    width:774px;


    height:60px;


    float:left;


    background-position:bottom;


    }


    #bg_mid {


    background-image:url(images/lat1_07.gif);


    background-repeat:repeat-y;


    width:774px;


    float:left;


    }


    #bg_bawah {


    background-image:url(images/lat1_09.gif);


    background-repeat:no-repeat;


    width:774px;


    height:31px;


    float:left;


    }


    #menu {


    margin:0px 0px 0px 30px;


    }


    #menu a:link, #menu a:visited {


    background-color:#00CCFF;


    float:left;


    padding:5px;


    color:#FFFFFF;


    font-weight:bold;


    text-decoration:none;


    margin-left:5px;


    }


    #menu a:hover {


    background-color:#00CC00;


    }





    -->


    </style>

  5. dan dibagian bodynya masukkan syntas ini...







  6. <div id="wrapper">


      <div id="bg_atas">


         <div id="menu">


            <a href="#">Home </a>


            <a href="#">ads</a>


            <a href="#">edit</a>


         </div>


      </div>


      <div id="bg_mid">


            <p>&nbsp;</p> <!-- Kamu bisa taruh isi web kamu disini -->


            <p>&nbsp;</p> <!-- Kamu bisa taruh isi web kamu disini -->


            <p>&nbsp;</p> <!-- Kamu bisa taruh isi web kamu disini -->


            <p>&nbsp;</p> <!-- Kamu bisa taruh isi web kamu disini -->


            <p>&nbsp;</p> <!-- Kamu bisa taruh isi web kamu disini -->


            <p>&nbsp;</p> <!-- Kamu bisa taruh isi web kamu disini -->


      </div>


      <div id="bg_bawah">


      </div>


    </div>



  7. wadhu... akhirnya jadi... mudah kan... dimaafin ya kalo ada salah... kalo mo tanya2,, via email aja ok!!!


  8. Dan dipastikan syntax diatas tadi, kompatibel di berbagai browser... mungkin, hehehe... tapi setau saya baru coba di Opera 10, Mogilla firefox 3.5.3 n IE 6... yg pasti udah ok disana semua... klop abis deh...








CopyRights Narayana Yein dengan coding template dari kendhin's blog, Narayana yein 2009. Hosting oleh 000webhost dan domain dari www.co.cc