Cara Memperbesar Photo Enlarge Image Dengan CSS.

Fresh Lime Std Up Pouch

Isi 400 Ml dan 800ml

Hiegenies

Ekstrak Jeruk nipis

Rp.3500/Rp.5000

Halaman postingan blog hanya sekian persen dari total lebar halaman blog, kadang ukurannya tidak lebih dari 500px dan maksimal 700px. Sisanya digunakan buat sidebar. Jadi rada susah jika ingin menampilkan sebuah gambar yang utuh katakanlah 1000 px. Satu layar penuh!

Ada masa ketika kita ingin agar pengunjung fokus pada sebuah gambar yang ingin kita tunjukkan, misalnya untuk menjual produk, agar pengunjung tahu persis gambar yang detail seperti apa tampa harus repot-repot mendownloadnya, maka ini akan menjadi masalah. Tapi tidak akan jadi masalah, jika anda cocok dengan sampel yang saya tunjukkan tadi. Saya jualan sabun cair anti lemak cuci piring, jadi cara di atas adalah metode yang saya pilih untuk menunjukkan produk saya. Untuk mencobanya, silahkan klik pada gambar sabun cair kemasan standing up pouch atau pada tulisan * enlarge image * agar bisa terlihat jelas seperti apa memperbesar gambar yang saya maksudkan.

Jika ingin membuat gamnbar utuh dalam sebuah halaman (enlarge image) seperti contoh di atas, tidak perlu menggunakan kode javascript. Cukup dengan kode html CSS untuk memperbesar photo (enlarge image). Berikut adalah trik untuk megaplikasikannya ke blog anda.

Kode ini terbagi dalam dua bagian, satu untuk di pasang pada CSS blog anda, dan satu lagi kode html yang akan diletakkan dimana posisi gambar yang anda inginkan.

Pertama: Kode CSS sebagai berikut:

<style type="text/css">

.product {width:320px; height:150px;background:#fff; border:1px solid #ddd;
margin:10px; auto; padding:10px;float:left;}

.productInfo {width:150px; float:left;}

.productMfr {font:bold 16px/18px arial, sans-serif; color:#c00; padding:0; margin:0;}

.productType {font:bold 14px/18px arial, sans-serif; color:#000; padding:0;
margin:0;}

.features {padding:10px 0; margin:0; list-style:none;}

.features li {font:normal 12px/16px arial, sans-serif; color:#555;}

.price {font:bold 14px/18px arial, sans-serif; color:#00c; padding:0 0 10px 0;
margin:0;}

a.clickbox, a.clickbox:visited, a.clickbox:hover {text-decoration:none;
text-align:center;}

a.clickbox img {display:block; border:0;}

a.clickbox b {display:block;}

a.clickbox em {font:bold 10px/12px arial,sans-serif; color:#000;}

a.clickbox {float:left; margin:0 15px 15px 0; display:inline;}

a.clickbox .lightbox {position:absolute; left:-9999px; top:-10000px; cursor:default;
z-index:500;}

a.clickbox .light {position:absolute; left:0; top:0; width:100%;}

a.clickbox .box {position:absolute; left:0; width:100%; text-align:center;
height:300px; top:30%; margin-top:-150px;}

/* trigger for IE6 */

a.clickbox:active {direction:ltr;}

a.clickbox:active .lightbox {left:0; top:0; width:100%; height:100%;}

a.clickbox .lightbox:hover,

a.clickbox:focus .lightbox {position:fixed; left:0; top:0; width:100%; height:100%;}

a.clickbox .lightbox:hover .light,

a.clickbox:active .lightbox .light,

a.clickbox:focus .lightbox .light {background:#fff; width:100%; height:100%; filter:
alpha(opacity=90);

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90); opacity:0.90;

}

a.clickbox .lightbox:hover .box img,

a.clickbox:active .lightbox .box img,

a.clickbox:focus .lightbox .box img {border:1px solid #ddd; margin:0 auto;
padding:30px; background:#fff;}

a.clickbox .lightbox:hover .box span,

a.clickbox:active .lightbox .box span,

a.clickbox:focus .lightbox .box span {display:block; width:560px; padding:0;
margin:10px auto; text-align:center; text-decoration:none; background:#fff;
border:1px solid #ddd;}

a.clickbox .lightbox .box span.title {font:normal 22px/26px verdana, sans-serif; color:#069;}

a.clickbox .lightbox .box span.text {font:normal 11px/16px verdana, sans-serif; color:#333;}

.clear {clear:left;}

a.clickbox i {display:block; width:32px; height:32px; position:fixed; right:-100px; top:0; z-index:500;}

a.clickbox .lightbox:hover i,

a.clickbox:active i,

a.clickbox:focus i {right:50%; top:30%; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTVMPftoFUTjtWFtJNcmcpaKF7gYmh-TnPJM_2zZGSQlWqIApNS59MLRX12j_w84ZSuDNWjt-yJtniwMMzfAUIJQY8MJSy0OqY8-uv4viVM4vDouF4fUbHTDhkyA3d08Yf4R-s46SfJ8U/s400/close2.png); margin-right:-295px; margin-top:-165px;}

#close {display:block; position:fixed; width:32px; height:32px; right:50%; top:30%;
margin-right:-295px; margin-top:-165px; z-index:1000; background:url();
cursor:pointer;}

</style>

Kode Css di atas bisa diletakkan di dua tempat yang berbeda dalam blog anda.

Gabungkan kode CSS di atas bersama kode CSS di template html blog anda. Login ke blog anda lalu >> Elemen Halaman >> Edit HTML template anda. Sebelumnya jangan lupa save template anda dulu untuk menghindari kesalahan pengeditan.

Lalu kopi kode diatas dan paste ke kelompok kode CSS. Tempatnya persis sebelum tag: ]]></b:skin>. Seperti biasa klik F3 atau Ctrl + F dan paste kode : ]]></b:skin> ke kotak pencarian. Paste seluruh kode di atas ke dalam CSS tadi. Semua kode... kecuali kode yang bertuliskan meran: <style type="text/css">. Di atas terdapat 4 tag seperti itu jadi hapus tag yang berwarna merah itu.

Klik preview, jika tidak ada pesan error yang muncul, save template anda.

Gabungkan kode CSS di atas bersama postingan blog anda. Kali ini paste seluruh kode di atas bersama dengan ke 4 tag <style type="text/css">. Jika ingin menampilkan metode *enlarge image* di sidebar, cukup dengan cara kedua. Tujuannya agar Template anda tidak terlalu crowded.

Kedua: Kode HTML seperti di bawah ini. Kopi seluruh kode ini lalu paste ke widget html anda. Caranya, klik >> element halaman >> lalu pilih HTML/Javascript pada menu yang disediakan blogger. Tapi jika ingin megaplikasikan ke postingan blog anda, cukup paste bersama kode CSS di atas yang telah anda paste sebelumnya. Jadi untuk membuat * enlarge image * caranya adalah kombinasi kode CSS di atas dengan kode HTML berikut ini. Gabungkanlah kode CSS di atas dan kode HTML di bawah ini ke postingan anda.

Jika anda memilih cara yang nomer 1, yakni mempaste kode CSS ke dalam template anda, maka anda hanya cukup mempaste kode html berikut ini ke posisi mana yang anda inginkan. Misalnya ke sidebar, atau footer. Jika anda melakukan cara nomer 1 ini, maka secara otomatis anda bisa membuat * enlarge image * di setiap postingan anda sendiri.

Kode HTML sebagai berikut:

<div id="info">

<div class="product">

<a class="clickbox" href="http://mandhey-link.blogspot.com2011/04/cara-membuat-sabun-cair.html">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYWy16dFlLLBCNWfOtKRHdH2-DH5P8da2NViQD3PX_35wCOr36IQG3sVlFGmUHO56jBGEDvyatAkZ4FqpYWgKuuGRRtRmrLNhV0daqBJ5Eh6n7H7euZwOwawaZwocDxQ0wCoIW5DYvfJs/s400/logokukec.jpg" alt="" title="Click for larger image">

<em>• Enlarge Image •</em>

<b class="lightbox">

<b class="light"></b>

<b class="box">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8pKyNii3uvm9tAPoWh-P67ywtALt9KFl_LER8Y153tfedjPj-FMDX01XESiR25Phy3YqIxAXz2cHJjqvgw2s0A3qkJ12HF5mly738oN64DUWwJm0211I8tjLsY9t2G7wc6RVnZYWZZH0/s400/logokr.jpg" alt="">

<span class="title">Sabun Cair - Anti Lemak Pouch</span>

<span class="text">Hiegenis, Keset, Harum dan tidak panas di tangan. Fresh Sabun Cair Cuci Piring Ukuran 8oo ml Rp.5000, Ukuran 4oo ml
Rp.35oo.<br><i></i></span>

</b>

</b>

</a>

<div class="productInfo">

<p class="productMfr">Fresh Lime Std Up Pouch</p>

<p class="productType">Isi 400 Ml dan 800ml</p>

<ul class="features">

<li>Hiegenies</li>

<li>Ekstrak Jeruk nipis</li>

</ul>

<p class="price">Rp.3500/Rp.5000</p>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq0yHDXYWF9qOI8bfeyb9WTEul0fTT-DGr8KN8SKLWOun1YhIpdGowK4yHs-5theN3legJqAAQeNS1v1WyJSHwKw46huz_7Es-3fyxGgXCUBl5iwDZ04L5SJunAlyNQYfld1j9U1-19JU/s400/cart.gif" alt="Checkout">

</div>

</div>

<div id="close"></div>

</div>

Save postingan anda lalu lihat hasilnya.

Tinggal sedikit penyesuaian dengan blog anda seperti:

1. Ganti link saya dengan link anda sendiri. Jika anda bermurah hati, sisakan satu link ke blog saya. Jika anda melakukan itu, segera beri info ke saya agar saya membuat link back ke blog anda.

2. Ganti foto dengan milik anda sendiri. Dua foto, satu ukuran 500px X 442 px dan yang kecil ukuran 150px X 132px. Jika ingin menyesuaikan sendiri, ganti semua ukuran divnya.

3. Ganti semua tulisan dengan tulisan anda sendiri. Save dan selesai.

Selamat mencoba..

Cara Memperbesar Photo Enlarge Image Dengan CSS.

Posting Komentar