A non-programming post today. Here is a collection of miscellaneous tweaks I have used on my Blogger blog, just in case I need to find them again. Some of them may require certain Blogger options enabled (like archiving etc). I haven’t changed much from the defaults, so if something does not seem to work you might want to check your options and see if that accounts for the difference.
Warning: back up your template before making any changes to it!!! As with all my content, all tweaks here are completely without warranty, and may destroy your blog and/or the universe as we know it. You have been warned. :-)
Tracking visits
There are lots of statistics providers out there. I use Google Analytics. It is easy to setup. Once you have signed up you will be given a snippet of JavaScript code to include on all pages you want tracked on your site. For basic Blogger blogs like mine, this just means editing your template and pasting the tracking code just before the closing </body> tag.
The Analytics terms of use also require you to include an easily accessible Privacy Policy on your site. I did this by creating a new post called “Privacy Policy”, and adding an HTML footer to my blog (Dashboard -> Layout -> Page Elements) to include a link to the policy.
Tracking feed readers
Sign up to Feedburner and you can track how many people subscribe to your RSS/ATOM feed. It can also do some tricks around formatting your feed. You can then re-point you Blogger feed to your new feed address: Dashboard -> Settings -> Site Feed and enter the feed address in the Post Feed Redirect URL field. Also a good idea to throw a purdy feed icon and subscribe link on one of your sidebar widgets.
Sensible search engine indexing
I found that searching my blog using Google commonly displayed results from my archive pages. This means that the post I was searching for appeared somewhere amongst my 15 other posts for that archived month.
To fix this I added some META tags to my Blogger template to give search engines some hints about my content. In the <HEAD /> of my template I added the following:
<b:if cond='data:blog.pageType == "archive"'>
<meta content='noindex,follow' name='robots'/>
</b:if>
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<meta content='noindex,follow' name='robots'/>
</b:if>
</b:if>
The first META tag tells robots not to include archive pages in their index, but to follow all links on the page (which go to the full post at its permanent address). The next is optional, and does a similar thing for index pages of your blog.
Since Googlebot has made a few rounds with the new META tags, I have a much easier time finding my own content, and as a side benefit have noticed a lot more visitors coming from search engines (some of whom I’ve even been able to help!).
Adding pages to your blog
Unlike Wordpress et al. Blogger doesn’t provide additional pages for your site (well, not if you aren’t using the FTP option). If I need to add pages I tend to write a new post with an appropriate title and use its permalink. Downside is that these go out on your feed :( (although you can work around this by changing the post’s date to a long time ago, or a galaxy far, far away). Lucky for me I don’t have any readers :).
Custom search results
Now that I’ve got my blog well indexed with my shiny new META tags, and know how to add pages to my blog, I want to add a search page that is a bit more advanced than the out-of-the-box Blogger search (which is still good, but doesn’t abbreviate post content by default, and also makes finding older posts difficult).
My approach was to use a Google Customer Search Engine (CSE). I created one just for my blog, and added davesquared.net/*/*/*.html as the only site and URL pattern for which results would be returned (this pattern will depend on your permalink format – it works for mine!).
CSE provides a custom, Google-hosted search page for your search engine, but also provides some neat ways of embedding the search results within your site, including a nifty AJAX popup (see the Code link on your search engine’s Control Panel). I found the nifty AJAX popup annoying, and ideally wanted something that should work everywhere, so instead I decided to put the search box in a widget on my sidebar, and have it post back to a Search Results page I created (see previous tweak on adding pages).
First to create the search input I added an HTML/JS Page Element to my sidebar, then added a slightly modified version of the code Google provides to host results on a non-Google page using an IFRAME. The modifications are to try and support browsers with javascript turned off, or without javascript support.
<!-- Google CSE Search Box Begins -->
<form id="searchbox_(your_unique_search_engine_code)" action="http://www.google.com/cse" onsubmit="davesquared_submitSearchBoxWidget()">
<input value="(your_unique_search_engine_code)" name="cx" type="hidden"/>
<input value="" name="cof" type="hidden"/>
<input style="font-size: 0.9em" name="q" size="20" type="text"/>
<input style="font-size: 0.9em" value="Search" name="sa" type="submit"/>
</form>
<!-- Google CSE Search Box Ends -->
<script type="text/javascript">
function davesquared_submitSearchBoxWidget() {
var searchBox = document.getElementById("searchbox_(your_unique_search_engine_code)");
searchBox.action = "http://davesquared.net/2008/01/search.html";
searchBox.cof.value="FORID:11";
}
</script>
You need to change the (your_unique_search_engine_code) to the one provided by the CSE code sample (it looks something like 12312983712387129:asdfjkh23jh). You also need to change the searchBox.action line in the JS function to point to your own page for hosting the results. I’ve left mine in as a sample. Finally, you might want to change the JS function names so they don’t say davesquared :-). The idea behind this is that if JS isn’t enabled, a normal post request will be to the Google-hosted version of the search engine. It isn’t nicely integrated with your site, but at least it works for non-JS toting users. If JS is enabled, it will update the search box to post to the results page on your own site.
Lastly, you need to add a bit of code to your search results page (http://davesquared.net/2008/01/search.html for me). Again, you can get this code from your custom search engine’s control panel.
<!-- Google Search Result Snippet Begins --> <div id="results_(your_unique_search_engine_code)"></div> <script type="text/javascript"> var googleSearchIframeName = "results_(your_unique_search_engine_code)"; var googleSearchFormName = "searchbox_(your_unique_search_engine_code)"; var googleSearchFrameWidth = 600; var googleSearchFrameborder = 0; var googleSearchDomain = "www.google.com"; var googleSearchPath = "/cse"; </script> <script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script> <!-- Google Search Result Snippet Ends -->
And that’s it! Bit of work, but I find it invaluable for helping me trawl through my drivel to find some useful information. :-)
Line breaks
Basic one, but one I stuffed up when first starting out. Blogger can automatically insert <br/> breaks whenever you add a new line. This makes things easy if you never have markup in your posts. I always have markup in my posts, and commonly compose in Notepad++ and plain HTML. It can also make things difficult if you publish from a client like Windows Live Writer. You can turn off this auto-line break behaviour by Dashboard -> Settings -> Formatting and changing the Convert line breaks option. Be aware that this can stuff up your older posts a bit if you were relying on the previous behaviour.
Dotnetkicker
An ex-colleague of mine (I forced him to subscribe to my blog before leaving) submitted one of my posts to DotNetKicks. No I didn’t force him that time, only found out when Analytics said I actually had some visitors :-). I did like the idea of putting a counter on the post itself so I could see if anyone voted for it, and also to make it easier on anyone that feels a post is worth submitting. You can manually put the code on each post, but it is fairly easy to add to your post template.
Go into Dashboard -> Layout -> Edit HTML, and make sure you tick Expand Widget Templates. First thing I did was to create an “includable” item (just chucked it between other <b:includable/> definitions, before <b:includable id='feedLinks' />).
<b:includable id='dotnetkicker'>
<div>
<a expr:href='"http://www.dotnetkicks.com/kick/?url=" + data:post.url + "&title=" + data:post.title'>
<img alt='kick it on DotNetKicks.com' border='0' expr:src='"http://www.dotnetkicks.com/Services/Images/KickItImageGenerator.ashx?url=" + data:post.url' style='border:none;'/>
</a>
</div>
</b:includable>
Note that this can stuff up if you have unusual characters in your data:post.title, so watch out for that.
The next step is to include the includable in the post itself. In <b:includable id='post' var='post' />, find where you want to put the kicker and include it like this: <b:include data='post' name='dotnetkicker'/>. I put mine after the data:post.body. End result was this:
... <div class='post-body'> <p><data:post.body/></p> <b:include data='post' name='dotnetkicker'/> <div style='clear: both;'/> <!-- clear for photos floats --> </div> ...
Highlight your own comments
I like on some blogs how the author’s comments are display in a slightly different style, so you can quickly skim through the author’s responses to feedback. This tweak might depend on what base template you use, but it should be fairly easy to apply the basic approach. First, add a style to your template (Dashboard -> Layout -> Edit HTML):
dd.comment-by-author {
background: #F3F3F3;
}
You’ll obviously need to customise the style to fit with your own blog. Next, in the <b:includable id='comments' var='post'/> code, find the loop that renders the comments (<b:loop values='data:post.comments' var='comment'>) and update it to include the following condition (changes emphasised):
<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body comment-by-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>
This selectively applies the comment-by-author style to comments (I couldn’t find a nice way to do it using an expression (expr) on the DD class attribute).
Fixing standard comments link
When viewing stories on the front page of your blog there is generally an "x comments" link. I always expect this to go off to the full post and jump to an anchor at the comments section. Instead, by default, it takes you to Blogger’s dorky comment submission form. This displays the comments in a fairly unfriendly format, and is hosted at www.blogger.com, rather than integrated into your blog’s look and feel.
This is easy to fix by jumping into your template again (Dashboard -> Layout -> Edit HTML, make sure Expand Widget Templates is checked). Look for code that looks similar to the following an change the link to that shown emphasised below:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a alt='View any comments left on this post' class='comment-link'
expr:href='data:post.url + "#comments"'>
<b:if cond='data:post.numComments == 1'>
1 <data:top.commentLabel/>
<b:else/>
<data:post.numComments/> <data:top.commentLabelPlural/>
</b:if>
</a>
</b:if>
</b:if>
This makes the link go straight to the full post and jumps to the comments section. Readers can then go off to the dorky Blogger form to post a comment if they want, otherwise they can read the comments and scroll up to read the full story if they like. Down side is potentially one extra click if readers want to leave a comment, but to me this behaviour is closer to my expectations when reading posts. If the extra click worries you, you could always add a direct "Post a comment" link to the original Blogger form.
Previous posts
Here’s a couple of previous posts that relate to Blogger tweaks:
Hope this helps!