.jpg)
Yang ini sangat praktis membuatnya. Jquery simple image zoomer hanya menggunakan jQuery-1.3.2.js atau jQuery lain yang fungsinya setara dengan jQuery-1.3.2.js. Jika misalnya ada yang selama ini seudah menggunakan jQuery-1.3.2.js, jQuery-1.3.2.min.js atau bahkan mungkin jQuery-1.4.2.js hingga jQuery-1.7.2.js, maka tinggal tambahkan saja simple-image-zoomer.js kemudian gunakan untuk menampilkan gambar/image di halaman posting.
Sekalipun sebenarnya tanpa bantuan kode CSS simple image zoomer sudah bisa bekerja secara maksimal, namun kita akan coba seddikit menambahkan kode CSS yang digabungkan dengan css3 agar image terlihat lebih cantik.
D E M O
Sekalipun sebenarnya tanpa bantuan kode CSS simple image zoomer sudah bisa bekerja secara maksimal, namun kita akan coba seddikit menambahkan kode CSS yang digabungkan dengan css3 agar image terlihat lebih cantik.
D E M O
D E M OD E M O
Javascript Simple Image Zoomer
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script src="http://gubhugreyot-simple-zoomer.googlecode.com/files/gubhugreyot-simple-zoomer.pack.js" type="text/javascript"></script>
xHTML Simple Image Zoomer
<img class="gRzoom" src="https://sites.google.com/site/gubhugreyotprojects/jan-2012/images/img_gubhugreyot-gadisku-001.jpg" width="150" height="225" /> <img class="gRzoom" src="https://sites.google.com/site/gubhugreyotprojects/jan-2012/images/img_gubhugreyot-gadisku-002.jpg" style="width:200px;height:auto;" /> <img class="gRzoom" data-gRzoomto="700" src="https://sites.google.com/site/gubhugreyotprojects/jan-2012/images/img_gubhugreyot-gadisku-003.jpg" width="150" height="130" />
Cara menggunakan Simple Image Zoomer
- Login ke blogger.
- Halaman Dasbor (Dasboard).
- Klik Rancangan (Design).
- Klik Edit HTML.
- Lakukan pengamanan terhadap template atau Backup Template. Panduanya bisa dibaca di Special Tutorials yang ada di menu sebelah kiri.
- Cari kode <head>. Gunakan Ctrl + F untuk memudahkan pencarian kode. Jika menginginkan panduan cara cepat cari kode html dalam template buka Special Tutorials yang terletak di menu vertikal sebelah kiri.
- Copy dan pastekan javascript di bawah kode <head>.
- Jika ingin menggunakan tambahan kode CSS agar image terlihat seperti dalam DEMO, Cari kode ]]></b:skin>.
- Copy dan pastekan kode CSS di atas kode ]]></b:skin>.
- Klik Simpan Template (Save Template).
- Gunakan xHTML untuk melakukan posting.
- Buka halaman posting untuk melihat hasilnya.
Kode CSS Simple Image Zoomer
.gRzoom{
border:2px solid #eee;
margin:6px;
background:#aaa;
border-radius:10px;
padding:10px;
box-shadow:0 0 8px #000;
}Keterangan/Catatan
- Gunakan image dengan ukuran width dan/atau height lebih dari 300px agar efek zoom lebih terlihat.
- Width dan height yang disertakan pada kode html posting sebaiknya berukuran di bawah 250px agar tidak terlalu memenuhi halaman posting.
- Ukuran width dan height pada kode HTML menggunakan perbandingan sesuai dengan image sesungguhnya. Jika image berukuran width=800, height=400 maka pada kode html bisa menggunakan ukuran width=200 dan height=100
- Jika dalam kode html ditambahkan tag style (seperti contoh kode ke-3), maka bisa dituliskan width="..px; height:auto;
- Besaran zoom bisa diatur dengan menambahkan kode data-gRzoomto="700". Nilai 700 dalam satuan pixel (width).
- Kode CSS hanya dimaksudkan untuk memperindah image bebas untuk digunakan ataupun tidak.
Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :
» Happy Blogging - gubhugreyot «
Blog yang sangat Full kreasi.!
BalasHapusSemangat terus bang bos..hehee
Mantap gan dah cari2 bikin ga bisa tidur akhirnya ketemu juga. usul dong buat yang kaya magictoolbox
BalasHapusAwalnya script ini jadi di blog ane
BalasHapustapi seminggu kemudian kok gak muncul lagi ya, kalo di klik gak bisa membesar
terutama di www.ketapangindah.co.cc/search/label/Lyric Siluet
Mohon Pencerahannya
Salam Damai Pantai Ketapang Indah Sidaurip Cilacap
\m/'_'\m/
Mas keren banget....! oh iya jadi pengen langsung pasang nih...
BalasHapusoh iya saya mau nanya kalau efek yang mas pakai di blog ini tuh efek apa yah...? Efek yang saya maksud itu ketika saya menyorot sebuah link baik berupa teks atau gambar tiba-tiba keluar kolom berwarna biru berisi tulisan "silahkan langsung klik"...! Nah itu teh efek apa sih mas...?