X-Terselubung: Gambar

Tampilkan postingan dengan label Gambar. Tampilkan semua postingan

Sabtu, 07 November 2009

06.40

Cara Membuat Status Loading

Unknown Blog Stuff, Gambar, Java Script No comments

Tutorial kita kali akan membahas cara membuat status loading, maksudnya adalah pada waktu sobat membuka halaman blog milik sobat, nantinya akan muncul sebuah image / gambar animasi loading yang atraktif sebelum blog tampil keseluruhan.

Pemasangan status loading ini akan mengubah sedikit kode HTML yang ada di template, jadi saya sarankan gunakan blog cadangan untuk mencoba tutorial ini, atau backup template sobat sebelum mengubah kode HTML-nya.

Karena kode yang di ubah adalah <body> dan saya tidak tau pasti apakah dengan mengubah kode tersebut akan melanggar TOS Blogger atau tidak. Makanya saya sarankan sebaiknya gunakan blog cadangan saja untuk mencoba membuat status loading ini. Baiklah, lanjut ya.

Untuk pilihan animasi status loading-nya bisa sobat lihat di Ajax Load.

Silahkan upload kode Javascript berikut ini ke tempat penyimpanan online. Pastikan file yang di upload berkhiran .js

var ld=(document.all);var ns4=document.layers;
var ns6=document.getElementById&&!document.all;
var ie4=document.all;
if (ns4)
ld=document.loading;
else if (ns6)
ld=document.getElementById("loading").style;
else if (ie4)
ld=document.all.loading.style;
function init()
{
if(ns4){ld.visibility="hidden";}
else if (ns6||ie4) ld.display="none";
}

Cara upload file javascript-nya, copy paste semua kode diatas kedalam notepad, kemudian simpan file tersebut dengan extension atau akhiran .js dan setelah itu upload ke tempat penyimpan online atau jika mau lebih mudah upload saja di google sites.

Kemudian ikuti langkah berikut ini :

Silahkan login dulu ke Blogger.

Kemudian tuju halaman Edit HTML.

Klik Expand Template Widgets.

Cari kode <body> dan ganti kode tersebut dengan kode dibawah ini :

<body onLoad='init()'><div id='loading' style='position:absolute; width:100%; text-align:center; top:300px;'> <img border='0' src='http://tempat-simpan.com/gambarpreloader.gif'/></div> <script src='http://tempat-simpan/preloader.js' type='text/javascript'/>

Simpan Template.

Keterangan :

Kode yang berwarna hijau adalah url dimana sobat menyimpan gambar animasi status loading-nya.

Kode yang berwarna merah adalah url tempat sobat mengupload kode javascript animasi status loading-nya.

Jika sobat malas untuk menyimpan gambar animasi status loading, saya punya beberapa gambar yang bisa sobat gunakan dibawah ini :

Selamat Mencoba !

Rabu, 28 Oktober 2009

10.04

Cara Membuat Efek Zoom Pada Gambar

Unknown Blog Stuff, Gambar, Kode HTML, Link No comments

Pada dasarnya membuat efek zoom pada gambar cukup banyak manfaatnya, selain menghemat tempat, sekaligus mempercantik tampilan blog kita. Ada kalanya dimana kita mempunyai gambar yang sangat besar dan harus di tampilkan dalam ukuran yang besar, wah tempatnya ga cukup nih mas, itu bisa menjadi kendala dalam optimasi gambar yang hendak ditampilkan. Sementara sobat tidak ingin gambar tersebut berlalu begitu saja tanpa sentuhan pengunjung sedikitpun.

Tutorial membuat efek zoom pada gambar ini sangat mudah, cukup menambahkan kode css pada template dan sedikit mengedit kode gambar yang sobat miliki. Ga usah panjang lebar ya, langsung praktek aja. Sip, sekarang silahkan siapkan komputer sobat dulu, plus kopi dan rokok sebagai pelengkap.. Hot

Silahkan login ke Blogger terlebih dahulu.
Kemudian klik Tata Letak.
Tuju halaman Edit HTML.
Letakkan kode css berikut ini, tepat diatas / sebelum kode ]]></b:skin>

/* Zoom Efek */

.thumbnail{position:relative;z-index:0}

.thumbnail:hover{background-color:transparent;z-index:50}

.thumbnail span{position:absolute;left:-1000px;visibility:hidden;color: black;text-decoration: none}

.thumbnail span img{border-width:0;padding:2px}

.thumbnail:hover span {visibility: visible;top: 0;left: 60px}
Jangan lupa Simpan Template.

## Untuk membuat gambarnya zoom-nya, berikut contoh gambar yang saya punya :

<a href="http://s643.photobucket.com/albums/uu155/miskahiper/?action=view&current=vaio-zoom-1.jpg" target="_blank"><img src="http://i643.photobucket.com/albums/uu155/miskahiper/vaio-zoom-1.jpg" border="0" alt="Photobucket"></a>

Kemudian hapus tulisan yang berwarna hijau, tambahkan dengan tulisan yang berwarna merah, sehingga menjadi seperti berikut :

<a class="thumbnail" href="#thumb"><img src="http://i643.photobucket.com/albums/uu155/miskahiper/vaio-zoom-1.jpg" border="0" alt="Photobucket"><span><img src="http://i643.photobucket.com/albums/uu155/miskahiper/vaio-zoom-1.jpg" width="380px" height="300px";/></span></a>

coba sekarang sobat sorot gambar dibawah ini

Sedangkan kode HTMl untuk text adalah sebagai berikut :

<a class="thumbnail" href="#thumb">Contoh Gambar<span><img src=http://i643.photobucket.com/albums/uu155/miskahiper/vaio-zoom-1.jpg /></span></a>

coba di sorot tulisan berwarna hijau dibawah ini :

Contoh Gambar

Ukuran besarnya gambar yang akan di zoom silahkan sobat atur sesuai keinginan, silahkan ganti angka yang berkelip yang berwarna merah dengan ukuran yang sobat inginkan saat di zoom, sesuaikan juga dengan ukuran asli gambar agar gambar yang di zoom tidak pecah atau kabur. Oke sob, selamat mencoba ya, semoga berhasil ! Thumbs-up

08.08

Cara Membuat Efek Blur Pada Gambar

Unknown Blog Stuff, Gambar, Kode HTML, Link No comments

Tutorial sederhana ini sebenarnya hanya membutuhkan sedikit kode css pada template. Cara membuat efek blur pada gambar, ya begitulah kira-kira pembahasan kali ini. Efek blur ini akan terjadi jika cursor melintas pada gambar, jadi gambar akan terlihat menjadi tampak samar apabila cursor melintas diatas gambar, nah terus bagaimana kalau ga punya mouse mas dody? wah mending ke laut aja sob.. Laughing

Dan nanti akan saya jelaskan sekalian bagaimana caranya agar gambar yang di klik tidak pindah halaman atau menuju alamat url yang ada (tidak ngelink kemana-mana).

Caranya gampang aja kok, silahkan ikuti langkah-langkahnya berikut ini :

Login ke Blogger dulu ya.
Silahkan sobat tuju halaman Edit HTML.
Kemudian cari kode ]]></b:skin>
Letakkan kode berikut ini diatas / sebelum kode ]]></b:skin>

.linkopacity img {filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; border:0;}
.linkopacity:hover img {filter:alpha(opacity=30); -moz-opacity:0.3; opacity:0.3;border:0;}
Simpan Template.

## Kemudian untuk membuat efek blur pada gambar yang akan di upload, contoh alamat url gambar yang ada :

maka tampilan normalnya seperti dibawah ini :

Untuk menambahkan efek blur kedalam gambar, maka kode yang harus sobat tambahkan adalah class="linkopacity" dan hasilnya seperti dibawah ini :

Jika disorot maka gambar akan tampak samar atau ngeblur dan jika di klik maka akan menuju link terkait.

Agar gambar yang di klik tidak ngelink kemana-mana atau tidak pindah ke halaman link yang ada, maka sobat tinggal mengganti linknya menjadi "#nogo" dan hasilnya seperti berikut :

Silahkan di sorot dan di klik, maka gambar tidak akan lari kemana-mana

Untuk merubah tingkat keburaman pada gambar, sobat tinggal atur angka pada kode css yang sudah disimpan pada template tadi. Ubah saja angka “30” menjadi angka yang lebih rendah untuk mendapatkan tingkat blur yang lebih gelap, contoh jika saya ubah angkanya menjadi “10” maka kodenya menjadi seperti berikut :

.linkopacity img {filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; border:0;}
.linkopacity:hover img {filter:alpha(opacity=10); -moz-opacity:0.3; opacity:0.3;border:0;}

Selamat mencoba ya.. Happy

X-Terselubung

Sabtu, 07 November 2009

Cara Membuat Status Loading

Rabu, 28 Oktober 2009

Cara Membuat Efek Zoom Pada Gambar

Cara Membuat Efek Blur Pada Gambar

Blog Archive