+ Written for Blogger users who want a high-level introduction to extensively customizing their template. This includes adding custom-designed navigation menu buttons. I couldn’t find an FAQ topic addressing this topic anywhere on the web, so here’s a post to help close this gap :
This high-level ‘how-to’ is written as an interview between Jonathan Whelan (this blog’s designer and template coder) and I (his Blogger-using client). We cover the why’s and how’s of my old blogs’ custom template’s look-and-feel being completely reworked to look and function impressively. This includes the process he followed for adding custom-designed buttons to the navigation menu of a basic Blogger template.

Image 1. www.travisnoakes.co.za in Macbook, May, 2016. Adobe Photoshop by Jon Whelan.

Travis: This custom Blogger template that I last edited in 2009 had become way past its use-by date. It looks jurassic compared to contemporary layouts. It also did not work well on mobile phones, while its custom code seemed to obstruct Google’s add-in gadgets for social network sharing. Being close to finishing my thesis’ full draft, I wanted its design to reflect my aspirations for it as a ‘post-PhD’ blogsite. The new, next-level up, look-and-feel also needed to reflect broader personas than a ‘researcher’s blog’ could. It took a while to decide on a graphic metaphor that resonated with my different roles, but I eventually came up with the idea of a ‘plus’ sign. This suggests how each individual combines and expresses varied personas - a key focus of my PhD {The nerdy humorist in me also hopes that geeks will appreciate its tangential nod to ‘Google Plus’ ;) }. In my life, the roles of Researcher, Educator, Design Thinker, User, Speaker and Volunteer have become the most salient. So, I sketched some icon ideas for these pluses. These were incorporated into a creative brief (see travisnoakes.co.za look-and-feel update brief 2016), for Jon to quote on.

Jon: Being a graphic design professional, it was easy for me to rework the plus icon ideas into versions that would look good even at a small mobile phone screen scale.

Image 2. New button icon designs for www.travisnoakes.co.za, June, 2016. Adobe Illustrator by Jon Whelan.

Travis: Yes, it’s very easy to ignore these users when enjoying these designs on a wide, monitor screen in the office.

Jon: Right. For me another conversion issue was becoming familiar with how Blogger organises pages and add-ins, versus how Wordpress CMS supports in-depth design customisation. The way a Blogger theme is built is slightly different and it took some learning from my side appreciate how it applies html and css: Blogger themes are structured in sections and built out of widgets/gadgets. With this in mind, I proposed building the theme from the ground up to be more efficient than hacking a free or a paid-for one.

Travis: That proved the right way to go. Compared to WordPress, Blogger seems not to offer the same level of template customisation and control. This probably contributes to why Blogger seems not be as widely used as WordPress by Capetonian designers or academics. Nevertheless, I was not keen to shift to a Wordpress blog. I am pleased at my blogsite's search engine recognition, especially for its niche subject-matter. I also like Blogger’s ease-of-use and not having to worry about back-end maintenance, such as updating it. I was hoping to benefit from the multi-device compatible (mobile and tablet) publishing and fast page download speeds it provides. Then there’s the Google translate widget, which allows viewers to select their preferred language translation of a post. I’m especially happy that this makes it easy for its e-portfolio lessons to be viewed in Afrikaans, Sesotho, Xhosa and Zulu. I enjoy the live internet traffic stats that Blogger shows too. And its easy integration with Google Adsense has taught me how difficult it is for niche bloggers to cover one’s hosting fees. The unfortunate side effect of my Blogger fanboy-ness was Jon having to attend a crash-course at “Blogger University” ;) ...

Jon: True. I think that most locals also use WordPress, because it is extensible, easy to customise and manage. By contrast, Blogger has limitations with regard to adding custom features. My jump into Blogger’s “deep-end” proved daunting, given the tight deadline I was working towards and needing to follow a ‘site design and build method’ comprising wireframe-, mockup-, code- and testing phases. The wireframe was easy to mock up into two draft .html mockups for button varieties one and two. However, there were several stumbling blocks that needed to be overcome before the chosen design could be implemented in Blogger.

Travis: Correcting my ‘plus’ symbol ideas that might be perceived as medical or religious was a breeze in comparison?

Jon: Sometimes over-using the plus symbol seemed to take away from the simplicity that we wanted. Also, I spent quite a while reworking the icons to make sure their quality will not deteriorate as they scale down. The simplified design of the buttons was done to suit Google’s Material standards. Although quite literal, the new buttons’ advantages were that they quickly communicated what they were about. Once you had chosen a combination of icons from both sites, I broke up the html from the test sites. These were added to Blogger widgets in my test blogsite’s basic template. Only once I was confident that the template actually worked, was I then prepared to apply it to Travis’ live blogsite.

Travis: You made several backups and I was very happy that you didn’t need to use them. Another plan B was contracting freelance Blogger experts via upwork.com, such as Prayag Verma or Nicholas P. Both had many positive reviews in what seems to be a niche area of expertise.

Jon: It took a while to figure out ways in which the site could work like Travis originally wanted it to. For example, there was no online ‘how to’ on linking designed buttons from a navigation menu. I worked out that I could use a widget for writing html and css to address this potential showstopper. Travis gave me access to the CPanel service for his webhost’s domain. I needed to store the icon images in the domain, and link the images to his blog. This allowed me to add links from the button images to old and new pages, or addresses pointing to a label query (i.e. http://www.travisnoakes.co.za/search/label/design_thinking).

Travis: There was a minor technical delay before Jon could put this into practice. After trying to login unsuccessfully to the CPanel address, I logged a support ticket. The upshot was that we needed to wait for my webhost to activate the CPanel’s functionality and for my new access details to work. Hopefully our readers are now forewarned to check with their webhost and set up domain access early on. Do not confuse such access with their basic hosting account, like I did.

Jon: In working on the navigation menu widget, I also discovered that by removing the skin, I know it sounds painful, I could style the design better. I then did another iteration of the site to show what a possible working prototype would look like. I preferred to do this, so that the icons could be viewed from the user's perspective. This also helps me in my design process as I can see how it works online as opposed to a nice A4 printed presentation.

Travis: Yes, it was reassuring for me as the client to see a working prototype before the migration.

Jon: Then when it was time to do the transfer. I backed up the old site before I did anything. I organised his redirect page as I started applying the new look-and-feel, so that visitors to the site would not have access to the "renovations" and get a teaser of the imminent update.
Travis: While you were doing this, I could also log into Blogger and see the site running the new template. Jon used all the gadgets from its previous version and I could see this still running, which was neat.

Jon: Yes, I also refined the desktop navigation icons, which were center aligned to take up less space. I added a page to link to each button and checked the 'plus' favicon' was visible. The pageviews were still 95,867, as they were. All the other elements were there. I hardcoded a social media links tab to appear in each post… The reason I hardcoded the social media icons was to ensure the look and feel was consistent with the rest of the theme, the icons and also because there weren't any gadgets available to meet our needs. For the Adsense gadget, I just changed the sidebar one to be 'responsive' to make it look better on mobile.

Travis: On that, my blog’s appearance on mobile is light-years from where it was.

Jon: The desktop too, as we can see in my images.

Image 3. www.travisnoakes.co.za, viewed via iPhone, June, 2016. Adobe Photoshop by Jon Whelan.

Image 4. www.travisnoakes.co.za viewed via desktop browser, June, 2016. Adobe Photoshop by Jon Whelan.

Travis: I hope our chat has given Bloggers insight into an approach they might follow to extensively customise their blogs’ ‘look and feel’.

Jon: Yes, and if you need in-depth help, please contact me via http://www.jonathanwhelan.com/contact-jonathan-whelan.

Travis: And if you have any suggestions or concerns, please add a comment below, ta.