How to add Lightbox image for Blogger Like Plus Ui

Join WhatsApp Group

Join Telegram Channel

हैलो दोस्तों, स्वागत है आपका हमारी इस खास पोस्ट में आज की इस पोस्ट में मैं आपको ब्लॉगर वेबसाइट पर Lightbox Image को कैसे जोड़ते है इसके बारे में फुल जानकारी दूंगा । यह Lightbox न्यू डिजाइन Plus Ui Blogger Theme जैसा है तो बने रहे हमारे साथ हम आपको बताते है कि कैसे आप ब्लॉगर के लिए लाइटबॉक्स इमेज कैसे जोड़ें ।

How to add Lightbox image for Blogger Like Plus Ui?|How to add Lightbox image for Blogger Like Plus Ui?

Blogger Lightbox Image क्या है ?

By Default जब किसी Image पर क्लिक किया जाता है तो वह Image पोस्ट के ऊपर खुलती है और पूरी स्कीन को ढक लेती है । जहाँ पर ये फोटो या तस्वीर खुलती है उस क्षेत्र को Lightbox कहा जाता है  ।

Benefits :-

• Image Preview भी आपको इसमें देखने को मिलेगा ।
• यह सुंदर Ui look के साथ बनाया गया है जो blurred Background के साथ image FHd यानि क्लियर दिखता है ।
• Overlay Close बटन भी उपलब्ध है ।

How to add Lightbox Image for Blogger :-

हर बार की तरह Theme को Edit करने से पहले Backup जरूर ले ताकि कोई दिक्कत आने पर आप अपनी थीम को Restore कर सके ।

Step 1 : सबसे पहले Blogger के डैशबोर्ड में जायें और लॉगिन करे ।
Step 2 : फिर Theme सेक्शन पर क्लिक करें।
Step 3 : 'Customize' बटन के पास में स्थित Arrow Down आइकन पर क्लिक करें।
Step 4 : 'Edit HTML' पर क्लिक करें।
Step 5 : किसी भी खाली जगह पर माउस प्वाइंटर को ले जाकर CTRL+ F दबाएं और सर्च फॉर्म में टाइप करें ]]></b:skin> ।
Step 6 : नीचे दिए गए कोड को कॉपी करें और ]]></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 : नीचे दिए गए कोड को कॉपी करें और </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 : अंत में अपनी थीम को Save कर दे ।

For Blogger only You can use your default upload way

अब जहां पर भी आप पोस्ट या पेज पर Lightbox Image लगाना चाहते है वहां नीचे दिए गए HTML का प्रयोग कर सकते है, इसमें लाल रंग से चयनित भाग को बदले ।

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

Conclusion

इस पोस्ट में, मैंने ब्लॉगर के लिए लाइटबॉक्स इमेज कैसे जोड़ें इसके बारे में बात की है । यदि आपको कोई LightBox जोड़ने में दिक्कत आ रही है तो आप Comment कर सकते है हम आपके कॉमेंट का जवाब देने का प्रयास करेंगे । आपको पोस्ट पसंद आया हो तो Rating देना न भूले। और ऐसे ही अपडेट के लिए निरंतर हमारी वेबसाइट को देखते रहे ।

Reference:
www.plus-ui.fineshop.eu.org