#eTubeGuideBangla : Blogger.com ওয়েবসাইটে ইমেজ স্লাইডশো যুক্ত করার জন্য কীভাবে পদক্ষেপ করবেন

» #eTubeGuideBangla ভিডিও বিবরণ :

Blogger.com ওয়েবসাইটে ইমেজ স্লাইডশো যুক্ত করার জন্য আপনাকে HTML এবং CSS কোড ব্যবহার করে একটি স্লাইডশো তৈরি করতে হবে। এখানে আপনি কীভাবে এটি করতে পারেন তা বিস্তারিতভাবে ব্যাখ্যা করা হল:

ধাপ ১: স্লাইডশো কোড তৈরি করুন

প্রথমে আপনাকে স্লাইডশো কোড তৈরি করতে হবে। নিচে একটি সাধারণ HTML/CSS স্লাইডশো কোড উদাহরণ দেওয়া হল:

html
<style>
  .slideshow-container {
    position: relative;
    max-width: 100%;
    margin: auto;
  }

  .mySlides {
    display: none;
  }

  img {
    width: 100%;
    height: auto;
  }
</style>

<div class="slideshow-container">

  <div class="mySlides fade">
    <img src="image1.jpg" alt="Image 1">
  </div>

  <div class="mySlides fade">
    <img src="image2.jpg" alt="Image 2">
  </div>

  <div class="mySlides fade">
    <img src="image3.jpg" alt="Image 3">
  </div>

</div>

<script>
  let slideIndex = 0;

  function showSlides() {
    let slides = document.getElementsByClassName("mySlides");
    for (let i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > slides.length) {slideIndex = 1}
    slides[slideIndex-1].style.display = "block";
    setTimeout(showSlides, 2000); // Change image every 2 seconds
  }

  showSlides();
</script>

ধাপ ২: কোড ব্লগে পেস্ট করা

1. ব্লগার ড্যাশবোর্ড এ লগইন করুন।
2. লেআউট (Layout) এ যান।
3. যেখানে আপনি স্লাইডশোটি যোগ করতে চান সেখানে গ্যাজেট (Gadget) যোগ করুন।
4. HTML/JavaScript গ্যাজেট নির্বাচন করুন এবং সেটি Add করুন।
5. সেখানে কোড পেস্ট করুন (উপরের কোডটি) এবং স্লাইডশো তৈরি করতে আপনার ইমেজ লিঙ্কগুলো সংশোধন করুন (যেমন: image1.jpg, image2.jpg ইত্যাদি)।
6. Save করুন এবং আপনার ব্লগে স্লাইডশো দেখতে পাবেন।

ধাপ ৩: স্লাইডশো কাস্টমাইজ করুন

• আপনি স্লাইডশোর গতির জন্য setTimeout(showSlides, 2000); অংশটি পরিবর্তন করে স্লাইডিং সময় কম বা বেশি করতে পারেন। এখানে "2000" মিলিসেকেন্ডের মান, যা ২ সেকেন্ডের জন্য ছবি পরিবর্তন হয়।
• স্লাইডশোতে ছবি সংখ্যা বাড়াতে বা কমাতে, বা নতুন স্লাইড যুক্ত করতে চাইলে div class="mySlides fade" ব্লকটি কপি করে পেস্ট করতে পারেন।

ধাপ ৪: ব্লগে প্রিভিউ এবং সেভ করুন

• ব্লগের পেজটি ভিজিট করে দেখুন যে স্লাইডশো ঠিকভাবে কাজ করছে কিনা।
• যদি প্রয়োজন হয়, কোডটি টিউন করে স্লাইডশোটি কাস্টমাইজ করুন।

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

» #eTubeGuideBangla ভিডিও #হ্যাশট্যাগ :

HashTags