Blogger templates

Host external files for Blogger with Google App Engine

One limitation of Blogger is the inability to upload and host your own external CSS stylesheets or JavaScript files.  There are a couple reasons why you would want to do this instead of embedding them into your template, or linking to third party hosted servers.  External files can be cached by your browser potentially reducing load times for your users, also if you are using a third party widget or gadget, there is always a chance of someone changing or removing the script on you without warning.

There are also many ways you can go about hosting external files for Blogger.  Some people use services like Dropbox, or Google Sites, or even host the files on their own web servers.  When designing ideas for my film blog, I looked at all these various solutions and finally decided on leveraging the power of Google App Engine for the task.

I found that Google App Engine offered everything I needed.  It's free (unless your blog is extremely popular and gets hundreds of thousands of page views per day), universally accessible and reliable, fast file delivery, full control of files and filetypes, and the biggest draw for me (one that I will go into further detail in a future post), the ability to run server side code.  A perfect solution for making custom specialized widgets for Blogger.

The only drawback is it's a bit complicated to setup at first, but it's easy to use once everything is in place.

Step 1. Download and install prerequisites.
Get and install Python, HERE making sure to choose the correct version for your Operating System.
You will also need to get and install the Google App Engine SDK for Python, HERE

Step 2. Sign up and Verify your account
Go HERE and use your existing Google account to sign up for an App Engine account.
You will then need to verify your account with a valid mobile number and SMS code.  This is done to try and keep out potential spammers. 

Step 3. Create Application
Once verified, create your application by specifying an Application Identifier and Application Title.  The App Identifier has to be a unique name and don't worry if the name you want is taken because it's not something your users will see or need to remember.


Step 4. Configure Application
Fire up the Google App Engine Launcher that you installed in Step 1.


Select File > Create New Application 


Enter the same Application Identifier you used in step 3, into the Application Name field
Choose any directory where you want to keep your files.
Click Create.
Now in the window you should see your new application listed.


Click on it to select it, and click on the Edit button.
You should now see a window like the one below:


Replace the code:
handlers:
- url: .*
script: main.py
With the following:
handlers:
- url: /scripts
static_dir: scripts

- url: /stylesheets
static_dir: stylesheets

- url: /images
static_dir: images


Save the file and close the WordPad window

Step 5.  Configure files and folders
Now browse to the folder where you created the application and create your scripts, stylesheets, and images folders.  You can add more folders if you like, just edit the application again and add entries following the same syntax as in Step 4, then create the corresponding child folder.


Then place all the files you want to host into their appropriate folders.

 
Step 6. Deploy Application
Once you have all your files where you want them.  Go back to the Google App Engine Launcher, make sure your application is selected, and click on Deploy.
Fill in your email and password and click OK.
If all goes well, you will see a window like this:


Step 7. Test it out
Browse to one of your files at http://YOURAPP.appspot.com/FOLDER/YOURFILENAME
and it should come up.  You can now link to your files from within your Blogger template.
For example here is one of mine: http://stupidblogtricks.appspot.com/stylesheets/nav.css

From now on, if you want to add, change, or remove files from your Google App Engine application, simply add, edit, or remove the files you want from the folders you created in step 5 and re-deploy the application.

Tips: Optimize your blog loading times

A slow loading blog can prevent you from getting new readers and it can also adversely affect your Google rankings.  If you notice your blog loading too slowly, or just want to optimize the speed there are a few things you can do.

1. Use a free web analyzer to determine where your bottlenecks are.
 A couple good sites for this are Pingdom and GTMetrix.  These will test your site speed and list out all your elements so you can see which ones are taking the longest to load.  From there you can decide how to improve your speed.

2. Move JavaScript to the bottom of your template.
This doesn't actually make your blog load any faster, but it gives the illusion of it because browsers cannot load any other elements such as images at the same time as a script.  So moving them to the bottom allows your other elements to load and render on screen first making the user think your site is faster.

To do this, go to Design > Edit HTML and place your scripts just before the closing </body> tag in your template.  Or place your scripts in a widget at the bottom of your footer.

3. Reduce the amount of posts in your Home Page.
This one is important especially if your posts are image intensive and you don't use Jump Breaks to separate your posts.

Go to Design > Page Elements > Edit your Blog Posts to change the number of posts. 

4. Reduce your image sizes.
The most common ways to do this are to save your images with a lower quality;  or crop and scale them down to the exact size you want displayed on your blog with Photoshop instead of scaling them with HTML.

You can also use this handy web tool Yahoo! Smush.it to further optimize your images.

5. Reduce the amount of gadgets/widgets
Gadgets and widgets offer cool features to enhance your blog but having too many of them can slow your blog down to a crawl.  This is true especially if you are using third party widgets.  Sometimes these use scripts and code that are hosted on slow servers.  Check them in a web analyzer to see if they are holding your site up.

Tips - How to fix and avoid common problems

Having spent a great deal of time in the Blogger help forums lately, I've noticed a few problems that other bloggers are frequently encountering.  Here are a few of the most common ones and ways to avoid them from happening.

Problem 1:  My post's text looks funny and I can't change it.

A lot of bloggers like to write up their posts on their desktop using MS Word, before going online then copying and pasting it in Blogger's post editor. The problem with using Microsoft Word as a post draft editor is when you copy and paste your text to Blogger's Compose tab, it copies over all the hidden formatting tags from Word. This will affect how your post looks because these tags override your blog's default fonts and styles and can even mess up how your overall blog template looks.

The solution is to either copy and paste into the Edit HTML tab instead of the Compose Tab of the editor, or use a plain text editor such as Notepad or TextEdit to write your posts.  This will remove any formatting tags and paste just the text.


An alternative program to use for composing your blog posts on Windows is a program called Windows Live Writer.  It has a word processor like interface and will allow you to post directly to your Blogger blog.

Problem 2: My gadgets are missing or appearing below my posts.

This one is most often caused by an unclosed HTML tag in one of your posts.  You can figure out which post is causing the problem by going to each individual post shown on your home page.  Most post pages will look normal, so find the one that is messed up and that is the post you will need to fix.

Luckily, you don't actually have to sift through your post HTML or know any coding to figure out what tag is missing, just open the post in the editor and toggle back and forth between the Edit HTML and Compose tabs a few times and the code should correct itself.  Now just republish your post and check your homepage again.

Sometimes but rarely, the above procedure doesn't work, so you may have to delete and rewrite the post to correct the problem.

Problem 3: My blog only shows X number of posts.

Another frequently asked question is this one.  Why does my blog only show X number of posts even if I set it to a greater number than that?

This is caused when your home page exceeds a certain file-size or contains too many image links.  Blogger's servers automatically limit the number of posts shown to reduce the bandwidth and the time required for users to load your blog.  This is called "Auto Pagination".

The best way to avoid Auto Pagination is to insert a Jump Break into your posts to break up the content.  On the toolbar at the top of the post editor is a button that will place a Jump Break at your cursor location.  You can also manually place a <!--more--> tag into the HTML code of your post where you want the Jump Break to occure.


However, sometimes even with a Jump Break, Auto Pagination can still occur, especially if you dragged and dropped an image onto your post.  Even though the post editor supports dragging and dropping images, it is not recommended to do so because that will encode the image file as base64 data directly into your post, causing that post's file size to be unusually large.

To prevent this from happening, always upload your images by using the "Insert image" button on the toolbar at the top of the post editor.

Blogger news