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

Membuat Slideshow CSS3 u Image Gallery Lightbox

Slideshow ini hanya dibuat dengan css3, namun demikian anda boleh bandingkan dengan yang dibuat menggunakan javascript. CSS3 transition, CSS3 transform, box-shadow, text-shadow dan border-radius mampu menciptakan slideshow yang sangat indah dan takkan mengecewakan untuk digunakan di blog. Dengan hanya menggunakan kode css tentu saja slideshow css3 ini menjadi sangat enteng bebannya. Membuatnyapun terhitung sangat mudah hingga dalam waktu singkat bisa menjadi salah satu bagian dari blog sampeyan. Seperti kata pepatah, tak kenal maka tak sayang, tak makan maka perut keroncongan (he.. he...ngawur, ya?!), kita langsung saja menuju tkp untuk menyaksikan demo css3 slideshow yang telah digabungkan dengan lightbox.

D E M O Slideshow CSS3

Sekalipun slideshow ini didesain untuk menjadi sebuah gallery bagi lightbox, namun anda tetap bisa menggunakannya secara bebas tanpa harus menggunakan lightbox. Untuk menghilangkan fungsi lightbox cukup dengan membuang kode rel="GRlightbox[mygallery-1]". Jika pada demo hanya digunakan untuk menampilkan 6 (enam) buah image, namun demikian anda bisa menambahnya hingga sebanyak yang anda mau. Tentu saja penambahan image ini harus dipertimbangkan dengan controll yang digunakan. Semakin banyak image maka akan semakin bertambah pula controllnya hingga mungkin saja akan membuat terlalu penuh box slideshow-nya. Hal lain yang harus dipertimbangkan adalah kecepatan loading. Semakin banyak image maka loading akan semakin lama yang kadang membuat pengunjung bosan menunggu.

Cara Membuat Slideshow CSS3

1. Login ke Blogger.
2. Halaman Dasbor (Dasboard).
3. Klik Rancangan (Design).
4. Klik Edit HTML.
5. Lakukan backup template. Buka panduannya di sini!
6. Cari kode ]]></b:skin>. Panduan cara cepat mencari kode html di template bisa dibuka di sini!
7. Copy dan pastekan kode CSS tepat di atasnya.
8. Klik Simpan Template (Save Template).

Kode CSS Slideshow CSS3

#GRslideshow{
       margin:20px auto;
       text-align:center;
       position:relative;
       width:300px;
       height:225px;
       background:#ddd url(http://gubhugreyot.googlecode.com/files/bg_gubhugreyot-slideshow-css3.jpg) center no-repeat;
       background-size:300px 225px;
       border-radius:8px; 
       border:2px solid #555;
       padding:10px;
       box-shadow:0 0 4px #000; 
}
#GRslideshow:hover{box-shadow:-2px -2px 2px #555, 5px 5px 8px #222;}
#GRslideshow ul,#GRslideshow li,#GRcontroll,#GRcontroll li,#GRcontroll li a{list-style:none;margin:0;padding:0;border:0 solid;}
#GRpreview li{position:absolute;top:0;left:0;z-index:0;}
#GRpreview li a img{
       opacity:0;
       filter:alpha(opacity=0);
       transition:2s;
       -o-transition:2s;
       -moz-transition:2s;
       -webkit-transition:2s;
       -ms-transition:2s;
       border-radius:4px;
       width:300px;
       height:225px;
       margin:8px;
       border:1px solid #eee;
       box-shadow:0 0 8px #000;
}
#GRpreview li:target{z-index:5;}
#GRpreview li:target a img{opacity:0.6;filter:alpha(opacity=60);}
#GRslideshow:hover li:target a img{opacity:1.0;filter:alpha(opacity=100);}
#GRslideshow #GRcontroll{
       position:absolute;
       bottom:100px;
       left:0;
       width:95%;
       z-index:10;
       text-align:center;
       opacity:0;
       filter:alpha(opacity=0); 
}
#GRslideshow #GRcontroll,#GRcontroll li a{transition:0.6s;-o-transition:0.6s;-moz-transition:0.6s;-webkit-transition:0.6s;-ms-transition:0.6s;}
#GRslideshow:hover #GRcontroll{bottom:12px;opacity:1.0;filter:alpha(opacity=100); }
#GRcontroll li{display:inline-block;}
#GRcontroll li a{
       padding:1px 6px;
       margin:0;
       text-align:center;
       border-top:1px solid #aaa;
       border-bottom:1px solid #aaa;
       border-radius:2px;
       font-weight:500;
       font-size:12px;
       text-decoration:none;
       color:#fff;
       background:#555;
       text-shadow:1px 1px 1px #000;
}
#GRcontroll li a:hover, #GRcontroll li a:focus {
       box-shadow:0 0 6px #000;
       border-color:#00F;
       outline:none;
       color:#FF0;
       background:#333;
       transform:scale(1.2);
       -o-transform:scale(1.2);
       -moz-transform:scale(1.2);
       -webkit-transform:scale(1.2);
       -ms-transform:scale(1.2); 
}
#GRcontroll li a:active{
       transform:scale(0.8);
       -o-transform:scale(0.8);
       -moz-transform:scale(0.8);
       -webkit-transform:scale(0.8);
       -ms-transform:scale(0.8);
}
#GRcontroll li a:visited{color:red;}
#GRview1 a img,#GRview2 a img,#GRview3 a img,#GRview4 a img,#GRview5 a img,#GRview6 a img,#GRview7 a img,#GRview8 a img,#GRview9 a img,#GRview10 a img,#GRview11 a img,#GRview12 a img{margin:0;padding:0;border:0 solid;}

Gunakan kode berikut di halaman posting

xHTML Slideshow CSS3

<div id="GRslideshow"> 
    <ul id="GRcontroll"> 
        <li><a href="#GRview1">1</a></li> 
        <li><a href="#GRview2">2</a></li> 
        <li><a href="#GRview3">3</a></li>
        <li><a href="#GRview4">4</a></li> 
        <li><a href="#GRview5">5</a></li> 
        <li><a href="#GRview6">6</a></li> 
    </ul> 
    <ul id="GRpreview">
        <li id="GRview1"><a href="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/img_gubhugreyot-bali-dance.jpg" rel="grsslightbox[mygallery-1]"><img alt="img1" src="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/th_gubhugreyot-bali-dance.jpg" /></a></li>
        <li id="GRview2"><a href="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/img_gubhugreyot-bridge-bw01.jpg" rel="grsslightbox[mygallery-1]"><img alt="img2" src="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/th_gubhugreyot-bridge-bw01.jpg" /></a></li> 
        <li id="GRview3"><a href="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/img_gubhugreyot-red-flower.jpg" rel="grsslightbox[mygallery-1]"><img alt="img3" src="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/th_gubhugreyot-red-flower.jpg" /></a></li>
        <li id="GRview4"><a href="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/img_gubhugreyot-night-01.jpg" rel="grsslightbox[mygallery-1]"><img alt="img4" src="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/th_gubhugreyot-night-01.jpg" /></a></li> 
        <li id="GRview5"><a href="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/img_gubhugreyot-bwbunga-01.jpg" rel="grsslightbox[mygallery-1]"><img alt="img5" src="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/th_gubhugreyot-bwbunga-01.jpg" /></a></li>
        <li id="GRview6"><a href="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/img_gubhugreyot_burungku-01.jpg" rel="grsslightbox[mygallery-1]"><img alt="img6" src="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/th_gubhugreyot_burungku-01.jpg" /></a></li> 
    </ul>
</div>

Catatan/Keterangan:

1. Untuk membuat lightbox agar bisa dipadukan dengan slideshow css3, buka panduan cara membuatnya di sini
2. Gunakan image (thumbnail) slideshow dengan ukuran 300px(width)x225px(height).

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 «

11.28 | 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

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

The simplest post code for tooltip and image preview

Tooltip yang mampu menampilkan gambar dengan kode posting paling sederhana ini masih menggunakan jQuery-1.3.2.min.js. Javascript pembentuk tooltip dibangun dengan memanfaatkan fade effect, blink effects, text-shadow serta box shadow. Penggunaan kode yang sederhana diharapkan mampu mengurangi kepadatan kode di ruang posting atau widget. Selain itu kode yang teramat praktis ini membuat semua blogger akan dengan amat mudah menggunakannya.

Untuk membuat tooltip agar mempunyai tampilan menarik dan terlihat atraktif, kita juga memanfaatkan kode css sebagai pembentuk box tooltip. Tooltip didesain mampu menampilkan gambar dalam tiga variasi ukuran. Yang pertama dengan ukuran lebar (width) 200px, yang kedua 400px dan yang terbesar dengan ukuran gambar 600px. Penggunaan ukuran maksimal 270px dilakukan dengan pertimbangan bahwa sebuah gambar dalam tooltip dengan lebar 600px adalah sebuah ukuran yang sudah teramat besar. Karena ketinggian gambar dibuat dalam bentuk otomatis, maka apabila gambar mempunyai perbandingan 2:3 untuk width dan height, maka gambar akan terlihat dalam ukuran 600px x 900px. Sampeyan bisa melihatnya dalam DEMO berikut ini :

Link Dalam Bentuk Teks

Link Dalam Bentuk Teks

Arahkan cursor di atas gambar dan tunggu!

Langkah penggunaan tooltips

1. Login to BloGGeR : Tuliskan User Name/Nama Pengguna atau Email Address dan lanjutkan dengan menuliskan Password/Kode Rahasia (Sandi). Setelah semua tertulis dengan benar, KLIK Login.
2. Dasboard/Dasbor : Halaman pertama yang terlihat setelah login adalah Dasboard/Dasbor. Di sini ada beberapa link dengan fungsi yang berbeda. KLIK link Design/Rancangan.
3. Design/Rancangan: KLIK link Edit HTML
4. Edit HTML : BackUp Template dengan cara KLIK Download Full Template/Download Template Lengkap, kemudian Save/Simpan file Template di Folder PC.
5. Find HTML Code : Cari kode <head>.
   Letakkan jquery-1.3.2.min.js dan javascript tooltip dan link kode css tooltip di atasnya. Bentuknya akan seperti ini :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://image-on-tooltip.googlecode.com/files/jqtt-gubhugreyot.js" type="text/javascript"></script>
<link href='http://image-on-tooltip.googlecode.com/files/jqtt.css' media='screen' rel='stylesheet' type='text/css'/>

<head>

6. Save Template/Simpan Template : KLIK SAVE Template/Simpan Template.

Cara menggunakan kode HTML tooltips untuk posting atau di widget

Gambar dalam tooltip dengan ukuran (width) = 220px

Untuk menggunakan kode pertama ini, sampeyan harus menggunakan gambar minimal berukuran lebar (width) sebesar 200px karena ukuran sebesar ini yang akan di tampilkan di tooltip. Untuk link-nya bisa menggunakan gambar atau teks.

Contoh :

<a href="image.jpg" title="Tuliskan teks yang akan ditampilkan di tooltip di sini!" class="jqtt1"><img src="thumnail.jpg" width="100" /></a>

<a href="image.jpg" title="Tuliskan teks yang akan ditampilkan di tooltip di sini!" class="jqtt1">Teks Link (misalnya Gambar-1)</a>

Gambar dalam tooltip dengan ukuran (width) = 430px

Untuk menggunakan kode kedua, sampeyan harus menggunakan gambar minimal berukuran lebar (width) sebesar 400px karena ukuran sebesar ini yang akan di tampilkan di tooltip. Untuk link-nya bisa menggunakan gambar atau teks.

Contoh :

<a href="image.jpg" title="Tuliskan teks yang akan ditampilkan di tooltip di sini!" class="jqtt2"><img src="thumnail.jpg" width="125" style="border:5px outset blue;" /></a>

<a href="image.jpg" title="Tuliskan teks yang akan ditampilkan di tooltip di sini!" class="jqtt2">Teks Link (misalnya Gambar-2)</a>

Gambar dalam tooltip dengan ukuran (width) = 640px

Untuk menggunakan kode ketiga, sampeyan harus menggunakan gambar minimal berukuran lebar (width) sebesar 600px karena ukuran sebesar ini yang akan di tampilkan di tooltip. Untuk link-nya bisa menggunakan gambar atau teks.

Contoh :

<a href="image.jpg" title="Tuliskan teks yang akan ditampilkan di tooltip di sini!" class="jqtt3"><img src="thumnail.jpg" width="150" style="margin:10px 5px;border:4px solid green;" /></a>

<a href="image.jpg" title="Tuliskan teks yang akan ditampilkan di tooltip di sini!" class="jqtt3">Teks Link (misalnya Gambar-3)</a>

Catatan/Keterangan :

1. image.jpg merupakan gambar yang akan ditampilkan di tooltip. Image ini berukuran besar di atas 300px sesuai kategori tooltip (berdasar class : jqtt1, jqtt2 atau jqtt3.
2. thumnail.jpg adalah gambar dalam ukuran lebih kecil yang akan ditampilkan di posting atau widget blog. thumbnail.jpg sebaiknya berukuran malsimal 200px (width atau height) karena nantinya gambar/image (image.jpg)besar ditampilkan lewat tooltip.
3. Link dalam bentuk tertulis dapat juga dipergunakan seperti tertulis di atas (gambar-1 s/d gambar-3).
4. Width dan style pada kode html bisa dilakukan banyak perubahan tergantung selera pengguna. width dan height sesuai dengan ukuran thumbnail (thumbnail.jpg).
5. Gambar dalam Tooltip ini tidak akan membebani blog karena setiap gambar di tooltip hanya akan dimunculkan ketika link tersentuh cursor.
6. Untuk membuat bentuk tooltips yang berbeda silahkan rubah kode css tooltip.
7. image.jpg harus diganti dengan URL image yang akan ditampilkan di tooltip. Gambar ini berukuran besar (lebih besar dari thumbnail.jpg). Width atau height (tinggi atau lebarnya) sebaiknya lebih dari 300px sehingga fungsi tooltip image ini benar-benar maksimal. Pada intinya penggunaan media viewer seperti tooltip image adalah agar kita dapat menampilkan image dengan ukuran besar akan tetapi loading atau beban blog tetap terjaga (ringan). Mengapa bisa demikian? Yah ... karena image di tooltip kan tidak langsung ikut terloading ketika blog dibuka. Yang ikutan loading si thumbnail.jpg itu saja yang berukuran kecil. Lha karena ukurannya kecil maka jadinya blog juga tetap enteng, gitu, lhoh!!!!
8. Tuliskan teks yang akan ditampilkan di ... dst silahkan diganti dengan teks yang menerangkan tentang image atau teks lain yang dirasa tepat untuk ditampilkan di tooltip.
9. thumbnail.jpg berupa image miniatur dari image.jpg. Jadi pada intinya setiap akan memfingsikan image on tooltip harus ada dua buah image. image.jpg yang berukuran besar dan thumbnail.jpg yang berukuran kecil.
10. width="..." adalah lebar (width) thumbnail.jpg. Rubah nilainya untuk disesuaikan dengan ukuran thumbnail yang anda gunakan.
11. style="margin:10px 5px;border:4px solid green; ... dst adalah tambahan kode untuk memperindah thumbnail. Silahkan rubah atau tambah dengan kode yang lain untuk membuat thumbnail terlihat lebih menarik.
12. Teks Link (misalnya Gambar-3) digunakan apabila thumbnail tidak digunakan. Jadi artinya yang terlihat di halaman blog berupa teks. Teks ini ketika dicocor cursor akan memunculkan image tooltip.
13. Semua yang dibutuhkan sudah sangat lengkap dan tinggal pakai oleh karena itu aku hanya berharap semoga tooltip ini bisa langsung berfungsi dengan sempurna!

Contoh xHTML lengkap Image on Tooltip

Gunakan kode berikut untuk percobaan! xHTML ini sudah lengkap dengan image dan thumbnail serta style untuk mempercantik thumbnail. Dengan kode ini akan menghasilkan seperti tooltip yang di bawahnya!

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggerv3_i6DRY4EL-3CDIVR7Q39CeucxDhKDr9WXuLn7MwXHQQvKsoiQWBtWLIcyumHSSy4VHWKcIOZpgQmGuBaq3P3Kz9f056OGXWI4TGsBTGPDkGneEhV3l6t5GBQ7M8bLh6muPtJNjE//; class="jqtt2" target="_blank" title="Gadis bule ini dulu teman main semasa kecil ku. Aku dan dia suka main tanah yang dilobangi trus kita guyur pakai air kencing berdua"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCLILt570KyTjuH__0UOxJIOtoMz-16a07N08pH3I_UsGEf_r1YeAZ8baeemKXuQmWxTbAyUlitJOiU51smKu58HA3sOb5wxcyweRBQB0Fd5Qe7C0iHXGkSP7B5rSi21Qz3UM5_BC9DhI/s200/th_gadisku-001-gubhugreyot.jpg" width="150" height="120" style="padding:5px;background:#eee;border:2px solid #555;border-radius:6px;float:left;margin:5px 10px 5px 0;box-shadow:2px 2px 2px #000;" /></a>

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

Update » January, 09, 2012

» Happy Blogging - gubhugreyot «

09.46 | 0 komentar | Read More