Site Implementation Notes

Introduction

I created this page for two reasons. First, to provide myself a record of what I did in terms of configuration and customization of the out-of-the-box Google Blogger theme. And second, to serve as an aid for others who might be looking to do something similar.

This site is powered by Google Blogger. And while it's entirely possible to suppress the "Powered by Blogger" attribution at the bottom of each page, I chose not to. In fact, I want people to know that I'm using Blogger as the platform for my site. Google's Blogger platform gets a bad wrap in my opinion. But for me and this site — for reasons I'll get into in a bit — Blogger is an excellent choice.

It's also worth noting that I do all my work on an iPad Pro, 100% of it. That includes writing, audio recording, editing, uploading to my podcast host, website content updating, and even site configuration and coding (yes, there is some HTML and CSS coding involved). I have found no limitations whatsoever to using the iPad for all my work. Why do I use the iPad for all my work? That's simple — I enjoy working on the iPad.

I do hope you find these notes useful in developing your own site using Google Blogger.

Why I Chose Google Blogger

I could have chosen something like Wix or SquareSpace, which are professional-looking and easy to use. I could also have used WordPress, but I didn't want to host my own site. I tried the hosted WordPress platform (WordPress.com), but it did not give me the level of configurability I wanted.

If you search the web, you'll find comparisons of Wix and SquareSpace and WordPress. Sometimes these comparisons will include Blogger, but mostly they ignore Blogger. I can understand why. Blogger has very few templates — there are only a dozen themes with a few minor variations in each theme to start with — and there is a limit to what you can do in terms of configuring the theme to your liking. If you want to do anything more, you have to be able to code. There is simply no way around it. But if you can code, and you're not afraid to dig into the HTML file for each theme, there is no limit to how much you can customize Blogger themes.

Blogger provides me with a good place to start, i.e. a set of themes that (limited as they are) provide the basic bones of a site. With some customization, you can create a static site out of something that was designed for blogging. And given that I'm not afraid to dig into the code and customize Blogger, it offers a FREE option that I don’t have to host.

But what about the objection that Google will own my site and can tear it down anytime they want. Well, they don’t own your site anymore than they own your email (if you use Gmail). Look, in this world, you're going to dance with the devil. There is simply no way around it...unless of course you intend to literally create everything (and I mean everything!) from scratch. I own all my content. It's copyrighted. It's mine, pure and simple. If Google decided to shut down Blogger, I would just move my site to another platform.

That said, if you're not comfortable with coding in HTML and CSS, or if you just don’t want to do it and would rather a richly configurable drag-and-drop platform, then Blogger is probably not your best option. Blogger is also not a good option if you want to build a highly-customized website from scratch using plug-ins and lots of JavaScript. But for me, it is perfect.

How the Blogger Platform Works

Everything starts with selecting a theme. You have to select a theme. There is no such thing as starting with a blank slate in Blogger. You have to start with one of the dozen or so pre-defined Blogger themes. This might seem a bit constraining, and it is. But that's just the way Blogger works. If you don't chose a theme, you will get the default Blogger theme, which I think is Contempo Light.

I suggest picking a theme that is as close as possible to what you're looking for. The most important consideration is how the overall page is laid out, especially the way the header image is used and how the posts are shown on the page. Granted, if you're planning to create a static site and not display any blog posts, then that part doesn't matter. A secondary consideration is the overall color pallete of the theme. Picking a theme close to what you're shooting for will just make the customization easier.

There are three levels of customization in Blogger. The first level of customization is the layout — the way sections of the page are laid out and configured. That's done on the main Blogger page (see the image below). You simply add, delete, or move the various widgets/gadets available in the Google platform. For example, you can add text sections or HTML/JavaScript sections, to name only a few (although these are the most important two gadgets, the only ones I really use). This is where you lay out the sidebar and main section of the site. This customization is pretty intuitive and there is actually quite a bit of helpful documentation on how to do this. There are also several good videos on YouTube.

The next level of customization is customizing the theme itself. This is where you can customize colors and fonts to your heart's content. You can add a header image (for those themes that support header images). You can change whether or not to display you site title. You wouldn't want to display your title, for example, if the website title is part of the header image. You can change the color scheme of your site. And you can even change the color and font of very specific elements, like links for example. Again, this level of customization is pretty straightforward, much like what you would expect from any other website builder.

From the menu on the Blogger main page, select the Theme view (see the image below). The CUSTOMIZE button will take you to a page that allows you to customize the theme using a menu-driven interface, much like other site builders. When you finish customizing the theme using the menu-driven interface, it's a good idea (I personally consider an absolute must) to backup your site. You do this using the drop-down menu beside the CUSTOMIZE button. In fact, I would suggest backing up your site before you do any customization. The backup function will ask you to download a backup file, which you save. If you screw something up, you can just revert to the previous configuration using restore on the customization drop-down.

In addition to backup and restore, the customization drop-down also has a some more options. You can switch the the first-generation theme. Not sure why you would want to do that, but it's an option nonetheless. You can change mobile settings, which allows you to use the mobile version of the theme on mobile devices. This option doesn't really do anything, since most of the Blogger themes are responsive, meaning that they detect the device's screen size and adjust accordingly. The big option, the one I'll be talking about for in most of this implementation note, is "Edit HTML." That's where all the magic happens.

Selecting the "Edit HTML" option allows you to completely customize whatever theme you've chosen. And I mean EVERYTHING. You could, if you wanted, completely re-write this file and in doing so literally create your own custom theme. Seriously. But that means you would have to understand everything about how this file works. Which is unlikely, since it is very complex and completely devoid of any published documentation or internal comments. Blogger uses a single (large) HTML file for everything. The bad news is that it's a bear to navigate.

Remember, there are almost no comments in the file and no documentation whatsoever for how the file works. So, if you want to figure out how to work with this file, you're on your own. The good news is that you only have to worry about this one file. You can literally pick any Blogger template to start with and load another theme's HTML file, and you've got a new template (i.e. the one you loaded). All the menu-driven customizations you do get saved to this HTML file, and any tinkering you do in the HTML file is likely to overwrite those modifications. So, do those modifications first and then switch to the HTML file to finish up the customizations.

The image below shows what this file looks like. The image shows the first 25 lines of the file. The file contains about 4,000 lines of HTML and CSS code. About half the file contains CSS code for the theme, approximately 2,200 line of CSS, and that's before you add any of your own. The other half of the code is HTML. Luckily, you don't need to understand this whole file in order to customize it. I'm not sure you could even if you tried, since you would have to understand what Blogger's server-side code is doing with the instructions embedded in the HTML. In the next section, I'm going to explain exactly how I customized the HTML file to implement this site.

Now that you understand the lay of the land in terms of Blogger customization, let's get into the specific customizations I did to implement this site.

Theme Selection and Configuration

Since this site is the website for my podcast, really just to provide a good way for people to get to the episodes and show notes, it made sense to start with a theme that I could use that way. My podcast host, PodBean, provides an player HTML snippet for each published episode. The HTML snippet can be copied and pasted into any web page, resulting in a poadcast player widget for the episode. The image below shows how the player appears.

Using the look and feel of the podcast player as the foundational element, I looked for a theme with a similar look and feel. I started with the Soho Dark theme (see image below). It has a layout I like with most of the colors I like. I wasn't looking for something that was exactly what I wanted, just something to start with. I figured the podcast player would look good on a dark background. Of course, I knew I would need to adjust the color scheme a little to match my podcast art. I also liked the way the posts displayed, which was a consideration given that I planned to use Blogger's built-in blog post capability for showing the 10 most recent episodes on the main landing page.

Menu-Driven Theme Configuration Changes — The Soho Dark theme was pretty close to the overall look and feel I wanted. But I needed to make a few basic changes:

Add Custom Header Image — I created a custom header using my original podcast artwork. I started with the podcast artwork, which I had created using Procreate on my iPad (an art app kind of like PhotoShop). It took a little trial and error to get size I wanted. The header image can be changed in the "Background" sub-menu of the customization menu.

Change Color Scheme — I changed the color scheme to something that matched my podcast player. The original color scheme was a sort of red-orange scheme, so I changed it to match the green-ish scheme of the podcast player and podcast artwork. The color scheme is also located in the "Background" sub-menu of the customization menu.

Change Link Color — Even after I changed the overall color scheme to a green-ish scheme, the link color was still stuck on the red-orange scheme. So I changed the link color to match the rest of the color scheme. The link color is a setting under the "Advanced" sub-menu of the customization menu.

Layout Customization — With the color scheme and banner image properly configured, there were some layout changes I needed to make:

Suppress Site Title — Since my header image included the name of the website, I didn't want it duplicated above the header image. The way to suppress the title is to go into the "Header" gadget on the layout and uncheck the "Visible" checkbox. Of course, be sure to hit the "Save" button at the bottom before navigating away from the Header configuration page.

Suppress "Popular Posts" — I didn't want the "Popular Posts" section to show on all my pages. (That's just a personal preference.) It is suppressed by going into the "Popular Posts" gadget and unchecking the "Visible" checkbox.

Suppress "Featured Post" — I didn't want the "Featured Post" section to show on all my pages. (Again, just a personal preference.) It is suppressed by going into the "Featured Post" gadget and unchecking the "Visible" checkbox.

Add "Latest Episodes" Text Gadget — There was some text above the latest posts, which said "LATEST POSTS." Since I was planning to use the posts for podcast episodes, I wanted to change the text to say "LATEST EPISODES." This turned out to be harder than I thought it would be. It involves a three-step process, the first of which is done in the layout and the remaining two steps in the HTML code. I'll explain the HTML steps in the next section. The first step is to create a "Text" gadget and move it to the appropriate place in the layout. The gadget is added first to the sidebar by selecting "Add a Gadget." Then the gadget is moved to the correct location on the main page, i.e. just above the "Blog Posts" gadget. Finally, go into the gadget and add the text "LATEST POSTS." That's it until we get to the HTML modification, where we will perform the final two steps of supressing the "LATEST POSTS" label and the "LATEST EPISODES" text gadget title.

Suppress "Report Abuse" Gadget on Sidebar — The "Report Abuse" link never seemed to be useful to me. I can manage the problems on my own site, thank you very much. So, I disabled the gadget, again by going into the gadget and unchecking the "Visible" checkbox.

Add Custom "About" Gadget to Sidebar — I disabled the default "About Me" gadget, since I wanted to create a custom gadget for the "About" section. I added an "HTML/JavaScript" gadget and included my own HTML code, including a custom image and link to a more detailed "About" page.

Add "Pages" Gadget to Sidebar and "Page List" to Main Page — I planned to create a special page for all my episodes. I figured that would give people an easy way to get to all my episodes, a listing I could control rather than relying on Blogger to do it for me. So I added a "Pages" gadget to the sidebar. It turns out this also creates a "Page List" gadget on the main page, which creates a sticky menu (i.e. it's always there on every page). I only wanted two menu items to show up — "Home" and "All Episodes" — so I configured the "Page List" to only show those two pages in the top menu. The "Page List" on the main page and "Pages" in the sidebar can be configured separately, so I show all published pages in the side menu but only "Home" and "All Episodes" on the main page menu.

HTML Customization

Here is where things start to get a little tricky. The next phase of customization involves directly editing the HTML file. It's very much like doing brain surgery on the website, so it's important to be very careful, comment like hell, and backup frequently. Before I get into the customizations, I should explain how custom CSS code is implemented in Blogger.

All the Blogger CSS code is in a block of the HTML file called the skin (see the snippet below). The skin starts near the very top of the HTML file and goes for about 2,300 lines. The first approximately 160 lines contains variable definitions that are used throughout the HTML file for styling. The rest of the skin block is pure CSS. To be clear, for the theme I'm using (Soho), there are about 160 lines of variable definition and some 2,200 lines of CSS, but I'm guessing it's roughly the same for other themes too.

<b:skin>
. . .2000+ lines of code... 
</b:skin>

All of the HTML customizations I do fall into two basic categories: (1) adding custom CSS code to change how certain elements are displayed; and (2) adding or suppressing the display of certain elements for select pages. In my experience, these changes are relatively low-risk. As for the CSS code, it starts at about line 160 with the following comments ("Name" will identify whatever theme you're using...Soho in my case):

/*!************************************************
 * Blogger Template Style
 * Name: Soho
 **************************************************/

Due to the nature of CSS code, lower CSS code overrides CSS code above it. In other words, if you define two styles in CSS, the last statement takes precedent over the first. Granted, this is a huge simplification of the way CSS works. But it's sufficient for our purposes. This characteristic of CSS code means that any custom CSS needs to be below ALL of the Blogger CSS. The best way to do this is to find the bottom of the skin block and insert any custom CSS there. Search the HTML file for the following line of HTML code and put any custom CSS code just above this line:

]]></b:skin>

Here is the list of HTML customizations I did:

Complete Work on "LATEST EPISODES" Gadget — Recall that we added a text gadget to replace the "LATEST POSTS" label on the homepage. There were two problems with the gadget: (1) the title of the gadget was displayed; and (2) the gadget displayed on all pages, an oddity of how Blogger treats gadgets (assuming that you want them on all pages). It is possible to go into the gadget and set the title to be blank, but that still displays a blank space, which adds unwanted space, and it's hard to keep track of the gadget on the layout page. The solution is to create some custom CSS to suppress the title of the gadget (#Text1 h3 { display: none; }). Next, in order to have the gadget display only on the homepage, you'll need to modify the gadget's code. You can find the code pretty easily by searching for the title of the gadget ('LATEST EPISODES' in this case). That's also what helps us to identify the gadget. In this case we can see from the ID that this gadget (which Blogger refers to in the HTML code as a "widget") is identified as Text1. That's why we inserted the CSS code for "Text1." We look for the code shown below and insert the highlighted lines as shown in the code snippet. This ensures that the gadget is only displayed on the home page.

           <b:widget id='Text1' locked='false' title='LATEST EPISODES' type='Text' version='2' visible='true'>
              <b:widget-settings>
                 <b:widget-setting name='content'>LATEST EPISODES</b:widget-setting>
              </b:widget-settings>
              <b:includable id='main'>
              
                 <b:if cond='data:view.isHomepage'>
                    <b:include name='widget-title'/>
                       <div class='widget-content'>
                          <data:content/>
                       </div>
                 </b:if>
              
              </b:includable>
           </b:widget>

And unfortunately, there's more. There are two blocks of code that display something called "messages.latestPosts" on the homepage. This is the text (LATEST POSTS) showing on the homepage. The code is shown below. The same exact code is in two different places in the HTML file (which I actually think is an error in the HTML file made by the Google developers...it really only needs to be in one location in the file). These two code blocks have to be removed or commented out. I prefer to comment out code in the file rather than delete it, which helps me keep track of the changes I make.

          <b:if cond='data:posts.any and data:view.isHomepage'>
            <h3 class='title'><data:messages.latestPosts/></h3>
          </b:if>

Suppress Title on "About" Gadget — This is much easier than what we just did. That's because the gadget is part of the sidebar. Find the name of the gadget the way we did above (i.e. searching for the title of the gadget). The title of this gadget is "HTML1." So, we simply add some custom CSS to suppress the title (#HTML1 h3 { display: none; }).

Eliminate Back Arrow and Add Hamburger Menu— The theme is set up to display the back arrow on every page other than the home page, presumably as a way to get back to the home page. The problem is that the arrow looks out of place and is not an intuitive way to get back to the homepage. What's more, the custom menu I created does a better job and I think it just looks cleaner. So, I eliminated the back arrow. I also wanted to include the "hamburger" menu button on all pages, so website visitors could always get to the sidebar. These two modifications are done simultaneously, by locating the code for the "back-button-container" (search the HTML file for "class='back-button-container'" to find the code block), then making the folowing changes (highlighted in the code snippet below):

           <b:if cond='data:view.isPost'>
              <div class='back-button-container'>    
              
                 <!-- Comment Out Back Arrow
                 <a expr:href='data:blog.homepageUrl'>
                    <b:include data='{ iconClass: "touch-icon back-button rtl-reversible-icon" }' name='backArrowIcon'/>
                  </a>
                 -->
                  
                 <!-- Add Hamburger Menu to Post Pages -->
                    <b:include data='{ iconClass: "touch-icon hamburger-menu" }' name='menuIcon'/>
              
              </div>
           <b:else/>
              <div class='hamburger-menu-container'>
                 <b:include data='{ iconClass: "touch-icon hamburger-menu" }' name='menuIcon'/>
              </div>
           </b:if>

Eliminate Dash Above Posts — The dash above posts was a distracting decoration. It seemed out of place and I just didn't like it, so I eliminated it. I did this by finding all instances in the Blogger CSS section that contained the text "content:'\2014'" and commented out the CSS that contained it. It occurred in three different places in the Blogger CSS.

Adjust Content Width — The content width was pushing the content to the right side of the display. I fixed this problem by changing the value of the variable "content.width" from 922px (the default value) to 1000px. You wouldn't think that such a minor change would make a big difference, but it does. I have found that there tends to be a tipping point on web pages where a small change makes a big difference. This was just one of those situations.

Finally, I registered a custom domain name through Blogger and connected it to my site. I wish I could tell you there was a manual for how to customize Blogger, but there isn't. Figuring it out involved a lot of crawling through the web to find bits of information I was able to piece together, in addition to a ton of trial an error.