Pages

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:)

https://codingcontempo.blogspot.com/


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:

Altering the color of Blogger labels in the theme designer

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) :

Changing the color of the Blogger labels in a programming blog
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):

Coding blog content width and sidebar fix

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:

Blogger gadget for the programming blog

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:

Adding the javascript gadget tor the programming blog in Blogger

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:

Dragging the HTML box down to the footer for the coding blog

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':
Footer customization in Blogger
 Copy and cut that section and paste it just after the ending </aside tag like this:

Programming blog customization of the footer

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;
}

Blogger CSS changes for coding blog footer
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:

Coding blog main pages

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

Adding pages as menus item in the Blogger blog
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:

Coding blog top pages menu colors

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:

Using prism.js to add code highlighting to Blogger
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 

CSS to format code within a blog
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!!


https://codingcontempo.blogspot.com/


 

14 comments:

  1. Estaba buscando esta asesoria hace mucho duraciĆ³n en internet y no la encontraba.
    Estoy de contrato con lo que indicas. Gracias es un gran aporte.

    Un saludo.

    ReplyDelete
  2. Hello Dear, are you genuinely visiting this site on a regular basis, if so afterward you will without doubt obtain nice experience.

    ReplyDelete
    Replies
    1. Not quite sure how to respond to that :) - since its my own blog I would hope my experience is good! :)

      Delete
  3. Keep this going please, great job!

    ReplyDelete
  4. Hmm it looks like your blog ate my first comment (it was extremely long)
    so I guess I'll just sum it up what I had
    written and say, I'm thoroughly enjoying your blog. I as well am an aspiring blog blogger but I'm still
    new to the whole thing. Do you have any suggestions
    for first-time blog writers? I'd really appreciate it.

    ReplyDelete
  5. Hello there! This blog post couldn't be written any better!
    Going through this post reminds me of my previous roommate!
    He always kept talking about this. I most certainly
    will send this article to him. Fairly certain he will have
    a good read. I appreciate you for sharing!

    ReplyDelete
  6. Nice! I'm going to use that!

    ReplyDelete
  7. Hello Mr. James.
    I am new to blogging. I have created a Blogger site for a class project. I have managed to create a static welcome page, but I cannot seem to get the welcome page not to show up with the other labeled pages. I have watched various videos and read endless pages trying to fix the problem. Do you have any suggestions? The real trouble is this blog is due to be turned in for a grade in a few days. www.rkspradlin.blogspot.com is the site if you want to take a look. I appreciate your help.

    ReplyDelete
    Replies
    1. Sorry I wasn't available last week for your request. Are you still having issues?

      Delete
  8. Amazing article, as always! Thanks for all the solid gold tips Don James





    ReplyDelete
  9. Thanks mr. Don James for tutorial.

    Can you help me about contempo home post create 2 grid?

    rgds,
    jay

    ReplyDelete

NOTE: If you are logged into a Google account and you cannot see your Google profile image and name next to the 'Comment as:' in the comment editor, your 3rd party cookies are blocked and the comment won't post. If blocked, please comment preferably by Name/URL.