How to center gadgets in Blogger

This article is about centering gadgets from 3rd parties that you install onto your blog.

Lining up the first post and the sidebar

In some Blogger themes, there is a big gap between the bottom of the header and the start of the first post, which means that the posts and the sidebar are not aligned.  This article explains how to adjust the gap, and so remove the problem.

Adding tooltips or hover text to Blogger posts and gadgets

This article is about putting a "tooltip" (text that is shown when you hover over) into something (eg text, a web-address or even a picture) in a Blogger post or gadget.

Google's guide to HTML and CSS styles

Google have released their own style guide for HTML and CSS code.

It will be interesting to see how much of it they apply in future changes to Blogger templates

But for Bloggers who do a lot of modifications to their own template, there might be some useful tips. I especially like the one about putting CSS rules into alphabetical order for maintainability.

Doing this would mean adding CSS rules manually rather than than through Design > Customize > Advanced > Add CSS

And it will be harder to do a code-compare to see the difference between our customized template and the current standard-issue ones.  But storing like-named rules together appeals to me more than just tagging new ones on the end.

Designing blogs for mobile devices - liquid design and image-width-maximisation

Today I read a very interesting article from the Webmaster Central blog about the challenges of designing websites for mobile devices, and a concept called liquid design.

For bloggers who have enabled a mobile template for their blog, the overall site design is handled by Blogger: you can add gadgets to your mobile template easily enough, and if they're in the sidebard then Blogger decides where to show them instead.

But the design inside posts is our own responsibility. I've been pondering this for one of my blogs that definitiely needs a mobile-template view, but which has a number of side-by-side images.

I'm not certain yet, sure, but the article's suggestion to add this CSS rule to my template

img {
max-width: 100%;
}

might just be a very good one for me to apply.

Customizable styles in Google Docs

Google Docs now have Customizable styles in documents.

This is a feature that MS Word has had for a long time, which makes a huge productivity difference to anyone who is writing long documents.

Basically, instead of formattting each sub-heading individually (eg making it bold, 12 pt and underlined), you just say once what the rules for that "heading2" is (eg bold, 12 pt and underlined), and then apply "heading2" to any text that you want to look like this. The time-saving comes when make a change.  For example, when you realise that underlining is for typewriters, instead of having to change each sub-heading individually, you just change heading2 to be (say) bold and 14 point - and all the same change is made to every place where you've used "heading2".

I don't know the the addition of Styles to Docs means they will be added to Blogger's Post-editor anytime soon.   But it may affect loading Word documents to Blogger via Google Docs. I haven't tested yet, so don't know if Word's styles will be kept when the document is converted - but I'd hope that they would, given that it's a very mature feature in Word.

The interesting part will come when you either copy-and-paste or publish from Docs to Blogger: is the formatting itself transferred over, or just the style name?

My guess, without testing, is that for copy-and-paste, it might just be the style name. If that's right, then to make the Word-to-Docs-to-Blogger conversion work, you will need to add CSS rules to your blog, using the same style names used in Docs.

And if you have a lot of email subscribers, remember mind that the messages they receive do not have your blog's stylesheet applied to them.   (I experimented with various header style options in BloggerHAT, but eventually gave us and followed the example of other big-time bloggers and applied the formatting manually, for just this reason:  no matter what I tried, my email-subscription messages looked bad,)

(BTW: If you know a way to apply a stylesheet to emails sent by Feedburner, or even by Blogger, then I'd love to hear about it.)

Installing code into your blog

This article is about how to install code into your blog.

Adding a new CSS (formatting) rule to your blog's template

This article is about how to add a new Cascading Style Sheet (CSS) rule to your blog's template, including its mobile template.

(It assumes that you know the CSS command for the rule you want to add:  check a CSS reference guide if you need help to write the command - I've found that Sitepoint's  HTML Utopia: Designing Without Tables Using CSS guide is very useful.)

Remove underlining from menu-bar and post-title links

If you underline the links on your blog, then the page-links and post-titles are usually underlined too. But you can turn underlining OFF for these items, and adjust the spacing to make them stand out.

Centering the Post title (or Page title) in your Blog

This article is about how to centre-align the title that is shown for all Posts and Pages in blogs made with Blogger.