Beberapa minggu yang lalu saya menerbitkan sebuah posting yang sangat populer yang menampilkan Image Zoom jQuery Menakjubkan Untuk Blogger Itu efek memungkinkan Anda untuk menampilkan di dept zoom dalam sebuah wadah di samping images.In posting ini kita memiliki yang sama di dept zoom. tapi kali ini tampaknya dalam gambar di whats disebut zoom.So batin jika Anda upload gambar ke blog Anda yang ditampilkan 200x200 piksel zoom yang muncul dalam space.Lets melihat demo sehingga Anda dapat mencobanya.
Lain zoom jQuery sangat keren dengan berkat Profesor Cloud , untuk Wordpress dan platform lainnya dapat Anda download efek di sana. Video Tutorial - View Video Tutorial Di bagian bawah Post Untuk Bantuan Tambahan.
Tambahkan Efek Zoom jQuery Untuk Blogger
. Langkah 1 Pada Anda Desain Dashboard Blogger Klik> Edit Html . Langkah 2 Cari potongan kode berikut di blog Anda Html: (Klik Ctrl dan F untuk bar pencarian untuk membantu menemukan kode - More Info )
</ Head>
Langkah 3. Copy dan Paste kode berikut Langsung Di atas / Sebelum </ head> Catatan -Jika Anda sebelumnya ditambahkan jQuery Untuk Template Anda Anda Bisa Hapus Garis Disorot.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
<script src='http://suyb.googlecode.com/files/cloud-zoom.1.0.2.js' type='text/javascript'/>
OK thats script jQuery ditambahkan dan karena itu zoom batin kita tidak perlu Css apapun sehingga Anda siap untuk menambahkan zoom untuk gambar Anda.
Menambahkan Efek Zoom Untuk Gambar
Untuk melakukan ini kita tambahkan potongan kode pada gambar Anda.
class="cloud-zoom" rel="softFocus: true, position:'inside', smoothMove:2"
Jadi dalam gambar biasa akan terlihat seperti ini:
<a class="cloud-zoom" rel="softFocus: true, position:'inside', smoothMove:2" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYo7Bymlz4cXxQXsBZg4Jdfpqu3qohwpFOl6UZ0CFQoDhh5Z6CEX_sK7IrI0zn0wieeU7Umu4GVtlWiMTBYuWjt0jEArOB11WLLxEHgVtIIHqjQp_5yA_3Y9N8RuT206j-zZUlY2Vj6pY/s1600/large-zoom-example.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYo7Bymlz4cXxQXsBZg4Jdfpqu3qohwpFOl6UZ0CFQoDhh5Z6CEX_sK7IrI0zn0wieeU7Umu4GVtlWiMTBYuWjt0jEArOB11WLLxEHgVtIIHqjQp_5yA_3Y9N8RuT206j-zZUlY2Vj6pY/s640/large-zoom-example.jpg"/></a>
Dalam upload foto langsung ke Blogger akan terlihat seperti ini:
<div class="separator" style="clear: both; text-align: center;">
<a class="cloud-zoom" rel="softFocus: true, position:'inside', smoothMove:2" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYo7Bymlz4cXxQXsBZg4Jdfpqu3qohwpFOl6UZ0CFQoDhh5Z6CEX_sK7IrI0zn0wieeU7Umu4GVtlWiMTBYuWjt0jEArOB11WLLxEHgVtIIHqjQp_5yA_3Y9N8RuT206j-zZUlY2Vj6pY/s1600/large-zoom-example.jpg" imageanchor="1" =><img border="0" height="409" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYo7Bymlz4cXxQXsBZg4Jdfpqu3qohwpFOl6UZ0CFQoDhh5Z6CEX_sK7IrI0zn0wieeU7Umu4GVtlWiMTBYuWjt0jEArOB11WLLxEHgVtIIHqjQp_5yA_3Y9N8RuT206j-zZUlY2Vj6pY/s640/large-zoom-example.jpg" width="640" /></a></div>
Mudah, Pastikan Anda memiliki script di tempat yang tepat, Jika Anda sudah memiliki jQuery di template Anda menghapus baris yang ditunjukkan dan menambahkan potongan kode ke gambar Anda.
Tidak ada komentar:
Posting Komentar