Tue, 21 Oct 2008 10:25:48 by Joe Bursell
In part two of Using Blogger to create your company blog (to give your SEO a lift) we covered how recreate your page on the Blogger domain. In this post you'll see how to import the Blogger code and get a working blog set-up. We'll then move on to applying some finesse to remove any style and layout issues.
Once you've logged in to Blogger and you're at the Dashboard go to your template:
...and you'll see the blog's code, that contains all the correct links to your main site, making it look just like another site page.
Open your saved "original blogger code" and look for the code that sits between the <head></head> tags and look like this:
Copy everything in between those <head></head> tags and paste it into the Blogger template code just before the closing </head> tag. By doing this you've added the Blogger css to your blog page, importing the styles for the blog elements that you'll import later.
It's likely that this will mess up the blog page, but don't worry you can tweak it back into shape later. Save the changes to your Blogger template.
Now its time to tell your blog where you want the main body posts to appear in your blog page.
Find the opening <body> tag in your Blogger template and scroll down to find where the page's main content begins. Type in some placeholder text just under it- such as "BLOGGER POST CONTENT BEGINS HERE". Save that change to your template. This is so that when you look at the blog preview you can see where on the page your changes are going to be e.g:
Now work out where that page's main content ends, and type in some placeholder text just under it- such as "BLOGGER POST CONTENT ENDS HERE":
The next step is to go to your "original blogger code" and find the elements that produce the blog post content. These can be found between the <body></body> tags, beginning with <div id="header"> and ending with <!-- End #main -->, they look like this:
We're going copy everything between <div id="header"> and <!-- End #main -->, and paste it into the Blogger template just under the BLOGGER POST CONTENT BEGINS HERE text.
The next step is to delete all the main page content between BLOGGER POST CONTENT BEGINS HERE and BLOGGER POST CONTENT ENDS HERE, to provide one space for the blog post content. When you preview the page it'll be a mess, but we'll tidy up later.
Now we'll look at where to put the Blogger sidebar elements, things like post archives and previous posts. Find the best place on your web page for them. In this case I'll use the gray right hand side vertical area:
Work out where the Blogger sidebar content would look best and type in some placeholder text just under it- such as "SIDEBAR CONTENT BEGINS HERE":
Now work out where the bottom is and insert some more placeholder text:
Go back to your "original blogger code" and copy the code beginning <!-- Begin #sidebar --> and ending <!-- End #sidebar -->. Paste this into your Blogger template just under the "SIDEBAR CONTENT BEGINS HERE" placeholder text, the sidebar content will now appear in preview:
Now delete "SIDEBAR CONTENT BEGINS HERE", delete all the original content before <!-- Begin #sidebar --> and delete "SIDEBAR CONTENT ENDS HERE" so that your sidebar contains only Blogger elements:
In my next post we'll go through how to manipulate the various Blogger page and style elements to get the look you need.
Joe Bursell
Campaign Delivery Manager |
|
|
|
|
|
|
|
|
