Tips Bloggerz: Tips Membuat Image Thumbnail Membesar Saat Kena Pointer

Tips kali ini membahas tentang bagaimana caranya memasang code HTML/css ke blog agar image atau gambar thumbnail yang kita pasang bisa membesar sehingga jelas apa yang ada di gambar tersebut, ini sangat cocok sekali bagi anda yang mau membuat blog berkonsep jualan atau toko online yang mengutamakan gambar dari produk yang anda jual.
Terus bagaimana cara membuatnya...

silahkan ikuti langkah berikut :

1. masukan code Css ini ke dalam halaman head blogmu

<style type="text/css">

/* smart image enlarger starts here */
/* If your images are not linking to other pages leave the links as <a href="#nogo"> Otherwise enlarger won't work in IE6 */

.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: 1px 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: #FFCC00; /* caption text colour */
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px; /* caption text size */
    background-color: #000000;
    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: 50px; /* means the pop-up's top is 50px away from thumb's top */
    left: 90px; /* 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: 90px; and add
right: 90px; This would mean the right side of the pop-up is 90px 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: 150px; /* enter desired thumb width here */
    height : auto;
}

/* smart image enlarger ends here */

</style>

2. Siapkan Gambar yang anda butuhkan, lalu upload agar bisa di akses

kemudian link kan ke halaman anda dengan code dibawah ini

<div class="ienlarger"><a href="http://www.dynamicdrive.com/"><img src="http://img406.imageshack.us/img406/4920/63734582.jpg" alt="thumb" class="resize_thumb" /><span>
    <img src="http://img406.imageshack.us/img406/4920/63734582.jpg" alt="large" /><br />
    Letakan Text disini.</span></a></div>

<div class="ienlarger"><a href="http://www.google.co.uk/"><img src="http://img257.imageshack.us/img257/1926/92628379.jpg" alt="thumb" class="resize_thumb" /><span>
    <img src="http://img257.imageshack.us/img257/1926/92628379.jpg" alt="large" /><br />
    Text anda disini here.</span></a></div>

    <br style="clear:left" />

Keterangan :
warna biru code CSS nya
warna Merah untuk url image silahkan diganti dengan url image yang anda upload
warna hijau untuk ukuran dari thumbnail ke large
Text yang di blok untuk tampilan keterangan gambar silahkan bisa diganti sesuka anda

Contohnya seperti klik disini

Keyword :

Rabu, 16 November 2011

Tips Membuat Image Thumbnail Membesar Saat Kena Pointer

Tidak ada komentar:

Posting Komentar