Scrollable Cards Widget for Blogger Blog

  1. Navigate to the Theme section in your Blogger dashboard, click on "Customize," then select "Edit HTML." Paste the following code just after the <head> tag and save the template. If you have already done this step for any of other widget on your site then skip it. You only need to do this once for all widgets.

<link href="https://cdn.jsdelivr.net/gh/Mushahid7734/ClasswithMason.com/classwithmason1.1.min.css" rel="stylesheet"  crossorigin="anonymous"/>
Step 2: Paste following html code where you want this widget to appear. Of course the content of your selection etc.
<div class="scrollable-container">

       <div class="cardexplore card-green">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr0-XBSeSjNpxE0hUow7DwNppGM3PrIz1_Optja3RCap9iC4YeJXT3GcbW9laJgxNCXcw2UhSkVOk0T4maoX8-l5ACEXFt4RHl5VKdRACHDO7KtWgdotqLkENd845udFFnaSuaa4SMA9rEaSWfFDNWoDqFmucX6nfI83XVM-4gNGEGMhhqfS43ICHxLz4/s1600/Untitled%20%28500%20%C3%97%20400%20px%29%20%281%29.png" alt="Study Guides Image" />
 <p><b>Literature Guides:</b> Discover Novels, Plays, Stories. Themes, Summaries, Analysis, Quotes, and More.</p>


 <a class="buttonexplore button-1" href="https://www.classwithmason.com/p/literature-guides-novels-stories-plays.html"><b>Explore</b></a>
  </div>

 
      <div class="cardexplore card-blue">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizOrj9slyJ2GuJXfznywiSpTdpWAR0FwgK7aPNdet3wJELcbrfva48JdP20nvZru0MSk68B4x11Qv6DqeX4bklo7BHE_WpavhfAmvoQe_sxUaBuraqRfL9aOZObNC4TZD3QfRonOBnmziBqhhhgro9ucVKy0HcEHZlrgTz8aH93-UkfBWTCRBYR060OXM/s1600/william%20shakespeare%20all%20works.png" alt="Study Guides Image" />
    <p><b> "Shakespeare:</b> Immerse in the Plays, Poems, or Sonnets, Navigate Modern Translation, Color-Coded for Clarity."</p>
      <a class="buttonexplore button-2"  href="https://www.classwithmason.com/2023/08/william-shakespeare-literary-profile.html"><b>Browse</b></a>
    </div> 

  <div class="cardexplore card-red">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_vJQ4JOTVnfc3rRBzjW_nH0xEEwmK5seMrNPlL6Q4cgGbYx3qOpyrEG61UO-Zu1mks-RUrDzqJDpyeToMtavLT6_7QV-1RZLW6zg9Zp6iRi2sGLq4VppbPcnGdGRxBkrMgP5z4Qml2THXzFCUq6ANSA82JFbzOtvNXbVb1XCwlxnTVj9DezMBKgIUMzM/s1600/Untitled%20%28500%20%C3%97%20400%20px%29.png" alt="Study Guides Image" />
    <p><b>Resources Hub:</b> Discover downloadable PDFs – concise study guides and booklets, all free.</p>
    <a class="buttonexplore button-3" href="https://www.classwithmason.com/p/free-study-resources-downloadable-pdfs.html"><b>Download</b></a>
   </div>
  
 
    <div class="cardexplore card-orange ">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK-EQr4OF74h4Y1AfclOPDW-KlkuXCSqlr84brNjtqTgxfHe7Z5iIUfNS51aceu4uuB27WRMWmD7ltyuhZB8xrmTl18erxsZ2eRRI9aKOw0DPlfPiVWT-45C1DHub_2FI1zgDR3uRnSd4s6gt_evE5fcmZYnmh3BDD3ycQ-jC1xyqvPhEtjpWichLoyyI/s1600/Untitled%20%28500%20%C3%97%20400%20px%29%20%281%29.png" alt="English Language Lab" />
    <p><b>Language Lab:</b> Vocab, grammar, quizzes & more – embark on a transformative journey.</p>
    <a class="buttonexplore button-4" href="https://www.classwithmason.com/p/english-language-lab-boost-your.html"><b>Learn</b></a>
    </div>
  
<div class="cardexplore card-5">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjth6vMcCVmSO-iSmusQXfj78AJgysvMJin6o_J-DINr4CFl35ZPRjnmObd3bbkehe92WVFNhGwRUZGzNo58Do-FFF0kaYBlAfDiwjeLvl_aZJ7LHRtS1qp5cNngu3q9K2AhXFayvCiJGDq5Ol7eUfDFalSP1vdiqHQ8nkM-Slj0anZxCZh4bKb9k8exWU/s1600/Untitled%20%28500%20%C3%97%20400%20px%29%20%282%29.png" alt="Poetry Albums Image" />
    <p><b>Poetry Albums:</b> Explore curated verses, a portal to emotion. All for free! Check out now!</p>
    <a class="buttonexplore button-5" href="https://www.classwithmason.com/p/poetry-albums-carefully-curated.html"><b>Recite</b></a>
  </div>

  <div class="cardexplore card-6">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm4ZUbiYs6M_qSHx7sHNrqI35VBwn_Mg040z-oKU1eVm86PzzV6KeqTlLDhERHgk4qzf2oPMKFrYnoH_M5kbdQB1Q9EezUeSd7cpNs0E0_QqvGlYzSzZ8J4zdEVxLmJ91L6GUDa6jRrxiImL6cJyp0xjw6_jqFz_gj1C06aaCKvRwdseG1_9hZ4X7DS98/s1600/1.png" alt="Literary Profiles Image" />
    <p><b>Literary Profiles:</b> Explore writers' bios & their remarkable works – a portal into creativity.</p>
    <a class="buttonexplore button-6" href="https://www.classwithmason.com/p/literary-profiles-poets-writers.html"><b>Explore</b></a>
  </div>
  
   <div class="cardexplore card-7">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6KtFehGG8YE4vrpg7rBLMITshpunrJCDH8oK5Dl4Z_tHe0sMvkhlqZ9Jw30TmtAc8qSo5-ZH5pRtsa0ol0kYgQqp8T62L7XdxyN5BpfijZKTwS-DWJuDYTaa_QeGuQqwvkej4AWO8pZLZUYoLx12X15FHCQJYC4URCDwoxsYaKrgyZ9y2So-uA_omSCM/s1600/3.png" alt="Short Readings Image" />
    <p><b>Short Readings:</b> Curated collection nurtures reading habits – embrace bite-sized literature.</p>
    <a class="buttonexplore button-7" href="https://www.classwithmason.com/2023/06/reading-time-build-reading-habits-with.html"><b>Read</b></a>
  </div>
  
  <div class="cardexplore card-8">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEisFEbK274gaRsG5Yen5ym98ltESsfzqComZLEcA0b9fXET_7uxK3GisB7HtFqnDUZNpWmheZsz4tTTJ21ZrvqpsH7AXLwzNKBjKIbC5nfm1cJKdeoIu3iYJURUSALzABiNWuYf4ndz4D0SAzpLszpHf-MqJFaOq5OoC2Ei_BvHg-rPL83WN81OxrYGk/s1600/2.png" alt="Study Guides Image" />
    <p><b>Audiobooks:</b> Immerse in free audiobooks – where stories come alive in your ears.</p>
    <a class="buttonexplore button-8" href="https://www.classwithmason.com/2023/06/free-audiobooks-online.html"><b>Listen</b></a>
  </div>

  <div class="cardexplore card-9">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic0T6m_8nuBxvHUkJ5WmzcNhAO_8EcclURcHqQDcHWZMR2-U7E5ydYJ8l47PKJcFBhK0juH-_d-GGKVZNERdtCmAFFPl9faZkNm7tPbEu9HSis0woVxFCEc6GNuQpnG_f3Me_vzNaJnAdRlnonU4gKqsup7bSkQ9trRC6rY06jDbg6SdHlmfTTLf7Q4H8/s1600/6.png" alt="Study Guides Image" />
    <p><b>Bridge of Faiths:</b> Verses uniting scriptures – fostering interfaith harmony and wisdom.</p>
    <a class="buttonexplore button-9" href="https://www.classwithmason.com/p/bridge-of-faiths_3.html"><b>Enlighten</b></a>
  </div>
  
  <div class="cardexplore card-10">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjxRnTFP5Wx7_A_xp6LjcMVVZMy0vklZiA1kwBHpJYcgeIa_NvUG81wSs_LUfFqBMOlYp9PTblfewrXeodyihtW-KGZcEwKi7pRDnPMRXCenNWZZZruffuw0-nje-MrQ_74c6O8uIU0IFMri4Ai-P3PZdowtVUTcOE_JhakszYmySaKnnEyX0Tv0GOEx0/s1600/4.png" alt="Study Guides Image" />
    <p><b>Quiz Games:</b> Delight in our captivating free quiz games – play and learn with joy.</p>
    <a class="buttonexplore button-10" href="https://www.classwithmason.com/2023/05/online-mcqs-test-games-free.html"><b>Play</b></a>
  </div>
  
   <div class="cardexplore card-11">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgHHX53YS7kr9WrnpaBaZCbTF2cxysWFhe6LOYZRB2I_b8si3BuPBrBqlYVW_b093h0FGV0WSg1J7UqvHkq-CldmExxYO6TgmrPCmEgTqN9CcJVFmmMuhXIP-j-1HhF2cGYBe5MHwOSsXqW8nACA1ne4DH0K0CAWMQ3QH3NkTlAyt0kCtgDI8DibywONI/s1600/5.png" alt="Study Guides Image" />
    <p><b>Join Community:</b> Engage in literature, language & diverse topics – ignite your conversations.</p>
    <a class="buttonexplore button-11" href="https://forum.classwithmason.com/"><b>Join!</b></a>
  </div>
  
   <div class="cardexplore">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI2WhkeaS-zqVsA1rvBeT8_moOYuRfip6i7f6vdqC3PM8ZiA4Upwt0VFR-8I0ey0E6x8B6v51NtxYm_uCVAhnCmaDGBsNokMDiaI-93rYIorJOhxgEUM9KXwzg_6Qwjx13p5-knGFN8UOqsmxCWsHUme13OjDu4DZMkoivgGzBU1UAv8LwP8T0Si_8eEY/s1600/7.png" alt="Study Guides Image" />
    <p><b>Literary Terms:</b> Free resource deepens understanding – explore the artistry of words.</p>
    <a class="buttonexplore button-12" href="https://www.classwithmason.com/2023/05/free-dictionary-of-literary-terms-and.html"><b>Open</b></a>
  </div>
  
   <div class="cardexplore card-12">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbKj8b4BklxsrReXRySR-p_-osly6cvHEvuefgzMD769A_5d7BZbiC1tNcH0ey1SCqyjlCjAPoWUTd3rDjXBBB8_PD1uYighChjDrAR6-2HqyIilS3pIhv_FPF4wxKD2tUIjcDq3HJV8wdCQTzrwTrery7ZuSlAu1DIW63hPH5elWAebFUB2OASHUlvW4/s1600/8.png" alt="Study Guides Image" />
    <p><b>Tool Verse:</b> Explore educational tools, dictionaries, SEO – empower your journey.</p>
    <a class="buttonexplore" href="https://www.classwithmason.com/p/tool-verse-unleash-power-of-free-tools.html"><b>Enter</b></a>
  </div>

</div>
<div class="scroll-arrows">
 <div class="scroll-arrow left-scroll-arrow">&lt;</div>
<div class="scroll-arrow right-scroll-arrow">&gt;</div>
</div>
Step 3: Place following javascript just below it

<script>
  const scrollContainer = document.querySelector(".scrollable-container");
  const leftArrow = document.querySelector(".left-scroll-arrow");
  const rightArrow = document.querySelector(".right-scroll-arrow");

  leftArrow.addEventListener("click", () => {
    scrollContainer.scrollBy({
      left: -300, // Adjust the scroll distance as needed
      behavior: "smooth", // Add smooth scrolling behavior
    });
  });

  rightArrow.addEventListener("click", () => {
    scrollContainer.scrollBy({
      left: 300, // Adjust the scroll distance as needed
      behavior: "smooth", // Add smooth scrolling behavior
    });
  });
</script>

Below is a demo

Study Guides Image

Literature Guides: Discover Novels, Plays, Stories. Themes, Summaries, Analysis, Quotes, and More.

Explore
Study Guides Image

"Shakespeare: Immerse in the Plays, Poems, or Sonnets, Navigate Modern Translation, Color-Coded for Clarity."

Browse
Study Guides Image

Resources Hub: Discover downloadable PDFs – concise study guides and booklets, all free.

Download
English Language Lab

Language Lab: Vocab, grammar, quizzes & more – embark on a transformative journey.

Learn
Poetry Albums Image

Poetry Albums: Explore curated verses, a portal to emotion. All for free! Check out now!

Recite
Literary Profiles Image

Literary Profiles: Explore writers' bios & their remarkable works – a portal into creativity.

Explore
Short Readings Image

Short Readings: Curated collection nurtures reading habits – embrace bite-sized literature.

Read
Study Guides Image

Audiobooks: Immerse in free audiobooks – where stories come alive in your ears.

Listen
Study Guides Image

Bridge of Faiths: Verses uniting scriptures – fostering interfaith harmony and wisdom.

Enlighten
Study Guides Image

Quiz Games: Delight in our captivating free quiz games – play and learn with joy.

Play
Study Guides Image

Join Community: Engage in literature, language & diverse topics – ignite your conversations.

Join!
Study Guides Image

Literary Terms: Free resource deepens understanding – explore the artistry of words.

Open
Study Guides Image

Tool Verse: Explore educational tools, dictionaries, SEO – empower your journey.

Enter
<
>


About the Author
Prof Mohammad Ibrahim
Educator and Scholar
Prof. Mason Carter
Educator, Author & Scholar of English Literature. A senior faculty member at Department of English Language & Literature, Shah Abdul Latif University, Ghotki Campus, Sindh, Pakistsn.
  • Tips & Linguistics
  • Research
  • Literature

Join the conversation

Join the conversation