Making blogger a little less painful

Table of Contents

• Formatting Source Code in Blogger
• Creating Table of Contents in Blogger

Recently google made an update to blogger for formatting code and inserting anchors in the Compose View itself(instead of HTML view). Yeah, it was just about the time when they came out with this fine separation between "blogger" and "legacy blogger".

The new changes they had incorporated was very good, focused as it was on simplicity . I actually used it to create one blog post which required the use of Table of Contents right from the "Compose View". I also used it to insert my Python code right from the "Compose View". Imagine the savings in time for somebody who makes a blog post daily ?

Suddenly a few days later all of it vanished as mysteriously as they appeared. Another Google+ ??? (oh yeah, that much touted alternative to Facebook)

Google seems to have done a veto on their recent updates to blogger. But yet I prefer google over some other blogging options like Medium becos in the near future google corporation don't need to worry about monetizing blogger , unlike the corporation run by Evan William's. ( He is the same guy who started blogger too , which was latter purchased by Google ).

So I began to think - How can I make blogging more easy on blogger instead of switching to another platform. Maybe google might bring those feature back, or maybe they wont. We don't know. So lets see what we can do for now.

I would like to cover the following issues which are of concern to me:

Formatting Source Code:

I have already dealt with formatting code in one of my previous posts. Check out one of my earlier post - Syntax Highlighter for Source Code on Blogs . This deals with code-prettify and unfortunately for us this is archived and is no longer maintained. So sooner than latter, we will have to look at alternatives.

The one I found most helpful was the use of gist. I have been using GitHub for a couple of years now and so it was the logical to continue with it.

 

The procedure is very simple. First go to the URL above and login. Click on "Create a gist". Give a name to the file with extension, enter a description, and then click on "Create Secret Gist" / "Create Public Gist"

Since we are using this for a blog posting, choose the embed code. Now switch from "Compose View" to "HTML View" and paste the link.  What you see below is what you get from doing so.

Another more easier method is to make use of online HTML code converter. Paste the Python code, get the corresponding HTML code and then paste it in the HTML view of blogger. 

One that I particularly like is hilite.me as this gives the option of Line Numbers support and also Horizontal Scrolling.

Lets say that you just want a text box with auto adjustable height where you want to highlight some content that is not necessarily code. Then you can just copy paste the code in the box below:

<div style="background: #f8f8f8; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;">

    your code/content that you want in a box goes here

</div>

These tools are good enough to get going for inserting code into blogger or merely adding text box to blogger.
 

Creating Table of Contents

If you go to the top of this blogpost, under the table of contents, you will find "Creating Table of Contents in Blogger". When I click on that, it should bring me to this section . And when I click on this section heading (Creating Table of Contents), it should take me to the top of the page. For this we need to create an anchor tag for this section. Go to "HTML View", identify the header and add the "id=anchor1" as shown below:

This is the method to add the anchorlink in the heading, subheading and minor heading.  Add anchor links for paragraphs like this <a id=”anchortext”></a> and start your paragraph. 

Next take this anchortext(anchor1) , and insert it after the # in the URL so as to get to this point during navigation. Now there are two ways of doing this - The first is to just go to the Compose view, select the required content and add the tag as shown in the picture below:

If we go back to the HTML view and check the code, this is what we will find. There is a new href tag added from what we did through the GUI of blogger.

But that's not over yet. What if I want to go back to the top of the page where I have the table of contents. For this I need to add the #top in the Href 

This is how the HTML code would look if we did the coding ourself.