Membuat Image Galllery

Posted by Palima | | 2:30 AM
Labels: , ,
Beberapa hari yang lalu saya melalukan share ke beberapa situs, untuk mencari hal-hal terbaru (menurut saya) kususnya tentang image, yang mana image ini banyak sekali bentuknya. Dalam artikel saya ingin berbagi pengalaman dengan Anda, sebetulnya slide image gallery ini berbayar, namun bisa dirubah gambarnya hanya saja link dari situs tersebut tidak bisa dirubah karena gratis. Tapi cukup lumayan hasilnya bisa kita nikmati dengan merubah gambar  hasil yang kita buat. Ya,, itung-itung mengenal dan melancarkan dalam edit mengedit code-code yang sangat rumit untuk mengasilkan sebuah slide image galleri. Bagi yang suka tantangan dalam mengedit, di sinilah kita mengalami sedikit kesulitan karena dalam penyempurnaan satu gambar saja tidak cukup satu kali menanamkan URL image, kita haru membuat ukuran gambar kecil dan ukuran gambar besar agar terlihat perubahannya ketika pengunjung mengklik image gallery tersebut.
 Ok, untuk memulai Anda masuk ke Blogger, >Pergi ke Design > untuk Edi HTML
  • 1. Paste code di bawah, persis di atas code </head>

  • 2. Berikutnya Beralih ke halaman posting baru dalam posisi Edti HTML, paste code di bawah pada halaman itu (halaman posting baru)


  • 3. Untuk menyelesaikan, code di bawah ini harus anda rubah dan paste di bawah code tadi pada halaman posting baru.

  •  Bila Anda merasa kesulitan membaca code image di bawah ini, Anda dapat meng-copy code tersebut secara manual yang berada paling bawah dengan tampilan lebih jelas dan nyata






<div class="thumbwrapper">
  

Gallery
 

<a class="highslide" href="http://www.highslide.com/samples/gallery3.jpg" onclick="return hs.expand(this, galleryOptions)"><img alt="Highslide JS" src="http://www.highslide.com/samples/gallery3.thumb.jpg" title="Click to enlarge" />&nbsp;</span></a>&nbsp;
  

<a href="http://www.highslide.com/samples/gallery7.jpg" class="highslide" onclick="return hs.expand(this, galleryOptions)"><img alt="Highslide JS" src="http://www.highslide.com/samples/gallery7.thumb.jpg" title="Click to enlarge" />&nbsp;</span></a>&nbsp;
    

<a class="highslide" href="http://www.highslide.com/samples/gallery5.jpg" onclick="return hs.expand(this, galleryOptions)"><img alt="Highslide JS" src="http://www.highslide.com/samples/gallery5.thumb.jpg" title="Click to enlarge" /></a></div>
  

<div class="thumbwrapper">




Code yang di atas ini menggunakan metode meng-klik ikon yang berada di pojok atas bagian kanan kode, caranya sentuh code dengan cursor, lihat ikon yang muncul, kemudian tnjuk satu persatu ikon tersebut, Untuk meng-copy code, klik saja ikon yang bertuliskan "Copy to Clipboard". Jika Anda ingin menanamkan cara copy seperti pada code di atas. Akan saya publikasikan segera


<div class="thumbwrapper">

Gallery

<a class="highslide" href="http://www.highslide.com/samples/gallery3.jpg" onclick="return hs.expand(this, galleryOptions)"><img alt="Highslide JS" src="http://www.highslide.com/samples/gallery3.thumb.jpg" title="Click to enlarge" />&nbsp;</span></a>&nbsp;


<a href="http://www.highslide.com/samples/gallery7.jpg" class="highslide" onclick="return hs.expand(this, galleryOptions)"><img alt="Highslide JS" src="http://www.highslide.com/samples/gallery7.thumb.jpg" title="Click to enlarge" />&nbsp;</span></a>&nbsp;

<a class="highslide" href="http://www.highslide.com/samples/gallery5.jpg" onclick="return hs.expand(this, galleryOptions)"><img alt="Highslide JS" src="http://www.highslide.com/samples/gallery5.thumb.jpg" title="Click to enlarge" /></a></div>

<div class="thumbwrapper">


  CATATAN:

Pada code gambar atau URL image  di atas, perhatikan ada tiga dari masing-masin kelompok code image sama, namun pada code tersebut ada satu code itu  untuk gambar menjadi besar  (code yang berwarna merah)
Sedangkan code yang berwna pink, untuk code gambar kecil, perlu dipehatikan agar gambar tersebut menjadi kecil, sebaiknya code .thumb.jpg ini jangan dihilangkan, masalhnya, jika dihilangkan maka gambar tidak akan mengalami perubahan
Setelah seluruh selesai. Klik Publikasi.
Selesai......Selamat mencoba semoga berhasil...Somaga bermanfaat untuk Anda ...Terima kasih......

Related Posts by Categories

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)