দেখুন কিভাবে ব্লগার সাইটে Popup box যুক্ত করতে হয়

আচ্ছালামুআলাইকুম, আজকে আমি আপনাদের মাঝে নিয়ে আসলাম নতুন একটি পোষ্ট , ব্লগের হোম পেজ লোড হওয়ার একটা নির্দিষ্ট সময় কিভাবে সকল ভিজিটরদের উদ্দেশ্যে পপ আপ বক্স শো করাবেন?
Demo image:

কিছু কথা:এই পপ আপ বক্সের কাজ কী? আপনার হয়তোবা জানেন অনেক সময় আমাদের ওয়েব সাইটে ইউজারদের জন্য কিছু নোটিশ দিতে হয়, এক্ষেত্রে পপ আপ বক্স ব্যবহার করলে ইউজারদের মনোযোগ আকর্ষণ করা যায় বেশি। এছাড়াও আরও অনেক ব্যবহার রয়েছে, যেমন কোন কিছুর অফার দেখানোর জন্য,কোন ইভেন্ট সম্পর্কে জানতে ইত্যাদি।

কি ভাবে পপ আপ বক্স Show করাবেন?
১. প্রথমে আপনার ব্লগে(blogger.com এ) সাইন ইন করুন।
২. নিচের ছবিটির মতো theme এ ক্লিক করুন।

৩. তার পর down চিহ্নতে ক্লিক করুন।

৪.এবার Edit HTML এ ক্লিক করুন।

৫.এর পর বডি ক্লোজিং ট্যাগ খুঁজে বের করুন এবং <*/body> এর উপরে নিচের কোডটি কপি করে বসিয়ে দিন।

Code:

<b:if cond="data:blog.url==data:blog.homepageUrl"> <div class="popUpBox"> </b:if><div class="txt"> <h3>Heading text here</h3> YOUR CONTENT <h5>Footer Text Here</h5> </div> <div class="hider"><i class="fa fa-times" aria-hidden="true" id="cross"></i></div> </div> <script> let cross=document.querySelector('#cross'); let box=document.querySelector('.popUpBox'); let txt=document.querySelector('.txt'); setTimeout(()=>{ box.classList.add('popUpShow'); cross.onclick=()=>{ box.classList.remove('popUpShow'); }; },3000);

নোট:code এর ভিতরে Your content এর জায়গায় আপনার টেক্সট বা কোন্টেন্ট দিন এবং heading text here এর জায়গায় আপনার হেডিং দিন। এবং পপ আপ বক্স শো করার সময় পরিবর্তন করতে চাইলে উপরের কোডের 3000 এর জায়গায় আপনার ইচ্ছে মতো সময় দিতে পারেন মনে রাখবেন 1000=1s তাই 3000=3 second

কাজ শেষ এখন আপনার ব্লগটি লোড করে দেখুন পপ আপ বক্স শো করতেছে কি-না? কোন সমস্যা হলে কমেন্ট করুন! খোদা হাফেজ।