Lightbox Blogger dengan Jquery





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~

Komentar

  1. Pertamax !!

    Nice Info :D

    Http://andinonymous.blogspot.com

    BalasHapus
    Balasan
    1. Wkwkwk, ini pasti kaskus!!
      Komen nya pertamax doing!!!
      Klo di blog saya yang kayak gitu langsung di apus komentarnya!!!

      Soalnya nggak ngehargaain penciptanya!!!

      Hapus
  2. nambah ilmu lagi. kerennn (y)

    lutfimoduscrew.blogspot.com

    BalasHapus
  3. Fitur lightbox ini sudah ada di template Oreimo :v

    Coba ah :v

    BalasHapus
  4. Lightbox ini beguna banget sobs,
    Gimana ya cara membuat Template Buatan Djogzs yg masih belum Responsif?? Menjadi Responsif.... Contohnya pada Template Robotic Note...

    BalasHapus
    Balasan
    1. 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.

      Hapus
  5. yah ,, jquery .. yg ccsnya aja bisa ga bang ?

    BalasHapus
    Balasan
    1. sama...adax sambungan begini (a dan e samaran alternatifx Admin!
      kirizyu.blogspot.com

      Hapus
  6. 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!

    My Blog: http://www.pengembara-awan.my/

    BalasHapus
    Balasan
    1. Maaf tidak bisa,perubahan style posting juga harus merombak semua struktur html pada template.lebih baik langsung ganti template yang anda inginkan, :)

      Hapus
    2. Oh, begitu. Terima kasih ya diatas maklum balas anda. Terus hasilkan Template Blogger yang menarik ya. ^_^

      Hapus
  7. Untuk iFrame/Cbox/dll ada gak bang jo :D

    http://edho-tech.blogspot.com/

    BalasHapus
    Balasan
    1. belum ada,ini cuma buat pengganti lightbox bawaan blogger yang tdk aktif :)

      Hapus
  8. kayaknya saya pernah liat lightbox itu xD

    BalasHapus
  9. Sobs,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....

    BalasHapus
  10. wah mau coba :D

    www.rizky-4rt.blospot.com/

    BalasHapus
  11. Muito legal! Sou Do Brasil! http://affdownloading.blogspot.com.br/

    BalasHapus
  12. Keren kak, ini dia yang aku cari2, ternyata ada disini :v

    BalasHapus
  13. bang jo tutorial yang seperti di header blog bang jo dong yang gambar nya ganti ganti seperti itu butuh bgt bagi blog saya :)
    http://mugiwarayunz.blogspot.com/

    BalasHapus
    Balasan
    1. itu namanya slider sob :D
      http://yoga-tc.blogspot.com/

      Hapus
  14. hai semua..
    salam knal ya.
    baru2 ini aq buat template tema google search. silahkan mampir dan kasih komentar ya, masukannya klo ada :)
    http://kompaspost.blogspot.com

    BalasHapus
  15. 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

    btw posting bagus ..keep spirit blogging ...

    Blogwalking

    BalasHapus
  16. 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 !!

    http://blognyadaffar.blogspot.com/

    BalasHapus
  17. nice post
    visit my blog

    http://rofigates.blogspot.com

    ada software and games terbaru :D

    BalasHapus
  18. keren, terima kasih banyak infonya.
    kunjungi balik ya
    ilmudes.blogspot.com

    BalasHapus
  19. gan... thanks templatenya... ini saya izin pake ya...
    https://d-gamespc.blogspot.co.id
    kasih masukan gan.. biar blog saya menarik n banyak pengunjungny :D

    BalasHapus
  20. Artikel Yang Bagus Gan Mohon izin Comment nya ^_^

    BOLA PELANGI - BANDAR MIX PARLAY TERBESAR DI INDONESIA HANYA DENGAN 1 USER ID SUDAH BISA BERMAIN SEMUA GAME.
    Join US ! klik link di bawah ini ☟

    Prediksi Bola dan Togel
    Bola Online
    Mix Parlay
    Bola Jalan
    Bandar Bola

    Untuk Info Dan Bonus Menariknya Bisa Hubungi Kami Di Bawah Ini :
    WHATSAPP 1 : +6282143134681
    WHATSAPP 2 : +6281333472723

    Ayo buruann , mana tau kamu menjadi jutawan setelah bergabung dengan kami .. buruann !!!

    ♛ Group FB Prediksi Parlay = https://www.facebook.com/groups/346501502486292/
    ♛ Instagram = https://www.instagram.com/bolapelangi_01/Bola Pelangi
    ♛ Pinterest = https://id.pinterest.com/bolapelangilounge/ Bolapelangi Lounge
    ✆ WA = +6282143134681 || +6281333472723

    BalasHapus

  21. My name is Leah Brown, I'm a happy woman today? I told myself that any loan lender that could change my life and that of my family after having been scammed separately by these online loan lenders, I will refer to anyone who is looking for loan for them. It gave me and my family happiness, although at first I had a hard time trusting him because of my experiences with past loan lenders, I needed a loan of $300,000.00 to start my life everywhere as single mother with 2 children, I met this honest and God fearing online loan lender Gain Credit Loan who helped me with a $300,000.00 loan, working with a loan company Good reputation. If you are in need of a loan and you are 100% sure of paying the loan please contact (gaincreditloan1@gmail.com)

    BalasHapus
  22. PERMAINAN ONLINE TERBESAR DI INDONESIA

    Website paling ternama dan paling terpercaya di Asia ^^
    Sistem pelayanan 24 Jam Non-Stop bersama dengan CS Berpengalaman respon tercepat :)
    Memiliki 8 Jenis game yang sangat digemari oleh seluruh peminat poker / domino

    - Adu Q
    - Bandar Q
    - Bandar Sakong
    - Bandar Poker
    - Poker
    - Domino 99
    - Capsa Susun
    - BANDAR66 / ADU BALAK ( GAME TERBARU )

    Permainan Judi online yang menggunakan uang asli dan mendapatkan uang asli ^^
    * Minimal Deposit : 20.000
    * Minimal Withdraw : 20.000
    * Deposit dan Withdraw 24 jam Non stop ( Kecuali Bank offline / gangguan )
    * Bonus REFFERAL 15 % Seumur hidup tanpa syarat
    * Bonus ROLLINGAN 0.3 % Dibagikan 5 hari 1 kali
    * Proses Deposit & Withdraw PALING CEPAT
    * Sistem keamanan Terbaru & Terjamin
    * Poker Online Terpercaya
    * Live chat yang Responsive
    * Support lebih banyak bank LOKAL
    * Link Alternatif :
    - sahabat2019.com
    - sahabat2019.net
    - sahabat2019.org
    - sahabat2019.info


    Contact Us

    Website SahabatQQ
    WA 1 : +85515769793
    WA 2 : +855972076840
    Telegram 1 :+85515769793
    Telegram 2 : +855972076840
    LINE : SAHABATQQ
    TWITTER : SahabatQQ
    Kami Siap Melayani anda 24 jam Nonstop
    daftar sahabatqq

    BalasHapus

Posting Komentar

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

Postingan populer dari blog ini

K-ON!! Blogger Template

Shiroi Blogger Template

Unbreakable Machine Doll Blogger template