Blogger Themes and Modifications

It's been a while since I started a new Blogger site. I'm pleasantly surprised to find out that the experience has not changed since I last visited it in 2021, and the CSS and theme modification features are still there. In this post I'm going to skim through the modifications I've done to the site.

The theme

The theme I chose is Contempo Dark. I removed the header image, changed the colorscheme to the grey-orange combo you're looking at, and the font to Cantarell for the titles, Crimson for the text.

The layout

For the sidebar I hid the About Me block, and added the following widgets:

• Site Navigation (list of links): Links to permanent pages on the site.
• Archive and Labels: Self-explanatory. They're there by default.
• Recent Posts on the Main Blog (RSS feed): Links to the latest 5 posts I wrote on my other static site.
• Blogroll (blog list): Links to latest posts on blogs I read and like.
• License (HTML/Javascript): A block of text descripting the license of the content.

These are all built-in widgets of Blogger, and they're nice to use and not too complicated to set up. I made slight CSS modifications and that's it.

CSS modifications

There were some opacity quirks with the theme to accomodate with the header image, and I have overridden them to the default since I removed the header image. I modified the links to have wider margins, and fixed the position of site icons in the blogroll. There are also some minor modifications to the colors of the sidebar, to make it the same as the background.

If you're interested in the code, here they are:

.bg-photo-overlay {display: none}
.bg-photo-container {background: #242424; height: unset}
.image-attribution {display: none;}
.sidebar-container {margin-top: 0}
#BlogList1_blogs li {display: flex !important; gap: 8px}
.blog-icon {flex: 0 1 16px;}
.blog-icon img {width: 16px; position: relative; top: 2px;}
.blog-content {flex: 1 1}
.blog-title a {color: #fff}
.widget-content {font-size: 16px}
#sidebar_bottom li {margin: 4px 0}
.post-body h3 {font-family: Cantarell}
pre, code {font-size: 14px}
pre {background: #363636; padding: 8px 16px}
.sticky .search svg {position: relative; top: 6px}
@media screen and (max-width:800px) {
  .sticky #Header1 h1 {margin: 0; position: relative; top: 4px}
  .sticky .search svg {position: relative; top: 1px}
}

RSS feeds

RSS and Atom feeds are enabled by default, and I cherish that it requires no modifications.

Comments

I set the comments to let people comment anoymously, but made the approval mandatory to avoid spam.

Previous/Next page buttons

Here's where things go a little funny. I want to add Previous/Next buttons to the bottom of my posts, and after some searching, it seems like the only way to add them is to directly edit the HTML of the theme. So I did it, and added the base button code (thanks Abhishek) and other code to make the titles show (thanks Post 1/8). The process is not that hard but editing the HTML interferes with the "Customize" interface, so from this point on changes made there may or may not work.

Conclusion

It's been exceptionally easy to set up the blog, as it always has been. Google seems to not have put a lot of attention on Blogger, and that's a good thing. Stay where you are, Blogger, please. I love you.

Please comment if you want detailed instructions on any of the above!

— ltlnx 2024-10-13

Previous

Next