══════════════════════════════════════════════════ HAN TEAM · Blogger Manga Site — Setup Guide ══════════════════════════════════════════════════ Files in this ZIP: 1-header-widget.html → Sticky site header with logo + nav 2-homepage.html → Main page: featured banner, search, filters, grid 3-chapter-index.html → Chapter list page (one copy per manga) 4-main.css → Reader styles (seamless images, progress bar) 5-main.js → Reader JS (progress bar, back-to-top, lazy load) README.txt → This file STEP 1 — Add CSS ──────────────── Blogger Dashboard → Theme → Customize → Advanced → Add CSS Paste the entire contents of 4-main.css → Apply STEP 2 — Add JavaScript ──────────────────────── Blogger Dashboard → Theme → Edit HTML Find: Paste the contents of 5-main.js just before Save STEP 3 — Add the Header ──────────────────────── Blogger Dashboard → Layout → Add a Gadget (at the very top, before content) → HTML/JavaScript Paste the contents of 1-header-widget.html → Save TIP: Edit the nav links inside the file to match your Blogger page URLs. STEP 4 — Create the Homepage ────────────────────────────── Blogger Dashboard → Pages → New Page → Switch to HTML mode (click the <> icon) Paste the contents of 2-homepage.html → Publish IMPORTANT: Edit the SERIES array at the top of the file. Add one object {} per manga series. Example: { label: 'my-manga', ← must match your Blogger post label exactly title: 'My Manga Title', author: 'Author Name', cover: '', ← leave '' to use emoji, or paste image URL emoji: '⚔️', color: '#1a1a1a', ← background colour for the card genres: ['Action'], status: 'ongoing', ← 'ongoing' or 'completed' rating: '9.5', chapters: 1, isHot: false, isNew: true, desc: 'Description here.' } STEP 5 — Create a Chapter Index Page (one per manga) ────────────────────────────────────────────────────── Blogger Dashboard → Pages → New Page → Switch to HTML mode Paste the contents of 3-chapter-index.html → Publish IMPORTANT: Change only these lines at the top of the file: var HT_LABEL = 'my-manga'; ← your Blogger post label var HT_TITLE = 'My Manga Title'; var HT_AUTHOR = 'Author Name'; var HT_COVER_EMOJI = '⚔️'; var HT_COVER_IMG = ''; ← optional cover image URL var HT_DESC = 'Description.'; var HT_GENRE = ['Action']; var HT_RATING = '9.5'; The page auto-fetches all posts with that label from Blogger's API. No manual updating needed — it updates itself on every page load. STEP 6 — Post Chapters ──────────────────────── Blogger Dashboard → New Post Title format: My Manga Title – Chapter 01 Label: my-manga ← same as HT_LABEL in Step 5 Content: Upload images in order (HTML mode — no line breaks between images) → Publish The chapter index page updates automatically. The label feed is accessible at: yoursite.blogspot.com/search/label/my-manga Site Map ──────── yoursite.blogspot.com/ ├── / ← Homepage (Step 4) ├── /p/my-manga.html ← Chapter Index page (Step 5) ├── /search/label/my-manga ← Auto Blogger label feed ├── /YYYY/MM/my-manga-ch01 ← Chapter post (Step 6) └── /YYYY/MM/my-manga-ch02 ← Chapter post (Step 6) Tips ──── • Upload images at 800–1000px wide for crisp quality on all screens • In the post editor, use HTML mode and delete any
tags between images • Set isHot: true on your most popular series — they appear in the banner • Set isNew: true on series with recent chapter activity • The + New Post button in the header links directly to Blogger's post editor ══════════════════════════════════════════════════ Han Team · Built with ♥ ══════════════════════════════════════════════════