If you've been here since day one or just happen to revisit my site from time to time, you've probably noticed that I keep changing my layout. Haha! But I think I've finally found a design that I'm genuinely happy with, and I don't think I'll be changing it anytime soon.
If you remember my previous layout, it was more of a forum-style design. I originally took inspiration from Anime-Planet's forum and wanted to create something similar for Blogger.
The inspiration actually came from Wernayasa and SaYLo, who were making forums in their own languages. Seeing what they were doing made me wonder: Why isn't there an English forum-style theme for Blogger? And that's how my first layout came to life. If you want to learn more about my Website (badges, how to navigate).
Why a Redesign or Revamp?
Over time, I started discovering and visiting more personal blogs and indie websites. I came across inspiring sites were created using Blogger. I enjoyed exploring their little corners of the internet and even leaving comments on their blogs. Honestly, I felt a little envious of how personal and unique their websites were. It made me want to create something similar, a space that I could truly call my own.
And now, I feel like I've finally achieved that!
What Changes I Made
There were definitely some changes, including adding, removing, and modifying certain elements of my layout. Let's start with what I removed.
I removed:
- bookmark
- featured post widget
- label widget
- go to top or bottom button
I added:
- guestbook
- changelog (which shows what's happening on my blog, such as new and updated post/page.)
- dividers
Some changes:
- my layout and navigation (adding a heart GIF)
- logo
- about me page
- recent comments widget
- new tags
- text/typography
As for the elements that remained unchanged, the latest posts, search function, and pages still work the same way. I simply added some dividers and borders to give them a slightly different look.
When clicking on the profile, the only noticeable change is its color. The same goes for the comment section; nothing much has changed aside from its appearance.
Responsive to All Devices
How did I make my layout look consistent and compatible across different devices? I'm using display: flex together with a media query, @media only screen and (max-width: 810px), to make the sidebar and main content stack vertically on smaller screens. This is done by changing the container's flex-direction to column.
Here's the CSS I'm using:
.container {
display: flex;
gap: 10px;
}
.sidebar {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
min-width: 0;
}
@media only screen and (max-width: 810px) {
.container {
flex-direction: column;
}
}Another approach that some websites use is display: grid. I'm not entirely sure which one is better, but I'm more comfortable using display: flex.
Different Layouts/Styles on Specific Pages
How did I make my homepage, search results, labels, pages, and posts look different from one another? Well, I'm using Blogger's <b:class> tag to apply specific CSS classes depending on the type of page being displayed.
For example, I used:
<b:class cond='data:view.isPost' name='border-img'/>With this, the border image will only appear on individual post pages. You can also use this method in other areas of your blog. Here are some examples:
<b:class cond='data:view.isHomepage' name='className'/> |
Applies to the homepage |
<b:class cond='data:view.isMultipleItems' name='className'/> |
Applies to the homepage, search results, labels pages, and archive pages |
<b:class cond='data:view.isSingleItem' name='className'/> |
Applies to both pages and posts |
<b:class cond='data:view.isPost' name='className'/> |
Applies only to individual post pages (/YYYY/MM/) |
<b:class cond='data:view.isPage' name='className'/> |
Applies only to static pages (/p/) |
Final Thoughts
I know that not everyone who visits my website will care about what I do. Sometimes, I even think that no one might really notice or appreciate the effort I put into it. But despite that, seeing my website brings me a great sense of satisfaction. Personally, it’s not just about what others think—it’s about seeing my hard work turn into something I can be proud of.
I hope you enjoy exploring my website and discover something interesting! I regularly update the site, so be sure to keep an eye on the notification bell. Whenever there's something new, a number will automatically appear to let you know about the latest updates.
Do you ever redesign or revamp your blog? If so, how often do you do it? For now, I'm focusing on creating and sharing new posts, so there's always something to look forward to. Thank you for stopping by and taking the time to explore my website. Wishing you a wonderful November!