Membuat Kode Posting Lightbox Lebih Simple

Posting dengan kode yang berderet terlalu panjang dan rumit pasti membuat siapapun kesulitan untuk melakukan cek ulang, baik saat terjadi kesalahan penulisan ataupun saat harus dilakukan update ulang posting. Posting image, terlebih dalam bentuk gallery adalah salah satunya. Saat banyak image diperlukan untuk melengkapi posting kita akan melihat deretan kode html (di posting mode Edit HTML) yang begitu bejibun bikin kepala pening. Persoalan seperti ini memang perlu penanganan khusus hingga kode html di halaman posting bisa banyak terkurangi. Kode CSS adalah solusi paling tepat yang bisa kita andalkan. Dengan bantuan kode CSS maka bisa jadi kode html di box posting akan terkurangi hingga 50% lebih saat banyak image kita libatkan. Meskipun pada intinya tutorial tentang efisiensi penggunaan kode diposting image ini diperuntukkan pada penggunaan lightbox image viewer di blogger, namun demikian karena kode yang kita buat ini juga berlaku secara umum pada keseluruhan fungsi posting image, maka bisa saja dengan mudah digunakan untuk berbagai posting lain yang tidak bersentuhan dengan lightbox.

Contoh bentuk dasar kode posting lightbox

Di bawah ini ada 2 (dua) macam contoh kode yang digunakan untuk posting menggunakan lightbox. Kode pertama adalah kode html yang dibuat tanpa bantuan penambahan kode css penyederhana posting image, sedang contoh yang kedua telah menggunakan fungsi baru hasil penambahan kode css.

Kode posting lightbox yg tanpa bantuan css:

<a href="big-image.jpg" rel="lightbox[gallery-1]" title="bla...bla...bla..."><img height="..px" src="thumbnail.jpg" width="..px" style="float:left;margin:5px 15px 5px 0;padding:10px;border-radius:6px;box-shadow:0 0 8px #000;border:1px solid #aaa;" /></a>

Kode posting lightbox yg lebih simple (dg css):

<a href="big-image.jpg" rel="lightbox[gallery-1]" title="bla...bla...bla..."><img class="imgfl" src="thumbnail.jpg" /></a>

Dari contoh di atas bisa dilihat betapa dengan bantuan kode css jumlah kode html yang digunakan menjadi sangat jauh terkurangi. Itu hanya untuk sebuah image. Silahkan perkirakan berapa persen kira-kira efisiensi kode yang tercipta jika kita postingkan 10 buah image. Yah ... pasti jauh lebih besar dari yang terbayangkan.

Untuk mendapatkan tutorial cara mengefektifkan dan meminimalisasi penggunaan kode html untuk posting image, silahkan klik link di bawah ini:

Tips dan trik membuat kode posting image lebih simpel

Setelah memahami bagaimana cara membuat bentuk kode posting image yang paling ringkas dengan hasil yang super melalui panduan yang dibuka melalui link di atas, kini kita tinggal menambahkan kode untuk lightbox. Jika pakai lightbox yang umumnya digunakan blogger kita hanya perlu tambahkan kode rel="lightbox[gallery-1]" pada tag "a", sehingga bentuk kodenya menjadi seperti berikut:

Contoh kode pada lightbox (umum)

<a href="big-image.jpg" rel="lightbox[gallery-1]" title="bla...bla...bla..."><img class="imgfl" src="thumbnail.jpg" /></a>

Jika menggunakan lightbox berdasar kode dan panduan di gubhugreyot, kode htmlnya sbb:

Lightbox Image Viewer for Blogger

Contoh kode pada lightbox image viewer:

<a href="big-image.jpg" rel="GRlightbox[gallery-1]" title="bla...bla...bla..."><img class="imgfl" src="thumbnail.jpg" /></a>

Lightbox slideshow

Contoh kode pada lightbox slideshow

<a href="big-image.jpg" rel="grsslightbox[gallery-1]" title="bla...bla...bla..."><img class="imgfl" src="thumbnail.jpg" /></a>

Penggunaan kode posting image dengan menggunakan lightbox berdasarkan penempatan (poisisi) image.

Image di posisi sebelah kiri (left)

Image di sbl kiri (left):

<a href="big-image.jpg" rel="grsslightbox[gallery-1]" title="bla...bla...bla..."><img class="imgfl" src="thumbnail.jpg" /></a>

Image di posisi sebelah kanan (right)

Image di sbl kanan (right):

<a href="big-image.jpg" rel="grsslightbox[gallery-1]" title="bla...bla...bla..."><img class="imgfr" src="thumbnail.jpg" /></a>

Image di tengah (centre)

Image di tengah (centre):

<a href="big-image.jpg" rel="grsslightbox[gallery-1]" title="bla...bla...bla..."><img class="imgfc" src="thumbnail.jpg" /></a>

Image di posisi Tak Satupun (none)

Image poisis Tak satupun (right):

<a href="big-image.jpg" rel="grsslightbox[gallery-1]" title="bla...bla...bla..."><img class="imgfn" src="thumbnail.jpg" /></a>

Image di posisi Tak Satupun (none)

Gallery:

<div style="float:left;padding:0 0 10px 10px;margin:20px 0;border:2px solid #555;"><a href="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/img_gubhugreyot-bali-dance.jpg" rel="grsslightbox[gallery-1]"><img class="imgfn" src="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/th_gubhugreyot-bali-dance.jpg" /></a><a href="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/img_gubhugreyot-bridge-bw01.jpg" rel="grsslightbox[gallery-1]"><img class="imgfn" src="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/th_gubhugreyot-bridge-bw01.jpg" /></a><a href="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/img_gubhugreyot-red-flower.jpg" rel="grsslightbox[gallery-1]"><img class="imgfn" src="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/th_gubhugreyot-red-flower.jpg" /></a><a href="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/img_gubhugreyot-night-01.jpg" rel="grsslightbox[gallery-1]"><img class="imgfn" src="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/th_gubhugreyot-night-01.jpg" /></a></div>
<div style="clear:both"></div>

Catatan/Keterangan:

1. rel="GRlightbox[gallery-1]" diperuntukkan untuk lightbox image viewer for blogger. Panduan membuat lightbox ini bisa dibuka melalui link di bawah ini:
   Panduan Membuat Lightbox Image Viewer for Blogger
2. rel="grsslightbox[gallery-1]" diperuntukkan untuk lightbox slideshow. Panduan membuat lightbox slideshow bisa dibuka melalui link di bawah ini:
   Panduan Membuat Lightbox slideshow

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Posting » Setu LEGI, January, 28, 2012

» Happy Blogging - gubhugreyot «

07.31 | 0 komentar | Read More

Adding CSS3 in Lightbox Slideshow: Membuat Lighbox Slideshow lebih Atraktif

Meninggalkan kode CSS3 saat membuat widget atau kelengkapan blog yang lain rasanya seperti memasak sayur tanpa garam. Kurang lengkap hingga sedikit hambar rasanya! Begitu pula dengan lightbox slideshow yang telah terpostingkan beberapa waktu berselang. Tanpa penambahan kode css3, lightbox slideshow ini memang sudah cukup menarik, namun jika kita berikan sentuhan box shadow, text shadow, border radius, dan sedikit animasi melalui css3 transition dan css3 transform tentunya akan jadi terlihat lebih fantastis. Kejelian menambahkan kode css3 dan memilih bagian yang harus di modifikasi menjadi bahian yang sebenarnya sangat bergantung kepada selera. Oleh karena itu pengembangan lighbox slideshow melalui css3 ini semoga bisa menjadi sumber referensi yang bermanfaat.

D E M O

D E M O Lightbox Slideshow

Beberapa bagian penting yang harus dirubah:

Sekalipun pada dasarnya penambahan kode css3 lightbox hanya dilakukan pada kode css, namun sedikit perubahan juga perlu dilakukan pada javascriptnya. Pengontrol lightbox seperti next, previous, play slideshow, stop slideshow, dan close yang sebelumnya berupa teks (dalam javascript) dihilangkan dan diganti dengan beberapa image yang berfungsi sebagai button pengontrol. Silahkan download kode CSS-nya untuk mengetahui apa saja kode css3 yang ditambahkan hingga lightbox slideshow ini terlihat berbeda.

Kode CSS dan Javascript Lightbox Slideshow plus CSS3

Link javascript & kode CSS Lightbox Slideshow

<link href="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/css/gubhugreyot-lightbox-ss-css3.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="http://gubhugreyot-lightbox-ss1.googlecode.com/files/gubhugreyot_lightbox-ss-1.2.js"></script>

Cara menggunakan lightbox slideshow

Simpan seluruh kode (link kode css dan javascript) di atas kode </head>, kemudian lakukan posting menggunakan lightbox.

Kode Posting Lightbox Single Image

<a href="image.jpg" rel="grsslightbox" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>

Kode Posting Lightbox-Gallery

<a href="image.jpg" rel="grsslightbox[gallery-1]" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>
<a href="image.jpg" rel="grsslightbox[gallery-1]" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>
<a href="image.jpg" rel="grsslightbox[gallery-1]" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>
<a href="image.jpg" rel="grsslightbox[gallery-1]" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>

Panduan Lengkap

• Panduan menggunakan lightbox slideshow plus css3 ini tak berbeda dengan lightbox sldeshow yang telah terpostingkan sebelumnya. Yang berbeda hanya pada link kode CSS dan link javascript lightbox slideshow. Silahkan buka panduannya melalui link di bawah ini.
  Cara menggunakan lightbox slideshow
• Jika tertarik untuk membuat lightbox yang tanpa slideshow, silahkan buka link berikut:
Lightbox image viewer for blogger
• Membuat lightbox mengharuskan blogger untuk bisa membuat image gallery lightbox. Ikuti panduan cara membuatnya disini:
  Cara membuat Image Gallery u Lightbox

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Posting » Kemis WAGE, January, 26, 2012

» Happy Blogging - gubhugreyot «

10.46 | 0 komentar | Read More

Tips & Trik Membuat & Menggunakan Lightbox di blogger

Membicarakan tentang lightbox yang berfungsi sebagai image viewer di blogger tentu tak akan lepas dari lightbox blogger plugins yang sudah terinstall di template. Perlu diketahui bahwa lightbox blogger plugins ini memang telah menjadi satu bagian terintegrasi dalam blog dan akan aktif bersamaan dengan saat kita mulai menggunakan template blogger dan memulai blogging.

Menilik penerapan plugins dengan metode seperti yang dikembangkan blogger (lightbox) sesungguhnya dalam beberapa hal dapat menimbulkan masalah baru apabila pengguna tidak menyadarinya. Pengintegrasian secara langsung menimbulkan masalah baru ketika seorang blogger mencoba menggunakan widget lightbox yang bersumber dari luar blogger dimana sumber kinerja preview image pada lightbox baru tersebut menggunakan kode rel="lightbox". Kode html ini ternyata identik dengan kode yang digunakan pada lightbox blogger plugins sehingga ketika fungsi lightbox dijalankan maka lightbox baru akan bekerja berbarengan dengan lightbox blogger plugins. Agar masalah seperti ini bisa dihindarkan, ada 2 ( dua) cara yang dapat digunakan.

1. Matikan terlebih dahulu fungsi lightbox blogger plugins sebelum menggunakan lightbox baru.
2. Gunakan lightbox (image viewer) yang menggunakan kode berbeda dengan yang digunakan pada lightbox blogger plugins (kode lightbox plugin » rel="lightbox")

Dari ke-2 hal yang tersampaikan di atas, cara pertama merupakan solusi yang paling banyak digunakan blogger agar dapat membuat lightbox baru yang jauh lebih menarik jika dibandingkan dengan lightbox blogger plugins. Untuk menonaktifkan lightbox blogger plugins ikuti langkah berikut:

1. Login ke Blogger.
2. Halaman Dasbor (Dasboard).
3. Klik Setelan (Settings).
4.  Klik Format (Formatting).
5. Cari Tampilkan gambar dengan Lightbox (Showcase images with Lightbox). Ada dua pilihan berkaitan dengan lightbox. Set pengaturan pada posisi "No".
6. Klik Simpan Setelan (Save Settings).
7. Selesai.

Dengan perubahan setting pada posisi "No" maka secara otomatis lightbox blogger plugins tak lagi difungsikan sehingga lightbox baru dapat segera dibuat dan digunakan.

Jika pada cara pertama kita harus menonaktifkan terlebih dahulu fungsi lightbox blogger plugins, untuk cara ke-2 kita bebas untuk menonaktifkan atau tetap membiarkan lightbox plugins. Jika kita tetap membiarkan lightbox dalam keadaan aktif maka hal ini berarti dalam blog, ada dua buah lightbox yang berbeda yang dapat dipergunakan secara bersamaan. Agar lightbox baru bisa difungsikan maka kode pengaaktifan lighbox baru harus dibuat berbeda dengan kode yang telah digunakan lightbox blogger plugin (rel="lightbox"). Bagaimana caranya? Tentu saja harus mencari lightbox baru yang sesuai dengan syarat yang telah disebutkan di atas. Dimana kita harus mencari? He... he... ya ..., segra saja browsing dan temukan yang sesuai atau ..... he... he ...., yah... daripada posing silahkan sampeyan buka saja di sini! (Lightbox Spesial untuk Blogger) dan di sini! (Lightbox Slideshow), serta di sini! (Lightbox : Demo & Tutorial).

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Posting » Selasa LEGI, January, 23, 2012

» Happy Blogging - gubhugreyot «

06.58 | 0 komentar | Read More

Lightbox » Blogger Plugins : Cara Mengaktifkan dan Menggunakan

Ada lightbox yang tak perlu repot-repot kita buat. Lightbox ini merupakan blogger plugins. Sampeyan hanya perlu mengaktifkan lightbox-nya, kemudian gunakan untuk posting. Lighbox Blogger plugins dilengkapi dengan button Close, mini gallery yang berfungsi sebagai image selector sekaligus juga dillengkapi dengan javascript mousewheel yang memungkinkan pengguna untuk menggeser gallery lightbox dengan memanfaatkan scroller (mouse).

Cara mengaktifkan lightbox blogger plugins

• Login ke Blogger.
• Dasboard
• Setelan (Settings)
• Format (Formatting)
• Tampilkan gambar dengan Lightbox (Showcase images with Lightbox)
• Ya (Yes)
• Simpan Setelan (Save Settings)

D E M O

Buka link demo di bawah ini untuk melihat hasil penggunaan lightbox dan contoh kode html posting lightbox:

D E M O Lightbox

Cara menggunakan kode

Kode yang digunakan untuk membuat lightbox bekerja sangat sederhana karena kita tak perlu menambahkan kode khusus. Penambahan yang terpenting hanyalah menentukan ukuran width dan height thumnail.

• Buatlah image dalam ukuran besar (image.jpg). Sampeyan sebaiknya menggunakan ukuran berkisar 400px (width) hingga 900px (width) dan 200px (height) hingga 500px (height).
  Catatan: Preview image dalam lightbox blogger berukuran sekitar 800px (width) dan 500px (height).
• Buat Posting dalam Mode Compose
• Klik toolbar insert Image untuk upload gambar (image) yang telah dipersiapkan sebelumnya. Tunggu proses upload selesai.
• Klik image di kolom (box) posting.
• Atur Ukuran image:
  • Small : untuk image (thumbnail) berukuran kecil.
  • Medium : untuk image (thumbnail) berukuran sedang.
  • Large : untuk image (thumbnail) berukuran besar.
  Karena image akan dipreviewkan melalui lighbox dalam ukuran besar sebaiknya gunakan small atau medium.
• Atur Posisi Image:
  • Left: untuk image di posisi sebelah kiri.
  • Center: untuk image di posisi tengah.
  • Right: untuk image di posisi sebelah kanan.
• Menambah Teks: Klik Caption kemudian tuliskan teks yang berhubungan dengan image.
• Terbitkan posting.

Gambar Tunggal (Single Image)

Bentuk kode posting lightbox dengan image pada posisi sebelah kiri (Bisa dilihat dengan klik mode Edit HTML).

<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXfxAH66yboF1ngAm99HAY-6HsBeTp6xAf_F3cTkoUvpytTbbgzp9NHLK5FCnH03xIg7XUOrJDCE4grfIIj-JkrpZRGqBl7KRmkyuzdy5hwUvhogedpQVgoIpV8vj4s7mBOSz_i9Ae8gA/s1600/.....jpg" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="..." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXfxAH66yboF1ngAm99HAY-6HsBeTp6xAf_F3cTkoUvpytTbbgzp9NHLK5FCnH03xIg7XUOrJDCE4grfIIj-JkrpZRGqBl7KRmkyuzdy5hwUvhogedpQVgoIpV8vj4s7mBOSz_i9Ae8gA/s200/.....jpg" width="..." /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Teks di sini</td></tr>
</tbody></table>

Dalam bentuk sederhana dapat dituliskan sbb:

<a href="image.jpg"><img src="thumbnail.jpg" border="0" width="200" height="150" style="float:left;margin:5px 12px 5px 0;" /></a>

Image Gallery

<a href="image-1.jpg"><img src="thumbnail-1.jpg" border="0" width="200" height="150"></a><a href="image-2.jpg"><img src="thumbnail-2.jpg" border="0" width="200" height="150"></a><a href="image-3.jpg"><img src="thumbnail-3.jpg" border="0" width="200" height="150"></a><a href="image-4.jpg"><img src="thumbnail-4.jpg" border="0" width="200" height="150"></a>

Catatan/Keterangan:

Untuk membuat image gallery buatlah kode tanpa terputus (bersambung) antara image pertama hingga terakhir seperti yang terlihat pada contoh kode di atas!

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

» Happy Blogging - gubhugreyot «

03.13 | 0 komentar | Read More

Lightbox Slideshow dengan prototype.js dan scriptaculous.js

Sekalipun lightbox ini sama seperti yang telah terpostingkan sebelumnya, namun satu nilai lebih dari lightbox slideshow ini adalah telah dengan ditambahkannya sebuah fungsi slideshow di dalamnya. Ketika sebuah gallery diaktifkan dengan membuka (klik) salah satu thumbnail maka secara otomatis slideshow akan bekerja. Untuk menghentikan slideshow cukup dengan meng-klik button text yang bertuliskan stop slideshow. Untuk menggunakan lightbox slideshow sampeyan harus upload javascript dan css lightbox-slideshow ke file hosting. Agar lebih praktis dan mudah lakukan saja di Google Sites. Tentang bagaimana cara melakukannya, silahkan bula link di bawah ini:

Panduan cara menyimpan file di Google Sites

Jika deno -1 tidak bekerja silahkan buka demo - 2

D E M O - 1

D E M O - 2

D E M O - Blogger

Cara Membuat Lightbox Slideshow

Karena cara membuat lightbox slideshow tak berbeda dengan lightbox sebelumnya, maka silahkan sampeyan buka tutorialnya dengan klik di sini

Catatan/Keterangan:

• Gunakan javascript dan kode CSS yang disertakan di bawah ini!
• Sebaiknya gunakan image dengan ukuran lebar di bawah 900px dan tinggi dibawah 500px karena image hanya akan ditampilkan dengan ukuran terbatas.
• Untuk thumbnail sampeyan dapat gunakan ukuran dibawah 250px (width) karena thumbnail yang terlalu besar akan memperlambat loading blog. Thimbail yang terlalu besar juga tak akan bermanfaat karena image (gambar) sebenarnya yang berukuran besar akan dipreviewkan melalui lightbox.
• Dengan menggunakan lightbox ataupun lightbox slideshow sebenarnya akan banyak menguntungkan blogger karena tak perlu lagi menampilkan image (gambar) dalam ukuran besar dalam posting yang tentu saja akan semakin memperlancar loading blog.
• Jumlah image dan thumbnail dalam setiap kelompok (gallery) tidak dibatasi, jadi silahkan tampilkan sebanyak sampeyan suka, hanya perlu sebuah pertimbangan agar tidak terlalu membuat beban loading terlalu besar/berat.
• Thumbnail dapat juga diganti dalam bentuk teks
• Ada lima buah background image yang terdapat dalam kode CSS lightbox-slideshow yang harus sampeyan upload di file hosting sebelum upload css.
  
  • http://lightbox-slideshow.googlecode.com/files/JQ-loadingLightBox.gif
  • http://lightbox-slideshow.googlecode.com/files/blank.gif
  • http://lightbox-slideshow.googlecode.com/files/prevlabel.gif
  • http://lightbox-slideshow.googlecode.com/files/nextlabel.gif
  • http://lightbox-slideshow.googlecode.com/files/closelabel.gif
• Upload atau penyimpanan ke-5 background image di atas bisa dilakukan di blogger atau di Google Sites.
• Ganti semua background image dalam kode CSS dengan yang telah diupload kemudian baru lakukan upload kode css di Google Sites.

Link Javascript dan Kode CSS Lightbox-slideshow:

<link rel="stylesheet" href="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/GR_lightbox-slideshow.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="http://lightbox-slideshow.googlecode.com/files/gubhugreyot_lightbox-slideshow-1.2.js"></script>

Cara menggunakan kode lightbox-slideshow

Single Image

<a href="image.jpg" rel="grsslightbox" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>

Image Gallery

<a href="image.jpg" rel="grsslightbox[gallery-1]" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>
<a href="image.jpg" rel="grsslightbox[gallery-1]" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>
<a href="image.jpg" rel="grsslightbox[gallery-1]" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>
<a href="image.jpg" rel="grsslightbox[gallery-1]" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>

Test/Percobaan:

Sebagai bahan untuk melakukan percobaan silahkan menggunakan kode berikut:

<div align="center" style="display:block;margin:30px auto;text-align:center;width:410px;">
<a href="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/img_green-frog.jpg" rel="grsslightbox[album-1]" title="Kodok ngorek neng pinggir kali."><img src="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/th_green-frog.jpg" width="180" height="130" style="float:left;margin:5px 12px 5px 0;padding:4px;background:#ddd;border:1px solid #888;box-shadow:0 0 10px #000;" /></a><a href="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/img_youtube-lord-ofthe-ring.jpg" rel="grsslightbox[album-1]" title="The Lord of The Rings"><img src="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/th_youtube-lord-ofthe-ring.jpg" width="180" height="130" style="float:left;margin:5px 12px 5px 0;padding:4px;background:#ddd;border:1px solid #888;box-shadow:0 0 10px #000;" /></a><a href="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/img_red-flower.jpg" rel="grsslightbox[album-1]" title="Indonesia seharusnya seindah bunga ini! Sayang banyak pejabat jadi maling!"><img src="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/th_red-flower.jpg" width="180" height="130" style="float:left;margin:5px 12px 5px 0;padding:4px;background:#ddd;border:1px solid #888;box-shadow:0 0 10px #000;" /></a><a href="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/img_war-horse.jpg" title="War Horse ....&lt;a href=&quot;http:&#47;&#47;gubhugreyot.blogdetik.com&quot; target=&quot;_blank&quot;&gt;gubhugreyot.blogdetik.com&lt;/a&gt;" rel="grsslightbox[album-1]"><img src="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/th_war-horse.jpg" width="180" height="130" style="float:left;margin:5px 12px 5px 0;padding:4px;background:#ddd;border:1px solid #888;box-shadow:0 0 10px #000;" /></a>
</div>

Catatan/Keterangan:

Jika blog mengalami masalah ketika menggunakan file dari google sites, karena link css menggunakan hosting dari google sites, silahkan download kode cssnya, kemudian copy dan pastekan di atas kode ]]></b:skin> yang terletak di atas kode </head>

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Jemuah PON, January, 20, 2012

» Happy Blogging - gubhugreyot «

17.33 | 0 komentar | Read More

Lightbox for Blogger : Beautifull Blogger Image Viewer

Nggak perlu panjang lebar, semua pasti 'dah pada tahu apa tuh lightbox. Image Viewer yang akan kita buat kali ini nggak pakai jQuery namun menggunakan prototype.js dan scriptaculous.js. Semua javascript dan kode CSS-nya dah lengakap n tinggal pasang di bawah tag pembuka header (<head>). Hanya, ... ini sekedar saran tapi cukup penting : setelah di coba dan berhasil, javascript lightbox dan css lightbox-nya sebaiknya sampeyan upload secara pribadi di file hosting agar bisa digunakan secara pribadi pula. mengapa hal seperti ini penting dilakukan? Ya... tentu saja berkaitan dengan bandwidth. Jika sampeyan upload sendiri pastinya yang akan pakai juga hanya sampeyan sendiri juga, so ... dengan begitu loading bisa cepat dan blog sampeyan tetap car .... lancar ...nggak pakai lelet! He .... he ... You, know?!
Oooiiii.... yah... barangkali ada nyang blom tahu apa itu lightbox, silahkan sampeyan buka demonya di bawah ini. Jika demo mungkin lelet ya mohon dimaafkan karena hanya mampu pakai hosting gratisan, bat... sobat!!

D E M O: BloggerD E M O

Cara Membuat Lightbox

• Login : Login ke Blogger dengan cara:
  
  • Tulis Alamat Email.
  • Tulis Password.
  • KLIK "Login".
• Dasboard/Dasbor : Akan dijumpai sesaat setelah KLIK "Login". Banyak link atau teks link terdapat di halaman ini. Cari dan klik link "Design/Rancangan".
• Kembali lanjutkan dengan klik link "Edit HTML".
• Back-up Templates :
  
  • KLIK Download template Lengkap/Download Full Templates.
  • Simpan file template di folder PC.
  • Kembali di halaman Edit HTML.
• Cari kode : <head> Gunakan Ctrl+F untuk mempercepat dan mempermudah pencarian kode! (lihat menu sebelah kiri: special tutorials.
• Letakkan Link kode CSS dan javascript lightbox tepat di bawahnya.
• Klik Save Template.

Link Javascript dan Kode CSS Lightbox:

<link href="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/01/GR_lightbox-2.04.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js" type="text/javascript"></script>
<script src="http://lightbox-image-viewer.googlecode.com/files/gubhugreyot-lightbox-2.04.js" type="text/javascript"></script>

Cara Penulisan kode Lightbox:

Single Image

<a href="image.jpg" rel="GRlightbox" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>

Image Gallery

<a href="image.jpg" rel="GRlightbox[gallery-1]" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>
<a href="image.jpg" rel="GRlightbox[gallery-1]" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>
<a href="image.jpg" rel="GRlightbox[gallery-1]" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>
<a href="image.jpg" rel="GRlightbox[gallery-1]" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>

Catatan/Keterangan:

• Seperti yang sudah tersampaikan di atas, agar loading blog sampeyan tidak terganggu karena "tidak boleh tidak" link javascript dan link CSS lightbox yang ada di posting ini pasti akan digunakan oleh banyak pengguna, maka sebaiknya GR_lightbox-2.04.min.js dan GR_lightbox-2.04.css di upload sendiri di file hosting.
• Dalam CSS dan javascript ada 4 buah image yang digunakan sebagai background. Upload juga background-image ini dan ganti yang sebelumnya sudah disertakan.
  
  • http://lightbox-image-viewer.googlecode.com/files/prevlabel.gif (GR_lightbox.css)
  • http://lightbox-image-viewer.googlecode.com/files/nextlabel.gif (GR_lightbox.css)
  • http://lightbox-image-viewer.googlecode.com/files/loadingAnimation.gif (GR_lightbox.min.js)
  • http://lightbox-image-viewer.googlecode.com/files/closelabel.gif (GR_lightbox.min.js)
• Untuk upload javascript dan kode CSS silahkan lakukan di Google Sites atau Google Code.
• Bagi yang membutuhkan panduan upload dan simpan file (javascript, css dll) di Google Sites, silahkan klik di sini!.
• Image.jpg = image dalam ukuran besar.
• thumbnail.jpg = image dalam ukuran kecil.
• gallery-1 = gallery pertama. Jika ada beberapa kelompok buatlah perbedaan gallery dengan gallery-2, galler-3 ... dsb. Gallery bisa diganti dengan nama yang lain!
• Jika blog mengalami masalah ketika menggunakan file dari google sites, karena link css menggunakan hosting dari google sites, silahkan download kode cssnya, kemudian copy dan pastekan di atas kode ]]></b:skin> yang terletak di atas kode </head>

Cara Membuat link pada caption

Membuat link pada caption dilakukan dengan cara membuat link pada title dimana symbol atau caracter-nya dituliskan dalam bentuk kode html. Perhatikan contoh di bawah ini disekitar teks yang bercetak tebal (lihat demo single image!).

Penulisan kode secara umum

<a href="image.jpg" rel="GRlightbox[gallery]" title="gubhugreyot.blogdetik.com"><img src="thumbnail.jpg" width="200" height="150" /></a>

Menambahkan link pada caption lightbox (dituliskan pada title):

<a href="image.jpg" rel="GRlightbox[gallery]" title="&lt;a href=&quot;http://gubhugreyot.blogdetik.com&quot;&gt;gubhugreyot.blogdetik.com&lt;/a&gt;"><img src="thumbnail.jpg" width="200" height="150" /></a>

Test/Percobaan:

Gunakan kode berikut di halaman posting untuk melakukan percobaan:

<div align="center" style="display:block;margin:30px auto;text-align:center;width:410px;">
<a href="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/img_green-frog.jpg" rel="GRlightbox[gallery-1]" title="Kodok ngorek neng pinggir kali."><img src="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/th_green-frog.jpg" width="180" height="130" style="float:left;margin:5px 12px 5px 0;padding:4px;background:#ddd;border:1px solid #888;box-shadow:0 0 10px #000;" /></a><a href="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/img_youtube-lord-ofthe-ring.jpg" rel="GRlightbox[gallery-1]" title="The Lord of The Rings"><img src="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/th_youtube-lord-ofthe-ring.jpg" width="180" height="130" style="float:left;margin:5px 12px 5px 0;padding:4px;background:#ddd;border:1px solid #888;box-shadow:0 0 10px #000;" /></a><a href="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/img_red-flower.jpg" rel="GRlightbox[gallery-1]" title="Indonesia seharusnya seindah bunga ini! Sayang banyak pejabat jadi maling!"><img src="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/th_red-flower.jpg" width="180" height="130" style="float:left;margin:5px 12px 5px 0;padding:4px;background:#ddd;border:1px solid #888;box-shadow:0 0 10px #000;" /></a><a href="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/img_war-horse.jpg" title="War Horse ....&lt;a href=&quot;http:&#47;&#47;gubhugreyot.blogdetik.com&quot; target=&quot;_blank&quot;&gt;gubhugreyot.blogdetik.com&lt;/a&gt;" rel="GRlightbox[gallery-1]"><img src="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/th_war-horse.jpg" width="180" height="130" style="float:left;margin:5px 12px 5px 0;padding:4px;background:#ddd;border:1px solid #888;box-shadow:0 0 10px #000;" /></a>
</div>

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Jemuah PON, January, 20, 2012

» Happy Blogging - gubhugreyot «

13.00 | 0 komentar | Read More

Cara Membuat JQuery LightBox

Meskipun ada berbagai macam cara membuat lightbox dengan berbagai javascript seperti halnya menggunakan mootool dan prototype.js, namun kita akan utamakan terlebih dahulu cara pembuatan lightbox image viewer menggunakan jquery-1.3.2.js atau jquery.1.3.2.min.js. Tujuannya tak lain adalah sebagai upaya untuk memaksimalkan fungsi jquery-1.3.2.js. Gambaran sederhana tentang light box adalah, saat kita KLIK sebuah image atau thumbnail di halaman blog, maka akan terlihat preview image dalam ukuran yang jauh lebih besar yang ditampilkan seperti layaknya pada sebuah window baru di halaman blog dengan disertai efek layar gelap (transparency effects). Beberapa controll disertakan di dalamnya seperti next, previous dan close. Beberapa lighbox yang lain bahkan menggunakan contoll baru yang berfungsi untuk mengontol fungsi slideshow yang sekaligus disertakan.

Supaya mudah untuk di aplikasikan oleh semua blogger, jquery LightBox ini akan kita buat dalam bentuk "paket langsung tempel" dengan penggunaan kode HTML posting teramat sederhana sehingga siapaun dengan mudah mampu menggunakan dan menciptakan sebuah blog yang luar biasa atraktif. Semua kode telah terupload di file hosting dan dalam bentuk link siap pakai. Silahkan pasang dan simpan di template di bawah kode <head> atau di atas kode </head> kemudian segera coba di ruang posting, terbitkan, buka blog dan nikmati cantiknya tampilan Jquery LightBox.

Cara membuat JQuery LightBox

1. Login ke Blogger.
2. Halaman Dasbor (Dasboard).
3. Klik Rancangan (Design).
4. Klik Edit HTML.
5. Cari kode <head>. Gunakan Ctrl + F untuk mempermudah pencarian.
6. Copy dan paste-kan seluruh kode css dan javascript di bawah kode <head> atau di atas kode </head>.
7. Klik Simpan Template (Save Template).
8. Segera coba dengan melakukan posting untuk melihat hasilnya.

Link kode CSS dan Javascript jQuery Lightbox Image Preview.

Sekalipun semua kode dalam bentuk siap paka miliki, untuk pemakian permanen di blog anda sebaiknya seluruh kode css dan javascript (kecuali jQuery) sebaiknya anda upload difile hosting yang bisa digunakan secara pribadi. Cara seperti ini perlu dilakukan agar bandwidth tetap terkendali hingga fungsi lightbox dan loadingnya selalu dalam kondisi maksimal.

Kode CSS dan Javascript Lightbox:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="https://sites.google.com/site/gubhugreyotprojects/juli-2010/javascript/GR_jQlightbox01.js" type="text/javascript"></script>
<link href="https://sites.google.com/site/gubhugreyotprojects/juli-2010/css/GR_jQlightbox01.css" rel="stylesheet" type="text/css"/>

Kode Posting jQuery Lightbox

Kode Dasar jQuery Lightbox

<a href="big-image-1.jpg" class="GRjQlightbox" title="Caption here"><img src="thumbnail-1.jpg" style="width:..px;height:..px;padding:..px;border:..px;background:#..;" /></a>
<a href="big-image-2.jpg" class="GRjQlightbox" title="Caption here"><img src="thumbnail-2.jpg" style="width:..px;height:..px;padding:..px;border:..px;background:#..;" /></a>
<a href="big-image-3.jpg" class="GRjQlightbox" title="Caption here"><img src="thumbnail-3.jpg" style="width:..px;height:..px;padding:..px;border:..px;background:#..;" /></a>
<a href="big-image-4.jpg" class="GRjQlightbox" title="Caption here"><img src="thumbnail-4.jpg" style="width:..px;height:..px;padding:..px;border:..px;background:#..;" /></a>

Contoh Kode Posting jQuery Lightbox

Contoh Kode Dasar jQuery Lightbox

<a class="GRjQlightbox" href="https://sites.google.com/site/gubhugreyotprojects/juli-2010/images/img_gubhugreyot-ngligo.jpg" title="Calon isteri pertama."><img src="https://sites.google.com/site/gubhugreyotprojects/juli-2010/images/th_gubhugreyot-ngligo.jpg" width="200" height="150" style="border:2px solid #555;padding:8px;margin:10px 0 0 10px;"/></a><a class="GRjQlightbox" href="https://sites.google.com/site/gubhugreyotprojects/juli-2010/images/img_gubhugreyot-baju-kuning.jpg" title="Calon isteri kedua."><img src="https://sites.google.com/site/gubhugreyotprojects/juli-2010/images/th_gubhugreyot-baju-kuning.jpg" width="200" height="150" style="border:2px solid #555;padding:8px;margin:10px 0 0 10px;"/></a><a class="GRjQlightbox" href="https://sites.google.com/site/gubhugreyotprojects/juli-2010/images/img_gubhugreyot-baju-putih.jpg" title="Calon isteri ketiga."><img src="https://sites.google.com/site/gubhugreyotprojects/juli-2010/images/th_gubhugreyot-baju-putih.jpg" width="200" height="150" style="border:2px solid #555;padding:8px;margin:10px 0 0 10px;"/></a><a class="GRjQlightbox" href="https://sites.google.com/site/gubhugreyotprojects/juli-2010/images/img_gubhugreyot-kaos-kuning.jpg" title="Calon isteri keempat."><img src="https://sites.google.com/site/gubhugreyotprojects/juli-2010/images/th_gubhugreyot-kaos-kuning.jpg" width="200" height="150" style="border:2px solid #555;padding:8px;margin:10px 0 0 10px;"/></a>

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Senin PAHING, January, 30, 2012

» Happy Blogging - gubhugreyot «

06.19 | 0 komentar | Read More