NEWS
Loading...

  • Lightbox Blogger dengan Jquery

    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~

    Tag :

    { 34 comments... read them below or Comment }

    1. Pertamax !!

      Nice Info :D

      Http://andinonymous.blogspot.com

      BalasHapus
      Balasan

      2. 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

      2. 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

    8. 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

    9. kayaknya saya pernah liat lightbox itu xD

      BalasHapus

    11. 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

    12. wah mau coba :D

      www.rizky-4rt.blospot.com/

      BalasHapus

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

      BalasHapus

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

      BalasHapus

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

    17. 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

    18. 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

    19. 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

    20. nice post
      visit my blog

      http://rofigates.blogspot.com

      ada software and games terbaru :D

      BalasHapus

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

      BalasHapus

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

    Translate

    Thank you for choosing Blogger Template from Blog Johanes! (*≧∇≦*)

    - Copyright ©DJogzs 2009-2013 - Some Right Reserve. - DJogzs - Powered by Blogger - Designed by Johanes Djogan -