How to add Lightbox images In blogger

How to add Lightbox images In blogger
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
How to add Lightbox images In blogger

Hello everyone, in this post I am going to Share about How you can add Lightbox Images In Blogger In a easy Way.This Lightbox design Exactly look like Plus Ui Blogger Template.So you if you can apply Properly to your Blog then read it carefully

What is Blogger Lightbox Image ?

By Default When an image is clicked, that image opens above the post and covers the entire screen. The area where this Images or Thumbnails opens is called Lightbox.

Related Posts

What is the Benefits of Using Lightbox :-

  • You will get a to see Image Preview .
  • This is made with beautiful UI look which gives you clear image with blurred background.
  • Also You will get a overlay close Button.
  • Adding Lightbox Image for Blogger :-

    Follow these Steps To adding lightbox features in any blogger blogs

    Before editing the theme, take a backup so that you can restore your theme if any Problem happen .

    Step : 1 - First Open Blogger.com.

    Step : 2 - Then Login Your Blogger Account.

    Step : 3 - Then Click on Theme Menu.

    Step : 4 - Click on the Arrow Down icon located beside the 'Customize' button.

    Step : 4 - After Click on Edit Html.

    Step : 5 - Then Find ]]></b:skin>

    Step : 6 - Then Copy Css Below and Place Above Code ]]></b:skin>

    /* Lightbox image */ .zmImg.s{position:fixed;top:0;left:0;bottom:0;right:0;width:100%;margin:0;background:rgba(0,0,0,.75); display:flex;align-items:center;justify-content:center;z-index:999; -webkit-backdrop-filter:saturate(180%) blur(15px); backdrop-filter:saturate(180%) blur(15px)} .zmImg.s img{display:block;max-width:92%;max-height:92%;width:auto;margin:auto;border-radius:10px;box-shadow:0 5px 30px 0 rgba(0,0,0,.05)} .zmImg.s img.full{left:auto;right:auto;border-radius:10px;width:auto; transition:all .4s ease} .zmImg::after{content:'\2715';line-height:16px;font-size:14px;color:#fffdfc;background:#204ecf; position:fixed;bottom:-20px;right:-20px; display:flex;align-items:center;justify-content:center;width:45px;height:45px;border-radius:50%; transition:all .4s ease;opacity:0;visibility:hidden} .zmImg.s::after{bottom:20px;right:20px;opacity:1;visibility:visible;cursor:pointer} /* Dark Mode */ .drK .zmImg::after{background:#8775f5} 

    Steps :7 -Then go to </body> and paste the code above it.

    <!--[ Lightbox image ]--> <script>/*<![CDATA[*//* Lightbox image script, source: kompiajaib.com/2021/09/update-image-lightbox-dengan-css-dan.html */ for (var imageslazy = document.querySelectorAll('article .separator img, article .tr-caption-container img, article .psImg >img, article .btImg >img'), i = 0; i < imageslazy.length; i++) imageslazy[i].setAttribute('onclick', 'return false'); function wrap(o, t, e) </i>{<i class='blue'>for (var i = document.querySelectorAll(t), c = 0; c < i.length; c++) </i>{<i class='blue'>var a = o + i[c].outerHTML + e; i[c].outerHTML = a} } wrap('<div class="zmImg">', 'article .separator >a', '</div>'); wrap('<div class="zmImg">', 'article .tr-caption-container td >a', '</div>'); wrap('<div class="zmImg">', 'article .separator >img', '</div>'); wrap('<div class="zmImg">', 'article .tr-caption-container td >img', '</div>'); wrap('<div class="zmImg">', 'article .psImg >img', '</div>'); wrap('<div class="zmImg">', 'article .btImg >img', '</div>'); for (var containerimg = document.getElementsByClassName('zmImg'), i = 0; i < containerimg.length; i++) containerimg[i].onclick = function() this.classList.toggle('s');}; /*]]>*/</script>

    Step :8 -Finaly Click onSave HTML And Done

    For Blogger only

    Now where you want to put the Lightbox Image on the posts or pages, you can use the HTML which given below, replace the # part in it.

    <div class="separator"><a href="#" style="display: block; padding: 1em 0px; text-align: center;"><img src="#" /></a></div> 

    Conclusion:-

    So My Dear Freinds, In this post, I shared How to add Lightbox images In blogger. I hope this method of adding lightbox images in blogger can be very useful for you and your blog. Thank you for visiting our website.

    Read FaQ

    What is Lightbox ?

    By Default When an image is clicked, that image opens above the post and covers the entire screen. The area where this Images or Thumbnails opens is called Lightbox.

    Will this code affect page speed ?

    No,By adding lightbox code will not affectwebsite speed,so you can use this code freely.

    Source:
    https://plus-ui.fineshopdesign.com/

    About the Author

    Hello My Dear Friends I am Abhishek From Bihar(Patna). I am a student Click Here

    Post a Comment

    Please Don't spam in Comments
    Cookie Consent
    We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
    Oops!
    It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
    AdBlock Detected!
    We have detected that you are using adblocking plugin in your browser.
    The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
    Site is Blocked
    Sorry! This site is not available in your country.