Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

jQuery Simple Image Zoomer

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

D E M O

D 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

  1. Login ke blogger.
  2. Halaman Dasbor (Dasboard).
  3. Klik Rancangan (Design).
  4. Klik Edit HTML.
  5. Lakukan pengamanan terhadap template atau Backup Template. Panduanya bisa dibaca di Special Tutorials yang ada di menu sebelah kiri.
  6. 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.
  7. Copy dan pastekan javascript di bawah kode <head>.
  8. Jika ingin menggunakan tambahan kode CSS agar image terlihat seperti dalam DEMO, Cari kode ]]></b:skin>.
  9. Copy dan pastekan kode CSS di atas kode ]]></b:skin>.
  10. Klik Simpan Template (Save Template).
  11. Gunakan xHTML untuk melakukan posting.
  12. 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 «

5 komentar:

  1. Blog yang sangat Full kreasi.!
    Semangat terus bang bos..hehee

    BalasHapus
  2. Mantap gan dah cari2 bikin ga bisa tidur akhirnya ketemu juga. usul dong buat yang kaya magictoolbox

    BalasHapus
  3. Awalnya script ini jadi di blog ane
    tapi 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/

    BalasHapus
  4. Mas keren banget....! oh iya jadi pengen langsung pasang nih...

    oh 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...?

    BalasHapus

 
GR | Edited by | gubhug reyot