কীভাবে এইচটিএমএল, সিএসএস এবং জাভা স্ক্রিপ্ট ব্যবহার করে পপ আপ স্কিন  তৈরি করা যায় ?

এইচটিএমএল, সিএসএস এবং জাভা স্ক্রিপ্ট ব্যবহার করে পপ আপ স্কিন তৈরি করা শিখব ।

প্রায় জিজ্ঞাসিত প্রশ্ন:

কীভাবে এইচটিএমএল, সিএসএস এবং জাভা স্ক্রিপ্ট ব্যবহার করে পপ আপ স্কিন  তৈরি করা যায় ?

কীভাবে এইচটিএমএল, সিএসএস এবং জাভা স্ক্রিপ্ট ব্যবহার করে কুকি এক্সেপ্টেন্স তৈরি করা যায়?

কীভাবে এইচটিএমএল, সিএসএস এবং জাভা স্ক্রিপ্ট ব্যবহার করে সক্রিয় পপ আপ স্কিন তৈরি করা যায় ?

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

🍃

Source Code:

১. এইচটিএমএল অংশ তৈরি

  

আমরা যেগুলো পপ আপ স্কিন এর ভিতরে রাখব। সেগুলো আমাদের     <div class="popup-screen"></div> ট্যাগের মধ্যে রাখতে হবে । অর্থাৎ যদি আপনি একটি ফটো যুক্ত করতে চান তাহলে আপনাকে  নিচের উদাহরণ অনুসরণ করে এইচটিএমএল তৈরি করতে হবে ।

উদাহরণস্বরূপ : আপনি একটি ফটো , কিছু টেক্সট, বাটন যুক্ত করতে চাইলে !

সমাধান :

 <div class="popup-screen">

      <div class="popimage">

        <img src="img.jpg" alt="">

      </div>

        <h2>Popup Box</h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

        <a href="#" class="btn">Subscribe</a>

   

</div>

একইভাবে আপনি টেক্সট, ইত্যাদি যুক্ত করতে পারেন ।  এখন আপনি পপ আপ স্কিন এর বাহিরে কিছু যুক্ত করতে চাইলে : আপনাকে </div> এর পর যুক্ত করতে হবে। অর্থাৎ সেগুলো বডিতে দেখাবে ।

বিশেষ দ্রষ্টব্য : এখানে বেশি কিছু কাস্টমাইজেশন করা লাগবে না, আর যদি আপনার প্রয়োজন হয় তাহলে আপনি নিজে অনেক কিছু যুক্ত করতে পারেন । কোনো সমস্যা হলে আমাকে জানাতে পারেন ।

 ২. জাভা স্ক্রিপ্ট অংশ তৈরি :

এখানে জাভা স্ক্রিপ্ট শুধুমাত্র কাস্টমাইজেশন নিয়ে কথা বলবো । এখানে কন্টেন্ট সংক্ষিপ্ত করার জন্য শুধু মাত্র যেগুলো কাস্টমাইজেশন করা আবশ্যক তাই আমরা কাস্টমাইজেশন করা শিখব ।

জাভা স্ক্রিপ্ট কাস্টমাইজেশন ১:

      setTimeout(() => {

        popupScreen.classList.add("active");

      }, 4000);

আমি এখানে ৪ সেকেন্ড দিয়েছি অর্থাৎ পপ আপ স্কিন পৃষ্ঠা লোড হওয়ার ৪ পর দেখাবে । আপনার প্রয়োজন অনুযায়ী সময় নির্ধারণ করুন ।

 

বিশেষ দ্রষ্টব্য : 4000 মানে হচ্ছে ৪ সেকেন্ড,  দুই সেকেন্ড এর জন্যে হবে 2000 । এইভাবেই যুক্ত করতে হবে ।

জাভা স্ক্রিপ্ট কাস্টমাইজেশন ২ :

      document.cookie = "WebsiteName=testWebsite; max-age=" + 30 * 24 * 60 * 60;

আমরা জানি,  একদিন = ২৪ ঘন্টা  = ২৪*৬০*৬০ সেকেন্ড ।

আমি এখানে ৩০ দিন দিয়েছি অর্থাৎ ৩০ দিনের মধ্যে আর এটি দেখাবে না । ৩০ দিন পর পর শো করবে।

   

রেজাল্ট বা ফলাফল :

শেষ কথা:

আপনি যদি কাজটি সঠিক ভাবে সম্পূর্ণ করতে পারেন । তাহলে এই সোর্স কোড ব্যবহার করে আপনি সহজেই যেকোনো পপ আপ স্কিন  তৈরি করতে পারবেন । জাভা স্ক্রিপ্ট,  সিএসএস এবং এইচটিএমএল তৈরি করে বিশেষ ধরনের পপ আপ স্কিন  তৈরি করা আপনার কাছে এখন নিশ্চয়ই খুব সহজ কিছু । কমেন্ট বক্স এ মতামত জানাতে ভুলবেন না ।

বিশেষ দ্রষ্টব্য :

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

My Talk:

Thank you for reading this blog.
Hi, Assalamualaikum! I am Sheikh Jubayer. I want to say something. Actually I have written this article or content or blog with a lot of difficulty, thinking and taking a lot of time. However, there may be some spelling or sentence mistakes. I hope you will see the apology in a good light. Hope you benefited. However, if there is any problem, leave a comment. I will try to answer your question properly. Thank you!