Efek Gambar jQuery Magnify

jQuery Gambar Magnify memungkinkan gambar apapun pada halaman yang akan diperbesar oleh faktor diinginkan ketika diklik , melalui sleek zoom in/zoom out .

Gambar diperbesar berpusat pada layar pengguna sampai diberhentikan. Ia bekerja pada kedua gambar dengan dan tanpa eksplisit lebar / tinggi atribut yang didefinisikan. Ini berarti Anda dapat mengambil gambar besar yang secara default akan terlihat keluar dari tempat ketika ditampilkan, menyusut menggunakan lebar eksplisit / atribut tinggi,

maka memungkinkan pengguna untuk memperbesar pada permintaan untuk dimensi aslinya ketika gambar diklik menggunakan script ini.

LIVE DEMO

Caranya sebagai berikut:

1. Login blog


2. Template dan edit html


3. Letakkan kode javascript di atas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type="text/javascript" src="http://yourjavascript.com/19247232113/magnify.js"></script>

script berwarna kuning jangan di simpan jika anda sudah mencantumkan pada template dalam versi berapapun.

4. save template

Kemudian saat sobat ingin menggunakan efek gambar jquery magnify, berikut yang harus di sisipkan dalam html post.

<img class="magnify" src="url gambar" style="height: 150px; width: 200px;" /></div>

5. Publis postingan sobat dan lihat hasilnya.



Demikian tutorial Efek Gambar jQuery Magnify. Semoga bermanfaat...

Cara membuat halaman under maintenance pada blog

Memasang halaman bergambar under maintenance bertujuan

 untuk memberitahu kepada pengunjung,

bahwa blog sobat dalam perbaikan

Halaman ini berada pada home/tampilan depan blog sobat.

Berikut caranya, apabila sobat ingin memasangnya

 1. login blog

2. rancangan

3. edit html dan centang "expand widget template"

4. letakkan kode berikut di atas ]]></b:skin>

html {

height: 100%;

background: url(http://www.ventiq.com/wordp/wp-content/uploads/2011/12/maintenance_dofus.jpg) no-repeat center 50%; margin: 0; 

}

 body { 

display: none; 

}

kode gambar berwarna kuning ganti sesuai keinginan.

5. simpan

Mudah bukan cara membuat halaman under maintenance pada blog?

Selamat mencoba!

Cara membuat efek zoom pada gambar post blog

Jika sobat ingin membuat efek zoom pada gambar postingan,

seperti gambar di atas(sorot mouse aja jika ingin lihat contohnya)

simak caranya:

1. Login blog

2. Rancangan

3. Edit html dan centang expand widget template

4. Letakkan kode berikut di atas ]]></b:skin>

.hovergallery img{-webkit-transform:scale(0.8);-moz-transform:scale(0.8);-o-transform:scale(0.8);-webkit-transition-duration:0.5s;-moz-transition-duration:0.5s;-o-transition-duration:0.5s;opacity:0.7;margin:0 10px 5px 0}.hovergallery img:hover{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);box-shadow:0px 0px 30px gray;-webkit-box-shadow:0px 0px 30px gray;-moz-box-shadow:0px 0px 30px gray;opacity:1}

5. Simpan template

Kemudian dalam editor postingan letakkan kode berikut pada gambar

<div class="hovergallery"> URL GAMBAR  </div> 

<div class="hovergallery"> <img src="http://dl4.glitter-graphics.net/pub/563/563974hf7kaxk18y.gif" width=90 height=90 border=0> </div>

Selanjutnya simpan postingan.

Mudah bukan cara membuat efek zoom pada gambar.

Selamat mencoba aja deh,

semoga tutornya bermanfat...

Cara membuat efek fade pada gambar blog

Efek fade pada gambar adalah efek gambar yang semula redup

apabila di sorot kursor maka akan perlahan menjadi semakin terang.

Jika sobat ingin mencobanya,

berikut ini caranya:

1. login blog

2. rancangan, edit html

3. letakkan kode  di bawah ini,

        <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>

        <script type='text/javascript'>

        $(document).ready(function() {

        $('img').fadeTo('slow', 0.5);

        $('img').hover(function() {

        $(this).fadeTo('slow', 1.0);

        }, function() {

        $(this).fadeTo('slow', 0.5);

        });

        });

        </script>

di atas kode </head>



4. Simpan template.



Mudah bukan cara membuat efek fade jquery gambar blog?

Silahkan mencoba, semoga infonya berguna..