Repair blog: gambar

Showing posts with label gambar. Show all posts

Sunday, November 24, 2013

Cara Membuat Efek Hover Transparansi Pada Gambar dalam Postingan Blog

Pada kesempatan kali ini saya akan memberikan trik dan panduan tentang Cara Membuat Efek Hover/Transparansi Pada Gambar dalam Postingan Blogspot.

Fungsi dari Tutorial ini adalah jika cursor mouse menyorot / atau berada pada salah Satu gambar pada blog, maka gambar tersebut akan menyala / buram pada tampilan blog pada postingan.

Coba arahkan kursor / mouse pada gambar maka akan terlihat buram.

Diatas adalah contohnya.

Cara Membuat Efek Hover/Transparansi Pada Gambar dalam Postingan Blogspot :

Pilih gambar yang akan digunakan
Setelah itu upload ke internet
Setelah di-upload, Anda akan mendapatkan URL gambar tersebut
URL gambar tersebut harus Anda sisipi dengan kode berikut ini :

onmouseover="this.style.opacity=0.4;this.filters.alpha.opacity=40"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" style="opacity:1;filter:alpha(opacity=100)"

Berikut adalah contoh code untuk dipasang pada postingan, warna merah adalah URL gambar.

Demikian blogger tutorial mengenai Cara Membuat Efek Hover/Transparansi Pada Gambar dalam Postingan Blog.

Semoga bermanfaat dan semoga berhasil.

Terima Kasih ^_^

Wednesday, November 6, 2013

Cara Membuat Gambar Berputar Dan Membesar Saat Disentuh Oleh Mouse

Cara Membuat Gambar Berputar Dan Membesar Saat Disentuh Oleh Mouse - Pengunjung Tutorial Belajar Blog Pada Kesempatan ini akan berbagi tutorial blog lanjutan dari Membuat Efek Zoom Pada Gambar Postingan Blog , apabila pada postingan sebelumnya gambar mempunyai efek zoom apabila mouse diarahkan pada gambar.

Kali ini saya sedikit berbagi tentang cara membuat gambar dalam posting blog berputar dan membesar saat di sentung oleh cursor, untuk contohnya coba sobat arahkan cursor ke gambar Naruto di atas, maka gambar akan berputar dan membesar. Apabila sobat blogger sekalian berminat untuk mencoba silakan ikuti langkah-langkah berikut ini:

1. Seperti biasa sobat harus login dulu di akun blog sobat

2. Pilih rancangan / desing dan klik edit HTML dan lanjutkan

3. Centang "Expand Template Widget" untuk menghindari apabila terjadi kesalahan

4. Sobat cari kode </head>

5. Setelah ketemu sobat copy paste code di bawah ini tepat di atas kode </head>

<style>#oktri img{-moz-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-webkit-transition:all .8s ease-in-out;transition:all .8s ease-in-out;}
#oktri img:hover{ -o-transform: scale(1.5) rotate(360deg); -moz-transform: scale(1.5) rotate(360deg); -webkit-transform: scale(1.5) rotate(360deg);}</style>

6. dan sobat klik save / simpan template.

Langkah selanjutnya untuk penenpatan gambar dalam postingan.

1. Sobat harus menambahkan kode <div id="oktri"> sebelum url gambar dan jangan lupa di tutup dengan kode </div> contoh seperti di bawah ini:

<div id="oktri">
<a href="http://http://blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi16OWJepPZSZ4t4AMjfH_1w71eu2ZVGNQ335Kfz0zxk3DUJblV31VpUuv_UcDjO4bSx9A-sw9LCw3kRbG3KNi6SrBgn1vK3fCqlA0GnT7oTdYV7EZd-kKjV6c09eJEMz50T5PyAycWAeF9/s200/naruto+dont+copy.png" /></a></div>

keterangan:

kode berwarna merah adala kode pembuka dan penutup
kode berwarna hijau silakan sobat ganti dengan URL blog Sobat dan URL gambar yang ingin Sobat pasang di dalam postingan.
Setelah semuanya selesai klik publikasikan.

Demikianlah tips "Cara Membuat Gambar Berputar Dan Membesar Saat Disentuh Oleh Mouse".

Semoga bermanfaat Sobat.

Sunday, November 3, 2013

Menempatkan Gambar Pada Paragraph Text di CorelDRAW

Mas Bro sekalian bisa menempatkan gambar pada teks paragraf, secara otomatis text yang dekat gambar tidak tertutup gambar, melainkan hanya mengikuti alur pada pinggir gambar, fitur untuk membuat namanya Wrap Paragraph Text;

Sebagai contoh, anda buat paragraph text dengan cara pilih Text Tool (F8) arahkan cursor pada area kerja, kemudian klik tahan geser (drag) arah diagonal kebawah dan lepas mouse, dan ketik apa saja, sebagai contoh paragraph text seperti dibawah ini;

Selanjutnya tempatkan gambar apasaja diatas paragraph text, seperti gambar dibawah ini;

Klik kanan pada object gambar foto, kemudian pilih Wrap Paragraph Text;

Hasilnya seperti gambar dibawah ini;

Hasil seperti diatas kurang menarik kelihatannya, dan untuk mengakalinya anda buat object kurva yang berfungsi untuk memotong, caranya seleksi kedua object dan klik Intersect pada Property Bar maka akan tercipta object perpotongan;

Dan kalau kita terapkan hasilnya akan seperti di bawah ini,

Sampeyan akan lebih mudah lagi kalau yang dimasukkan adalah gambar Vector, teks-nya akan langsung mengikuti alur sesuai dengan bentuk object gambar vector seperti contoh gambar dibawah ini;

Selamat Mencoba

Repair blog