WW Forum

Interactive 3D Minimalist Bookshelf

noreply@blogger.com (Dida) — Sat, 30 May 2026 11:25:12 +0000

I created this Interactive 3D Minimalist Bookshelf after noticing that more and more people are starting personal blogs dedicated to their collections, reading lists, recommendations, and favorite books. While most websites display books in a simple grid or list layout, I wanted to create something that feels more interactive and memorable for visitors.

This tutorial will show you how to implement and customize the Interactive 3D Minimalist Bookshelf—a responsive, CSS-powered UI component that transforms a simple collection of books into a realistic three-dimensional bookshelf experience.

From my experience, readers are more likely to explore a collection when it feels engaging rather than static. That's why this component mimics a real-world bookshelf using CSS 3D transforms, displaying books by their spines just like they would appear on a physical shelf. When a visitor clicks a book, it smoothly slides out and opens into a detailed view containing the cover, author's name, publication year, and synopsis.

Demo Preview

What Do You Want To Do With Your Life?

noreply@blogger.com (phantom) — Thu, 28 May 2026 14:00:16 +0000

I hate that question, not because I do not understand it, but because I hear it everywhere. It follows me into family gatherings, casual conversations, and even moments that are supposed to feel relaxing. Every reunion with relatives feels less like spending time together and more like attending an interview I forgot to prepare for. The moment I sit down, someone eventually asks about college, work, ambitions, or future plans as if life is a race that everyone else already understands except me.

Text Animation Inspiration Collection

noreply@blogger.com (Dida) — Sun, 24 May 2026 07:34:16 +0000

Discover creative text animations you can add to your web projects. From pure CSS effects to dynamic animated text styles, you'll find a variety of ideas here. This collection features 10 lightweight text animation designs made specifically for your website. They are divided into CSS-only effects (great for headers and titles) and CSS with minimal JavaScript (for letter-by-letter or interactive animations), keeping your blog visually engaging without slowing down loading performance.

Part 1: CSS-Only Animations

These animations are perfect for blog post titles and hero sections. Simply add them to your Website or Blogger template’s CSS and give your site a more eye-catching and dynamic look.

Retro Wave (Vaporwave / 80s)

A nostalgic, glowing text effect that blends shifting shadows with a subtle vertical skew, creating a retro-inspired and visually striking aesthetic.

.retro-text {
  font-family: 'Antonio', sans-serif;
  font-size: 4rem;
  color: #ff007f;
  text-transform: uppercase;
  text-shadow: 3px 3px 0px #00f0ff, 6px 6px 0px #1a0841;
  animation: retroFloat 3s ease-in-out infinite alternate;
}

@keyframes retroFloat {
  0% { transform: translateY(0px) skewX(-5deg); }
  100% { transform: translateY(-10px) skewX(5deg); text-shadow: -3px 3px 0px #00f0ff, -6px 6px 0px #1a0841; }
}

HTML Usage:

<h2 class="retro-wave">Retro Wave</h2>

Retro Wave

Comic Book Pop

Inspired by classic pop-art comics, this style uses bold, high-contrast shadows to create a dramatic effect that instantly pops and stands out on hover.

.comic-text {
  font-family: 'Bangers', cursive;
  font-weight: 700;
  color: #fede00;
  text-shadow: 2px 4px 0px #000;
  -webkit-text-stroke: 1.5px #000;
  transition: transform 0.2s ease, text-shadow 0.2s ease;
  cursor: pointer;
}

.comic-text:hover {
  transform: translate(-4px, -4px);
  text-shadow: 8px 8px 0px #ff4b4b, 8px 8px 0px 2px #000;
}

HTML Usage:

<h2 class="comic-text">Comic Book Pop</h2>

Comic Book Pop

Flickering Street Light

A gritty neon-inspired effect that mimics a faulty street light through rapid shifts in opacity and glowing shadows, creating an atmospheric flickering look.

.streetlight-text {
  font-family: 'Caveat', cursive;
  color: #fee;
  text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #ff0055, 0 0 40px #ff0055;
  animation: sharpFlicker 3s infinite; 
}

@keyframes sharpFlicker {
  0%, 18%, 22%, 25%, 43%, 47%, 70%, 100% {
    text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #ff0055, 0 0 40px #ff0055;
    color: #fee;
    transform: scale(1);
    opacity: 1;
  }
  
  19%, 24%, 45%, 68% {        
    text-shadow: none;
    color: #1a1a1a; 
    opacity: 0.3;   
  }

  21%, 44% {
    text-shadow: 0 0 8px #fff, 0 0 25px #ff0055;
    transform: scale(1.02); 
    opacity: 0.8;
  }
}

HTML Usage:

<h2 class="streetlight-text">Flickering Street Light</h2>

Flickering Street Light

Movie Title (Cinematic Dissolve)

A slow-burn, dramatic text effect perfect for cinematic themes or review blogs. It creates a movie-like entrance using wide letter spacing paired with a smooth blur-to-focus transition.

.movie-text {
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
  letter-spacing: 12px;
  animation: cinematicReveal 6s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

@keyframes cinematicReveal {
  0%, 100% { 
    filter: blur(12px); 
    opacity: 0; 
    letter-spacing: 25px; 
  }
  
  30%, 85% { 
    filter: blur(0); 
    opacity: 1; 
    letter-spacing: 12px; 
  }
  
  95% {
    filter: blur(4px);
    opacity: 0;
    letter-spacing: 14px;
  }
}

HTML Usage:

<h2 class="movie-text">Movie Title</h2>

Movie Title

Jello Food Bounce

A fun and bouncy text effect with a soft, jelly-like motion that gives off a playful and squishy feel—great for food bloggers or lifestyle niches.

.food-text {
  font-family: 'Fredoka', sans-serif;
  color: #ff6b6b;
  display: inline-block;
  animation: jelloBounce 2s infinite;
  transform-origin: center bottom;
}

@keyframes jelloBounce {
  0%, 11.1%, 100% { transform: translate3d(0, 0, 0); }
  22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); }
  33.3% { transform: skewX(6.25deg) skewY(6.25deg); }
  44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); }
  55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); }
  66.6% { transform: skewX(-0.78125deg) skewY(-0.78125deg); }
  77.7% { transform: skewX(0.390625deg) skewY(0.390625deg); }
  88.8% { transform: skewX(-0.1953125deg) skewY(-0.1953125deg); }
}

HTML Usage:

<h2 class="food-text">Jello Food Bounce</h2>

Jello Food Bounce

Glitch Game Menu

A classic retro gaming and cyberpunk-inspired text effect that recreates a digital glitch through layered distortions and horizontal tear effects, giving it a futuristic game-menu vibe on hover.

.glitch-text {
  font-family: 'Rubik Glitch', system-ui;
  position: relative;
  color: #fff;
}
.glitch-text:hover::before,
.glitch-text:hover::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: black; /* Match your blog bg color */
}
.glitch-text:hover::before {
  left: 2px; text-shadow: -2px 0 #ff00c8;
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim 5s infinite linear alternate-reverse;
}
.glitch-text:hover::after {
  left: -2px; text-shadow: -2px 0 #00e6ff;
  clip: rect(85px, 450px, 140px, 0);
  animation: glitch-anim2 5s infinite linear alternate-reverse;
}
@keyframes glitch-anim {
  0% { clip: rect(31px, 9999px, 94px, 0); }
  100% { clip: rect(112px, 9999px, 76px, 0); }
}
@keyframes glitch-anim2 {
  0% { clip: rect(75px, 9999px, 5px, 0); }
  100% { clip: rect(13px, 9999px, 115px, 0); }
}

HTML Usage:

<h2 class="glitch-text" data-text="Glitch Game Menu">Glitch Game Menu</h2>

Glitch Game Menu

Part 2: CSS + Light JavaScript Animations

For letter-by-letter control (like RPG text typing or cascading waves), a tiny script splits the string into individual spans so CSS can animate each character sequentially.

Add this before your </body> tag:

<script>
document.querySelectorAll('.split-text').forEach(el => {
  el.innerHTML = el.textContent.split('').map((char, i) => {

    if(char === ' ') return '<span>&nbsp;</span>';
    return `<span style="--i: ${i}">${char}</span>`;
  }).join('');
});
</script>

Pixel RPG Text Typer

Recreates the nostalgic feel of old-school 8-bit RPG dialogue boxes by revealing text one character at a time, delivering a classic retro gaming experience.

.pixel-type span {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.65em;
  opacity: 0;
  display: inline-block;
  animation: pixelAppear 3s infinite; 
  animation-delay: calc(var(--i) * 0.08s);
}

@keyframes pixelAppear {
  0%, 100% { 
    opacity: 0; 
  }
  5%, 90% { 
    opacity: 1; 
  }
}

HTML Usage:

<h2 class="split-text pixel-type">Pixel RPG Text Typer</h2>

Pixel RPG Text Typer

Arcade Wave (Game)

A classic arcade machine select screen where letters smoothly ripple in a continuous wave motion.

.arcade-wave span {
  font-family: 'Russo One', sans-serif;
  display: inline-block;
  color: #00ff66;
  animation: waveMove 1.5s infinite ease-in-out;
  animation-delay: calc(var(--i) * 0.1s);
}

@keyframes waveMove {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); color: #ff00ff; }
}

HTML Usage:

<h2 class="split-text arcade-wave">Arcade Wave</h2>

Arcade Wave

Movie Credits Scroll (3D)

A simple CSS-based 3D cinematic crawl inspired by classic film intros, featuring text that scrolls with perspective depth like traditional opening credits.

.credit-wrapper {
  perspective: 300px;
  overflow: hidden;
  height: 200px;
}
.movie-crawl {
  font-family: 'News Cycle', sans-serif;
  color: #f1c40f;
  text-align: center;
  transform: rotateX(25deg);
  animation: crawlUp 10s linear infinite;
}

@keyframes crawlUp {
  0% { transform: rotateX(25deg) translateY(150px); opacity: 1; }
  90% { opacity: 1; }
  100% { transform: rotateX(25deg) translateY(-200px); opacity: 0; }
}

HTML Usage:

<div class="credit-wrapper"><div class="movie-crawl">A long time ago<br>In a blog far away...</div></div>

A long time ago
In a blog far away...

Cooking Steam (Food Niche)

Letters gently drift upward, fade out, and sway slightly to look like steam rising from a hot dish.

.steam-text span {
  display: inline-block;
  font-family: 'Comfortaa', sans-serif;
  color: #7f8c8d;
  filter: blur(1px);
  animation: steamRise 3s infinite linear;
  animation-delay: calc(var(--i) * 0.2s);
  opacity: 0;
}

@keyframes steamRise {
  0% { transform: translateY(5px) translateX(0) scale(1); opacity: 0; }
  20% { opacity: 0.6; }
  50% { transform: translateY(-15px) translateX(4px) scale(1.1); filter: blur(2px); }
  100% { transform: translateY(-35px) translateX(-4px) scale(1.2); opacity: 0; filter: blur(4px); }
}

HTML Usage:

<h2 class="split-text steam-text">Cooking Steam</h2>

Cooking Steam

The Import Links

Copy and paste this unified link block into your website, right inside the <head> tag:

<!-- Google Fonts for Text Animations -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Antonio -->
<link href="https://fonts.googleapis.com/css2?family=Antonio:wght@700&display=swap" rel="stylesheet">

<!-- Bangers -->
<link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">

<!-- Cinzel -->
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@700&display=swap" rel="stylesheet">

<!-- Comfortaa -->
<link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@700&display=swap" rel="stylesheet">

<!-- Fredoka -->
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@700&display=swap" rel="stylesheet">

<!-- Monoton -->
<link href="https://fonts.googleapis.com/css2?family=Monoton&display=swap" rel="stylesheet">

<!-- News Cycle -->
<link href="https://fonts.googleapis.com/css2?family=News+Cycle:wght@700&display=swap" rel="stylesheet">

<!-- Press Start 2P -->
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">

<!-- Rubik Glitch -->
<link href="https://fonts.googleapis.com/css2?family=Rubik+Glitch&display=swap" rel="stylesheet">

<!-- Russo One -->
<link href="https://fonts.googleapis.com/css2?family=Russo+One&display=swap" rel="stylesheet">

And that's it! Use these styles as a foundation for your website layout. With basic HTML and CSS knowledge, you can easily tweak colors, control animation timing, or add extra effects like gradients or rotation to suit your blog’s theme.

Neocities Review: Pros, Cons, and Why Bloggers Should Try It

noreply@blogger.com (Dida) — Sat, 16 May 2026 22:03:31 +0000

Long time no post! Lately, I’ve been busy exploring a hosting platform that I recently discovered, and I honestly think it’s pretty cool. I came across it while browsing Reddit and was surprised that I had never heard of it before. The platform is called Neocities.

Once you start browsing sites hosted there, you’ll quickly notice a community full of active developers and creative people building amazing sites. What makes it interesting is that it brings back the feeling of old-school websites from the 90s. Nowadays, many modern websites share similar layouts and styles, but on Neocities, every site feels different and unique. It can feel overwhelming at first, but in a good way. If you're running out of ideas for your own website design, you'll definitely find inspiration there.

Another thing I noticed is the large number of artists and creative individuals on the platform. Their websites often reflect their personalities and interests, making each site feel personal and expressive. Instead of following trends, people create websites that truly represent themselves. You should definitely check it out if you enjoy discovering unique corners of the web.

What is Neocities?

Neocities is a free website hosting platform that allows users to create and customize their own websites from scratch using HTML, CSS, and JavaScript. It focuses on creativity, self-expression, and giving users complete control over their site's design and content.

Pros and Cons of Using Neocities

After using Neocities for 4 days, I’ve gathered my personal pros and cons based on my experience with the platform so far.

Pros

You have complete freedom to design your website however you want.
No ads or watermarks are forced onto your website.
You can meet many people in the community and exchange website buttons or stamps with other users.
Great for short blog posts, personal websites, and diary-style content while staying relatively anonymous.
Free users receive 1 GB of storage and 200 GB bandwidth upon registration.
Encourages creativity because you're building your site yourself rather than relying on templates.

Cons

If you're planning to create long-form articles or use many heavy scripts and assets, the free storage may eventually become limiting. Upgrading to Supporter may be necessary.
Free users can only create one website unless they upgrade.
Like Blogspot's subdomain system, your website URL includes "neocities" unless you connect a custom domain.
Unlike platforms such as Blogger, customization isn't automated. You often need to edit pages individually.
You have to manually create pages like your homepage, posts, custom pages, and 404 pages.
There is no built-in search widget.
Features such as RSS feeds often need to be coded manually.
Organizing files can take extra work. For example, I have separate folders for CSS, scripts, and page files like index.html for the homepage and not_found.html for the 404 page.
Creating a new blog post means manually creating a new HTML page each time. It's very different from Blogger’s built-in post editor.

Because of this, I ended up creating a Post Generator to make posting easier and speed up the process.

Is Neocities Worth It for Blogging?

I think it depends on what you're looking for. If you enjoy creative freedom, customizing everything yourself, and building a website that truly feels personal, then Neocities can be a fun and rewarding experience. It feels less like using a traditional blogging platform and more like creating your own space on the internet.

But, if you prefer convenience, built-in tools, and a simple publishing process similar to Blogger or other modern platforms, you may find the manual setup frustrating.

For me, Neocities is perfect for amazing artists and people who enjoy writing personal diaries or simply venting their frustrations. It gives them a space to express their creativity, personality, thoughts, and individuality while creating unique sites that truly reflect who they are.

Display Tooltips in Your Post

noreply@blogger.com (Dida) — Wed, 13 May 2026 11:46:16 +0000

Tooltips have become a standard feature on many modern websites, especially on professional blogs, documentation pages, and educational platforms. If you have browsed WordPress websites before, you have probably noticed small pop-up boxes that appear when hovering over specific words or phrases. These tooltips are commonly used to provide additional explanations, definitions, references, or short hidden notes without interrupting the flow of the article.

How to Add a Responsive Owl Carousel Slider

noreply@blogger.com (Dida) — Sat, 09 May 2026 17:23:00 +0000

Adding a responsive carousel to your Blogger site can significantly professionalize your layout, especially for manga, anime, or movie review blogs. This tutorial will show you how to add a fully responsive Owl Carousel slider widget to your Blogger website. This slider automatically fetches posts from a specific label and displays them in a modern carousel layout with thumbnails, genres, and descriptions.

This Owl Carousel widget not only improves the visual appearance of your homepage but also helps organize featured content in a cleaner and more engaging way. Instead of displaying posts in a simple list format, the carousel creates an interactive browsing experience that makes your website feel more modern and dynamic.

Translation Update: Why I Quit Translating

noreply@blogger.com (Dida) — Mon, 04 May 2026 16:00:00 +0000

Hi everyone, my name is Dida. If you follow me on MangaUpdates or MangaDex, I’m the owner of Sugookie, formerly known as DMCScans.

This has been a long journey as a scanlator and translator. After taking a break for a few months, I returned under the new name Sugookie. One of my most popular projects was translating the manhua Sijin (The Brocaded Tale of the Girl Si). It’s one of my favorite series, and I continued the project after the previous translator stopped.

Looking back, I truly enjoyed translating manhua and sharing it with readers. But, I’ve decided to officially stop translating, and this decision is permanent. Here are the reasons why.

How to Fix Blogger Comment iframe Dark Mode

noreply@blogger.com (Dida) — Mon, 04 May 2026 03:11:00 +0000

One of the most frustrating challenges I faced while working on Blogger themes was figuring out how to make the Blogger comment iframe adapt to light and dark mode. If you’ve ever built a theme with a toggle option, you probably noticed this issue too. The main site switches perfectly between light and dark, but the comment section remains stuck in its default state. It breaks the entire visual flow and ruins the professional feel of your site.

For a long time, this question bothered me. I asked several veteran Blogger developers who build themes with light and dark modes, but no one gave me a straight answer. Whether it was something they didn’t know or something they preferred not to share, I can’t say for sure. Either way, their silence forced me to figure it out by myself.

At one point, a developer suggested using a CSS filter like sepia (or something similar), but I wasn’t a fan of how it looked. The result felt off, especially since avatars ended up looking like negative images, which just didn’t sit right with me.

So, I was curious about how the developer of Kaikomik managed to make the comment section dark, and that curiosity led me to uncover a working method. It wasn’t obvious, and there wasn’t any clear documentation about it, but through testing and refinement, I finally figured out how to control the appearance of the Blogger comment iframe.

Now, I’m sharing this with other developers who are building Blogger themes and facing the same issue.

Before we begin, I want to make one thing clear: if you use this solution in your own tutorials or blog posts, please give proper credit. Avoid simply copying and pasting the content without acknowledgment. A lot of time and effort went into experimenting and understanding this behavior, and it’s only fair to respect that work.

How to Add a Crunchyroll-Style HTML Sitemap

noreply@blogger.com (Dida) — Tue, 28 Apr 2026 16:50:00 +0000

Adding an anime list sitemap to Blogger is one of the most effective ways to improve both user experience and SEO. In the anime blogging niche, where you often have hundreds of episodes, reviews, or movie entries, a standard "Archives" widget just doesn't cut it.

In this guide, you’ll learn how to recreate a Crunchyroll-inspired Anime List Sitemap for Blogger, giving your site a more modern, organized, and user-friendly interface.

This sitemap includes a sticky alphabetical navigation bar, a smooth scrolling effect, and a clean card-based layout. It’s designed to adapt seamlessly to both dark and light modes, ensuring a consistent experience across all devices.

Demo Preview

How to Hide/Show Blogger Comment Delete Button

noreply@blogger.com (Dida) — Sun, 26 Apr 2026 21:09:00 +0000

Managing a Blogger-based community involves more than just publishing content, it also requires keeping the environment organized, functional, and safe for everyone. One of the common challenges faced by developers who use custom Blogger themes is handling the Comment Delete Button.

In Blogger’s default system, this feature works automatically behind the scenes. But, once you switch to a custom XML template, things can break. The delete icon may disappear completely, or worse, it might appear for all users even if they can't use it.

This guide will walk you through a proper solution to control the visibility of the delete button so that it only appears for the correct users.

By following this tutorial, your blog will behave according to these rules:

Administrator / Blog Owner: Has access to delete any comment and can see the delete button on all comments.
Logged-in Users (Google Account): Can only see the delete button on comments they personally posted.
Anonymous: Will not see any delete button at all.

Feedback & Support Thread

noreply@blogger.com (Dida) — Sat, 25 Apr 2026 11:21:00 +0000

Welcome! This page serves as the official hub for all feedback, support requests, and community interaction related to the site. If you’ve come across any issues, have ideas for improvements, or simply want to ask something, you’re in the right place. Every comment you leave here plays a role in shaping and improving the overall experience for everyone. Whether your feedback is big or small, detailed or simple, it is always appreciated and taken into consideration.

Badge Discussion

noreply@blogger.com (Dida) — Fri, 24 Apr 2026 08:25:00 +0000

This guide explains how the badge and ranking system works on the site. You’ll learn how badges are earned, what ranks are available, the benefits of reaching higher levels, and how to check your own profile rank directly from the comment section. Whether you’re new or already active, this will help you understand how your participation is tracked and rewarded.

How to Add a Daily Release Schedule with Auto-Highlighting

noreply@blogger.com (Dida) — Tue, 21 Apr 2026 22:00:00 +0000

Learn how to add a modern, tabbed weekly schedule for your Blogger site. This widget will fetch your posts and automatically sort them into the days of the week (Mon-Sun) based on their publication date.

It’s designed to help your readers quickly browse content according to a consistent release schedule without any manual sorting on your part. Btw, this is inspired by the clean and user-friendly layout of the Tappytoon app.

Demo Preview

Title	Genre	Status
Defiance of the Fall	Action, LitRPG, Underdog Story	Ongoing, 11 Episodes
Ultimate Shut-in	Action, Dystopian, Post-Apocalyptic	Ongoing, 72 Episodes
The Returned C-Rank Tank Won't Die!	Action, Ability User, Overpowered MC	Hiatus, 46 Episodes
Hero of All Trades	Action, Ability User, Heros' Journey	Ongoing, 72 Episodes
The Apothecary Prince	Comedy, Isekai, Redemption	Ongoing, 102 Episodes
Superhuman Streamer	Action, LitRPG, Virtual Reality	Ongoing, 31 Episodes
Too Many Heroes for the Demon Lord	Action, Social Rebellion, Regression	Ongoing, 23 Episodes
Reincarnated as the Grand Duke’s Third Son	Action, Underdog Story, Social Rebellion	Ongoing, 23 Episodes
The Back Alley Mage's Second Life	Action, Witch/Wizard, Regression	Ongoing, 38 Episodes
Chronicles of the Lazy Sovereign	Martial Arts, Chosen One, Overpowered MC	Ongoing, 29 Episodes

Can You Start a Manga/Novel Website Using Blogger?

noreply@blogger.com (Dida) — Thu, 16 Apr 2026 22:00:00 +0000

If you’re thinking about launching a manga reader site, a light novel blog, or any kind of chapter-based storytelling platform, one question usually comes up first: Can Blogger actually handle it? The short and honest answer is yes! It absolutely can.

In fact, Blogger is one of the most beginner-friendly and budget-conscious platforms you can use to build this type of website. Since it’s owned by Google, it comes with built-in advantages like seamless integration with Search, Analytics, and AdSense. That means you’re not just creating a site, you’re plugging directly into an ecosystem designed for visibility and growth.

For anyone who wants to start publishing without worrying about hosting costs, server maintenance, or complicated setups, Blogger offers a surprisingly solid foundation.

How to Add an HTML Sitemap (with Live Search & Category Filter)

noreply@blogger.com (Dida) — Wed, 15 Apr 2026 19:32:00 +0000

If your Blogger site is growing and you’re publishing content regularly, chances are your archive is getting harder to navigate. Readers might struggle to find older posts, and valuable content can easily get buried. That’s exactly where an HTML sitemap with search and filtering becomes incredibly useful.

Instead of a plain list of links, this advanced sitemap gives your visitors a powerful way to explore your blog. They can browse all posts in one place, filter them by category, or search by keywords to instantly narrow down results. Even better, newly published content automatically appears at the top. So your sitemap always stays fresh without manual updates.

How to Add an Automatic Table of Contents (Using Headings)

noreply@blogger.com (Dida) — Mon, 13 Apr 2026 18:37:00 +0000

When you’re publishing long-form articles on Blogger, readability and structure become just as important as the content itself. That’s where a Table of Contents (TOC) comes in. Instead of forcing readers to scroll endlessly, a TOC gives them a quick overview of your post and lets them jump directly to the sections they care about. It’s a simple addition, but it can dramatically improve user experience, reduce bounce rates, and even support better SEO.

In this guide, you’ll learn how to create an automatic Table of Contents for your Blogger posts that:

updates itself based on your headings
no need to manually edit links every time you update your article

Once set up, it works in the background, detecting your headings and building a structured navigation list instantly.

This setup uses your existing heading tags in a logical way:

H1 / H2 are treated as main sections
H3 / H4 / H5 are treated as sub-sections

INFO: You can change it later however you like.

When Bato.to Disappeared: A Reader’s Perspective

noreply@blogger.com (phantom) — Sat, 11 Apr 2026 19:14:00 +0000

What is BATO and Why It’s Gone

BATO (often known as Bato.to) was a popular online site where readers could access manga, manhwa, and other comics for free. It stood out from many other piracy sites because it often hosted scans and, in many cases, official translations that were originally locked behind paid platforms. For many readers, it became a go-to place to enjoy stories that were otherwise difficult or expensive to access.

However, BATO is now gone or at least no longer functioning the way it used to. The main reason behind this is piracy. Hosting and distributing copyrighted content without permission is illegal, and sites like BATO eventually face consequences such as takedowns, legal pressure, or shutdowns. No matter how useful they are to readers, they operate outside the law, and that always comes with risks.

My Thoughts After Months Without BATO

It’s been months without BATO, and honestly, it’s been difficult. I understand that pirating someone else’s work is illegal, and there are consequences for not following the rules. Creators deserve to be paid for their work, and platforms have the right to protect their content.

But at the same time, for readers like me who don’t have the money to buy every chapter, this loss is huge. I preferred BATO over other piracy sites because it was one of the few places where I could read official translations without them being mixed with unofficial one. Especially, for series that I couldn’t afford on platforms like Tapas, Lezhin or Tappytoon. Many of the titles I follow aren’t even available on Webtoon, so there aren’t many legal alternatives.

Sometimes I wonder why more official platforms don’t follow a system similar to Webtoon. For instance, allowing readers to unlock chapters for free on certain days, and then once the series is fully translated, they switch to coins or ads. That kind of system could balance accessibility for readers while still supporting creators.

I’m also aware that creators don’t always receive the full earnings from these platforms. There are platform cuts, and if they’re under a publisher, their earnings can be even smaller. Still, there are generous fans who support them through subscriptions, tips, or platforms like Patreon or Ko-fi.

My Final Thoughts

In the end, I understand both sides. Creators deserve fair compensation, but accessibility for readers also matters. The shutdown of Bato highlights an ongoing issue: while legal actions may reduce piracy, they don’t solve the deeper problem of accessibility. Until a balance is found, where creators are fairly paid and readers can access content at reasonable costs, the impact of losing Bato will continue to be felt.

How to Add an Admin Badge in Blogger Comments (Using Profile ID)

noreply@blogger.com (Dida) — Sat, 11 Apr 2026 05:48:00 +0000

If you’ve ever wanted to make your Blogger comment section feel more dynamic, organized, and community-driven, adding custom user badges is one of the simplest yet most effective upgrades you can implement.

Instead of every commenter appearing the same, you can visually distinguish important users like the admin, moderators, loyal supporters, or even top commenters. This not only improves readability but also encourages engagement by rewarding active members with recognition.

The best part? You don’t need any external plugins or complicated systems. Blogger already provides enough built-in data to identify users, you just need to leverage their profile ID or profile URL and apply a bit of XML logic and CSS styling. With a small script adjustment, you can dynamically display badges next to specific users whenever they leave a comment.

WARNING: Before making any changes to your Blogger XML, please backup your theme. This ensures that if a tag is misplaced or a script breaks your layout, you can restore your site in one click.

Top 10 Must-Watch Anime of 2026

noreply@blogger.com (phantom) — Thu, 09 Apr 2026 08:01:00 +0000

Welcome to your 2026 anime guide! This year is packed with something for everyone—whether you enjoy relaxing “slow life” stories, heartwarming romances, epic reincarnation journeys, or simply watching a noble character enjoy some well-earned peace, this watchlist has you covered.

I’ve personally watched these anime, and I’m excited to recommend them to you. I’ll keep it spoiler-free and just share a brief overview of my thoughts. I don’t want to take up too much of your time.

The 2026 Anime Watchlist

Title	Genre
Farming Life in Another World (S2)	Slice of Life, Fantasy
Kusunoki's Garden of Gods	Supernatural, Mystery
Reborn as a Vending Machine (S3)	Comedy, Isekai
You and I Are Polar Opposites	Romance, Comedy
A Gentle Noble's Vacation Recommendation	Adventure, Fantasy
Easygoing Territory Defense by the Optimistic Lord	Isekai, Strategy
Noble Reincarnation	Fantasy, Action
Kunon the Sorcerer Can See	Fantasy, Drama
The Demon King's Daughter Is Too Kind!!	Comedy, Fantasy
Reincarnated as a Dragon Hatchling	Action, Isekai

10. Reincarnated as a Dragon Hatchling

Image source: Anime Planet

A man wakes up as a weak dragon egg in a dangerous forest. He has to level up and evolve to survive.

It’s a "zero-to-hero" story that actually feels earned. Watching him struggle as a tiny, weak dragon before becoming a legendary beast is a great journey.

9. Kusunoki's Garden of Gods

Image source: Anime Planet

Premiering in April, this story follows the mysterious and beautiful interactions within a divine garden. It explores themes of nature, mythology, and the quiet moments between deities and the humans who stumble into their realm.

The art style is breathtaking. It feels like a mix of Mushishi and Natsume’s Book of Friends. Definitely one for the "vibe" seekers.

8. Kunon the Sorcerer Can See

Image source: Anime Planet

Born blind, Kunon discovers water magic and sets a goal: to create "eyes" out of water so he can see the world. His unconventional use of magic shocks the prestigious magic academy he eventually joins.

This is genuinely inspiring. It’s less about fighting and more about the scientific method applied to magic. The way Kunon "sees" through magic is visually stunning.

7. Farming Life in Another World Season 2

Image source: Anime Planet

After the peaceful success of Great Tree Village in Season 1, Hiraku continues his leisurely life using the "All-Purpose Farming Tool." Season 2 dives deeper into the growing community of elves, vampires, and angels as they face new seasonal challenges and even more supernatural arrivals.

It’s the ultimate "low-stress" anime. If you want to watch a guy grow giant radishes and build a literal utopia while accidentally forming a harem, this is your vibe.

6. Reborn as a Vending Machine, I Now Wander the Dungeon Season 3

Image source: Anime Planet

Boxxo is back! After surviving the hazards of the dungeon floor, Boxxo and Lammis continue their journey. This season promises more "functions," weird carbonated beverage saves, and the slow expansion of Boxxo's mechanical consciousness.

I never thought I’d be emotionally invested in the stock levels of a machine, but here we are. Season 3 looks like it’s going to get surprisingly deep into the lore of the dungeon.

5. The Demon King's Daughter Is Too Kind!!

Image source: Anime Planet

The Demon King wants to conquer the world, but his daughter, Dou, is so incredibly kind that she accidentally befriends all the heroes and angels sent to stop them.

Prepare for a sugar rush. It’s incredibly cute and serves as a great palate cleanser after more serious shows.

4. You and I Are Polar Opposites

Image source: Anime Planet

A sweet rom-com centering on Suzuki, a bubbly, outgoing girl who falls for Tani, a quiet, socially awkward guy. It’s a grounded, sweet look at high school romance.

Finally! This anime is legendary for being "no-drama," just pure, wholesome communication. It’s the perfect antidote to toxic romance tropes.

3. Easygoing Territory Defense by the Optimistic Lord

Image source: Anime Planet

Van is reborn as the fourth son of a marquis but is banished because his magic—"Production Magic"—is considered useless for combat. He’s sent to a tiny village where he uses his skills to build the ultimate fortress.

This is so good. Seeing a "useless" skill turn a hut into a citadel is pure satisfaction.

2. Noble Reincarnation: Born Blessed, So I'll Obtain Ultimate Power

Image source: Anime Planet

Reincarnated as the thirteenth son of a royal family, the protagonist uses his knowledge to master magic and secure his place in the world.

This is the "OP Protagonist" fix for the year. Prince Noa is a child prodigy who actually uses his head, making the power struggles feel like a high-stakes chess match. I really loved how the last episode ended. Now I’m wondering if there’s going to be a season 2. 🤔

1. A Gentle Noble's Vacation Recommendation

Image source: Anime Planet

Lizel, a noble from a fantasy world, gets transported to another fantasy world. Instead of panicking, he decides to treat it like a well-deserved vacation. He teams up with a grumpy adventurer named Gil to see the sights.

HIGHLY RECOMMEND THIS ONE!! It’s "Isekai" but with zero stakes and 100% elegance. Lizel is so posh and calm that he basically "reverses" the stress of everyone he meets.

Now, it’s your turn:

Which of these anime are you most hyped for?
Did we miss a hidden gem that’s premiering later this year?

How to Add Numbered Comment Pagination in Blogger

noreply@blogger.com (Dida) — Mon, 06 Apr 2026 19:57:00 +0000

Adding a clean, numbered pagination system to your Blogger comments section can dramatically improve both usability and presentation especially if your posts attract a lot of discussion. Instead of forcing readers to scroll endlessly through dozens (or even hundreds) of comments, pagination breaks everything into manageable chunks. Think of it as transforming a cluttered conversation into an organized, easy-to-navigate experience, complete with page numbers like 1, 2, 3 … Next.

In this guide, you’ll learn how to implement a fully functional comment pagination system in Blogger that only activates when your comment count exceeds a specific threshold (default: 10 comments).

Before you dive into the code, go to Theme > Customize > Backup to save your current layout. Better safe than sorry!

Installation Instructions

This setup is divided into four main steps. Each step plays a specific role in making sure your pagination system works smoothly from structuring your comments properly to styling and controlling the navigation logic.

STEP 1 — Wrap Comments

In your Blogger Dashboard, click Theme, then click the small arrow next to the “Customize” button.
Select Edit HTML, click anywhere inside the XML editor, and then press CTRL + F (or CMD + F on Mac)
Search for: <b:loop values='data:post.comments' var='comment'>

Modify your comment loop container like this and then add class comment-item:

<div class='comments' id='comment-list'>
  <b:loop values='data:post.comments' var='comment'>
    <div class='comment-block comment-item'>
      ...
    </div>
  </b:loop>
</div>

STEP 2 — Add Pagination Container

Next, you’ll add placeholders where the pagination controls will appear. These containers will later be populated dynamically using JavaScript.

Place the following code both above and below your comment section:

<div class='comment-pagination' id='comment-pagination-top'/>

<div class='comments' id='comment-list'>
  <b:loop values='data:post.comments' var='comment'>
    <div class='comment-block comment-item'>
      ...
    </div>
  </b:loop>
</div>

<div class='comment-pagination' id='comment-pagination-bottom'/>

Having pagination controls at both the top and bottom ensures better accessibility, so users don’t have to scroll back up just to navigate pages.

STEP 3 — Add CSS

Now it’s time to make your pagination visually appealing.

Click anywhere inside the XML editor, and press CTRL + F (or CMD + F on Mac)
Search for: //]]></b:skin> or </style>

Then copy and paste the following CSS. Place it before the closing //]]></b:skin> or </style> tag

.comment-pagination{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:15px 0;font-size:14px;}
.comment-pagination .page-info{margin-right:10px;color:#666;}
.comment-pagination a{padding:5px 9px;border:1px solid #ddd;text-decoration:none;color:#333;border-radius:3px;}
.comment-pagination a.active{background:#333;color:#fff;border-color:#333;}
.comment-pagination span.dots{padding:5px 6px;color:#999;}

You can apply your own CSS to style the pagination navigation so it blends seamlessly with your theme.

STEP 4 — Add JavaScript

This is where everything comes together. The JavaScript handles how many comments appear per page, generates navigation links, and updates the display when users click through pages.

Click anywhere again inside the XML editor, and press CTRL + F (or CMD + F on Mac)
Search for: </body>

Then copy and paste the following JavaScript. Place it before the closing </body> tag

<script>//<![CDATA[
document.addEventListener("DOMContentLoaded",(function(){const t=document.querySelectorAll(".comment-item"),e=10,n=t.length;if(n<=e)return;const a=Math.ceil(n/e),o=document.getElementById("comment-pagination-top"),c=document.getElementById("comment-pagination-bottom");let r=1;function l(n){r=n,t.forEach(((t,a)=>{t.style.display=a>=(n-1)*e&&a<n*e?"block":"none"})),function(){const t=function(){let t="";t+=`<span class="page-info">Page ${r} of ${a}</span>`,r>1&&(t+='<a href="javascript:void(0)" data-nav="prev">‹ Prev</a>');const e=1;function n(t){return`<a href="javascript:void(0)" data-page="${t}" class="${t===r?"active":""}">${t}</a>`}t+=n(1),r>3&&(t+='<span class="dots">...</span>');for(let o=r-e;o<=r+e;o++)o>1&&o<a&&(t+=n(o));r<a-2&&(t+='<span class="dots">...</span>');a>1&&(t+=n(a));r<a&&(t+='<a href="javascript:void(0)" data-nav="next">Next ›</a>');return t}();o&&(o.innerHTML=t);c&&(c.innerHTML=t);document.querySelectorAll("[data-page]").forEach((t=>{t.onclick=()=>l(parseInt(t.dataset.page))})),document.querySelectorAll("[data-nav='prev']").forEach((t=>{t.onclick=()=>l(r-1)})),document.querySelectorAll("[data-nav='next']").forEach((t=>{t.onclick=()=>l(r+1)}))}()}l(1)}));
//]]></script>

You can set the comments-per-page limit to your liking.
Click Save

Result

Blogger-style "Page X of Y"
Prev/Next auto-hide
Small pages → shows all numbers
Large pages → collapses with ...
Synced top + bottom pagination

Once everything is in place, your Blogger comments section will feel much more polished and user-friendly. Readers can move between pages effortlessly, and your layout will look far more structured especially on posts with heavy engagement.

If you encounter any issues, double-check your class names and IDs, as even small mismatches can prevent the script from working correctly. Styling adjustments may also be needed depending on your theme.

And that’s it! You now have a fully functional, professional-looking pagination system for your Blogger comments.

TikTok 2026: New Policies and Avoid the Ban

noreply@blogger.com (Dida) — Sat, 04 Apr 2026 11:40:36 +0000

If you’ve spent even a little time scrolling through TikTok recently, you may have sensed that something feels different. The platform’s atmosphere is evolving, and it’s not just your imagination. With the rollout of major 2026 updates including structural changes like regional content prioritization and tighter governance policies, the way content is evaluated, distributed, and moderated has shifted significantly. For creators, this means one thing: what worked before might not work anymore.

The introduction of features like the “Local Feed,” combined with stricter enforcement tied to recent regulatory changes, has made TikTok more selective about the type of content it promotes. Visibility is no longer just about trends or timing—it’s about credibility, transparency, and behavior patterns. As a result, avoiding penalties, restrictions, or outright bans is becoming a constant concern for many creators. Staying compliant is no longer a passive effort; it requires awareness, discipline, and adaptation.

Introduction: My First Custom Theme Built from Scratch

noreply@blogger.com (Dida) — Fri, 03 Apr 2026 11:35:00 +0000

When I first started exploring Blogger, I had absolutely no background in coding. Everything felt unfamiliar, HTML tags looked confusing, CSS rules seemed overwhelming, and the idea of building something from scratch felt out of reach. But instead of giving up, I spent hours watching tutorials, reading guides, and experimenting on my own blog. Slowly but surely, things began to make sense.

What started as simple curiosity eventually turned into something much deeper. I found myself enjoying the process of tweaking layouts, adjusting colors, and refining the overall look of my site. Before I realized it, I was completely hooked (addicted fr) to customizing and styling every little detail.

My knowledge is still quite basic. I mainly work with HTML and CSS within Blogger, and I don’t really dive into JavaScript yet. Because of that, I still rely on help from communities, forums, and AI tools.

At one point, I also tried using WordPress. While it’s a powerful platform, I personally found it harder to navigate and understand, especially as a beginner. Blogger, on the other hand, felt much more straightforward and beginner-friendly. Another big advantage is flexibility, many WordPress features require paid plans, especially when it comes to advanced customization. With Blogger, I was able to freely modify and even build my own theme without worrying about additional costs.

Now, after all that learning and experimenting, I’m excited to finally share something meaningful... my very first custom theme. This project has been a huge milestone for me. It reflects not only what I’ve learned so far but also the effort and passion I’ve put into improving my skills. Seeing the final result come together has been incredibly satisfying.

WW Forum

Interactive 3D Minimalist Bookshelf

What Do You Want To Do With Your Life?

Text Animation Inspiration Collection

Part 1: CSS-Only Animations

Retro Wave (Vaporwave / 80s)

Comic Book Pop

Flickering Street Light

Movie Title (Cinematic Dissolve)

Jello Food Bounce

Glitch Game Menu

Part 2: CSS + Light JavaScript Animations

Pixel RPG Text Typer

Arcade Wave (Game)

Movie Credits Scroll (3D)

Cooking Steam (Food Niche)

The Import Links

Neocities Review: Pros, Cons, and Why Bloggers Should Try It

What is Neocities?

Pros and Cons of Using Neocities

Pros

Cons

Is Neocities Worth It for Blogging?

Display Tooltips in Your Post

How to Add a Responsive Owl Carousel Slider

Translation Update: Why I Quit Translating

How to Fix Blogger Comment iframe Dark Mode

How to Add a Crunchyroll-Style HTML Sitemap

How to Hide/Show Blogger Comment Delete Button

Feedback & Support Thread

Badge Discussion

How to Add a Daily Release Schedule with Auto-Highlighting

Top 10 Action Manhwa Worth Reading

10. Defiance of the Fall

9. Ultimate Shut-in

8. The Returned C-Rank Tank Won’t Die!

7. Hero of All Trades

6. The Apothecary Prince

5. Superhuman Streamer

4. Too Many Heroes for the Demon Lord

3. Reincarnated as the Grand Duke’s Third Son

2. The Back Alley Mage's Second Life

1. Chronicles of the Lazy Sovereign

Can You Start a Manga/Novel Website Using Blogger?

How to Add an HTML Sitemap (with Live Search & Category Filter)

How to Add an Automatic Table of Contents (Using Headings)

When Bato.to Disappeared: A Reader’s Perspective

What is BATO and Why It’s Gone

My Thoughts After Months Without BATO

My Final Thoughts

How to Add an Admin Badge in Blogger Comments (Using Profile ID)

Top 10 Must-Watch Anime of 2026

The 2026 Anime Watchlist

10. Reincarnated as a Dragon Hatchling

9. Kusunoki's Garden of Gods

8. Kunon the Sorcerer Can See

7. Farming Life in Another World Season 2

6. Reborn as a Vending Machine, I Now Wander the Dungeon Season 3

5. The Demon King's Daughter Is Too Kind!!

4. You and I Are Polar Opposites

3. Easygoing Territory Defense by the Optimistic Lord

2. Noble Reincarnation: Born Blessed, So I'll Obtain Ultimate Power

1. A Gentle Noble's Vacation Recommendation

How to Add Numbered Comment Pagination in Blogger

Installation Instructions

STEP 1 — Wrap Comments

STEP 2 — Add Pagination Container

STEP 3 — Add CSS

STEP 4 — Add JavaScript

Result

TikTok 2026: New Policies and Avoid the Ban

Introduction: My First Custom Theme Built from Scratch