Why Google Should Turn Blogger into an Evernote Competitor

Probably many of you have used some form of a cloud or markdown based note-taking tool like Evernote, OneNote, Google Keep, Notion, Obsidian, Bear, etc. I've been a big fan of note-taking tools since my grad school days about 7 years ago but have found each of them with various gaps that didn't satisfy everything I wanted. I started initially with Microsoft OneNote but just didn't like the feel of its old, bloated clunky interface - so I jumped to Evernote.

At the time, Evernote was the new kid on the block -- an awesome tool with good organizational structure, tags, nice note formatting and full cross-device syncing (I use Windows, iOS and MacOS which was really helpful when using Evernote). However, some years ago, Evernote put up a paywall on the max number of devices you could use (they restricted it to 2, I use 4). That was a big issue for me and I was about to pay the monthly fee until I discovered Google Keep. 

At first, Keep seemed way too simple to use as a significant note-taking tool - no formatting, no cross-linking....but, integrated directly into Chrome -- simple and full cross-device support with no limits (other than tag and note length). As I used it more, I started to see how its simplicity started to benefit me. I always get stuck on the 'look and feel' of digital output and Evernote had me focusing too much on formatting over content while just trying to take notes. The real tipping point for me with Keep, however, was being able to combine a group of notes to a single Google Doc output and OCR of both cursive and printed text. That let me take multiple Keep notes of fragmented ideas, grabs of web pages, short content and focus them into one output for final editing.

Blogger as a Note-Taking App

Where am I going with this, you might ask? Well, much of my final output - sometimes known as evergreen notes  - was ending up in Google Docs. That's great for a paper or published article - but not for deeper note-taking, learning and, of course, blog posts! Just copying and pasting Google Docs into Blogger is messy and the html output is bloated. But, if I could export multiple Keep notes to a draft Blogger post - now, something better than Evernote or OneNote is starting to become apparent.

Ok, as I thought about this I could see that Blogger is really just a couple of steps away from being a full-fledged Evernote and OneNote replacement. It has all of the necessary formatting features, tags, media embedding, templates, public or private, sharing, notes by email, etc. All Google would need to do at a minimum is to add cross-linking between posts, note taking templates, folder groupings and re-release their Blogger mobile app. Viola! You now have a full fledged deep note-taking environment as a serious note-taking competitor. 

Of course some nice-to-haves would be writing notes in markdown, adding latex for math, Keep integration and import and export of notes - but, those could wait as future features. Overall, I believe this would be a great way to revitalize Blogger in Google ecosystem.

Hey Google!! Are you listening??

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.

Build a Coding Blog on Blogger - Part 1

In the last decade being or becoming a programmer or coder has become a path to one of the hottest job markets in the US and probably in the world. Coders are in very high demand and keeping up on new technology can be a challenge. Many coders learn not only through classes or jobs, but also through coding blogs.

Unfortunately Google seems to have missed the mark completely by bypassing Blogger as an amazing platform for technologists and coders. I should note, though, that it really isn't the platform that is the problem--it is the available templates and API integrations offered by Google. Yes, you can go out and find Blogger templates from third parties, but, if you (Google) haven't offered a set of clean coder templates along with Github integration you've clearly missed a significant opportunity.

That being said a clever programmer could certainly go out to the Blogger API to integrate posts into Github and attempting to hack template uploads as part of a continuous integration build. But, that's beyond the scope of this post. The goal today is to guide you, the coder, to a simple, clean, customized, extendable and reactive template that looks and feels like many of the blogs or articles you see on sites like Hackernoon or others.

Let's get started.

Choosing the Blogger Template

First step is to choose the right base Blogger template. Clearly, we only have four choices since we want a modern, reactive template (Contempo, Soho, Emporio, or Notable). Each has it's pluses and minuses but I'm going to use the Contempo template since it has a nice full-screen feel and is somewhat minimized.

Customize Social Share Icons in Blogger

I've been spending a significant amount of time this year digging deep into the new Blogger responsive templates (Contempo, Soho, Emporio and Notable). There's quite a bit to be excited about yet there are some very frustrating components to the new responsive layouts that bother me. I will be posting more about them soon.

In the mean time I thought I would add a short post on how you can alter the social share icons in these four responsive templates (plus a similar change in the older V2 template icons at the end of this post). One of my frustrations with the new templates was that all of the social share buttons were set to the same color. You can alter their foreground and background colors as a group in the Template Theme designer which is good, but, they're all the same and don't match the standard colors of the social network logos. It seems that all four templates have used the same social sharing svg icon code.

SVG Icons

If you're not familiar with svg icons you can find more information here (SVG 101) and here (What is SVG?). When the new Blogger version 1.3 or V3 templates came out in early 2017, a significant amount of code was added dynamically as your blog renders for responsive images and SVG sprites. (If you want to find out your Blogger template version just look in the Template html - you'll see the version at the top. Most of us have been using version 2 for the last 10 years).

Google Plus Shutdown - Blogger Implications

As most of you probably know by now Google is officially shutting down the consumer version  Google+ in April 2019. Unfortunately for Blogger admins, this has some significant impacts for any Blogger blogs tightly integrated with Google+ widgets, comments and profiles. But, for me the real tragedy on this change is just how much Google had pushed Blogger owners to integrate Google+ into their blogs especially back in 2012 to 2014 like these - Socialize and Grow your Blog with Google+ or Automatically Share your Posts to Google+.

I know I was very tempted to convert my comments and add the Google+ widgets in BloggerTipsPro but thankfully I hadn't made the move since I already had so many native Blogger comments which was something I didn't want to lose. If Plus had grown a bit more I might have jumped.

So, what does this mean to you, the Blogger admin of one or more blogs? Well, the news isn't great. First, let's start with the easy change. If you have an About gadget on your blog and it is using the Google+ profile, it will be automatically converted back to the native Blogger profile like mine here. However, it will be blank and you will be prompted to create that profile with a image.

How to Backup Your Blogger Site Completely - 2019 Edition

Well, if you're like me you have been putting off getting fresh backups of your Blogger site content, template, images and videos. It's amazing that Blogger has been around almost two decades and through that journey it has transformed its templates while modifying the underlying infrastructure to support it. Google has moved much of your content to newer services typically without you knowing it.

That is why it is time to take some fresh backups. But, be aware, many don't realize that your content is spread across different components--template, posts and comments, images and videos--so if you just had been using the single 'Backup' button you were not getting everything.

Let's start!

Step1: Backup your Template

Though this isn't totally necessary, you should backup your template separately just to make recreating your blog easier. Step 2 also backs up your template with your content but having them separate is a good idea. Be sure to create a backup folder somewhere for all of your site content. I typically use a Dropbox folder so it gets automatically backed up offline.

In your Blogger editor select 'Theme' and click the 'Backup/Restore' button in the upper right as shown below:

You will now see a popup screen to backup your template. Just click the 'Download theme' button and save it on your main drive or backup drive folder:

The file will have a name like theme-4829847293492863492873.xml.

Using Bootstrap with Blogger Templates

Well, some of you may have been waiting for my second part of the Wordpress vs Blogger review. But, I was sidetracked by a much more ambitious project - merging the dynamic Bootstrap web framework with Blogger. I knew initially that this would be quite a challenge to get it right - and was I correct in that assumption. Note: since this was written I was able to successfully replace this tutorial's Bootstrap 3 code with the Bootstrap 4 and new JQuery libraries. The newer Bootstrap CSS code has not yet been tested. More to come...

So just what is Bootstrap? You can go over to their site and read up, but, at a very high level it is designed as a starter kit for dynamic web UI layouts that utilize CSS and Javascript for a great user experience. If you've seen sites like this one, or this other one - you'll see how Bootstrap can be beautifully extended. In the case of Blogger almost all of their templates are very static and were designed in the 2005-2010 time frame. In the last few years the web has exploded with new, dynamic web frameworks that have reactive interactivity without page refreshes.

The easy path to my task would have been to strip out the entire Blogger template and add Bootstrap in its place as some of these template providers have done. But, if you read my Best Blogger Templates article you know that I am a stickler for keeping Google Blogger as pure to its original intent of a dynamic layout and user substitution of design elements vs a copy-paste of some Wordpress or other template like Bootstrap and just getting it to work.