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...
128 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/
APA NGK berat itu om,,,, byk kode2nya
MalvinShare-This is Time for Sharing
mas makasih ya.. work
mas kalo untuk ngatur ukuran video kaya gini gmn yah
Aku sdh login di akun bloggerq sob and saya sdh pasang link blognya di sidebar blog saya. Saya tunggu kunjungan balik dan konfirmasinya ya....
Nice share, postingan anda sangat lengkap. Jangan Lupa jalan-jalan ke blog saya. Thanks
thanks mastah ikutan kontes yuk:))
Infonya cukup bermanfaat banget gan
Makasih ya atas info-infonya
Semoga sukses selalu
mantab banget nih blog nya
semuanya sangat bermakna
makasih ya , good luck !!
mobilnya keren..
APA NGK berat itu om,,,, byk kode2nya
Hallo sobat ? ikut gabung sini lagi ya
Makin mantab aja ni sob informasinya
Mudah- mudahan semakin mantab lagi ya
Salam kenal dan sukses slalu
http://curhatz.blogspot.com/ : wah wah mantapzzz Om ...
makasih buat infonya,,
semoga sukses selalu
jangan lupa mampir balik ya
infonya sangat bermanfaat sekali,
makasih..
Hallo sobat ? ikut gabung sini lagi ya
Makin mantab aja ni sob informasinya
Mudah- mudahan semakin mantab lagi ya
Salam kenal dan sukses slalu
semoga sukses selalu
jangan lupa mampir balik ya gan
infonya sangat bermanfaat sekali
konichiwa
hai,salam kenal ya
semoga sukses selalu
mampir balik ya
arigatou gozaimasu
infonya sangat bermanfaat sekali
blog yg perlu di contoh,,terima kasih infonya gan
artikel yg penuh dg Kreatif,Teruskan Gan Upadate nya ?
selamat pagi
hai,apa kabar? salam kenal ajach ya
sukses selalu ya
makasih banyak ya gan, jangan lupa mampir balik
Hallo sobat ? ikut gabung sini lagi ya
Makin mantab aja ni sob informasinya
terimaksih atas infonya
selamat sore dan salam kenal ya
semoga sukses selalu ya
ijin menyimak dan backlink disini ya
bermanfaat banget infonya-infonya bagi saya
makasih ya gan
Halllo, numpang untuk nambah backlink di sini ya !!
Setelah saya menyimak ternyata info-infonya sangat bermanfaat bagi saya untuk menambah pengetahuan saya
Thanks
Bagus banget informasinya gan
lanjutkan terus ya
infonya sangat berguna banget
sukses terus ok
izin gabung sini ajach ya
nice info and salam kenal ajach ya
Beritanya mennarik untuk di simak,
makasih ya gan atas infonya
lanjutkan ,, good luck
salam kenal,,kunjungan pertama nih
kunjungan baliknya,,ditunggu
mantap nih infonya,,
apa kabar gan,,
Hallo sobat
Bagus banget infonya
Ikut menyimak di sini ya
Selamat atas usahanya
oke juga ne infonya sangat bagus
ayo mampir balik...
mantap juga nie gan sangat menarik.........
salam kenal aja deh......
Nice info, semoga bermanfaat buat semua.
Visit Back Bank Mandiri Bank Terbaik Di Indonesia
makasih, buat infonya....
kalau boleh tau bagaimana caranya menggunakan lytebox ini
saya belum ngerti masalah lightbox, apa gitu lightbox ini?
ada cara yang lebih simple nggak tutornya??
makasih banyak ya buat informasinya yang sangat bermanfaat ini
Bookmark dulu.. akan saya terapkan ;;)
saya juga pernah ngalami hal yang sama,awalnya Lytebox berjalan dengan baiktapi beberapi hari berikutnya gak berfungsi lagi,,yaudah ahirnya saya tinggalkan
Lytebox yang ini gak sama dengan lytebox lainnya kan ?kualitasnya lebih ga ?
JIKA ANDA BUTUH ANGKA RITUAL 2D 3D 4D DI JAMIN 100% JEBOL BILAH BERMINAT HUB KI ANGEN JALLO DI NMR (_0_8_5_2_8_3_7_9_0_4_4_4_) JIKA INGIN MENGUBAH NASIB THA,SK ROO,MX SOBAT
JIKA ANDA BUTUH ANGKA RITUAL 2D 3D 4D DI JAMIN 100% JEBOL BILAH BERMINAT HUB KI ANGEN JALLO DI NMR (_0_8_5_2_8_3_7_9_0_4_4_4_) JIKA INGIN MENGUBAH NASIB THA,SK ROO,MX SOBAT
Thanks
banyak juga scrif nya
sepertinya agak ribet juga sih
makasi ya bos
Hi,
I hope this message finds you well,
My name is Neil; I'm the affiliate manager @ BinaryOffers.com
I saw that you are promoting few interesting offers,
So I'd like to take this opportunity and invite you to join us.
We offer an Extremely high commissions and the best service online.
I'll be more than happy to start working with you and introduce to you few of our offers.
You can send me an email or add me to your Skype (aff.binaryoffers) so we can discuss.
All the best my friend,
Neil
neil@binaryoffers.org
bagus artikelnya,, sangat membantu...
kunjungi balik blog saya scienceandri.blogspot.com :D
terima kasih banyak atas segala infonya yah sob..
http://goo.gl/5zJIpW
Wahh, nice info banget gan!! Ane mau coba nanti! Ditunggu tulisan kece ente yang lain yaa ^^
Saya Sangat BerTerima kasih Atas Bantuan Angka Ritual MBAHâ?¦Angka MBAH EROK PRANAL Tembus 100%â?¦Saya udah kemana-mana mencari angka yang mantap selalu gak ada hasilnyaâ?¦sampai- sampai hutang malah menumpukâ?¦tanpa sengaja seorang teman lagi cari nomer jitu di internetâ?¦Kok ketemu NomoR MBAH EROK PRANAL..Saya coba beli Paket 4D ternyata Tembusâ?¦dan Bagai di sambar Petir..Ternyata Angka Ritual Ghoib MBAH EROK PRANALâ?¦Yang SaYa Minta Tembus 4Dâ?¦Baru kali ini saya mendapat angka ritual yang benar-benar Mantapâ?¦Bagi saudara yang ingin merubah Nasib seperti sayaâ?¦Anda Bisa CALL/SMS Di Nomer MBAH EROK PRANAL 085 377 797 151.(((Buktikan Aja Sendiri Saudara-Saudari)))
Great article, Thanks for your great information, the content is quiet interesting. I will be waiting for your next post.
This is wonderful. I am not quite much with the internet, but I believe that what I just read is some good material. Thanks for writing such wonderful article. God bless.
Terima Kasih atas informasinya min..
I don’t know how can I give you thanks! I am totally stunned by your article. You saved my time. Thanks a million for sharing this article.
Assalamualaikum perkenalkan nama saya Maya saya berasal dari SAMARINDAH
,
pekerjaan saya tukang sapu jalan. Hidup saya sangat susah dan terpuruk,hutang dimana2 saya punya 3 anak
Dan semua putus sekolah ,
suami saya sudah meninggal 3thun lalu ,saya sangat stress dengan semua hutang2 saya,
saya hampir bunuh diri tapi saya berani buka internet dan mencari solusi pakai hp tman, saya tidak sengaja melihat no AKI NUGRAHA,
saya berani mencoba menghubungi,saya dkasi solusi tapi saya kurang percaya,tapi saya punya keberanian untuk mencoba dan allamdulillah sekarang hutang2 saya lunas.sayapun mempunyai usaha kecil2an Berkat Angka TOGEL SINGAPURA Kemarin Yang Di Berikan Pada Hari Rabu 22-02-2017 Angka 4D 1869
Terima kasih Aki Nugraha,ini hanya kisah nyata hidup saya bagi teman Teman yang ingin bantuan AKI NUGRAHA Telp (☎) 0853 4201 1133
sumpah demi Allah ini nyata,kami sekeluarga tak lupa mengucapkan puji syukur kepada ALLAH S,W,T dan terima kasih banyak kepada AKI NUGRAHA.
Wassalam...
Binance is a platform for exchange of cryptocurrency. Bitcoin provides seamless services to its users but sometimes it gets compromised due to technical issues. Forgetting the password is common thing but it is annoying if not solved. You can dial Binance Support phone number 1-888-764-0492 anytime from any corner of the world and mend your errors none other than the expertise who have profound knowledge in dealing with the Binance technical errors in short span with accuracy.
karaman
ordu
urfa
kilis
kütahya
2VXXZ
salt likit
salt likit
dr mood likit
big boss likit
dl likit
dark likit
YFX