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.

Blogger vs Wordpress

With the large number of free blogging sites out there, two still remain at the top for informational blogging - Blogger and Wordpress. Yes, there are other free blogging sites such as Tumblr, Weebly and Wix - but, they are not really my focus (other than Tumblr which I use for more visual blogging than informational blogging).

Invariably, however, someone will always ask me what's better - Blogger or Wordpress?  By Wordpress here I mean the free online version at Wordpress.com and not the software you download from Wordpress.org and manage yourself on external hosting platforms such as Bluehost (that would be like comparing apples to oranges - running Wordpress on a custom host is really more like building your own website except with a content tool installed). Of course, 'better' is a relative term depending on what you want to do with the tool. Given that, though, let's take a deeper look at both.

Search Engine Optimization - SEO

First, I have to call out immediately that within the last 1 to 3 years you get no advantage for SEO utilizing either tool. Google has completely changed its strategy so that internal formatting such as tagging, long-tail keywords and metadata within the HTML is not nearly as important as the authoritative content you write and highlight. You can build rank directly with content, so, I'm not going to dig deep into the template structures other than to reinforce that content rules today. (For more information  I agree with this SEO article generally but not as much with the keyword sections). This is an even tie for both tools.

Google Blogger - It's Future

It's funny, but I have been pondering just what might be going on behind the curtain over at Google with their Blogger team and the platform's future. You've probably seen a number of articles stating that Blogging is Dead or Google will shut down Blogger all together. Not to mention, the number of posts on their internal Blogger Buzz site has dropped from 40+ articles a year in 2011 down to less than 10 a year since. Update December 2018 - Google has no plans to drop Blogger

Source: DigitalRalph - Creative Commons

I really would not pay much attention to rumors like this considering the number of Blogger users in the world. In fact, Blogger is an excellent means for Google to get more people directly connected and to become more integrated into the Google ecosystem with profile information. This is extremely important since people with profiles utilize search giving Google a one-up on what people do online. Also, you may or may not have noticed that all of Google's official blogs are running on Blogger (this is no longer true in 2018 - only some are on Blogger now - not a positive sign).

How to Use Blogger on the iPad

As I noted in my previous post using the free default Blogger iPad application produced by Google can be done but has severe limitations. Thankfully I'm now sitting at the very same table using a different 3rd party application (which I will describe in a moment) that makes Blogger on the iPad a joy to use. In fact, I may just end up using this app more than my laptop for future posts. This isn't the only Blogger iPad application, I'm sure. But, it comes to the top of the list when you search the App Store at Apple. Let me dive in deeper on this.

My choice for Blogging on the iPad

The app I selected is called BlogTouch Pro (version 2.6.5) by Alexandru Denca. I had downloaded the free version initially but found immediately that the feature/functionality was so much greater than the Google tool that I just ended up buying it for only $4.99.

The first thing I noticed was the full editor feature set that was sorely lacking in the Google tool. I mentioned in my previous article that the smaller font size in the Google editor was driving my eyes crazy and made it mostly unusable for an iPad Mini (a larger iPad would probably be ok). Well, right away I altered this post's font size and now have a very comfortable screen to view and type on. I really like that the editor also fills the entire window with a very clean look.

Blogger on the iPad - Part 1

I love my iPad mini - in fact, I find myself using it more and more for most of my day to day work and even my home business work. Now that I have a Zagg keyboard for it as well I find it even easier. Some of the research I've been doing over the last few months is on what the best Blogger app is for the iPad. Blogging on the iPad is convenient and works great if you're traveling or on the move. Frankly, I hate carrying around a laptop on vacations and have fully adopted my both my iPhone and iPad for any remote work.

That said, there still are some problems with using Blogger mobile apps. The iPad mini is small and compresses your screen size significantly. Additionally, viewing web sites or using online tools becomes more problematic due to the sites switching to mobile modes which can be reduce usability especially for those sites that have been designed for full laptop or desktop work.

Google's Blogger Tool for iOS

I must say I was excited to see that right away Google had created an iOS tool (version 2.1.7.2) for both iPhone and iPad specifically for Blogger that was free in the App Store. I immediately downloaded it and began trying it out.

How to Add Google Analytics to Blogger

There is probably not a more interesting real-time or site statistics tool than Google Analytics. If you haven't used it before you'll find that it blows away the Blogger stats tool in the Blogger editor. I haven't added it to Blogger Tips Pro earlier since I've been intending to create the tutorial - but kept putting it off for other reasons. I do use it for my other sites, however.

Let's get started. If you don't have a Google Analytics account yet you just need to sign into your Blogger Google account to start. Now, if you have a large number of blogs under a parent name or company then I would suggest you monitor all of your sites from a single account. You be the judge.

Creating a Google Analytics Account

Once you're logged in, simply go to http://analytics.google.com - you should see a page like this. Just select 'create an account':

Now that you're into the main sign-up page just click the 'Sign up' button to start:

You'll now be presented with a number of options to get your account started. I chose 'Website' and 'Universal Analytics' as my options to start. I felt that the benefits of the Beta would be good to try out.

Best Blogger Templates - 2014

So, this might be one of the most difficult posts that I have written on BloggerTipsPro.com. I have to start off by first apologizing to the creative authors out there that have produced some amazingly beautiful Blogger templates for the world to use. That said, I have some unfortunate comments to make to my readers that may or may not persuade you to use what Google provides out of the box or just to go get one of these templates.

Here it goes - I have spent many, many hours and days trying to find any template out there that qualifies as a 'best Blogger template' and found nothing - absolutely nothing. I've gone through hundreds of websites all pitching either free or paid Blogger templates and not a single one has made the grade of what a Blogger template should be. People have pitched their templates directly to me to add to this site but still did not qualify in my mind.

Blogger Templates are not Wordpress Templates

The problem - web designers totally understand page layout and design - however, they do not understand Blogger templates. Part of that must be blamed on Google for not adequately explaining the technical aspects of the template.

Google Adsense Penalty - How it Cut My Blog Traffic Nearly in Half

Let me start by saying that I am a big fan of Google. This post is by no means a Google bashing or rant about their products and services. I use a lot of the Google products for some very productive work - including Blogger which I do promote significantly. Additionally, I know some of the Google employees and have visited their campus. I believe Google is one of the most exciting places to work in America today.

However, the background to this post is that I felt that there might be some benefit to getting some small advertising revenue utilizing Google Adsense with this blog. Considering my traffic was running nearly 1000 visits a day this seemed like a good option based on the content and history of this blog.

I've used Adsense for quite a few years now in my earlier web work and have found it to be beneficial for high volume web pages. At one point some years ago I was able to make $10-$50 a day in revenue - that was a very unique case due to a popular surge online for a specific topic. In this case I was expecting about $1 a day since advertising tied to blogging is not a very competitive space. Ads such as hosting centers or blogger tools don't drive significant payout revenue as do some of these top paying Adsense keywords.

Some people make a living on Adsense revenue but it takes some significant savvy with deep traffic knowledge to do that. Others try to scam Google by building false links back to fake sites that have the high paying keywords just smattered throughout the site to generate profits. This aggravates Google and gives honest online workers a bad name.

Adsense Penalty

On December 16th I decided to implement Adsense on Blogger Tips Pro having not paid much attention to what was going on with it in the last two years. Within one day I dropped from 943 visits to 757 - not really much concern since I do get traffic dips. By day 2 I was down to 682 visits falling down to 534 by day 4. That is when the alarm sounded for me!!

Adding Related Posts to Blogger Blogs

NOTE: LinkWithin no longer exists. This post will not work any more.

There has been a change in Blogger and LinkWithin. A number of users have found that LinkWithin is not working for them. Be aware you might find some issues. If you find you are having the issue, select Other for your Platform and manually add the script to a HTML Widget. You've probably seen a number of blogs that have related internal blog posts tagged at the end with inter-linking across the site. It's a very nice feature that has been made even easier by a online utility called LinkWithin.com.

The steps to adding this feature are so simple that it only takes a few minutes to get a great looking extra look-and-feel without much effort. Start by navigating to LinkWithin.com. Right away you'll see the starting point by entering your information into the widget form on the main page like this:

How to Create a Favicon for Blogger

Copyright 2012, Google, Inc.

Have you ever asked 'what is that little icon in the address bar?' or 'what is the little image next to the url called?' I would hazard to guess that asking someone who has worked online probably never bothered to learn what the word 'favicon' means (though, guessing that it meant 'favorite icon' wouldn't be too tough to figure out). First released in 1999 in Internet Explorer 5, the World Wide Web Consortium adopted it soon after.

Creating favicons for Blogger is pretty easy these days and can be done in literally minutes. The hard part is trying to map your logo or symbol into such small dimensions. And, to add to that, the expansion of icons of larger sizes has exploded over the last few years with mobility and the evolution of browsers.

Overall, however, it is a simple task at hand with only the need of a paint program (with a supplement - possibly) and a great online tool called Iconifier. These will allow you to create favicons and icons for almost all browsers and devices. If you're really interested in the history and aspects of the favicon you can jump over to Jonathan T. Neal's very comprehensive article called Understand the Favicon.

Here we'll just be concerned for favicons for Blogger. I'll walk you through some of the key considerations when designing your own with an emphasis on using simplicity as your guide (more creative folks who have deeper digital artistic skills can go much deeper).

How to Post Blogger Automatically to Facebook

When I started this post I had the preconceived notion that automatically posting from Blogger to Facebook would not be an issue at all. For some reason in the back of my mind this was as simple as using email notification to the Facebook email-to-post feature, or using Google's Feedburner.

Well, I was quite wrong about this. Trying to use the email-to-post feature in Facebook only added the blog name and title to my Facebook wall with no content or links. From Feedburner, it looked like Facebook might work but they're only supporting Twitter in their socialize feature.

Now, there are a number of Facebook plug-ins such as RSS Graffiti you can use to grab your blogger RSS feed and post it to your wall. However, I found another tool so useful that I think this might be the easiest path for anyone to use.

How to Make Category Tabs in Blogger

NOTE (March 2014): Blogger has moved the function to set the category URL from the Pages section below to the Pages Gadget. You don't add category links in the Page but add them in the Gadget - this will be updated soon. It was a great addition to Blogger when they added the tab menus as a feature. However, many times I've heard people asking how they can alter their menu tabs to be Blogger categories instead of Pages. Good news is that this is a very simple thing to do and only requires a few steps.

What you may not have realized is that in the Blogger Pages menu item is the ability to link to a URL instead of a Blogger Page and that Blogger categories (or labels) are just that - blogger URLs.

Getting the Category URLs

First thing you want to do is to make sure each of your posts have labels defined. If you want your posts to be seen in only one category then you can only give each post a single label. Next stepis to find the URL of one of your Blogger categories by clicking on the category directly like this:

Best Blogger Showcase

Time to highlight some of my Blogger Tips Pro reader's blogs that I've taken a look at and have found to be both great uses of Blogger that are also using some of the techniques highlighted. These bloggers haven't asked me specifically to showcase or critique their blogs. Nevertheless, every time someone posts a comment anywhere on Blogger Tips Pro, I take a look at their profile and blog link to see what kind of blog they've created. Sometimes my own inspiration comes from scanning through other's blogs.

My Blogger Showcase

Here are three that I've found to be great Blogger examples (in no specific order)

Oahu Scuba Diving  - this is a great use of Blogger to highlight a business. Many of the elements presented here are incorporated into an intriguing combination that easily shows the right information, focused photo usage and customization of the standard, out-of-the-box 'Picture Window' Blogger template! 

Using Google Web Fonts within Blogger

Creative Commons - fontfont

Want to really spice up your Blogger blog? How about using a little more stylized font for your posts? If you haven't seen them before, Google Web Fonts are a great free alternative to the standard, out-of-the box web fonts you normally get with any standard HTML website including Blogger.

Choosing a Google Font

Google Web Fonts are really easy to install into your template and only take a few steps to get there. What most people don't realize is that they are available directly within Blogger. The first step is to jump into the Template Designer using the 'Customize' button: