Original Size Image on Mouseover

Tidak harus menggunakan javascript untuk menciptakan sebuah effect pada sebuah gambar atau photo. Original Size Image on Mouseover menjadi salah satu bukti penciptaan effect yang sangat menarik meskipun murni hanya menggunakan KODE CSS. Gambar atau photo akan ditampilkan dalam bentuk yang lebih kecil, namun ketika cursor menyentuhnya maka gambar dengan ukuran aslinya akan spontan ditampilkan di halaman blog. Penggunaan CSS yang yang relatif kecil ini tentu saja akan sangat bermanfaat kala diterapkan dalam blog karena loading menjadi relatif tidak terpengaruh.

Cara menggunakan Original Size Image on Mouseover :

1. Login ke Blogger.
   
   • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
   • Tuliskan Password.
   • Klik "Sign in"
2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
   Klik "Rancangan (Design)".
3. Kembali halaman baru akan terbuka, klik "Edit HTML".
4. Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
   
   • Backup/Restore Template » berisi fitur untuk melakukan backup template.
     Lakukan Backup template setiap kali akan melakukan penambahan atau pengurangan kode (xHTML, kode CSS dan javascript) melalui "Box Edit Template".
   • Edit Template » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
   • Old Templates » berisi template lama blogger (Template Tata Letak & Template Klasik.
5. Cari kode ]]></b:skin> pada "Box Edit Template".
6. Copy kode CSS dan letakkan di atas ]]></b:skin>.
7. Klik "Simpan Template (Save Template)"

Kode CSS :

.GRzoomer_css{
        float:left;
        clear:left;
        padding-bottom:5px;
        padding-right:5px;
}
.GRzoomer_css a{
        display:block;
        text-decoration:none;
}
.GRzoomer_css a:hover{
        position:relative;
}
.GRzoomer_css span img{
        border:8px ridge #fff;
        margin-bottom:8px;
}
.GRzoomer_css a span{
        position:absolute;
        display:none;
        width:auto;
        color:#ffcc00; /* warna caption */
        text-decoration:none;
        font-family:"MS Serif", "New York", serif;
        font-size:14px; /* ukuran teks caption */
        background:rgba(0,0,0,0.5);
        font-weight:bold;
        padding:6px 4px;
}
.GRzoomer_css a:hover span{
        border:4px solid #930;
        border-radius:10px;
        display:block;
        position:absolute;
        left:30px;
        top:-150px;
        z-index:100;
}
.GRzoomer_css a:hover span img{
        border-radius:6px;
}
.GRzoomer_css_thumb{
        width:100px;
        margin:5px 12px 5px 0;
        padding:5px;
        background:#ddd;
        border:1px solid #06C;
        border-radius:4px;
        height:auto;
        opacity:0.65;
        filter:alpha(opacity=65);
}
.GRzoomer_css_thumb:hover{
        opacity:1.0;
        filter:alpha(opacity=100);
  z-index:999; 
}

xHTML :

<div class="GRzoomer_css">
<a href="URL-1"><img src="image-1.jpg" class="GRzoomer_css_thumb" /><span><img src="image-1.jpg" />Tambahkan teks di sini !Tambahkan teks di sini !Tambahkan teks di sini !Tambahkan teks di sini !</span></a>
</div>
<div class="GRzoomer_css">
<a href="http://har-bloggerstars.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2rqpeNp00WR56JBcC3701T0ItXRuUkD-6B6H9qqNKffbvk2lN3wxfkBtXYvecNXmrMj9vUkjwb9wLaiwkMPV3_A9CGhs6TOa7tfm_IOUvX9r3hCws9B0JakiAKji5fJwk-lZMeLUWNQo/s1600/gbr3.jpg" class="GRzoomer_css_thumb"/> <span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2rqpeNp00WR56JBcC3701T0ItXRuUkD-6B6H9qqNKffbvk2lN3wxfkBtXYvecNXmrMj9vUkjwb9wLaiwkMPV3_A9CGhs6TOa7tfm_IOUvX9r3hCws9B0JakiAKji5fJwk-lZMeLUWNQo/s1600/gbr3.jpg" />Tambahkan teks di sini !Tambahkan teks di sini !Tambahkan teks di sini !Tambahkan teks di sini !</span></a>
</div>
<div class="GRzoomer_css">
<a href="URL-3"><img src="image-3.jpg" class="GRzoomer_css_thumb" /><span><img src="image-3.jpg" />Tambahkan teks di sini !Tambahkan teks di sini !</span></a>
</div>

Cara menggunakan xHTML :

1. Gunakan xHTML untuk posting.
2. URL-1 & URL-3 ...dst » dapat diisi dengan alamat web/blog, image, posting dll.
3. image-1.jpg & image-3.jpg ...dst » URL image.
4. Tambahkan teks ... dst » caption yang menerangkan tentang image atau yang berkaitan dengan URL.
5. Gunakan image dengan ukuran yang tak terlalu besar hingga semua bagian image tetap berada di halaman blog.
6. Hal yang belum jelas tentang backup template, cara cari kode dan cara menyimpan kode dapat dibaca di Special Tutorials pada menu di kolom sebelah kiri.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:

Update » Jemuah LEGI, Maret, 23, 2012

» Happy Blogging - gubhugreyot «