Label:



Integrasi Plugin Reflex pada template Blogger
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:

</head>

Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:

<script src='http://hensblog.googlecode.com/files/reflex.pack.js' type='text/javascript'/>

Langkah 5
Simpan template dan lanjutkan ke langkah berikutnya

Menyisipkan kode reflex pada gambar artikel
Langkah A
Buatlah sebuah artikel dan upload suatu gambar
Langkah B
Pindahkan mode editor artikel ke mode Edit HTML. Cari kode gambar, seperti contoh dibawah ini:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwN-b9a7VXAEnyICtYGFbFBU_X9G_nD1LXKhD2R1DkVfcJRg_XnMkKQb9DCyz0rtEIH-hJWk8kRvkZzM_t0jTT04uUdmDQhdVstv96TxB5c2Ju5XnG5FJCI1tye7w00PbQwyG0VGd7pP03/s1600/jQuery-Auto-Image-Caption.jpg">
<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 222px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwN-b9a7VXAEnyICtYGFbFBU_X9G_nD1LXKhD2R1DkVfcJRg_XnMkKQb9DCyz0rtEIH-hJWk8kRvkZzM_t0jTT04uUdmDQhdVstv96TxB5c2Ju5XnG5FJCI1tye7w00PbQwyG0VGd7pP03/s400/jQuery-Auto-Image-Caption.jpg" border="0" alt="jQuery Auto Image Caption"id="BLOGGER_PHOTO_ID_5484533350455173970" />
</a>

Langkah C
Sisipkan kode dibawah ini untuk memberikan efek reflex:

class="reflex"

Sehingga kode menjadi seperti contoh dibawah ini:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwN-b9a7VXAEnyICtYGFbFBU_X9G_nD1LXKhD2R1DkVfcJRg_XnMkKQb9DCyz0rtEIH-hJWk8kRvkZzM_t0jTT04uUdmDQhdVstv96TxB5c2Ju5XnG5FJCI1tye7w00PbQwyG0VGd7pP03/s1600/jQuery-Auto-Image-Caption.jpg">
<img class="reflex" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 222px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwN-b9a7VXAEnyICtYGFbFBU_X9G_nD1LXKhD2R1DkVfcJRg_XnMkKQb9DCyz0rtEIH-hJWk8kRvkZzM_t0jTT04uUdmDQhdVstv96TxB5c2Ju5XnG5FJCI1tye7w00PbQwyG0VGd7pP03/s400/jQuery-Auto-Image-Caption.jpg" border="0" alt="jQuery Auto Image Caption"id="BLOGGER_PHOTO_ID_5484533350455173970" />
</a>

(Settingan lebih lengkap baca keterangan)
Langkah D
Terbitkan artikel



Keterangan:
Perhatikan langkah C! Setting-an lebih lengkap selain kode tersebut adalah seperti contoh dibawah ini:

class="reflex iheight50 idistance5 itiltleft iopacity50 iborder3 icolorFFF000"

Fungsi masing-masing kode sebagai berikut:

* reflex : class adalah fungsi dasar untuk membuat efek bayangan, tanpa setting-an lebih lanjut pun efek bayangan sudah terbentuk.
* idistance : class ini digunakan untuk membentuk jarak (celah) antara objek dengan bayangan, secara default=0 minimal=0 maksimal=100 dalam satuan pixel.
* iheight : class ini digunakan untuk mengatur tinggi objek pada sisi yang mengecil, secara default=33 minimal-10 maksimal=100 dalam satuan persen.
* iopacity : class ini digunakan untuk mengatur tingkat transparansi bayangan, secara default=33 minimal=0 maksimal=100 dalam satuan persen. Semakin besar nilainya maka bayangan semakin jelas.
* iborder : class ini digunakan untuk memberikan garis pinggir pada gambar, secara default=0 minimal=0 maksimal=100 dalam satuan pixel.
* icolor : class ini digunakan untuk mengatur warna garis pinggir, secara default=f0f4ff minimal=000000 maksimal=ffffff. Gunakan color picker untuk menemukan warna yang cocok.
* itilt : class ini digunakan untuk menciptakan efek 3 dimensi (Z-Tilt), secara default=right-none-left (jika ada 3 buah objek maka objek akan disusun dari kanan tengah kiri). Kita bisa menentukan jenis 3D-Tilt; "itiltright" atau "itiltnone" atau "itiltleft".

"Toturial ini diambil sepenuh nya dari http://modification-blog.blogspot.com/2010/07/menciptakan-bayangan-gambar-image.html

Comments (0)

Posting Komentar