Zoom Image sangat bagus dan effektif untuk menciptakan effisiensi halaman blog. Dengan mengatur ukuran gambar, kita dapat memilih ukuran gambar yang ingin kita tampilkan di halaman blog hingga ukuran terkecil yang diinginkan. Sentuhan cursor pada gambar membuat gambar orisinil akan terpampangkan dihalaman blog sesuai dengan ukuran aslinya.
D E M OKlik link demo di bawah ini untuk melihat bagaimana image zoom bekerja dan membuat posting bertambah cantik.
Kode CSS
.GRzoombox{
position:relative;
float:left;
width:224px;
height:174px;
margin:5px 15px 5px 0;
}
.GRzoombox .GRzoom{
position:absolute;
left:0;
top:0;
padding:0;
margin:0;
border:12px ridge #663333;
border-radius:8px;
width:200px;
height:150px;
}
.GRzoombox .GRzoom:hover{
z-index:99999;
}Javascript:
<script src="http://gubhugreyotprojects.googlecode.com/svn/GRzoom.js" type="text/javascript"></script>
xHTML Posting Image Zoom
<div class="GRzoombox">
<img class="GRzoom" src="image.jpg" />
</div>Tuliskan teks atau kalimat anda di sini! Jika teks jumlahnya tak terlalu banyak dan anda ingin menggunakan image zoom lagi di bawahnya maka setelah teks terakhir tambahkan kode <div style="clear:both;"></div>
Gunakan image (image.jpg dengan ukuran selebar halaman posting atau lebih kecil. Jika image terlalu besar maka ketika zoom image bekerja gambar akan melewati halaman posting hingga ke sidebar kanan.
- Login ke Blogger
- Setelah halaman Dasbor (dasboard) terlihat, klik Design (Rancangan)
- Lanjutkan dengan klik "Edit HTML"
- Lakukan Backup Template. Caranya bisa anda buka di Special Tutorials yang ada di menu sebelah kiri.
- Cari kode ]]></b:skin> kemudian letakkan kode CSS di atasnya.
- Cari kode <head>. Letakkan javascript di atasnya.
- Klik "Simpan Template (Save Template)"
- Gunakan xHTML untuk posting seperti yang terlihat dlam box xHTML.
- Selesai dan selamat posting ... selamat ngelembur!!!!!
Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :
Update » Setu LEGI, Maret, 03, 2012 � Happy Blogging - gubhugreyot �
