- 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"/>
<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"><</div>
<div class="scroll-arrow right-scroll-arrow">></div>
</div>
<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
Literature Guides: Discover Novels, Plays, Stories. Themes, Summaries, Analysis, Quotes, and More.
Explore
"Shakespeare: Immerse in the Plays, Poems, or Sonnets, Navigate Modern Translation, Color-Coded for Clarity."
Browse
Literary Profiles: Explore writers' bios & their remarkable works – a portal into creativity.
Explore
<
>
About the Author
