19 August 2015

Cara membuat efek zoom gambar pada blog

Pada kesempatan ini Idsalim.com membagikan cara membua efek zoom gambar pada blog. Ide ini muncul karena pada blog saya gambar yang ada pada post berukuran kecil, maka saya mencoba membuat efek zoom pada gambar sehingga gambar tampak kelihatan bertambah besar. Selain dari itu manfaatnya adalah membuat blog saudara akan tampak kelihatan hidup alias dinamis. Siapa yang tidak suka blog nya kelihatan hidup, tentu saudara menyukai hal yang sama dengan saya. Dengan alasan itu saya telah mencoba memasang efek zoom pada blog saya dan akan saya bagikan kepada saudara semua. Silahkan mencoba cara saya yang saya lengkapi dengan langkah-langkah menggunakan gambar.
Sudah pasti jelas saudara harus login dulu. Saya tidak jelaskan cara login, karena saudara sudah bisa
Setelah login blog saudara, saudara akan dihapakan dengan halaman seperti ini. Ini halaman blog saya.


Saudara pilih blog saudara yang akan saudara tambah efek zoom gambarnya. Karena blog saya ada 3, saya pilih yang Idsalim.com dan sudara klik panah kebawah yang ada pada koak hijau. Maka saudara akan dihadapkan seperti gambar dibawah saudara silahkan pilih TEMPLATE.

Langkah berikutnya saudara pilih edit HTML

Setelah klik edit html saudara dihadapkan dengan bahasa html blog saudara. Saudara klik saja sembarangan didalam bahasa htmlya. Kemudia tekan Ctrl + F dan ketik kotak search skin pasatikan saudara menemukan kode seperti gambar dibawah dalam kotak hijau

Lagkah selanjutnya saudara kopi pastekan kode dibawah ini
.post img, table.tr-caption-container { border:none; max-width:560px; height:auto; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; }
.post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.5); -o-transform: scale(1.5); -webkit-transform: scale(1.5); -webkit-border-radius: 0px 0px; -moz-border-radius: 0px / 0px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); }
Pastekan di atas kode yang ditemukan tadi. Lihat gambar dibawah ini.

Kemudian saudara Tinggal simpan template
Selesai
Silahkan saudara refres blog saudara dan saudara akan menemukan gambar pada postingan saudara akan ter zoom keika kursor saudara arahkan.

Saudara juga bisa lihat Cara pencarian Khusus di google 

Theme images by MichaelJay. Powered by Blogger.

Index berita

close
Like Facebook IDsalim.com untuk mendapatkan INFO terupdate