EFFECT TELEVISION FOR IMAGE

Back with the BeBeN si Bloglang sejati...tii...tiii. Biasa, setelah keliling-keliling mencari gaya-gayaan buat blog kita tersayang beibeh...huehuehue. Pernah melihat gambar dengan efek televisi. Tampilan pertama seperti televisi runyeum gitooo. Tapi pas disorot sama mouse, akan tampak gambar aslinya.

Cek get dot for DEMO. Sebenarnya teknik ini bisa dipakai dua. Ada yang memakai efek runyeum-runyeum televisi, atau hanya efek garis-garis lembut. Kan tadi demonya juga ada dua toh!!! Yaaa sudah jangan mantengin demonya terus...mau tahu tidak nih caranya bagaimana bisa seperti begonoh.

1. Download terlebih dahulu gambar berikut, lalu hosting di hostingan sobat masing-masing gambarnya.zip.
2. Setelah mendapatkan gambarnya dan dihosting, lalu masukkan deh gambar-gambar yang tadi pada kode berikut ini.
Codenya :
.crt { float: left; position:relative; overflow:hidden; } .crt img { display:block; float: left; } .crt span.screen { display:block; position:absolute; top:0; left:0; width:1000px; height:1000px; background:transparent url(gambar-crt-screen.gif) top left repeat; } .crt span.top { display:block; position:absolute; top:0; left:0; width:1000px; height:70px; background:transparent url(gambar-crt-top.png) top left repeat-x; } .crt span.bottom { display:block; position:absolute; left:0; bottom:0; width:1000px; height:110px; background:transparent url(gambar-crt-bottom.png) bottom left repeat-x; }

Isi deh yang bertuliskan warna biru itu dengan gambar yang disuruh dihosting tadi.

3. Kode tersebut sebenarnya sudah bisa dipakai, tapi hanya mendapatkan efek garis-garis saja. Untuk mendapatkan efek televisi runyeum-runyeumnya, maka keseluruhan kodenya menjadi seperti ini.
.crt { float: left; position:relative; overflow:hidden; } .crt img { display:block; float: left; } .crt span.screen, .crt span.snow { display:block; position:absolute; top:0; left:0; width:1000px; height:1000px; background:transparent url(gambar-crt-screen.gif) top left repeat; } .crt span.snow { background:transparent url(gambar-crt-snow.gif) top left repeat; } .crt:hover span.snow { display:none; } .crt span.top { display:block; position:absolute; top:0; left:0; width:1000px; height:70px; background:transparent url(gambar-crt-top.png) top left repeat-x; } .crt span.bottom { display:block; position:absolute; left:0; bottom:0; width:1000px; height:110px; background:transparent url(gambar-crt-bottom.png) bottom left repeat-x; }

Bagaimana...pusingkan...xixixixi +_+'

4. Kode tersebut letakkan diatas/sebelum kode ]]></b:skin>
5. SAVE deh.

Nah setelah beres, sekarang tinggal cara memakainya di dalam postingan kitanya nih. Kode gambar standar yang didapat setelah melakukan upload seperti ini :

<img src="http://3.bp.blogspot.com/ALmJUhgt/S2MBMgfvnsI/ABCDEFGHIJKL/r37Sza2LetA/eneng-ennok.jpg" alt="" width="XXX" height="XXX">

Tinggal memakai panggilan kode berikut, maka akan begini kode gambarnya.

<div class="crt">
<img src="http://3.bp.blogspot.com/ALmJUhgt/S2MBMgfvnsI/ABCDEFGHIJKL/r37Sza2LetA/eneng-ennok.jpg" alt="" width="XXX" height="XXX">
<span class="screen"></span>
<span class="top"></span>
<span class="bottom"></span>
</div>

Itu kode untuk efek yang garis-garis yang akan muncul pada gambarnya. Kalau mau ada efek televisi runyeum-runyeumnya maka tinggal menambahkan sedikit kodenya, maka menjadi seperti ini.

<div class="crt">
<img src="http://3.bp.blogspot.com/ALmJUhgt/S2MBMgfvnsI/ABCDEFGHIJKL/r37Sza2LetA/eneng-ennok.jpg" alt="" width="XXX" height="XXX">
<span class="snow"></span>
<span class="screen"></span>
<span class="top"></span>
<span class="bottom"></span>
</div>

Kalau sukses maka akan tampak pada DEMO berikut ^_^. Good Luck and Happy New Year...eh Happy Blogging -__-'.

Trick by : matthewjamestaylor