Anda dapat membuat efek foto di tema Tumblr Anda yang menampilkan gambar dengan jelas saat mouse melayang di atas gambar, tetapi kemudian saat mouse tidak melayang di atas gambar, gambar tampak kabur. Pertama, siapkan gambar yang akan Anda gunakan untuk efeknya. Kemudian masukkan dua cuplikan kode di tema Tumblr Anda. Perhatikan bahwa kode tidak didukung di posting Tumblr, hanya di tema blog.
Siapkan Gambar
Untuk menyelesaikan tugas gambar buram, Anda memerlukan dua gambar yang hampir identik: satu salinan gambar asli yang jelas dan salinan kedua dari gambar yang sama, hanya buram. Gunakan efek Blur di GIMP atau Photoshop untuk membuat tampilan foto kedua menjadi buram. Pastikan gambar memiliki dimensi yang sama persis.
Kode JavaScript
Cuplikan kode JavaScript disisipkan di antara
dan tag blog Tumblr Anda. Kode JavaScript mencakup acara MouseRollover dan MouseOut. Acara MouseRollover menginstruksikan gambar yang jelas untuk ditampilkan saat mouse melayang di atas gambar. Acara MouseOut menentukan gambar mana yang akan ditampilkan saat mouse tidak melayang di atas gambar.Cuplikan kode JavaScript yang digunakan untuk efek ini adalah:
Ubah referensi "Picture1.jpg" ke URL untuk gambar asli yang jelas. Ubah referensi "Picture2.jpg" ke URL untuk gambar buram.
Kode HTML
Kode HTML yang menyertai cuplikan Javascript menentukan ukuran, lokasi, dan tata letak gambar. Sisipkan kode HTML pada tema Tumblr tempat tampilan foto yang ingin ditampilkan. Kode HTML yang menyertai potongan Javascript di atas adalah:
Ganti "Picture2.jpg" dengan URL ke foto buram, yang akan ditampilkan secara default. Ubah variabel "lebar" dan "tinggi" ke ukuran yang diinginkan dari gambar yang Anda render.
Instal Kode
Untuk menginstal kode di tema Tumblr Anda, buka dasbor Tumblr Anda, lalu klik tab "Sesuaikan" di dasbor agar blog dapat dimodifikasi. Klik opsi "Edit HTML" untuk membuka editor tema. Pilih potongan kode Javascript untuk menyorot kode, lalu tekan "Ctrl-C" untuk menyalin kode. Klik spasi di depan "” di kode tema Anda, lalu tekan “Ctrl-V” untuk menempelkan kode.
Salin kode HTML, lalu kembali ke editor tema Tumblr. Temukan lokasi dalam kode tempat Anda ingin membuat efek foto. Klik di lokasi, lalu tekan "Ctrl-V" untuk menempelkan cuplikan HTML. Klik "Perbarui Pratinjau" untuk menguji efek di jendela Pratinjau. Klik "Simpan" untuk menyimpan perubahan.
