thumbnails with aria-label and lazy loading div container

 

paste this code where u need in the post

<div style="display: flex; overflow-x: auto;">

  <!-- Thumbnail 1 -->

  <div style="flex: 0 0 auto; margin-right: 10px; overflow: hidden; max-width: 100%;">

    <a href="YOUR_THUMBNAIL1_URL" aria-label="Thumbnail 1">

      <img src="thumbnail1.jpg" alt="Thumbnail 1" loading="lazy" style="width: 100%; height: auto; display: block;">

    </a>

  </div>

  <!-- Thumbnail 2 -->

  <div style="flex: 0 0 auto; margin-right: 10px; overflow: hidden; max-width: 100%;">

    <a href="YOUR_THUMBNAIL2_URL" aria-label="Thumbnail 2">

      <img src="thumbnail2.jpg" alt="Thumbnail 2" loading="lazy" style="width: 100%; height: auto; display: block;">

    </a>

  </div>

  <!-- Add more thumbnails as needed -->

</div>

<div style="display: flex; overflow-x: auto;">

  <!-- Thumbnail 3 -->

  <div style="flex: 0 0 auto; margin-right: 10px; overflow: hidden; max-width: 100%;">

    <a href="YOUR_THUMBNAIL1_URL" aria-label="Thumbnail 3">

      <img src="thumbnail1.jpg" alt="Thumbnail 1" loading="lazy" style="width: 100%; height: auto; display: block;">

    </a>

  </div>

  <!-- Thumbnail 4 -->

  <div style="flex: 0 0 auto; margin-right: 10px; overflow: hidden; max-width: 100%;">

    <a href="YOUR_THUMBNAIL2_URL" aria-label="Thumbnail 4">

      <img src="thumbnail2.jpg" alt="Thumbnail 2" loading="lazy" style="width: 100%; height: auto; display: block;">

    </a>

  </div>

  <!-- Add more thumbnails as needed -->

</div>

<div style="display: flex; overflow-x: auto;">

  <!-- Thumbnail 5 -->

  <div style="flex: 0 0 auto; margin-right: 10px; overflow: hidden; max-width: 100%;">

    <a href="YOUR_THUMBNAIL1_URL" aria-label="Thumbnail 5">

      <img src="thumbnail1.jpg" alt="Thumbnail 1" loading="lazy" style="width: 100%; height: auto; display: block;">

    </a>

  </div>

  <!-- Thumbnail 6 -->

  <div style="flex: 0 0 auto; margin-right: 10px; overflow: hidden; max-width: 100%;">

    <a href="YOUR_THUMBNAIL2_URL" aria-label="Thumbnail 6">

      <img src="thumbnail2.jpg" alt="Thumbnail 2" loading="lazy" style="width: 100%; height: auto; display: block;">

    </a>

  </div>

  <!-- Add more thumbnails as needed -->

</div>

<div style="display: flex; overflow-x: auto;">

  <!-- Thumbnail 7 -->

  <div style="flex: 0 0 auto; margin-right: 10px; overflow: hidden; max-width: 100%;">

    <a href="YOUR_THUMBNAIL1_URL" aria-label="Thumbnail 7">

      <img src="thumbnail1.jpg" alt="Thumbnail 1" loading="lazy" style="width: 100%; height: auto; display: block;">

    </a>

  </div>

  <!-- Thumbnail 8 -->

  <div style="flex: 0 0 auto; margin-right: 10px; overflow: hidden; max-width: 100%;">

    <a href="YOUR_THUMBNAIL2_URL" aria-label="Thumbnail 8">

      <img src="thumbnail2.jpg" alt="Thumbnail 2" loading="lazy" style="width: 100%; height: auto; display: block;">

    </a>

  </div>

  <!-- Add more thumbnails as needed -->

</div>

#1

ik thumbnail per different details hai click button ke sath kya issa ho sakta hai ki mai us button ko issa bana du ki ikk popup dikhai de jisme jisme visitor ko pana phone no name and place dale and phone ka verification code jo visitor ko apne phone per recieve hoga dale or uske baad related post open ho

aap jo describe kar rahe hain, woh ek interactive form aur related content ka access system hai.

Aap ek thumbnail per button add kar sakte hain jisse jab visitor click karega toh ek popup ya modal open hoga. Us modal mein aap form fields add kar sakte hain jahan user apna naam, phone number, aur location daal sakta hai. Ek aur field hoga jahan user ko apne phone number per received verification code ko enter karna hoga.

Jab user saare details enter karke verification code daalega, aap uss code ko validate karke related content ko display kar sakte hain.

Yeh process thoda complex ho sakta hai, especially verification code ka handling, lekin aap JavaScript aur backend scripting (jaise ki Node.js) ka use karke aisa functionality create kar sakte hain.

Ek step-by-step process hoga:

1. Thumbnail per button add karna jo modal ko trigger karega.
2. Modal ya popup create karna jisme form fields honge.
3. Backend scripting se verification code generate karke user ke phone number per send karna.
4. User ke entered code ko verify karke related content ko display karna.

Iske liye aapko client-side (HTML, CSS, JavaScript) aur server-side (backend scripting) ki jarurat hogi. Agar aapki website kaafi advanced hai, toh APIs (Application Programming Interfaces) ka use karke bhi verify aur content display process automate kar sakte hain

#1

this is a code for thumbnail container

<div style="flex: 0 0 auto; width: 362px; height: 150px; overflow: hidden;"> <a aria-label="Thumbnail 2" href="YOUR_THUMBNAIL2_URL"> <img alt="Thumbnail 2" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitKTOhKAL3Zib1p7Elo_Qxk09la2LjAR_t3AipH-vXlo5B019Fwf3sGAtCAg8yEXa7W1oEjGMdgJLMGmoTPZeWA_y9q933Y917yA3Jz0pwKMB-surmz1GTgFGnwmGwsAqt9rc4HOU0dRk/w140-h58-p/garden-tools-equipment-agriculture-vector.webp" style="width: 362px; height: 150px; object-fit: cover;"> </a> </div>

blogger me thumbnail per button kaise lagaye

paste this in the post html view or page html view and paste your image code on the red high light url.

u can take the url by upload your image on another post and from the page view right click copy the image link address and paste on upper code in post . u can delete the image from there u take the link address

Images ko horizontal aur vertical dono mein arrange karne ke liye, aapko har ek image ke div ko inline-block ya flexbox ke sath set karna hoga. Yeh ek example hai:

<div style="display: flex; flex-wrap: wrap;">

    <div style="flex: 0 0 auto; height: 150px; overflow: hidden; width: 362px; margin: 5px;">

        <a aria-label="Image 1" href="URL_IMAGE_1">

            <img aria-label="Image 1" alt="Image 1" loading="lazy" src="URL_IMAGE_1" style="height: 150px; object-fit: cover; width: 362px;">

        </a>

    </div>

    <div style="flex: 0 0 auto; height: 150px; overflow: hidden; width: 362px; margin: 5px;">

        <a aria-label="Image 2" href="URL_IMAGE_2">

            <img aria-label="Image 2" alt="Image 2" loading="lazy" src="URL_IMAGE_2" style="height: 150px; object-fit: cover; width: 362px;">

        </a>

    </div>

    <!-- Add more images as needed -->

</div>

Iss tarah ke har <div> ko inline-block ya flexbox ke sath set karke, aap horizontally aur vertically dono direction mein images ko display kar sakte hain. Agar aapka space allow karta hai, to aapko har ek image ke div ke andar margin ya padding ka use karke space set karna hoga.

For a folder-like vertical layout, you may want to use a flexbox or a grid approach. Here's an example using flexbox to arrange images in a column:

apne Blogger theme HTML me paste karna hoga. Niche diye gaye steps follow kijiye:

1. Blogger Dashboard khole:

   • Blogger.com par jaaye aur apne account se sign in kare.
   • Dashboard me jaye jahan aap apne blog ko manage karte hain.

2. Theme Template Section me jaye:

   • Left sidebar se 'Theme' section par jaye.
   • Wahan 'Edit HTML' ya 'Theme Editor' jaisa option hoga, us par click kare.

3. HTML Code me Changes kare:

   • Template ko edit karne ke liye HTML code dikhega.
   • <div class="image-container"> se shuru hota hua code aur uske saath CSS ko copy kare.
   • Yeh code wahan paste kare jahan aap chahte hain ki images dikhein.

4. Save kare:

   • Changes karne ke baad, 'Save' ya 'Save Theme' par click kare.

Yeh aapke blog me ek horizontal column mein images display karega single container me . and is container me 7 ke baad ye next row me jayege automatically agar appko do container chahiye to pura code isme add kar sakte hai jahn appko chaiye hai varna app isme only single line add kar sakte hai <img src=ye appki img ko add kar dega same container me

HTML

<div class="container"> <div class="row"> <div class="column"> <img src="URL_IMAGE_1" alt="Image 1" aria-label="Label 1" loading="lazy"> <img src="URL_IMAGE_2" alt="Image 2" aria-label="Label 2" loading="lazy"> <img src="URL_IMAGE_3" alt="Image 3" aria-label="Label 3" loading="lazy"> <img src="URL_IMAGE_4" alt="Image 4" aria-label="Label 4" loading="lazy"> <!-- Add more image items for the first row --> </div> </div> <!-- Add more rows if needed --> </div>

CSS:

 .container { display: flex; flex-wrap: wrap; } .column { flex: 0 0 25%; /* Four columns in a row */ padding: 5px; /* Adjust spacing between columns */ } .image-item { margin-bottom: 10px; /* Spacing between images */ }