Your article content goes here...
Some Bold Text: More text here.यह लाइटबॉक्स डिज़ाइन Plus UI Premium Blogger Template जैसा दिखता है। तो आप इसे अपने किसी भी Blog में सही तरीके से लगा सकते हैं, बस आपको इस पोस्ट को पूरा पढ़ने की जरूरत है.
How to add Lightbox images In blogger
नमस्कार दोस्तों, मैं प्रदीप, MyGuru360 का होस्ट हूं , इस पोस्ट में मैं आपको आसान तरीके से ब्लॉगर में लाइटबॉक्स इमेज जोड़ने के बारे में बताऊंगा।
What is Lightbox Image ?
डिफ़ॉल्ट रूप से जब किसी image पर क्लिक किया जाता है, तो वह इमेज पोस्ट के ऊपर खुलती है और पूरी स्क्रीन को कवर करती है। वह क्षेत्र जहां यह image या thumbnail खुलते हैं उसे image lightbox कहा जाता है।
What is the Benefits of Using Lightbox :-
क्या आप चाहते हैं कि image lightbox preview देखें , click on given, in-post image.
यह सुंदर UI Look के साथ बनाया गया है जो आपको blurring background के साथ quality image देता है। साथ ही आपको एक overlay close button मिलेगा।
Adding Lightbox Image for Blogger :-
किसी भी ब्लॉगर ब्लॉग में लाइटबॉक्स सुविधाएँ जोड़ने के लिए इन चरणों का पालन करें
Blogger Theme edit करने से पहले, एक theme backup लें ताकि कोई समस्या होने पर आप अपनी blogger theme को restore कर सकें।
Step : 1 - सबसे पहले Blogger.com खोलें।
Step : 2 - फिर अपने ब्लॉगर अकाउंट में लॉग इन करें.
Step : 3 - फिर थीम मेनू पर क्लिक करें।
Step : 4 - customization के पास arrow icon पर क्लिक करें।
Step : 4 - edit HTML पर क्लिक करने के बाद।
Step : 5 - फिर खोजें ]]></b:skin>
Step : 6 - फिर नीचे Css कॉपी करें और कोड के ऊपर रखें ]]></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 -फिर जाएं </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 -अंत में सेव HTML एंड done पर क्लिक करें
For Blogger only
अब आप पोस्ट या पेज पर इमेज को जहां दिखाना चाहते हैं, वहां नीचे दिए गए HTML का इस्तेमाल कर सकते हैं, उसमें # वाले हिस्से को बदल दें।
<div class="separator"><a href="#" style="display: block; padding: 1em 0px; text-align: center;"><img src="#" /></a></div> Conclusion:-
तो my dear friends, इस पोस्ट में मैंने आपको बताया है कि blogger में lightbox image कैसे ऐड करते हैं। मुझे उम्मीद है कि blogger में lightbox image का यह तरीका आपके ब्लॉग के लिए बहुत उपयोगी होगा। हमारे आने के लिए धन्यवाद