MOHON PERHATIAN!!!........ Sehubungan sedang "ERROR"nya situs HTTP://WWW.RIPWAY.COM, maka bila Anda menemukan tutorial yang menggunakan kode dengan nama situs tersebut, sementara waktu JANGANLAH Anda gunakan. Mohon maaf, semoga anda memakluminya.............................

Mengucapkan Selamat Datang, Semoga Dapat Berkenan Di Hati Anda



SYAMSUDINNAMAKU telah hadir

KUNJUNGI CHANNEL YOUTUBE SAYA

Cara Membuat Efek Zoom Dengan CSS


Efek Zoom yang satu ini berbasis CSS yang memung-
kinkan efektifitas dalam kerjanya sehingga dapat
menghemat banyak waktu Anda karena hanya
menggunakan 1 (satu) gambar dalam proses pem-
buatannya. Sebuah teks keterangan untuk gambar
juga dapat Anda ditampilkan pada bagian bawah
gambar yang diperbesarnya. Keren, bukan ?!

Sebagai contohnya, Coba letakkan cursor Anda
pada gambar yang bertuliskan nama blog ini,
yang letaknya tepat di atas judul posting ini atau
di bawah header sisi sebelah kiri.

Kalau Anda sudah melihat contoh tersebut,
sekarang kita menuju ke tutorial cara
pembuatannya, yaitu seperti berikut ini :


1.   Rancangan -> Tambah Gadget
      Pilih HTML/JavaScript.

2.   Masukkan dalam kontennya
      kode yang berikut ini terus simpan.

<div class="ienlarger"><a href="URL nama blog Anda/"><img src="URL gambar Anda di sini" alt="thumb" class="resize_thumb" /><span>
    <img src="URL gambar Anda di sini" alt="large" /><br />
    Kalimat keterangan gambar</span></a></div>

KETERANGAN :

Masukkan URL nama blog dan URL gambar Anda.

Tuliskan juga keterangan gambarnya dengan
kalimat yang Anda inginkan.

1.   Kemudian masuk ke Edit HTML.

2.   Carilah tag </head>

3.   Copy kode yang ada di bawah ini dan
      paste-lah di atas tag </head> ini,
      lalu simpan template anda.

<style type="text/css">

.ienlarger {
 float: left;
 clear: none; /* set to left or right if needed */
 padding-bottom: 5px; /* space between thumbs. Don't change this to margin */
 padding-right: 5px; /* space between thumbs and wrapping text when there is any text around it */
}

.ienlarger a { 
 display:block;
 text-decoration: none;
/* add cursor:default; to this rule to disable the hand cursor */
}

.ienlarger a:hover{ /* don't move this positioning to normal state */
  position:relative;
}

.ienlarger span img {
 border: 2px solid #FFFFFF; /* adds a border around the image */
 margin-bottom: 8px; /* pushes the text down from the image */
}

.ienlarger a span {  /* this is for the large image and the caption */
 position: absolute;
 display:none;
 color: #FFF; /* caption text colour */
 text-decoration: none;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 18px; /* caption text size */
        text-align: center;
 background-color: #FF0000;
 font-weight: bold;
 padding-top: 10px;
 padding-right: 10px;
 padding-bottom: 13px;
 padding-left: 10px;
}

.ienlarger img { /* leave or IE puts a border around links */
border-width: 0;
}

.ienlarger a:hover span { 
 display:block;
 top: 30px; /* means the pop-up's top is 50px away from thumb's top */
 left: 70px; /* means the pop-up's left is 90px far from the thumb's left */
 z-index: 100;
 
/* If you want the pop-up open to the left of thumb, remove the left: 70px; and add  
right: 70px; This would mean the right side of the pop-up is 70px far from the right side of thumb */ 

/* If you want the pop-up open above the thumb, remove the top: 50px; and add  
bottom: 50px; This would mean the bottom of the pop-up is 50px far from the bottom of thumb */ 

/* add cursor:default; to this rule to disable the hand cursor only for the large image */
}

.resize_thumb {
 width: 256px; /* enter desired thumb width here */
 height : auto;
}

/* smart image enlarger ends here */

</style>

KETERANGAN :

Gantilah warna border & backgroundnya
sesuai dengan warna yang Anda kehendaki.

Sesuaikan juga ukuran width: dan height :-nya
dengan gambar yang Anda masukkan.

Selamat mencoba, good luck!


2 comments:

anak ganteng mengatakan...

mas keren artikelnya,,,
saran buat blog mas krangin donk animasinya berah eum,,,lo di akses

Syamsudinnamaku mengatakan...

Inginnya sih begitu mas,
Tapi susahnya ... karena itu merupakan
bagian dari contoh tutorialnya.
Jadi Sy mohon maaf sekaligus terima kasih
atas saran dan perhatiannya.

Posting Komentar