How to add Lightbox image for Blogger

Hello Guys and welcome to Wolv Themes Our Tutorial today is about How to add Lightbox Image for Blogger

Benefits :-

  1. Image previewer.
  2. Nice Ui look with blurred background to see the image clearly.
Let's Start

Lightbox Image Demo

How to add Lightbox Image for Blogger :-

Step 1 :- Go to Blogger's dashboard and click theme.
Step 2 :- Click the arrow down icon next to the 'customize' button.
Step 3 :- Click Edit Html.
Step 4 :- Click on any word then Press CTRL+ F and type in the search form ]]></b:skin>.
Step 5 :- Copy the provided below code and paste it just before ]]></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 5 :- Replace all the blue background marked parts according to your theme.

Step 6 :- Add this Html code in your posts or pages

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

For Blogger only
You can use your default upload way

Step 7 :- Copy the provided below code and paste it just before </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>

Conclusion

In this post, I have talked about How to add Lightbox image for Blogger. Tell us What You Say About The Post by Making a Comment and if you have any questions Contact Us at the Contact Us page. Hope You Enjoy In Our Website.

Refrence:
https://www.wolvthemes.xyz/2022/01/how-to-add-lightbox-image-for-blogger.html

Our Posts Are Protected By DMCA.com. Don't Copy Our Post. Wolv Themes All Rights Reversed.

Rate this article

Frontend Developer and UX Designer

Post a Comment