.jpg)
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 O
Klik link demo di bawah ini untuk melihat bagaimana image zoom bekerja dan membuat posting bertambah cantik.
Cara Menyimpan Kode CSS dan javascript
Update » Setu LEGI, Maret, 03, 2012
D E M O
Klik 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.
Cara Menyimpan Kode CSS dan javascript
- 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 «
Bos sya sdah coba menu jquery vertikal accordion,tapi setelah sya terapkan di blog sya koq ga ngefek? Knpa ya.? mhon pncerahanya bos.!
BalasHapusBos knp ngefeknya hanya pada satu artikel....
BalasHapusaha aku tau permasalahannya, klau sama file hostingnya blogspot gak mau bekerja. gimana ni bos?
HapusFile hosting saya maksud adalah gambar
HapusAku dah coba cek ke blog sampeyan & ternyata semua sudah bisa bekerja dengan baik!
HapusSalam...
gubhugreyot
Ada untungnya nyasar ke blog ini karena artikelnya sangat unik dan pencerahannya jelas banget serta mudah difahami, betul-betul gubhuk reyot karena memang banyak goyangannya, saya minta maaf sebelumnya karena langsung main kopas saja tanpa izin terlebih dahulu...., wassalam & terima kasih - semoga sukses selalu.
BalasHapus