Build a Programming Blog on Blogger - Part 2

Ok, in Part 1 I modified the Blogger Contempo default template into a very clean, responsive programming blog. I also pointed out some of the Google Blogger template structures--so if you've forgotten, just go back a take a look at the brief description. We'll be focusing on some of the code within the template this time. (If you're just too anxious to see the final result just click on this image:)

One quick fix that I forgot in Part 1 was to modify the blog topic labels to be more visible. Just go back into the main menu and select 'Theme/Customize' again to go into the Blogger Theme Designer. Select 'Advanced / Labels' and set the 'Label background color' to blue like this:

Press the 'Apply to Blog' button and take a look at one of your posts - you should see your labels in your posts (Note: if you didn't add labels to posts originally, go into each post and on the far right side of the post editor you'll see 'Labels' - just add subject labels there and save the post - your labels will appear in the blog post now) :

Your colorized labels also show up in the left sidebar of the blog as well.

Build a Coding Blog on Blogger - Part 1

In the last decade being or becoming a programmer or coder has become a path to one of the hottest job markets in the US and probably in the world. Coders are in very high demand and keeping up on new technology can be a challenge. Many coders learn not only through classes or jobs, but also through coding blogs.

Unfortunately Google seems to have missed the mark completely by bypassing Blogger as an amazing platform for technologists and coders. I should note, though, that it really isn't the platform that is the problem--it is the available templates and API integrations offered by Google. Yes, you can go out and find Blogger templates from third parties, but, if you (Google) haven't offered a set of clean coder templates along with Github integration you've clearly missed a significant opportunity.

That being said a clever programmer could certainly go out to the Blogger API to integrate posts into Github and attempting to hack template uploads as part of a continuous integration build. But, that's beyond the scope of this post. The goal today is to guide you, the coder, to a simple, clean, customized, extendable and reactive template that looks and feels like many of the blogs or articles you see on sites like Hackernoon or others.

Let's get started.

Choosing the Blogger Template

First step is to choose the right base Blogger template. Clearly, we only have four choices since we want a modern, reactive template (Contempo, Soho, Emporio, or Notable). Each has it's pluses and minuses but I'm going to use the Contempo template since it has a nice full-screen feel and is somewhat minimized.

Customize Social Share Icons in Blogger

I've been spending a significant amount of time this year digging deep into the new Blogger responsive templates (Contempo, Soho, Emporio and Notable). There's quite a bit to be excited about yet there are some very frustrating components to the new responsive layouts that bother me. I will be posting more about them soon.

In the mean time I thought I would add a short post on how you can alter the social share icons in these four responsive templates (plus a similar change in the older V2 template icons at the end of this post). One of my frustrations with the new templates was that all of the social share buttons were set to the same color. You can alter their foreground and background colors as a group in the Template Theme designer which is good, but, they're all the same and don't match the standard colors of the social network logos. It seems that all four templates have used the same social sharing svg icon code.

SVG Icons

If you're not familiar with svg icons you can find more information here (SVG 101) and here (What is SVG?). When the new Blogger version 1.3 or V3 templates came out in early 2017, a significant amount of code was added dynamically as your blog renders for responsive images and SVG sprites. (If you want to find out your Blogger template version just look in the Template html - you'll see the version at the top. Most of us have been using version 2 for the last 10 years).