Posted by : Gumi Gumi
14 Jul 2013
Sejak berubahnya system edit HTML /perubahan tampilan blogger,banyak sekali template" yang diantaranya yaitu template saya yang ternyata Fitur Lightbox dari blogger tidak berfungsi.Dan sampai sekarang masih sangat sulit untuk memperbaikinya,oleh karena itu yang dapat dilakukan adalah menggunakan Lightbox aternatif yaang cukup sederhana dan ringan,sehingga ketika kita klik gambar pada posting,secara otomatis akan mebuka gambar dengan ukuran normal tanpa berpindah tab baru.Trik ini sebenarnya sudah lama saya temukan di google ,tetapi lupa sumbernya~xDDDDD
Contoh
Gomenasai gomenasai gomenasai @_____@",yahh,karena saya rasa banyak yang membutuhkanya,mungkin akan sangat berguna bagi yang ingin menggunakan fitur lightbox ini.
Sebelum menggunakan trik ini,saya ingatkan untuk selalu membackup template anda agar bila terjadi suatu masalah,dapat dikembalikan seperti semula,tetapi tidak ada masalah juga sih,kerena sudah saya terapkan di blog Oreimo,hayaraku maou-sama dan Titan~xD
Pertama,Buka blogger=>edit HTML lalu copy-paste CSS dibawah ini tepat diatas kode ]]></b:skin>
CSS
#jquery-overlay{position:absolute;
top:0;left:0;z-index:90;
width:100%;height:500px}
#jquery-lightbox
{position:absolute;top:0;left:0;width:100%;
z-index:100;text-align:center;line-height:0}
#jquery-lightbox a,#jquery-lightbox a:hover
{border:none}
#jquery-lightbox a img{border:none}
#lightbox-container-image-box
{position:relative;background-color:#fff;border-radius: 5px 5px 0px 0px;
width:250px;height:250px;margin:0 auto}
#lightbox-container-image{padding:10px}
#lightbox-loading{position:absolute;top:40%;left:0%;
height:25%;width:100%;text-align:center;
line-height:0}
#lightbox-nav{position:absolute;top:0;left:0;
height:100%;width:100%;z-index:10}
#lightbox-container-image-box > #lightbox-nav{left:0}
#lightbox-nav a{outline:none}
#lightbox-nav-btnPrev,#lightbox-nav-btnNext
{width:49%;height:100%;zoom:1;display:block}
#lightbox-nav-btnPrev{left:0;float:left}
#lightbox-nav-btnNext{right:0;float:right}
#lightbox-container-image-data-box{font:10px Verdana,Helvetica,sans-serif;
background-color:#fff;margin:0 auto;line-height:1.4em;overflow:auto;
width:100%;padding:0 10px 0;border-radius: 0px 0px 5px 5px;}
#lightbox-container-image-data
{padding:0 10px;color:#666}
#lightbox-container-image-data
#lightbox-image-details
{width:70%;float:left;text-align:left}
#lightbox-image-details-caption{font-weight:bold}
#lightbox-image-details-currentNumber
{display:block;clear:left;padding-bottom:1.0em}
#lightbox-secNav-btnClose{width:66px;float:right;
padding-bottom:0.7em}
Setelah itu letakan Jquery diatas ini tepat diatas kode </body>
Jquery
<script src='http://lightbox-blogger.googlecode.com/files/jquery.min.js' type='text/javascript'/>
<script src='http://lightbox-blogger.googlecode.com/files/lightbox.min.js' type='text/javascript'/>
Setelah itu Simpan dan Lihat hasilnya dengan klik gambar pada postingan anda.
Semoga bermanfaat,Arigatou Gozaimasu~
{ 35 comments... read them below or Comment }
"Maaf komentar anda tidak akan dibalas, karena blog ini sudah tidak aktif. Terima kasih"
"Sorry your comment will not be replied, because this blog has been inactive. Thank you"
Langganan:
Posting Komentar (Atom)
Pertamax !!
BalasHapusNice Info :D
Http://andinonymous.blogspot.com
SOLAR :V
HapusWkwkwk, ini pasti kaskus!!
HapusKomen nya pertamax doing!!!
Klo di blog saya yang kayak gitu langsung di apus komentarnya!!!
Soalnya nggak ngehargaain penciptanya!!!
nambah ilmu lagi. kerennn (y)
BalasHapuslutfimoduscrew.blogspot.com
Fitur lightbox ini sudah ada di template Oreimo :v
BalasHapusCoba ah :v
Lightbox ini beguna banget sobs,
BalasHapusGimana ya cara membuat Template Buatan Djogzs yg masih belum Responsif?? Menjadi Responsif.... Contohnya pada Template Robotic Note...
butuh waktu yang panjang,karena ga semua struktur template sama,tiap template klo mau dibuat responsive berbeda cara beda css.di google banyak informasi kq cara buat system responsive.
Hapusyah ,, jquery .. yg ccsnya aja bisa ga bang ?
BalasHapusga bisa .___.
Hapussama...adax sambungan begini (a dan e samaran alternatifx Admin!
Hapuskirizyu.blogspot.com
Hai Johanes Djogan, saya ingin bertanya tentang template anda yang saya gunakan ini. Bagi saya, design di bahagian posting ini nampak tidak sama kerana gambar yang saya gunakan itu terlalu kecil. Jadi, bagaimanakah saya ingin mengubah design di bahagian posting itu menjadi seperti template ini: http://hataraku-maou-sama-bt.blogspot.com/ (Screenshot: http://prntscr.com/1f1jou ). Harap dapat membantu! Thanks!
BalasHapusMy Blog: http://www.pengembara-awan.my/
Maaf tidak bisa,perubahan style posting juga harus merombak semua struktur html pada template.lebih baik langsung ganti template yang anda inginkan, :)
HapusOh, begitu. Terima kasih ya diatas maklum balas anda. Terus hasilkan Template Blogger yang menarik ya. ^_^
Hapus^ Nice blog (y)
Hapusbuat alternatif : )
BalasHapusUntuk iFrame/Cbox/dll ada gak bang jo :D
BalasHapushttp://edho-tech.blogspot.com/
belum ada,ini cuma buat pengganti lightbox bawaan blogger yang tdk aktif :)
Hapuskayaknya saya pernah liat lightbox itu xD
BalasHapusУ меня что то не получается)
BalasHapusSobs,cara membuat Lebar dan Tinggi Gambarnya sama" dgn ukuran layar gimana sobs, jadi klu misalnya ukuran gambar aslinya 1000x1000 nah begitu menggunkana itu jadi pas dilayar jadi misalnya 500x500 soalnya terkadang ada gambar yg Lebar dan Tingginya itu menyewati batas layar jadi susah dilihat....
BalasHapuswah mau coba :D
BalasHapuswww.rizky-4rt.blospot.com/
Muito legal! Sou Do Brasil! http://affdownloading.blogspot.com.br/
BalasHapusKeren kak, ini dia yang aku cari2, ternyata ada disini :v
BalasHapusThank Tutornya bang :v
BalasHapusbang jo tutorial yang seperti di header blog bang jo dong yang gambar nya ganti ganti seperti itu butuh bgt bagi blog saya :)
BalasHapushttp://mugiwarayunz.blogspot.com/
itu namanya slider sob :D
Hapushttp://yoga-tc.blogspot.com/
hai semua..
BalasHapussalam knal ya.
baru2 ini aq buat template tema google search. silahkan mampir dan kasih komentar ya, masukannya klo ada :)
http://kompaspost.blogspot.com
light box nya bagus ...akan tetapi membuat loading tambah lemot hadehhh....perbedaanya sangat ketara sekali sebelum dan sesudah memakai jquery light box ini saat di check dengan google page speed / gtmetrix
BalasHapusbtw posting bagus ..keep spirit blogging ...
Blogwalking
bagus om light boxnya,bikin blog lebih indah .. tpai bener kata kak andria novit,itu memang bikin website agak lambat di bandingkan sebelumnya .. tapi saya tetap pasang karena itu memang indah menurut saya ... heehehehehe ,jangan lupa kunjungi blog aku om (fans berat om djogzs) xD !!
BalasHapushttp://blognyadaffar.blogspot.com/
nice post
BalasHapusvisit my blog
http://rofigates.blogspot.com
ada software and games terbaru :D
keren, terima kasih banyak infonya.
BalasHapuskunjungi balik ya
ilmudes.blogspot.com
Terima kasih admin atas artikelnya.sangat bermanfaat. Pasarpoker.com / Rajamerah.com Situs Judi Poker Online Terbaik Terpercaya / Rajamerah.com Situs Judi Poker Online Terbaik Terpercaya / Obat Pembesar Penis / Jasa SEO Medan / Obat bius / obat tidur / obat perangsang wanita / agen togel online / agen casino online / unik dan aneh / cipto junaedy / obat pelancar haid / Pasarpoker.com Agen Judi Poker Dan Domino Online Tanpa Robot / jual truk medan / vemale / telat bulan / Senior Agen Bola Terpercaya Piala AFC Asia 2015 / jasa seo medan / obat aborsi / obat telat bulan / jual obat telat bulan /
BalasHapusClosed
BalasHapusAgen Winenlose || Agen Judi Winenlose || Agen judi Online Winenlose
BalasHapusWinenlose
Bonus Winenlose
Register Winenlose
Deposit Winenlose
Withdraw Winenlose
Peraturan Winenlose
Livescore Winenlose
Panduan Winenlose
Prediksi Winenlose
PREDIKSI DENMARK VS JERMAN 07 JUNI 2017
gan... thanks templatenya... ini saya izin pake ya...
BalasHapushttps://d-gamespc.blogspot.co.id
kasih masukan gan.. biar blog saya menarik n banyak pengunjungny :D