Docs-Carousel-for-Blogger
📚 Floating Docs Sidebar Widget for Blogger
A modern, compact, and mobile-friendly floating sidebar widget for Blogger. This widget allows you to showcase Google Docs (or any external resources) as clickable thumbnails. Users can open them in a beautiful modal iframe preview without leaving your page.
✨ Features
- 🟢 Floating “Docs” button at the top-right
- 🟢 Expandable & collapsible sidebar with smooth animation
- 🟢 Thumbnails + tooltips for each document
- 🟢 Fullscreen iframe preview modal
- 🟢 Responsive & mobile-friendly
- 🟢 Easy to customize (add/remove docs, update titles & thumbnails)
📸 Thumbnails in Action
🔹 Compact Sidebar Mode
Collapsed into a neat Docs button, expands to show all your document thumbnails.
🔹 Modal Preview Mode
Clicking a thumbnail opens the doc inside a fullscreen preview iframe with description & CTA.
🚀 Live Previews
-
Version 1 (Body Font Styling Example) 👉 Live Preview Here
-
Version 2 (AI Motivation Support Example) 👉 Live Preview Here
🛠️ Installation (Blogger)
- Copy the widget code from this repo.
- Go to Blogger Dashboard → Theme → Edit HTML.
- Paste the code before
</body>. - Update the Google Doc URLs, titles & thumbnails inside the script.
📩 Contact & Support
💡 Have questions or need custom widgets? Use the contact form included in the script or reach me directly via GitHub.
📌 Example Use Cases
- Blogger tutorials hub 📖
- Course material previews 🎓
- Ebook or PDF library 📚
- Documentation showcase 💼
📷 Thumbnail Preview
