Home
Tukaran Link
Pasang Iklan
Contact Me
Lytebox Image Viewer for Blogger (fixed)
Lytebox adalah sebuah lightbox yang dibuat untuk menampilkan suatu objek secara mandiri dengan menghapus ketergantungan prototype.js, effects.js, dan scriptaculous.js. Sejak versi asli Lytebox yang dibuat oleh Lokesh Dhakar (yang dirilis dengan dukungan iFrame) dibuat, modifikasi besar telah dilakukan untuk meningkatkan kinerjanya sebaik mungkin dan juga "Sildeshow", "Tema", dukungan konten HTML (sebagai lawan dari hanya gambar) dan masih banyak lagi pilihan yang dapat dikonfigurasi yang memungkinkan Anda untuk menyesuaikan tampilan dan nuansa Lytebox. (ini intro yang saya kutip dari Dolem)
Anda mungkin sudah pernah (saya juga) membaca tips tentang cara memasang lytebox di blog-blog lain. Saat pertama membaca dan melihat demonya, Lytebox berjalan dengan baik. Namun beberapa hari setelah itu sampai sekarang, Lytebox yang berasal dari trik blog-blog tersebut tidak berfungsi lagi. Saya berpikir itu karena hostingan tempat menaruh script nya sudah melewati batas bandwitch, jadi saya coba upload script tersebut ke hostingan baru, namun hasilnya tetap sama. Huft, pusing juga. Apa penyebabnya?
Karena saya sangat penasaran dengan Lytebox ini, saya coba mengutak-atik kode css dan javascript nya. Setelah memakan waktu kurang lebih 5 jam, akhirnya usaha saya untuk bertahan di depan monitor pun membuahkan hasil. Lytebox yang saya masukkan ke bengkel html saya (Macromedia Dreamweaver 8) berjalan sesuai dengan rencana.
Lytebox yang akan saya jelaskan ini adalah Lytebox v3.22. Di postingan sebelumnya tentang Lightbox, yaitu Facebox, Lytebox menggunakan prototype sebagai pengendali akitifitasnya sedangkan Facebox mengandalkan jQuery.
Berikut beberapa fitur v3.22 :
- Menampilkan satu gambar
- Menampilkan gambar-gambar dalam satu grup
- Membuat slideshow
- Menampilkan halaman atau link eksternal, bisa untuk satu link atau link dalam sebuah grup
Gimana menarik kan? Mau tau cara membuatnya? ("ah, dari tadi kek, kebanyakan ceramah nih si zacky", jawab si pembaca)
Berikut Cara Memasang Lytebox di Blogger / Blospot
1. Memasang kode CSS dan Javascript
- Pilih Layout > Edit HTML
- Cari kode </head>, lalu paste kode berikut di atasnya:
<!-- Lytebox v3.22 fixed by http://tipsbloggerzacky.blogspot.com //-->
<script src='http://doigirls.megabyet.net/lytebox/lytebox.js' type='text/javascript'></script>
<link href='http://doigirls.megabyet.net/lytebox/lytebox.css' media='screen' rel='stylesheet' type='text/css'/>
<!-- Lytebox v3.22 fixed http://tipsbloggerzacky.blogspot.com //-->
- Klik Save Template
2. Penerapan Lytebox
Seperti yang sudah saya jelaskan tadi, Lytebox bisa digunakan untuk menampilkan satu gambar atau lebih, membuat slideshow, dan menampilkan halaman eksternal. Anda bisa menggunakannya di postingan atau di Page Element template anda.
Berikut kode-kode pengaplikasian Lytebox:
- Menampilkan Satu Gambar
<a title="JUDUL LINK" href="URL-GAMBAR" rel="lytebox"><img src="URL-GAMBAR" style="width:320px;height:240;border:0" /></a>demo » klik disini
- Menampilkan Beberapa Gambar Dalam Satu Grup
<a title="JUDUL LINK 1" href="URL-GAMBAR-1" rel="lytebox[grup]"><img src="URL-GAMBAR-1" style="width:320px;height:240;border:0" /></a>demo » klik disini
<a title="JUDUL LINK 2" href="URL-GAMBAR-2" rel="lytebox[grup]"><img src="URL-GAMBAR-2" style="width:320px;height:240;border:0" /></a>
<a title="JUDUL LINK 3" href="URL-GAMBAR-3" rel="lytebox[grup]"><img src="URL-GAMBAR-3" style="width:320px;height:240;border:0" /></a>
<a title="JUDUL LINK 4" href="URL-GAMBAR-4" rel="lytebox[grup]"><img src="URL-GAMBAR-4" style="width:320px;height:240;border:0" /></a>
- Membuat Slideshow
<a title="JUDUL LINK 1" href="URL-GAMBAR-1" rel="lyteshow[slideshow]"><img src="URL-GAMBAR-1" style="width:320px;height:240;border:0" /></a>demo » klik disini
<a title="JUDUL LINK 2" href="URL-GAMBAR-2" rel="lyteshow[slideshow]"><img src="URL-GAMBAR-2" style="width:320px;height:240;border:0" /></a>
<a title="JUDUL LINK 3" href="URL-GAMBAR-3" rel="lyteshow[slideshow]"><img src="URL-GAMBAR-3" style="width:320px;height:240;border:0" /></a>
<a title="JUDUL LINK 4" href="URL-GAMBAR-4" rel="lytebox[slideshow]"><img src="URL-GAMBAR-4" style="width:320px;height:240;border:0" /></a>
- Menampilkan Halaman Eksternal
1. Satu Halaman Eksternal
<a title="JUDUL HALAMAN EKSTERNAL" href="URL-HALAMAN-EKSTERNAL" rel="lyteframe" rev="width:640px;height:380px;scrolling:auto">Google Search</a>demo » klik disini
2. Beberapa Halaman Eksternal Dalam Satu Grup
<a title="JUDUL HALAMAN EKSTERNAL-1" href="URL-HALAMAN-EKSTERNAL-1" rel="lyteframe[external]" rev="width:640px;height:380px;scrolling:auto">Google Search</a>demo » klik disini
<a title="JUDUL HALAMAN EKSTERNAL-2" href="URL-HALAMAN-EKSTERNAL-2" rel="lyteframe[external]" rev="width:640px;height:380px;scrolling:auto">Yahoo! Search</a>
<a title="JUDUL HALAMAN EKSTERNAL-3" href="URL-HALAMAN-EKSTERNAL-3" rel="lyteframe[external]" rev="width:640px;height:380px;scrolling:auto">Bing Search</a>
Keterangan:
1. http://doigirls.megabyet.net/lytebox/ adalah tempat hostingan script Lytebox.
Silahkan download source Lytebox v3.22 disini. Ekstrak source Lytebox v3.22 dan upload ke hostingan anda, letakkan ke satu folder. Ingat!, url gambar backgroud yang ada di dalam lytebox.css, misalnya images/close_grey.png tidak perlu anda ganti, karena file tersebut sudah berada folder yang sama. Saya sarankan anda memilih hostingan untuk free web hosting yang yang memiliki batasan bandwitch yang besar, untuk hal ini saya rekomendasikan anda untuk memilih Megabyet Internet. "Inilah rahasia berjalannya Lytebox".
2. title="JUDUL LINK" dan title="JUDUL HALAMAN EKSTERNAL" sangat berguna untuk Lytebox karena JUDUL LINK dan JUDUL HALAMAN EKSTERNAL tersebut akan muncul di sebelah kanan bawah Lytebox dan gunanya untuk memberi informasi tentang gambar apa yang sedang dilihat oleh pengunjung.
3. style="width:320px;height:240;border:0" berfungsi untuk mengatur ukuran tampilan sebelum masuk ke Lytebox, karena sangat tidak efisien jika kita menampilkan ukuran sebenarnya di blog sedangkan kita telah menggunakan Lytebox sebagai image viewer.
Misalnya ukuran gambar anda adalah 800x600 pixel, maka ganti kode width:320px;height:240 menjadi width:400px;height:300px sehingga gambar yang muncul di blog berukuran 400x300 pixel.
4. rel="lytebox" berfungsi untuk memanggil kode javascript yang anda pasang. Kode ini tidak perlu diganti!
5. rel="lytebox[grup]" , kode grup berfungsi sebagai id pengelompokkan gambar. Kode ini bisa anda ganti sesuai keinginan.
5. rel="lytebox[slideshow]" , kode slideshow berfungsi sebagai id pengelompokkan gambar untuk menampilkannya ke dalam sebuah Slideshow. Kode ini bisa anda ganti sesuai keinginan.
6. rel="lyteframe" berfungsi untuk memanggil kode javascript yang anda pasang. Kode ini tidak perlu diganti!
7. rel="lyteframe[external]" , kode external berfungsi sebagai id pengelompokkan halaman eksternal. Kode ini bisa anda ganti sesuai keinginan.
8. rev="width:640px;height:380px;scrolling:auto" berfungsi untuk mengatur ukuran Lytebox yang menampilkan halaman ekternal. Kode width:640px;height:380px bisa anda ganti sesuai keinginan.
9. Jika anda ingin memasangnya di postingan, maka lakukan pembuatan postingan di tab edit Html. Jika anda ingin memasangnya di template blog, maka tambahkan Page Elements dengan HTML/Javascript.
Huft, akhirnya selesai juga... Demo Lytebox bisa anda lihat disini.
Jika anda memiliki keraguan, kotak komentar di bawah ini akan menerima anda dengan senang hati..
Oya, sebelum postingan ini sampai di tanda titik yang terkahir, mari sama kita berterima kasih kepada:
1. Lokash Dhakar, sang penemu Lytebox
2. Dolem Lytebox, sang editor Lytebox
3. Megabyet Internet, hostingan saya
4. Macromedia Dreamweaver 8, bengkel web designer saya
5. Terakhir, tentunya kepada saya sendiri (Zacky Adrihayuni), wuahahahahaha...!
Semoga berhasil...
Bagikan Artikel Ini!
:))
:)]
;))
;;)
:D
;)
:p
:((
:)
:(
:X
=((
:-o
:-/
:-*
:|
8-}
~x(
:-t
b-(
:-L
x(
=))
32 komentar:
waw.. nice trik sobat,,,
keep it up your good work
Keren bro.. langsung Praktek.. Thx ilmu-nya.. kedepan moga tambah Unique ( tutor-nya ).. ;D
совершенный
Terima kasih infonya
wow . . om ribet sekali yah tutornya?? adakah cara yg lebih simpel???
ada contohnya?
oke bru
makasih tutornya niuhh
tapi masih bingung nih buat apaan ya
@sebuahtips:
- Semuanya kan sudah saya jelaskan secara rinci ttg cara memasang, penerapan, dan fungsi masing2 atribut, jadi itu gak rumit...
- Ini jalan2 satu2nya, gak bisa dibilang simpel atau gak...
@vanmovic: sama2..
Fungsi utama dari Lytebox adalah untuk menampilkan gambar, selain itu Lyteox juga bisa untuk menampilkan halaman eksternal. Untuk contohnys bisa kamu lihat di link demo yang saya berikan.
http://splendorfreak.blogspot.com/
Hi Friends visited with smile.....pls click on ads .
thanks for tips
out of topic = link anda sdh terpasang d Blogfriends Sixooninele.. pasang link q y..
sob cb q psng d posting kok ga bs y.. tp d template bs
ni code-nya bener pa ga y ?
rel='lytebox'>
q psng d situ biar otomatis ga psng lagi d edit post-nya..
blz d blog q y :D
ket. code d atas di apit div karena ga bs d tulis dsini(Tag is not allowed: DIV)..
data:post.body
lanjutan code td.. 5af td ga muncul :|
bos link bos dah saya pasang
Great Place to download unlimited templates blog with more themes and favorite colors to support the blogging activities and bring a lot of traffic
Jlimet ya.. tapi boleh di coba, trims buat infonya.. :D
wah... kayanya Litebox lebih cocok di pakai di Magazine Template deh... :)
BTW, thanks buat infonya...
Follow balik saya ya !! :D
Thanks a lot bro :D sangat bermanfaat ....
Dah saya pasang di blogku tapi kenapa ya?
1. lyteboxnya ngga muncul tulisan 'close' 'next' 'preview' ~x(
padahal .js & .css nya dah sy upload sendiri
http://154h.megabyet.net/cgi-bin/lytebox.js
http://154h.megabyet.net/cgi-bin/lytebox.css
Kenapa ya? oya,
2. right chatbox masih nongol sedikit (oot :-o) :???:
Solusinya :help: :-/
keren bgt,...
ilmu yang mantap gan,thanks for sharing
Sip genk. Dah saya coba jempolan. Tapi gimana merapikan gambarnya. Kasih tau dong
mantap blog dan artikelnya bos :)
Salam kenal Beben si bloglang anu ganteng kalem tea :D
\m/
visit my blog
http://share-cheatns.blogspot.com/
http://www.alexa.com/siteinfo/www.share-cheatns.blogspot.com?p=rwidget#
maaf sahabat saya komen mungkin gak berhubungan. saya hanya mau kasih kabar sebagai rasa terima kasih saya telah belajar banyak di blog ini. atas penghormatan dan persahabatan sesama blogger saya memberikan award kepada anda, dan semoga persahabatan dan semangat berbagi tetap berjalan sampai kapanpun. silahkan di ambil awardnya sahabat. terimakasih
I just came across your blog and found it be really helpful in my evaluation
Very impressive stuff. Thanks for sharing
1992 Volkswagen Cabriolet AC Compressor
mantap kang, ini yang aku cari2 selama ini, thanks ea kang. izin nyoba :X:X :X :X :D :D :D :D
Mencoba Untuk Diterapkan
Cyber Advertisement the Online Store with Highest Quality
Chevy W7500 Turbocharger
I recently came across your blog and have been reading along. I thought I would leave my first comment. I don't know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.
Mas, aku udah coba dan sukses . . . :)
Tapi kalo misal viewernya dibuat actual pixel bisa gak ya? uda cari sana sini tetep aku gak nemu caranya biar bisa actual pixel . . . ~x(
Mohon bantuannya dengan sangat . . .
:d nice post ,, thanks for sharing :)
Mantaps tips nya mas
follower ke 223, follow back ya...
ada info menarik nih barangkali membutuhkan hosting gratis indonesia
Space 2000 MB Bandwidth 100 GB
cek kesini gan _http://wdesain.web.id/2011/12/28/hosting-gratis-selamanya-di-idhostinger/