Hello friends, welcome to this special post of ours, in today's post, I will give you full information about how to add Lightbox Image on blogger website. It is like Lightbox New Design Plus Ui Blogger Theme so stay tuned with us we tell you how to add lightbox image for blogger.
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 photo or picture opens is called Lightbox.
Benefits :-
You will also get to see Image Preview in it.
It is made with a beautiful UI look which gives clear image with blurred background.
Overlay Close button is also available.
How to add Lightbox Image for Blogger :-
Like every time, before editing the theme, take a backup so that you can restore your theme in case of any problem .
Step 1: First of all go to Blogger Dashboard and login.
Step 2: Then click on Theme section.
Step 3: Click on the Arrow Down icon located beside the 'Customize' button.
Step 4: Click on 'Edit HTML'.
Step 5: Move the mouse pointer to any empty space and press CTRL + F and type in the search form ]]></b:skin>.
Step 6 : Copy and paste the code given below ]]></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}
Step 7 : Copy and paste the code given below </body>.
<!--[ 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: Finally save your theme.
For Blogger only You can use your default upload way
Now wherever you want to put Lightbox Image on the post or page, you can use the HTML given below, replace the selected part with red color in it.
<div class="separator"><a href="#" style="display: block; padding: 1em 0px; text-align: center;"><img src="#" /></a></div>
Conclusion
In this post, I have talked about how to add lightbox images for blogger . If you are facing problem in adding any LightBox then you can comment, we will try to answer your comment. If you liked the post then don't forget to give rating. And keep watching our website continuously for such updates.
Reference:
%20(1).jpg)