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.

(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 Sitepoint's HTML Utopia: Designing Without Tables Using CSS very useful.)

What are CSS rules

CSS rules are a way to apply standard formatting to HTML:  you say what formatting rules are in the rule definition, and then just use the rule name everywhere else in the blog that you want to apply that particular format.

It's useful because it lets you change the formatting throughout your blog by making a change in only one place (the rule).

If your blog has a Designer or Dynamic template, then adding a CSS rule is very easy.   (Ref:  "What type of Blogger template do I have?")

If you're using a Layout or Custom template it's a little more complicated - and you should make sure you're aware of the disadvantages of changing your blog's template.

Adding a CSS rule to a Designer or Dynamic template

1  Log in to Blogger, and go to the Dashboard.

2  For the blog that you want to add the rule to:
In pre-Sept-2011 Blogger (ie the old interface) choose Design > Template Designer > Advanced.
In pre-Sept-2011 Blogger (ie the old interface) choose Design > Customize > Advanced

3  Scroll to the bottom of the list of options, where there is an item for Add CSS.  Clicking this opens a panel on the right hand side of the screen.

4  Enter the new rule underneath any other rules that are already listed in the panel.   (Unless, of course, you want to change one of the rules that was entered before.

5  Click Apply to Blog (top right corner of the screen),

NB  The Add CSS window now shows you any rules that have been added to the template via the window previously.

Adding a CSS rule to a Layout template

1  Log in to Blogger, and go to the Dashboard.

2  Edit your template in the usual way.

3  Insert the new rule immediately before this text:

]]>

 
Note:  it's likely that there will be other rules already before the quoted text.  Make sure that you don't interrupt them, ie that your new rule is placed after the close-bracket } for the rule that's there already, and before the first ]

Adding a CSS rule to a Classic template

1  Log in to Blogger, and go to the Dashboard.

2  Edit your template in the usual way.

3  Insert the new rule immediately before this text:

 

Note:  it's likely that there will be other rules already before the quoted text.  Make sure that you don't interrupt them, ie that your new rule is placed after the close-bracket } for the rule that's there already, and before the statement.

Putting HTML from a outside sources into your blog

This article is about how to put HTML or Javascript code from 3rd parties into your blog.

Overview

Unlike some blogging tools, Blogger allows you to put HTML code from third-party sites that they are not integrated with (eg PayPal, Flickr, Amazon, Facebook, Twitter, LinkedIn), into your blog.

The only code that you can use this way is HTML and Javascript: there is no way to add PHP, SQL or any other type of code.  (The only exception might be if you can host and execute this code elsewhere, and call it and receive output with Javascript - I haven't tried this, have no idea if it's possible in practice.).

If you have a layout or designer template (ref   What type of template do you have?), there are three ways to put outside code into your blog:

• Option one:  In a widget/gadget.
  These can be placed in any location the Design > Page Elements screen gives you access to - usually go into the header, footer or sidebar.
• Option two:  Inside a specific Post (or Page)
  This means that the effect of the code will be shown every time the post is viewed
• Option three:  In the blog's layout template
  This gives you most control over where and how the item appears, but is also the hardest.

These three options are described in detail in the sections below.

If you are using a dynamic template, then you face more limitations:  you can put code into posts/pages for sure, but (for the moment anyway) there are limits to what gadgets can be added.   And editing your template may be more challenging, because the template-structure is so different.

---

Warning:

By letting us put 3rd-party code into our Blogger is giving us the responsibility for making sure that only code from trust-worthy sources is used.

If you install code from unreliable sources, you may find that your blog is "hacked" in some way.

Every time that someone wants you to install something to your blog, think very carefully about how much you should trust them.

Option 1: Putting third party code in a gadget

• Copy the code from the third-party site.

• In Blogger, choose Layout > Add a Gadget > HTML-Javascript Note:  Use the gadget created by Blogger which is in the Basic list.  Currently you need to see to scroll down the list of gadget to see it. 
  Don't use the search tool to find it, because currently (2/11/10), it returns a 3rd party gadget that doesn't work.)

• Paste the code into the Contents field.

• Enter a title, if you want the gadget to have one

• Press Save.  

• Drag-and-drop the new gadget to where you want it to appear.

• Save the layout

• If you also have a mobile template set up for your blog, and you want this gadget to show up on it, then you need to enable the gadget specifically for it.

Some sites either give you the HTML, and also button that will put their gadget (etc) directly into your blog.   I only use these type of buttons if the address bar in the screen that opens has an address starting with blogger.com:  if it has something else, then the third-party site may be collecting your Google account password along the way
.

Option Two: Put third-party code inside a post

• Copy the code from the third party site

• Go to blogger and Edit the Post (or Page) that you want to put it on

• Switch into HTML mode

• Paste the code in at the place where you want the item to go.
  If you are not familiar with HTML, it may help to put in some marker text, eg XXX, at the place where you want the product link while you're still in Compose mode.  Then switch to Edit HTML mode, find the marker text using your browser's search tool (eg Ctrl/F), and replace it with the third-part code.

• Switch back to Compose mode
  This sometimes lets you see the 3rd party item within the post editor - although sometimes it just shows as a blank box, or even just as a blank line (I sometimes surround lines like this with some marker text, eg xxx, while I'm editing the post, to make sure I don't accidentally over-type of the code.
  If you forget to go back to Compose mode before you press Publish, you may get confused the next time you edit a post.

Option Three: Put the third-party code into your template

You should only use this option if you are very familiar with how your template works, and you accept the disadvantages of editing it.

Also, be aware that for some third-parties, putting the code into your template can over-ride controls that usually come with it (eg for AdSense, only displaying up to three ad-units and three link-units per screen).  For other types of code, the tweaks that are needed to make it work within Blogger may break the other parties terms-and-conditions (eg if they say you cannot change the code at all).   You need to weigh up the risks and issues involved for each individual third party.

• Edit your template in the usual way
• Work out where exactly the code needs to go, and put it there.
• Preview the change, to make sure it works
• Save the template

Installing code into your blog

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

Why you might want to install code:

There are plenty of websites suggesting to tweak your blog.  A few these tell you how to use standard Blogger tools, but many have written code that does something useful that Blogger doesn't currently provide.

Also, there are lots of tutorials about how to do things with HTML, CSS or Javascript - no matter what "development environment" (Blogger, Dreamweaver, etc) you're working in.     For example, I recently wanted to put tables with scroll-bars into the posts of one site, and, after a bit of googling found a method that works across all the common browsers.  (Well it worked when I tested it first - sadly it wasn't working in Chrome when I finally finished loading the content, but that's another story!).

I'm generally wary about installing things from 3rd parties.  But there are times when it's a good thing to do because the benefits for your blog outweigh the risks - for example, I'm happy to install code from AdSense, Amazon Associates, Chitika, PayPal and various other well known brands.


How to install code:

Two previous articles describe how to install 3rd party HTML into your blog, and how to add CSS to your blog.

The only other type of code that you can add is Javascript.  To add this:

1  Edit your template, in the usual way.

2  Find the

statement

3  Put the code immediately before , using this format:

4  Click the Preview button, to check that the blog loads and looks ok.

5  If it's not ok,choose Clear Edits and try again:  check you are putting the code in the right place.

6  Once you're happy, Save the changes.