I had no prior coding experience when I began experimenting with Blogger. The concept of creating something from scratch seemed unattainable, HTML codes appeared perplexing, and CSS rules appeared overpowering. But rather than giving up, I read some articles, watched tutorials, and experimented on my own blog for hours. Things started to make clear gradually.
What started as simple curiosity eventually turned into something much deeper. I discovered that I was enjoying the process of modifying layouts, changing colors, and improving my site's general appearance. Before I knew it, I was totally engrossed in personalizing and styling every tiny element.
My knowledge is still quite basic. In Blogger, I mostly work with HTML and CSS; I haven't really dug into JavaScript yet. I still depend on communities, forums, and AI tools for assistance as a result.
I also experimented with WordPress at one point. Even though it's a strong platform, I personally found it more difficult to use 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 could freely alter and even create my own theme without worrying about extra fees.
I'm thrilled to finally share something significant after all that research and experimentation. It was my first custom theme. For me, this endeavor has been a significant turning point. It shows not just what I've learnt thus far but also the work and enthusiasm I've put into honing my abilities. It has been really rewarding to see the finished product come together.
Inspiration Behind the Design
I began by altering an already-existing theme rather than starting from scratch. This method made it easier for me to understand how themes are structured and how different elements interact with each other. Before tackling something more complicated, it provided me with a strong basis.
Previously, I experimented with redesigning themes on my other [website], but I wanted to go a step further this time. I set a goal for myself to develop a theme from the ground up.
For inspiration, I looked at various sources. One of the biggest influences was the layout and style of Anime-Planet forums and I also explored ideas shared by other Blogspot developers, applying their techniques and adapting them into my own style.
Style & Formatting Features
To give you a better idea of how my theme looks in action, here are the custom styles for different text elements:
| Markdown | Preview |
|---|---|
| <blockquote> | This is how quoted text or important highlights will appear in my site. Nothing special lol. |
| <pre><code> | |
| <code> | This is use to hightlight commands, snippets, or variables. |
| <mark> | This is use to highlighted text elements to emphasize important content. |
Alert Components
I’ve also styled specific alert boxes for different types of information:
Responsive Media & Lightbox
Images are an important part of any blog, so I made sure they are fully responsive and visually appealing. Whether viewed on desktop or mobile, images automatically adjust to fit the screen.
Click the image below to see the Automatic "X" Close Button and the smooth zoom effect.
Comment Section Improvements
One of the areas I spent the most time refining is the comment section. I wanted it to feel more personalized and functional compared to the default Blogger setup.
Here are some of the improvements I implemented:
- The delete button is only visible to the admin or the original commenter. If a comment is posted anonymously, the delete option remains hidden.
- Instead of using generic system messages like “This comment has been removed by the author.,” I customized the text to display the actual name of the person who removed it.
- I also replaced the default admin deletion message with something more consistent with the theme’s tone and style.
These changes may seem small, but they greatly improve the overall user experience and make the comment section feel more interactive and community-driven.
Navigating the Site: A Quick Guide
Here is a quick breakdown of how to get around and make the most of our community features.
Header & Navigation
At the very top of the page, you’ll find essential tools that enhance usability:
- A search bar that helps you quickly find posts or topics.
- A light/dark mode toggle, allowing you to switch themes depending on your preference or lighting conditions.
The Menu Bar gives you quick access to key sections:
- Home: Head back to the main feed anytime.
- About Us: Information about what we do.
- Tools: A collection of useful utilities, including:
- CSS Minifier Tool: Optimize your code for better performance.
- Slugify URL Generator: Create SEO-friendly URLs instantly.
- Post Generator: A dedicated space for our blog contributors to draft content.
- Notification Bell: Keeps you updated on changes, announcements, and new features.
- Quick Links (Sub-menu): Includes pages like Join Us, Contact Us and a Help/Question section where users can ask for assistance.
Browsing Content
You can browse widgets organized by labels or categories. For example, the main categories include Site Information, Blogging Tips & Optimization, Discussions & Opinions, and UI & Web Development Tutorials. Posts associated with each label will be displayed accordingly, making content easier to find and keeping everything well organized.
You’ll also find sections for Trending Posts and Latest Posts, so you can quickly catch up on popular content and recent updates.
Community & Interaction
Building a sense of community is one of my main goals for this site. To encourage interaction, I added a ranking system that appears next to usernames when clicking their profile in the comment section.
- Admin: The site owner.
- Author: Our guest writers.
- Supporter: Users who support the site through donations.
How to use the Parse Tool in the comment section?
Above the comment box, you’ll find several formatting options: Image, Link, Pre, Code, and Quote. Each option helps you format your comment differently:
- Image – Use this if you want to include an image in your comment.
- Link – Use this to add clickable links.
- Pre – Displays preformatted text (precode) with a copy button.
- Code – Formats text as inline code.
- Quote – Displays your text as a blockquote.
Install as a Web App (PWA)
Did you know you can "install" this website?
- Since it works as a Progressive Web App (PWA), no app store needed.
- Just select “Add to Home Screen” from your browser.
- It’s lightweight, fast, and allows you to visit the site anytime with a single tap, just like a regular app!
Final Thoughts
This project has been an incredible learning experience for me. From knowing almost nothing about coding to building a fully customized theme, the journey has been both challenging and rewarding.
That said, I know there’s still a lot of room for improvement. I’m continuously learning and exploring new ideas, and I’d really value your input.
If you have suggestions for new features, design improvements, or anything else that could make the site better, feel free to share your thoughts. Your feedback will help shape future updates.
Speak your mind here.
Also, if there’s a specific feature you’d like me to explain—whether it’s the comment system, styling techniques, or any part of the theme. Let me know, I’d be happy to create a step-by-step tutorial to help others learn as well.
Thanks for taking the time to check out my work. I’m looking forward to hearing your thoughts and continuing to improve this site!