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.


Next step is to increase the widths a bit so that the side bar doesn't appear all the time at higher resolutions. This is going to be a personal preference for you, but, I'll show you how to modify those settings. Go back into Theme Designer again just like the last step and choose 'Advanced / Widths'. Set your 'Content width' to a value you like (I chose 1030px) and bump up 'Content margin' so that the sidebar doesn't show at higher screen resolutions (I set mine to 425px):

Modifying the Header and Footer

Ok, the blog is looking good now. Let's do a few touch-ups on the header and the footer to complete this tutorial. First, let's add an HTML gadget to the footer where you can have some additional information about your blog. Right now all that's in the footer is the Blogger attribution. Go to the main menu and select 'Layout'. Find the "Add a Gadget' box in the layout:

From the gadget menu select the HTML / Javascript component and give it a title of 'Footer' and some random text in the html section wrapped in a div tag:

Press 'Save' and you should see the gadget in the Sidebar blocks of the Layout. Drag that box from the Sidebar down to the top of the footer like this:

Press the 'Save arrangement' button and take a look at your blog. You should now see your footer section and text. That particular gadget allows you to place any html code within it. So, if you want a CSS table or other information laid out you can input anything in that gadget. For CSS formatting, we'll see below how to add custom CSS just for that footer.

One thing I don't like about the Contempo footer is that it only spans the post body width and not the full body width. I like blogs that have a black or gray bar on the bottom that spans the full screen width. To fix that in this template requires some code rearranging. Be sure to backup your template before you try this.

Start by going to the main menu and selecting 'Theme/Edit HTML'. Scroll down to the very end searching for this section in the template code '<b:section class='footer':

 Copy and cut that section and paste it just after the ending </aside tag like this:

Warning! The <b:section code will expand when you paste it after the </aside ending tag. Don't worry, by clicking next to the section and widget sections on the line numbers they will expand and collapse in the editor. Also, be sure to add the single line above the section you just pasted: <div class='clearboth'/>. Go ahead and save your template - the footer should now span the full bottom of the blog!

To alter the footer color and style you'll need to add some custom CSS in the Theme Designer. When we added the HTML gadget and text you can see I gave the div tag id of 'topfooter' in its Content section. We'll use that in the custom CSS section. Go back to the main menu selecting 'Theme / Customize'. Add the following CSS code to the 'Advanced / Add CSS' selection like this:

#footer {
background-color:#333;
}

#topfooter {
display: flex;
justify-content: center;
width: 400px;
margin: 0 auto;
color: #ffffff;
}

You can see I've changed the full footer color to gray and the top footer custom html to be flex ready and centered. Click 'Apply to blog' and take a look at your new footer bar. You can now add custom HTML in the footer gadget and CSS for it in the theme editor - rinse and repeat for everything you want in that section. (Note: the gadget title of 'Footer' still is off to the far left side - just remove the title from the gadget in the Layout editor to remove it).

Now that we've learned how to modify the CSS, let's do the very same with the header to make it span the full screen width and alter its background color. The way I had to approach this was to set the full container body to 100% screen width and then increase the margins of the posts, popular posts and icon menus. Each of these CSS values override the CSS in the template. So, if you want to really start modifying it more, just find the CSS value in the template and then override it in the Theme Designer. You can see in the code below what the values were originally and what I modifed (BTP means BloggerTipsPro). Here is the additional code to paste into the 'Advanced / Add CSS' section:

.centered-top {
background-color: #000; /* BTP override top banner */
}

.page_body .centered{
max-width: 100%; /* BTP $(content.width); */
padding:0 0; /* BTP first value from 24px to 0 */
}

.centered-bottom,.centered-top-container,.centered-top-placeholder{
padding:0 0px
}

.blog-name{
margin:0px 0 26px 0px; /* BTP from 24px 0 16px 0 */
}

#page_body .FeaturedPost,.Blog .blog-posts .post-outer-container{
padding:0px 140px; /* BTP from 30px 40px */
}

.main .PopularPosts{
padding:16px 140px /* BTP from 16px 40px to 16px 120px; */
}

.post-snippet.snippet-container{
max-height:240px  /* BTP from 120px */
}

.hamburger-menu {
margin-left: 20px;
}

.sticky .hamburger-menu {
margin-left: 0px;
}

.search {
margin-right: 20px;
}

.sticky .search {
margin-right: 0px;
}

Feel free to work those CSS values to your liking! (I changed the top banner to black so you'll need to use the 'Advanced / Blog Title' to set the title and icons to white and 'Advanced / Search' to set the search bar white as well).

Finally, let's add the two pages as menu selections in the header. Go back to the main menu item 'Layout' and select the 'Page List (Top)' gadget like this:

You should see a dialog with the two pages you created in Part 1 along with the home page:

Simply select the 'Show Pages' check box and don't add a title. Make sure whatever pages you want to show are selected and save the gadget. Take a look at your blog - the page items will be just under the blog title and description. To alter their colors just go back into the Theme Designer again, pick 'Advanced / Tabs Text' and set them to the colors you like:

Press 'Apply to blog'. That's it!! Your blog is ready. Note: one reminder; in Part 1 we turned off the blog's being added to the search engine and listed in Blogger. You will have to delete your test posts and pages and turn these settings back on - don't forget that!!!! 

Code Syntax Highlighting

As a final note any programmer knows you can't have a coding blog without a syntax highlighter. My preference is to using Prism.js for code highlighting. It's simple to add and you can tweak it any way you'd like. But let's get the fundamental plugins installed.

All you need to do is to add the Prism core javascript library and the language library you want to support. Go to the main menu and select 'Template / Edit HTML'. In the template code scroll to the very bottom and add these two lines (we'll be testing with Javascript as the core language):

script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.min.js" type="text/javascript"
script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/prism-javascript.min.js' type='text/javascript'/

to .the very bottom of the template just above the ending </body> tag like this:

You will then need to also add the prism CSS to the top of the template as well:

link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/themes/prism.min.css' rel='stylesheet'

just above the <b:skin section 

You will see the result in my sample blog below in the Javascript post! Prism allows for many customizations for formatting so you can give the look and feel you want. In the post itself, you need to use the <pre><code class="language-js">...your code here...</code></pre> to enable the highlight.

Here's the final result (click on the image)!! Be sure to check out its responsiveness on a mobile device as well! Have fun!!