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 :-
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/