Blogger Buster: Search results for template for post

Showing posts sorted by relevance for query template for post. Sort by date Show all posts

92 Blogger XML Template: Blue Steel (Magazine Style)
March 24, 2008 / Filed under: Free Blogger Templates

Here is a new 'magazine style' Blogger XML template for free download. This template is called "Blue Steel" and features a unique layout for the front page to include extra widgets beneath the main post section (though if you prefer you can use this theme as a regular three column template). Read on for full instructions and to download this unique Blogger template for use in your own blog.

There are many optional elements to this template. You may either use this as a magazine style theme (featuring more widgets than usual on the home page), or as a regular theme which contains only the main blog posts and two sidebars to the right.

Features of this template include:

An optional magazine style layout for the home page
Optional customized recent posts widget for the sidebar
Themed icons for sidebar widgets, post features and post options
Custom made favicon to match the blog theme
Integrated search function
Tabbed navigation with easy customization of links
Related articles beneath each post on post pages
Integrated (optional) post summary hack

Download the Blue Steel Blogger XML Template

You can download this template for free using the link below. This is a Zip file which includes the XML template and instructions to upload this template to your blog.

Download Blue Steel Blogger XML Template (Zip File)

Option 1: use Blue Steel as a Magazine Style Theme

If you would like to utilize the full potential of this theme, you will need to change a few settings and make some small changes to the way you usually post.

Display only one post on the home page

The ideal number of posts to display when using a magazine style theme is only one. Additional post excerpts will be visible from the "recent posts" widget which I will explain about soon.

To ensure only one post displays on the front page, go to Settings>Formatting in your Blogger dashboard, and choose "Show 1 Posts" on the front page.

Utilize the Post Excerpts Hack

This template includes code for you to show optional excerpts of posts on your front page. This customization was originally written by Ramani of Hackosphere, and is called "Selective Expandable Posts".

If you would like to utilize this facility, you will need to add a post template to your blog. To do this, go to Settings>Formatting in your Blogger dashboard. Near the bottom of the page you will see a box for you to add a "Post Template". In this box you will need to paste the following section of code:

Type your summary here

<span id="fullpost">

Type the rest of your post here

</span>

Then save this setting. Now when you create a new post, you will clearly see where you should write your excerpts and the remainder of the post.

For more detailed instructions about using this hack, please refer to this article.

Add the "Recent Posts" widget code to your sidebar

If you choose to use the magazine-style facilities for this template, you may also like to add the widget to display excerpts of your most recently written posts in the sidebar.

This widget was originally written by Hans of Beautiful Beta, though I have modified this slightly to make this more suitable for the Blue Steel Blogger template.

To add this widget to your sidebar, copy all of the code on this page and paste this into an HTML/JavaScript widget in the Page Elements section of your Blogger dashboard. Be sure to replace the section in red with the URL of your own blog!

Important Notes

The widgets which appear under the post on the main page will only be visible on the main page. On post pages, these widgets will not appear, so be sure to include important widgets in your sidebar instead.

Option 2: Using Blue Steel as a regular blog template

If you would prefer to use Blue Steel as a simple template (IE: not utilize the magazine style elements), all you need to do is delete any widgets beneath the Blog Posts section. The template does not require any additional settings or adjustments to work as a regular template (although you may like to add your links to the navigation bar in the header section. See below for details about this).

Other settings/widgets

Certain features of the Blue Steel Blogger template are applicable to both "magazine" and "regular" options.

Configure links in your navigation bar

This template comes with a pre-installed link list widget in the top right section of the header. When you upload this template to your blog, this link list will not contain any links at all.

To add links to the navigation bar, go to Layout>Page Elements in your Blogger dashboard and click on the "edit" link for this link list. You can then add links to the main pages of your blog and these will appear in the navigation section.

Links in the footer section

Right at the bottom of your blog template are some links which you can change to reflect the URLs of the main pages in your blog.

To change these links, find the following section of code in the Edit HTML section of your template:

<
<a href='http://yourblog.blogspot.com' title='Home Page'>Home</a>

 | <a href='http://yourblog.blogspot.com' title='About the site'>About</a>

 | <a href='http://yourblog.blogspot.com' title='Contact the author'>Contact</a></span>

Change the URLs highlighted in red to match those of your important post pages.

License and Credits

As mentioned earlier in this post, two of the scripts used in this template were written by different authors:

The Selective Expandable Posts hack was written by Ramani of Hackosphere
The Recent Posts widget was originally created by Hans of Beautiful Beta

You may download, customize and use this template however you choose. However, I do ask that the credits within the template code remain in place and that you do not redistribute this template without my consent.

78 Blogger's new Geotagging feature (and how to use it!)
December 15, 2008 / Filed under: Blogger News and Issues

The Blogger team have added a new "Geotagging" feature to Blogger in Draft which enables you to add a location to each of your blog posts. This will then display in your post-footer section (near your post labels, timestamp, etc), and will act as a link to a page on Google Maps where readers can learn more about the location.

Here's an example of how this would appear, as taken in screenshots from the explanatory post on the Blogger in Draft blog:

When you click on the linked location, this will open a new page from Google Maps which shows you the exact location which the author has attributed to the post, like this:

RSS support for Geotags

Your post locations will be included in your blog's RSS and Atom (XML) feeds using GeoRSS which is a web standard for Geotagging. This is important as it allows feed readers, map readers and search engines to associate your posts with particular locations. For example, if you tag your blog posts "New York", these posts can be found more easily by those searching for content based on the New York area.

How to tag your posts with a location

In order to Geotag your posts (add a location) you must create or edit your post through Blogger in Draft. This is because this feature is still experimental, and has not yet been rolled in to the main post editor.

When you create (or edit) a post through Blogger in Draft, look to the left of the Labels area to see the "Add location" link:

This will bring up a pop-up box which appears like this:

Type the location you would like to add in the search box near the top of this pop-up box, and press "Search". You may need to refine your search by adding more details (eg: country, city name, street address) in order to find the location you require.

Once you have found the correct location, you can zoom in (for more accuracy) if you prefer, and finally save your location.

Important: once you have geotagged a post, you cannot remove this tag!

If you do need to remove your geotag for some reason, Blogger recommends that you copy the content of your post and create a new one, then delete the old geotagged post. At present, this is the only way to "remove" a geotag, though it is more of a workaround than a proper solution ;) I suspect the Blogger team will enable us to properly delete or edit a post's geotag before this feature is rolled out for the main post editor.

How to make your Geotags appear beneath your posts

The first step to making Geotag links appear beneath your posts is to enable this setting in the Blog Posts widget.

To do this, go to Layout>Page Elements while logged into Blogger in Draft, and click the "Edit" link for the Blog Posts widget. On this pop-up page, you will notice a new checkbox for "Location". Ensure you have ticked this checkbox, and save your changes.

If you have recently changed your template to a default Blogger theme (or have recently started a new blog), this simple change of setting will enable you to see Geotag locations beneath your posts straight away. If you are unable to see your Geotags after this change of setting, you need to follow one of the instructions below instead.

Since this is a new Blogger feature, your existing template may not currently include the code required to make geotags appear for each of your tagged posts.

If you use a default Blogger template, the simplest way to enable the Geotags for your posts is to pick a new template. Simply go to Layout>Pick new template in your Blogger dashboard and choose the template you would like to work with. This can be the same template you are currently using.

This method refresheds the template code and adds the section required to make the Geotags appear in the post footer section. Alternatively, you could "Revert the widget templates to default" on the Layout>Edit HTML page of your blog. This has the same effect as choosing a new default template.

If you use a customized or third party template, you will need to add the code required for the Geotags to display manually by editing your template code.

To do this, go to Layout>Edit HTML in your Blogger dashboard and ensure you have checked the "Expand widget templates" box.

We need to add the required code to the "post-footer" section of the main blog posts widget. The easiest way to locate this section is to use your browser's search function to find the following line of code:

<div class='post-footer'>

<div class='post-footer-line post-footer-line-1'>

If you cannot find either of these lines in your template code, search for "post-labels", "post-icons" or "timestamp" to locate the appropriate section of your template instead.

Once you have located this section of your template, you need to add the following section of code:

<span class='post-location'>
<b:if cond='data:top.showLocation'>
<b:if cond='data:post.location'>
<data:postLocationLabel/>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</b:if>
</b:if>
</span>

Be sure to add this outside any other tags! If you did find the <div class='post-footer'> tag (or similar) in your template, the safest place is to add the code immediately after this line.

Then preview your template. If all is well, you should now see Geotag links appear beneath any posts you have Geotagged with a location (though none will appear on posts which have not been tagged).If you have made any errors when adding the code above, you'll receive a message that your template cannot be parsed. In this case, simply "Clear edits" and attempt to paste the code again.

Is Geotagging a useful feature for Blogger?

I personally feel that Blogger's integration of this new feature will prove very useful for a large proportion of the Blogger community. So far the comments I have read on the introductory post for this new feature have been very positive, and it seems many creative coders have already expanded their ideas for how Geotagging can be intrgrated for widgets and other useful features.

However, this may not be a feature which is beneficial for us all. Here on Blogger Buster, for example, the location where these posts are typed does not complement the content and has no added benefit for readers (I like to think the content posted here has international appeal!).

What are your opinions of Blogger's new Geotagging feature? Will you be using this feature to complement your own blog posts?

Please feel free to let us know your own opinions and comments by leaving your message below.

116 How to Create Post Summaries in Blogger Layouts Blogs
February 28, 2008 / Filed under: Customize your Blogger Template

One of the questions I am asked most about my blog is how I create post summaries on my main and archive pages.

The hack I use for this is Ramani's "selective expandable posts". This hack enables me to choose whether my posts are summarized or not, and provides a "Read full post" link only for those which I have chosen to summarize.

Whereas I would normally refer readers to Ramani's original post to learn how to implement this technique, many readers have expressed their difficulties in using this, and Ramani seems unavailable for support. So I have decided to write a full explanation of how to use this hack in the hope that this will answer many of your questions, and enable you to use this hack in your own Blogger layouts blogs.

Please note: This "selective expandable posts" hack was written for Blogger layouts blogs (those which use widgets). If you need to learn how to use such a technique for Classic Blogger templates, please refer to this post instead.

How the selective expandable posts hack works

This technique uses a combination of JavaScript and Blogger code to display your selected portion of a blog post on your main, archive and search pages. On item (post) pages, the full content of your post will be displayed.

This technique is very useful for bloggers who write long posts, or who prefer to provide a "teaser" of their full post on the main page, which would encourage readers to read the whole article on item pages instead.

Before installing the selective expandable posts hack to your blog, you should be aware of two things:

Only your future posts (and any previous posts you choose to edit) will feature a summarized version on the main pages of your blog. This is because you must use a post template to make the summaries appear. Those posts which do not include this template will not be summarized.
To ensure the summary hack works, you will find it necessary to edit your posts in HTML mode, rather than using the rich text editor. Again, this is due to the necessity of the post template; if you edit in compose mode, you will run the risk of accidentally deleting some code which is not visible in the rich text editor.

If these considerations are something you can live with, you're ready to install the "selective post summary" hack.

How to Install the Selective Post Summaries Hack

This isn't the easiest hack to install in a Blogger template. In fact, it took me a few attempts to get this right the first time I installed it! So I would advise you to remember two important things:

Back up your existing template before making any changes whatsoever!

You should always back up your blog template before making any changes to the template code. It is even more important to back-up before installing this hack, as we are dealing with the display of your blog posts, rather than a simple edit to your styling code!

Read each step fully, familiarize yourself with the code, and then read it again!

It is important to pay attention to detail when installing this, otherwise you may place code in the wrong place and get that dreaded "Your template could not be parsed" message.

Also, there may be slight differences to the code which you will be looking for in your template. I will point this out where appropriate, along with the alternatives which may be present in your template.

Here is my step by step guide to installing the selective post summary hack in your blog template:

Back up your existing template code!

To do this, go to Layout>Edit HTML in your Blogger dashboard, and click on the link which says "Download full template". This will allow you to save a copy of your existing template in XML format which you can use to restore your blog if ever your template edits go awry.
Choose to create a new post. On this page, click on the "Edit HTML" tab so this becomes highlighted. Then in the content box below, paste this entire section of code, exactly how this is written here:
```
This is the summary

<span id="fullpost">

This is the rest of the post

</span>
```
Then save this post.

This will only be a temporary post, to help you understand if the following edits you make are working. Once you have installed this hack into your template, you can delete this post.
Next go to Layout>Edit HTML in your Blogger dashboard, and check the "Expand widget templates" box.
We now need to add the required JavaScript code to the head section of your blog template.

This is the easy part of the installation! Simply copy all of the code on this page to your clipboard (you can do this easily using the keyboard shortcuts CTRL+A followed by CTRL+C).

Next, locate this line in your blog template:
```
</head>
```
Paste the code from your clipboard directly before this line.
Here comes the tricky part...

In your blog template, you will need to locate the DIV section which contains this line:
```
<p><data:post.body/></p>
```
In many templates, this section will look something like this:
```
<div class='post-body>

<p><data:post.body/></p>

<div style='clear: both;'/> 

   </div>
```
However, the class of the containing DIV section may be called something different, such as:
```
div class='post'

div class='entry'

div class='post-body entry-content
```
In the case of third party templates, this could well be something else entirely!

The best way to locate this is to search for <data:post.body/> using the CTRL+F function in your browser, then take a look at the surrounding code to work out where you need to edit.
Once you have found this section of code, take a look at the code below. I've added some code in red, which is what you will need to add in your own template. As I have explained, the <div class='post-body'> section may be named differently in your own blog template, so do bear this in mind!
```
<div class='post-body'  expr:id='"post-" + data:post.id' >

     <b:if cond='data:blog.pageType == "item"'>
        <style>#fullpost{display:inline;}</style>
        <p><data:post.body/></p>
     <b:else/>
        <style>#fullpost{display:none;}</style>

        <p><data:post.body/></p>

       <span id='showlink'>
        <a expr:href='data:post.url'>Read More......</a>
       </span>
       <script type='text/javascript'>
         checkFull("post-" + "<data:post.id/>");
       </script>
     </b:if>

     <div style='clear: both;'/> 
   </div>
```
Before you attempt to save your template, I would advise you to preview your blog.

If you have pasted the code correctly, you will see the test post you created earlier will now feature only the summary, followed by the "Read more..." link, like this:

If you have pasted the code incorrectly, one of two things will happen: you will either be unable to preview, or your test post will appear in full, rather than as a summary.

In either case, you should clear all edits you have made, and start again from the top: it's a far better idea to begin the process again, paying attention to every detail, than to try and edit the code!
After you have successfully made the changes outlined above, you can proceed to save your template.
The final step is to add a post template in your blog settings.

This is the same code we used to add the content to our test post, though this time we will add this as a permanent template which will appear in your post editor each time you write a post.

Go to Settings>Formatting in your Blogger dashboard, and scroll right down near the bottom of this page where you will see a text box for your post template.

Inside this box, you must paste the following section of code:
```
This is the summary

<span id="fullpost">

This is the rest of the post

</span>
```
Be sure to copy and paste this code exactly as you see it here. If you accidentally insert any extra spaces, extra characters or line breaks by typing this manually, you run the risk of breaking the operation of the script.

Finally, save these settings, and enjoy the convenience of selectively summarizing your blog posts!

Using the Selective Expandable Posts Hack

For me, Ramani's selective post summaries hack has been the most effective method of summarizing my posts. However, when using this hack you may need to change the manner of your blogging habits slightly, and learn how best this can be used.

Here are some tips which I have learned through using this hack on a regular basis, which will probably be useful for you too:

You must create and edit your posts in Edit HTML mode. The <span> tags which are included in your new post template will only be visible in Edit HTML mode. If you use the regular "Compose" mode, you may accidentally delete some of the required code, which will cause your posts to be displayed improperly.
If you do not want to summarize a post, simply delete all of the post template when creating your post! In this case, there will be no "Read more" link beneath the post, and your complete post will appear on the main pages (ideal for short posts).
If you are used to writing your posts in paragraphs using appropriate paragraph code, like this:
<p>This is a paragraph</p>
<p>This is another paragraph</p>
you will need to wrap all of your content in paragraphs, and may need to add the appropriate paragraph tags to the lines in your post template too.
When using this hack, you can easily implement Google AdSense code to appear in your post pages only, and can choose to display this within the body of the post itself, as well as above/below your post content.

As I mentioned earlier, this hack will only work for posts which you create after installing the required code and post template. Your existing posts will not be summarized unless you edit them to add the required code inside the post.

If you have a great many posts, I would advise you only to edit the posts which appear on your front page. So if you display seven posts on your home page, you would only need to edit the previous seven posts, if you would like these to be summarized. The reason I advise this is because in my experience, fewer people browse through your archives using the "newer/older posts" links than would search through using the blog search function. This means that your readers' experience would suffer little disruption from seeing older posts in their full form.

Troubleshooting

If ever you notice a "summarized" posts appears strangely, or other posts seem to disappear from beneath this on your main pages, the problem is most likely that you have accidentally deleted the closing </span> tag from the very bottom of your post. Don't worry if this happens, it is easily solved by adding that line right at the very end of your post!

Another possible problem Ramani has noted is that sometimes the "read more" link will appear on archive pages, even for those posts which have not been summarized. This issue is not yet resolved, though if I come across a definitive solution I will be sure to update this post

Final thoughts

This is by no means the only method you could use to summarize your posts (Jackbook has discovered seven different methods), though for most bloggers the selective method will be the most effective and easily maintained choice.

I hope that my explanation of Ramani's excellent hack will help you implement this version of post summaries in your Blogger layouts blog.

If you have any more hints or suggestions for using this hack, please feel free to leave your comments below.

71 How to display Blogger posts side by side (create a newspaper style layout!)
November 21, 2008 / Filed under: Customize your Blogger Template

In recent weeks, one of the most requested tutorials has been how to display posts side-by-side. An example of how this is used is the classic (and much loved) Hemingway template, in which posts are displayed beside each other:

The Hemingway template does not include a sidebar in the layout. Instead, widgets are contained in the footer section (beneath the posts) which effectively puts most focus on the blog posts and less on the widget contents.

You can download the Hemingway template for Blogger from BlogCrowds in both the black and white variations of design.

Many bloggers prefer a three column template in which two of the columns are dedicated to blog posts (and with only one sidebar). An example of this layout can be seen in the popular Drudge Report blog:

In this tutorial, I'll explain how you can create a three column Blogger template in which two columns are dedicated to posts, while the third may be used as a regular sidebar. On item pages, the post will take up the full width of two columns to ensure there is no unsightly gap between this and the sidebar.

We're going to base this tutorial on the Minima template, though the same principles can be applied to most Blogger templates. Here is an example of what we will achieve:

Overview (Read this first!)

In this tutorial, I'll explain how to transform the default Minima template so that posts appear in (narrower) columns, side-by side on home, archive and search pages, with a sidebar of the same width appearing on the right hand side of the posts.

To transform the basic Minima template into a three column, newspaper style layout is fairly straightforward and includes two basic steps:

Increase the width of the overall template to accomodate the extra column
Add some conditional CSS to make the posts appear beside each other on non-item pages

However, once we have done these two steps, there will be a few other code and CSS issues which we need to resolve in order that the template will appear as it should. I will take you through all steps nescessary to ensure the layout appears as it should, with explanations and visual examples at each stage.

An issue which you should consider when using this tutorial is that the width of each posts column (on non-item pages) will be decreased to 290px. This means you should ensure images in posts are no wider than 290px (including any padding or borders) otherwise the posts columns will be pushed beneath each other, rather than be displayed side-by-side.

If you usually display large images and wish to do so on item pages, we can add some extra CSS to the template to restrict the width of images on non-item pages, as I will explain later in this tutorial.

Most of the techniques described in this tutorial may also be applied to different templates. If you would like to transform your own (non-Minima) template in this manner, my advice would be to follow each step of this tutorial in a test blog first, then see how this could apply to the different CSS classes and identifiers in your own template. It's much better to have some experience of this technique beforehand than to jump in feet first!

Step 1: Create a test blog

While it is not essential to create a test blog to make changes to your blog layout, I'm sure many of you will find this useful! This way you can make changes without affecting your main blog, and if you happen to make a mistake you can start all over again ;)

I have written a comprehensive tutorial about creating a test blog which you can read here. If you'd like to jump straight in, here are the basic steps covered in the test blog tutorial:

Create a new blog (choose the Minima template for the purpose of this tutorial)
Fill it with some posts (at least 2, though more would be preferable)
Make it private, and prevent your blog being indexed by search engines

If you're looking for a quick and easy way to add "dummy content" to your blog, check out LoremIpsumDolarSitAmet.com which generated paragraphs of dummy text automatically (including my favorite filler text: Jabberwocky!).

Once you have created your test blog, we can begin changing aspects of the layout.

Step 2: Alter the dimensions of the layout

Now I am assuming you are using the Minima template (it doesn't matter which color), and that the sidebar is on the right-hand side of your layout.

At the moment, the layout is too narrow to accomodate a third column. So we need to alter the dimensions of the layout in order to create more space.

Increase the width of the #outer-wrapper

The #outer-wrapper is the container which holds all of the content in this template, including the header, main posts section and sidebar.

At present, your outer-wrapper will be 660px wide. We will increase this to 940px which will allow us to have three columns of 290px, 290px (the posts) and 300px (for the sidebar), plus margins between to allow for eye-pleasing white-space.

To achieve this, find the following section in the b:skin section of your layout:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Change the 660px (highlighted in red) to say 940px instead.

Increase the width of the #main-wrapper

The #main-wrapper is the section which contains your blog posts, blog pager (newer/older posts) and any messages which appear when you perform a search or filter posts by label.

We need to increase this from 410px to 620px, which will allow enough room for posts to display side-by-side in two narrower columns.

To do this, find the following section of code:

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

And replace 410px with 620px instead.

Make the sidebar wider

Personally, I find a three column newspaper style template to be more pleasing when all three columns are approximately the same width. So we will increase the width of the sidebar from 220px to 300px, which will equal the width of the post columns and their white-space.

So find the following section of code:

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

And replace 220px with 300px instead.

Fix the header and footer widths

If you take a look at your template now, you will notice that the header and footer sections are narrower than the overall width of the blog.

This is because the Minima template uses specific widths for the #header-wrapper and #footer sections of the layout.

To widen these two sections (which complements the new wider design) we need to remove the width statements in the b:skin section of the template. This will then allow the header and footer to stretch to the width of the outer-wrapper and appear harmonious to the design.

Firstly, find the following section in your blog template:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

And remove the line highlighted in red.

Then locate this section of code:

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

And again, delete the line in red.

Now preview your template: you should notice that the header and footer sections now stretch to the overall width of the blog.

The blog description may look a little lop-sided with this new setting, like this:

To align the description centrally beneath the blog title, simply find this section of code:

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

Then delete the line in red. Since the description uses margins and padding, we can do away with the "max-width" property, which ensures this section is properly aligned to the heading above it.

Ensure the #blog-pager spans the width of the main posts section

When displaying posts side-by-side, it is ideal to have an even number of posts displayed. However, it is not always possible to do so. For example, on archive pages there may be an uneven number of posts for any given time period, or a blog search could produce 3, 5 or another uneven number of results.

For this reason, we must ensure the blog pager (which displays links to the home page, newer and older posts) has a fixed width. Otherwise it may appear at the top right of the posts, which is not harmonious to the design.

To apply a fixed width to the blog-pager, locate the following line of code in your template:

#blog-pager {

And immediately after it, add the lines in red:

#blog-pager {
width: 600px;
clear: both;
text-align: center;
}

This will ensure the pager always spans the width of both post columns on non-item pages.

Save your modifications!

At this point, we have made some heavy modifications to the Minima template. So if you have not already done so, save your template now.

Step 3: Ensure the "date-header" appears in the right place!

In the Minima template, the section of code which produces the "date heading" for each post is outside the main "includable" for the blog posts. Since we are making two columns of posts appear on the home page of this template, we need to alter the placement of the date-header code, otherwise the date-headings will appear out of place!

This step is probably the most complicated of the whole tutorial, so take your time and do this carefully :)

For this, we will need to delve into the widget template for the posts section. You need to ensure you have checked the "Expand widget templates" box on the Edit HTML page:

Now search for the following section of code:

<data:adStart/>
<b:loop values='data:posts' var='post'>

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:post.includeAd'>
<data:adEnd/>
<data:adCode/>
<data:adStart/>
</b:if>
</b:loop>
<data:adEnd/>

This section brings together all elements of your blog posts to display in your active blog pages. The lines I have highlighted in red generate the date-heading for each post. These are the lines which need to be moved to a different place in the template code.

Highlight these three lines in your template, and key CTRL+X (or CMD+X) to temporarily "cut" them from the template. These will be copied to your clipboard so you can paste them in the new location.

Once you have "cut" these three lines, locate this line of code in your template:

<a expr:name='data:post.id'/>

And paste the three "cut" lines immediately after it.

Now preview your blog to ensure the date-headings are visible above each post. If all looks well, you can proceed to save your template.

Step 4: Add conditional CSS to make posts appear side-by-side on non-item pages

We have modified many aspects of our Minima template in preparation for the new posts column on non-item pages. Now we can add some conditional CSS which will make posts appear side-by-side!

This is actually quite easy! All you need to do is copy the following section of code to your clipboard:

<b:if cond="data:blog.pageType != "item"">
<style>
.post {width: 290px; margin-right: 20px; float: left;overflow: hidden;}
</style>
</b:if>

And paste this immediately after the closing </b:skin> tag in your template code. You can then preview your template, and will be able to see the results right away!

Save your template at this point, and view your demonstration blog in your browser. Have a play around with the pages, viewing archives, performing searches and the like. You will see that on non-item pages, the posts appear in narrow columns side-by-side, whereas on item pages, the post will span the width of both columns!

Taking care of images in your newspaper-style template

Your new post columns are slightly narrower than the width for "large" images which you may upload to your posts. This means that large sized images will be "cut off" when displayed on non-item pages.

There are two ways you can work around this:

Only ever post small/medium sized images to your posts
Specify the width of post images on non-item pages.

If you choose the second option, you will need to add a little more CSS to the conditional style we added, just after the closing tag, like this:

<b:if cond='data:blog.pageType != "item"'>
<style>
.post {width: 290px; margin-right: 20px; float: left;overflow: hidden;}.post-body img {width: 280px;}
</style>
</b:if>

This would reduce the width of large images to only 280px on non-item pages, whereas on individual posts, the images will display at full width.

However, any images which would usually be smaller than 280px in width would be stretched to this width.

You could of course choose for images to be even narrower (eg: 100px or 150px) if you plan on serving smaller sized images as well as large ones. Simply change width: 280px to your chosen specification.

Summary

If you would like to apply this technique to a different template, or would simply prefer a summarized version of this template, here is a quick summary of the steps required to make posts appear side-by-side in a Blogger layout:

Prepare your existing template
- Widen the outer-wrapper
- Widen the main posts column
- Ensure the header and footer sections are widened accordingly
- Don't forget to adjust the width of the blog-pager section!
Ensure the date-header code snippet is above the code for the post title, and not seperately coded within the posts loop
Add conditional CSS outside the <b:skin> section of your template, which ensures the posts appear side-by-side only on non-item pages. You may need to experiment with different widths and margins to find the ideal dimensions for your own layout.
Be aware of how images may appear in your new layout and make changes accordingly

I hope this tutorial has explained how to create a newspaper style template in Blogger in which posts appear side-by-side. The methods used here have been tried and tested for modifying the Minima template, though for other Blogger templates you may need to make more adjustments and possibly change background images to accomodate the new dimensions of your three-column layout.

If you have any useful tips to accompany this tutorial, or would simply like to leave a comment, please feel free to leave your message below.

120 Elegant Post Summaries for Blogger with jQuery
September 04, 2008 / Filed under: Customize your Blogger Template

The ability to display extracts of posts is a feature which many of us would love to see added to Blogger! Such a feature would prevent readers having to scroll far down the page to find the next post on home and archive pages, and in many cases, could offer the potential for different styles of layout...

Many Blogger users have adopted Ramani's selective expandable posts hack or a similar alternative. However, I have found these to be a little complicated: they require manual editing of each post or cause other irritating problems. In my search for an elegant and less cumbersome alternative, I have discovered an almost perfect solution: the jQuery Expander Plugin by Karl Swedberg.

Integrating the jQuery Expander plugin for Blogger offers many useful options and features:

It can be added easily in only two steps!
The length (and other options) of excerpts is completely customizable within the blog template (no need to edit JavaScript files!)
We could choose to expand posts into the same page (with a smooth transition) or add a "read full post" link to the item page instead.
HTML tags and complete words are preserved (unlike many forms of Wordpress excerpts)
There is no requirement for additional tags or editing of posts: it works right away after installation!
It's possible to use different lengths of extracts for use in magazine style layouts (I'm actually working on such a project right now...)

To see how well the jQuery expander plugin could work in Blogger, take a look at this demonstration in which the posts expand into the same page.

Installation

Depending on the style of post summaries you would prefer to display, the method for installation will be slightly different.

I'll begin with a default explanation which will summarize posts with a link to expand in the same page (this requires only two steps). Next we can make two small changes which prevent expansion and add a link to the post page.

Finally I'll explain how you can alter some options for extracts which can be applied to both methods.

For whichever function you prefer, the installation is simple and the result will be elegant post summaries for your Blogger powered blog :)

Method 1: Expandable post summaries

This is the simplest method to add excerpt functionality to your blogger powered blog!

Firstly, go to Layout>Edit HTML in your Blogger dashboard and check the "expand widget templates" box.

Then, find the closing </head> tag in your blog template, and paste the following section of code immediately before it:

<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery-1.2.3.pack.js' type='text/javascript'/> <script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery.expander.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { $('.excerpt').expander({ slicePoint: 280, // default is 100 expandText: '[...]', // default is 'read more...' }); }); </script>

Next, find this section of code (or similar) in your template:

<div class='post-body entry-content'> <data:post.body/> <div style='clear: both;'/>  </div>

If you cannot easily find this section, search for the following tag using your browser's search function:

<data:post.body/>

You need to highlight this and any surrounding code, as in this screenshot:

Replace this section of code with the following instead:

<b:if cond='data:blog.pageType != "item"'> <div class='excerpt post-body entry-content'> <data:post.body/> <div style='clear: both;'/>  </div> <b:else/> <div class='post-body entry-content'> <data:post.body/> <div style='clear: both;'/>  </div> </b:if>

Now preview your template. You should now notice that posts on your home page have been summarized and feature an ellipsis at the point of truncation which (once viewed in the live page) is a link to expand/truncate the post:

If you're happy with this, you can save your template and enjoy using your new post summaries right away. Alternatively, read on for methods of preventing the expansion in the same page, and customizing the excerpts to suit your preferences.

Method 2: Excerpts with a link to the post page

My personal preference is to display only an excerpt of posts with a link to the full article. This requires only two small changes to the default installation:

Use a slightly different jQuery plugin (change the URL)
Add a "Continue reading" link beneath the excerpts

Assuming you have already added the codes from Method 1, here is what you should do:

1. Find this line in the <head> section of your template:

  <script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery.expander.js' type='text/javascript'/>

And replace it with this instead:

  <script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery.extractor.js' type='text/javascript'/>

I have highlighted the different file name in bold red so you can see the change at a glance.

2. Next, find the code you have added around the <data:post.body/> section, and add the line in bold red, as shown below:

<b:if cond='data:blog.pageType != "item"'> <div class='excerpt post-body entry-content'> <data:post.body/> <div style='clear: both;'/>  </div> <a expr:href="data:post.url">Continue Reading</a> <b:else/> <div class='post-body entry-content'> <data:post.body/> <div style='clear: both;'/>  </div> </b:if>

Be careful to add this in the correct place, just above the <b:else/> tag, otherwise it will not be displayed!

Now preview your template. The "linked" ellipsis should now be replaced with a plain one, and you should see the "Continue reading" link appear beneath the extract. You could change the link text to anything you prefer (eg: "Read more", "Full Post", etc). Then proceed to save your template.

Post Summary Options

The jQuery plugins used for these methods are almost identical, except that the "extracts" version has the "more" link removed.

Both plugins therefore have identical options which you can set by adding or changing code in your blog template.

The options can be configured within the internal javascript in the head section which by default appears like this:

<script type='text/javascript'> $(document).ready(function() { $('.excerpt').expander({ slicePoint: 280, // default is 100 expandText: '[...]', // default is 'read more...' }); }); </script>

Here are some of the most used options available, and how they can be changed. A full list of options can be found on the expander plugin for jQuery page.

<script type='text/javascript'> $(document).ready(function() { $('.excerpt').expander({ slicePoint: 280, // change this to the length in characters you would like to display. // HTML tags included in this count. // the folllowing functions apply when choosing the expanding post version expandEffect: 'fadeIn', // the effect used for displaying expanded text. expandText: '[...]', // Change this from an ellipsis to "Read More" for example userCollapseText: '[^]' // This is the icon used for truncating the post after it has been expanded. }); }); </script>

You can add or change any of the lines above as appropriate for your needs.

License, Credits and Download

This function uses the jQuery JavaScript library and the jQuery expander plugin for the base functions.

The Expander Plugin for jQuery was created by Karl Swedberg and is dual licensed under the MIT and GPL licenses.

If you would prefer to host the jQuery scripts on your own server, you can download a zipped folder including all scripts from this tutorial and a basic Minima template in which this function has been added for demonstration or testing purposes. As in the case of the original Expander Plugin and jQuery file, these are provided under the GPL licence.

Download Elegant Blogger Post Summaries Files

I hope you have found this tutorial to be a useful and elegant solution for creating and using post summaries for your Blogger template. Please feel free to leave your comments and any suggestions for improvement below.

183 Nexus 5 - A New Blogger Template for Free Download
September 08, 2009 / Filed under: Free Blogger Templates

It's been a while since I've designed a Blogger template for free release. But after reading this excellent tutorial on Smashing Magazine, I was inspired to create something different: an ultra-customizable, HTML5 based template for Blogger.

Nexus 5 is a one column template, with widgetized sections in the footer for any gadgets you may like to include. A wider, two column version will be available shortly for those who prefer gadgets in a sidebar section.

As announced yesterday, Blogger have now enabled selective post summaries for our blogs. This means we can add a "jump break" in our posts, after which any content will only be visible on item pages.

Those of us using customized templates will probably need to add the code required for this function to work. In this article, I'll explain how easy this is to implement, as well as some helpful hints for customizing the "Read More" link.

35 200+ Quick Tips for Using Blogger Effectively
June 20, 2008 / Filed under: Resources

In this post, I've gathered over 100 useful tips for using Blogger more effectively, which are organized by type for your ease of browsing.

Reasons to blog with Blogger

Blogger is free to use!
The only things you would ever have to pay for us a custom domain (around $10 per year) if you choose to use one, and increased storage space for your images (though most bloggers are unlikely to exceed)
Blogger is a great platform for beginners as it's so easy to use.
Blogger is also adaptive; as you become more experienced you can learn how to adapt templates and posts to your advantage.
With Blogger, you benefit from free secure hosting, no matter how many posts you write, or the number of daily visitors.
You can create as many blogs as you need to for free.
Everything you need to blog is accessible from your dashboard (including all blogs, and your template code)
Your Blog*Spot URL is yours to keep forever
But if you do decide to delete your blog, the URL will be reserved for you. This ensures spammers can't take over the domain and benefit from your efforts.
If you make your blog public, your posts will be indexed easily by Google.
Or you can make your blog private and choose those who can read your posts

Basic blog settings

Most of these options can be changed in the "Basic" settings section of your blog.

Choose a unique name for your blog
Try to make your blog name reflect the theme of your content
Or instead, you could choose something witty and memorable
Make sure your blog description accurately describes the theme of your blog, as this will be indexed by search engines
Add your blog to Google's listings if you want it to be indexed easily
You should also set the option to let search engines find your blog!
If you specify your blog has adult content, readers will face a warning page before they are allowed to read. Only choose this if you do write a blog for adults only!
If you write in Hindi, Kannada, Malayalam, Tamil or Telugu, you can choose transliteration for your blog posts to be correctly displayed.

Domains

You can change the different domain settings for your blog in the Settings>Publishing area of your blog's dashboard.

Try to make your domain name match your blog's title.
Be sure to take great care when choosing a blog name. You can change this later, but will lose backlinks and readers who refer to your previous URL
If you use a layout template, you can publish to a custom domain.
Your custom domain can be purchased instantly through Blogger!
Using Blogger's custom domain service is the cheapest way of publishing to your own top level domain (TLD)
Purchasing your domain through Blogger is the easiest way to set up your custom domain (take a look at this video to see why)
To ensure both the www and non-www URLs for your domain point to your actual blog, choose the option to redirect to yourblog.com to www.yourblog.com
When you publish to a custom domain, your existing readers and backlinks will automatically redirect to your new URL
If you purchase a domain privately, you will need to alter your domain's DNS settings manually.
But since some domain purchases also offer free hosting, this means you can host your own images and scripts
To have complete control over your blog content, you can publish by FTP (where all of your posts are hosted by your chosen host provider)
However, to set up FTP blogging, you will need to purchase your own web hosting account, and can only use a Classic (non-widgetized) template.
If you switch from FTP hosting to using a custom domain, you can specify a missing files host to ensure no files or images are lost.

Basic Blog Formatting

If you need to change options for these settings, refer to the Settings>Formatting area of your dashboard.

If your posts are generally long, choose only to display a handful on your blog's main page.
But if your posts are quite short, you could post many more without affecting page load time.
For your date headings, be aware that readers understand day and month names more easily than only numbered dates
If you prefer, you can choose the timestamp to match your local time
Alternatively, you could choose the timestamp which matches the time zone of your biggest blogging audience.
Either way is good though: readers don;t generally pay attention to the time a post was published: content matters far more!
If you see no line breaks when your posts are published, choose "no" for the "enable float alignment" option
If you use the same code or content for most of your posts (such as Adsense in the body of a post) you can add this to your post template.
You could also use this option to add a different style of background to each of your posts.

Comments

Here are some tips to make your comments more reader-friendly. Settings for your comments can be changed in the Settings>Comments section of your dashboard.

If you would like to add conversation to your blog, choose to enable comments
If there are certain posts for which you don't to display comments, you can change this setting on the editing page for each post.
Non-blogger users can feel confused of they must log in before leaving a comment!
To prevent any reader feeling excluded from your blog's conversation, choose to allow "Anyone" to comment.
Blogger is excellent at preventing comment spam...
But if you do receive any spam/malicious comments, you can quickly delete them from the comments section of your blog...
...Or choose to moderate your comments, to have complete control of what is published on your blog!
Choose to show comments in a pop-up window to ensure readers can easily get back to your post.
You may also add a message to the comment form to specify any rules for leaving comments (or simply to greet those who create conversation from your posts).
Help readers understand that you have replied to comments by customizing author comment styles.
Enable profile images for comments to add a sense of community to the comments page.
But the only way to display avatars on comments beneath your posts is to use the MyBlogLog comment avatars hack!
Word verification is a good way to prevent automated comment spam (AKA: spam-bots)...
...Though I'd advise against using this AND moderating your comments. Readers can become quickly frustrated with such a restrictive system!
If you don't moderate and notice an undesirable comment has been posted, you can quickly delete this directly from the comments section of your post page, or on the comments pop-up page.
Enter your email address to receive comment notifications (which helps keep track of who is commenting, and on what)
Readers who comment while logged in to their Google account can choose to receive email notifications when a reply is posted to their comment.
Those who log in using Name/URL when commenting can benefit from a link to their blog (which makes it easier to keep track of comments, and follow the conversation)
But in default Blogger templates, the link to the author's blog is wrapped in "no-follow" tags and has no real link value...
...So you may want to consider removing the "no-follow" tags. This rewards commenters by offering a backlink which Google will recognize and helps attract more people to leave comments on your posts.
Responding to the comments made by your blog readers is a good way of developing a sense of conversation through your blog.
Readers are more likely to leave comments if they notice the blog author responds, and may even become more frequent visitors.

Backlinks

Enabling backlinks provides links (and snippets) of links to your posts from other blogs.
The backlinks displayed are generated from Google's blog search, so don't worry if links to your posts don;t instantly display (these blogs need to be indexed again before the backlinks are registered)
Backlinks can be hidden if you prefer.
You can also delete certain backlinks if you consider the source to be spammy or inappropriate.
Technorati users can add a "Links to this post" widget (with a more accurate backlink count than Google's Blog Search) by pasting a line of code into their templates.
Trackbacks are different from backlinks because they are generated through blogging software rather than natural links.
Blogger doesn't support trackbacks (but in my opinion, backlinks serve a better purpose).
If you do want to make use of trackback functionality with Blogger, you should check out Haloscan
Or if you simply want to send a trackback to the blogs you reference in your posts, consider using the WizbangTech Trackback Pinger instead.

Effective Archiving Techniques

Enabling post pages is a must for any Blogger user: this gives each individual a page of it's own, as well as being featured on the main pages and archive pages (more food for the search engine spiders to devour!)
If you plan to blog for the long term, it's better to choose monthly archives (as this is makes it easier for readers to navigate through the history of your posts)
The easiest way to add links to your archive pages is to add an archives widget to your blog layout.
Each "archive frequency" creates a unique page in your blog's archives, in addition to the main and post pages of your blog.
If you change the archive frequency in the Settings>Archiving section of your dashboard, the URL of these archive pages will change too.
These days, many blogs feature a unique page for their archived posts. Blogger doesn't provide us with the code to achieve this automatically, but it is possible to create an archives page by hand.

Blog Feeds

You can change the basic settings for your blog feed in the Settings>Site Feed section of your Blogger dashboard.

All Blogger blogs have the ability to generate a feed. This enables you to syndicate your content, making your posts more accessible and more likely to be read.
Blogger blogs produce feeds in Atom format. This is very similar to RSS, and can be promoted in the same way.
Enabling "full" feeds presents your entire posts to feed subscribers.
Short feeds provide only a snippet of your posts, encouraging readers to visit your blog for the entire post.
The choice of full or short feeds is a personal one...
...However, many blog authors promote "full" blog feeds as this may encourage more readers to subscribe.
Display a link to your blog feed in a prominent place in your template. This will encourage readers to subscribe.
If you log in to Blogger in Draft, you can add a "Subscription Links" widget. This provides badges for readers to add your blog feed to their favorite feed readers with ease.
Feedburner is the most popular and useful free service for syndicating your blog feeds. If you don't already have a Feedburner account, I would advise you to create one right away.
Once you have "burned" your first blog feed, you are able to redirect your blog feed through Feedburner. This ensures all your readers receive the same feed, and adds much more functionality to your feed.
When you redirect your feed through Feedburner, you can also monitor the true number of subscribers to your blog.
Using Feedburner allows you to set up email subscriptions for readers who don't use (or prefer not to use) a feed reader.
FeedFlare allows you to add links beneath each item in your Feedburner feeds. Flares available include social bookmarking links, number of comments for your Blogger posts, and even a copyright notice!
You may also like to use my "Author and Permalink" FeedFlare, which helps discourage scrapers from stealing your blog content.
Many other services can use your blog feed to monitor growth and article success.
Blog Perfume's Feed Analysis offers an overview of feed statistics over time, and can even advise how much you should be charging for monthly ads!
AideRSS offers lots of information gleaned from your feed statistics, including analysis of your most popular blog posts.

Group Blogs

It's easy to add new authors and start a "group blog" with Blogger. Simply invite new writers by sending an email from the Settings>Permissions page in your blog's dashboard.
Once a new author has confirmed their status, you will also have the choice of offering administrative privileges.
The names of all blog authors are displayed beside the list of blogs in your profile page.
If you prefer to use different post styles for each blog author, you can do this by adding "class" properties to your blog's style section (this page has the full details)

Blog Posts

Using the "Compose" mode is the easiest way to write a blog post. The compose mode is a WYSIWYG editor (What You See Is What You Get). This enables you to drag and drop images (and other media) where you would like them to appear.
Writing posts in Edit HTML mode allows you much more control of the code of your posts.
If you need to add HTML or JavaScript code to your posts, use the Edit HTML mode and don't switch back to compose mode until your post has been published! Otherwise, your code will become malformed and not display correctly in your published post.
You can upload images to your blog posts using either the compose or Edit HTML mode. These images will be stored in your free Picasa account, and you can access them any time.
You can also use images which are hosted elsewhere by linking to the image URL. However, you should only use web images when you with copyright permission from the image's author.
You can upload videos from your computer to be displayed in your blog posts. These videos will be hosted by Google Video.
You can also display videos from YouTube by adding the video code to your post when editing in Edit HTML mode.
Use color, headings, lists and other stylistic elements to make your posts more interesting.
You may also want to consider advanced post styling methods to add even more interesting features to your articles.
Add "Labels" to your posts which categorize them by subject. Then you can add a labels widget to your layout which helps readers find the posts which interest them the most.
Try not to use too many different labels though: a great long list can be unattractive and confusing for your readers.
Posts can now be scheduled to be published at a later date and time. Using this function means you don't have to be online at the time you want your posts to appear on your blog.
Research shows that weekdays are the best time to post of you want your posts to be successfully received.
You can edit your posts easily from the "Edit Posts" tab in your dashboard, or by using the pencil icon when viewing your blog while logged in to your Google account.
You can add, remove and edit labels in bulk through the Edit Posts page. Simply check the boxes next to the posts you want to edit, and choose the function for the label you wish to edit.
If you change the title of a blog post after it is published, the URL of the post will remain the same.
If you change the published date of a post once it is published, the URL of this post will change too.
When away from your computer, you can post to your blog from your mobile phone...
Or by email...
And even by using your Flickr account!
Scribefire, Zemanta and Windows LiveWriter are also useful tools which can add interactivity to your posts.

Your Blogger Template

Blogger offers two options for your template: XML based Layouts (which are widgetized) and Classic templates (HTML based, without drag and drop without drag and drop widgets).
The default template type is the Layouts style. If you have recently begun using Blogger, chances ate you'll be using this widgetized style.
You can switch between Layouts and Classic templates easily through the Layout or Template tab of your blog's dashboard.
Both styles of template offer complete access to the HTML code used to generate your blog display. This allows you to edit your template whenever you like, or even upload a completely new one!

If you are using a Layout template...

You can add widgets to your blog through the Layout>Page Elements section of your blog's dashboard (and there are many useful widgets to choose from).
Widgets can be moved to different places of your template using drag and drop functionality.
To add unofficial widget functionality, add the code provided into an HTML/JavaScript widget in your layout.
You can also find many Blogger widgets that can be installed directly to your layout.
When using Blogger in Draft, you have access to hundreds of Google Gadgets which can be added in just a few clicks!
If you change to a different "default" Blogger template, your widgets will be retained and stay in the same place.
If you choose to upload a new Blogger template, your existing widgets may be lost.
You can back-up your Layouts template by downloading the XML file to your computer. This allows you to restore your template if you make mistakes when editing the template code.
To give your template a whole new look, you can download a new XML template.
There are two different formats of XML templates to download: an XML file or a text file.
XML format templates should be downloaded to your computer and saved with the .xml extention. You then upload this as a complete file through the Layout>Edit HTML page of your dashboard.
To use a template offered in Text format, you should copy the code and paste in place of the HTML code (learn more about this).
If you receive an error when uploading an XML file, this may be because you have too many existing widgets in your layout (which Blogger has trouble deleting).
The message "Your template could not be parsed as it is not well formed" message usually appears if you are trying to paste the contents of an XML file. Only text based files can be pasted to your template. If you see many dashes to the left of the lines in the template code, this means you are looking at an XML based file which should be uploaded instead.
It is possible to transfer widgets from one template to another. It's time consuming but worthwhile!
Classic templates cannot be uploaded to a blog using the Layout format. If your new blog template includes lines like <$BlogTitle$> and <$BlogDescription$>, this was intended for use in a Classic template instead.

If you are using a Classic Blogger template...

You can change the style of your template by editing the template code directly.
New templates may be uploaded easily by copying and pasting the template code.
You can back up your template by copying the HTML code and saving as a text file on your computer.
You can add JavaScripts and other interactivity by pasting the code directly into your template, where you would like it to appear.
If valid HTML is important to you, use a Classic template and code your template well. Layouts templates are very difficult to validate because of the structure of CSS and widgets!
Layouts templates cannot be used if you publish using the classic template format. If your template code you have downloaded contains phrases like <b:widget...> or <data:post.body>, this means you have downloaded a Layouts template which cannot be uploaded as valid template code.

For both types of Blogger template...

There are hundreds of free templates which you could use.
Try to use a template theme which reflects the main content of your blog.
Choose to use a template which makes you happy...
... Or learn how to customize your own template instead....
Because default Blogger designs are not as memorable as those which have a more personalized style: a unique template is more easily converted to memory than a dull one!
Find inspiration for your own designs by looking at showcases of other blogs.
Be sure to back up your template before making any changes (including uploading a new design). This ensures you can restore it later, should you make an accidental mistake :)
Using too many images or external scripts in your template can cause it to load slowly.
Make sure that all the important elements of your design are easily visible, including any important links to pages in your blog.
Learn how to add a customized favicon to your blog template.
Consider adding print functionality to your posts.
If you want readers to bookmark your posts in social media sites, consider adding automatic bookmarking links to your template.
Highlight your most popular posts in a visible location which gives readers the opportunity for further reading and exploration of your archives.
You can learn how to hide the Blogger Nav-Bar if this doesn't appeal to your blog's design.
(And in case you were wondering, this doesn't violate Blogger's terms of service!)

Your Blogger Profile

You can view and edit your Blogger profile from the main dashboard when you are logged in to your Blogger account.

Create a valid and interesting profile if you want it to be seen by other bloggers.
However, you can choose to hide your profile if you prefer to be anonymous!
You are able to choose which blogs are displayed on your profile page. So if you use a blog for testing or operate a private blog, be sure to hide this in your profile settings.
If you leave a comment on a Blogger blog using your Blogger profile, this will generate a link to your profile page.
Some blogs feature profile images on the comments page, so be sure to add an image or avatar to your profile.
The author name displayed beneath blog posts can be changed from your profile page.
You can choose to add your email address on your contact page if you would like readers to have means of contacting you.
You could also add a Froogle Wishlist here which can be accessed by anyone viewing your profile.

Other useful features of Blogger

Use Blogger in Draft to try out new features before their general release.
Subscribe to the Blogger in Draft blog to receive news of these new features
Learn about the latest Blogger developments by reading Blogger Buzz
Become aware of Blogger's status and scheduled outages
Advanced users can learn how to develop software and applications for Blogger
You may also like to learn how to create your own widgets for others to use in their blogs.
Watch video tutorials to help you set up your blog.
Find great blogs to read in Blogs of Note
Tell Blogger which features you would like to use.
Manage your image uploads through Picasa
Read official articles about managing and using your Blogger account
Discuss Blogger in the official Blogger Help Group

Terms of service

If you're at all concerned about Blogger's terms and conditions, here are some tips you may find useful.

Read the official terms of service for Blogger
Spam will not be tolerated.
If you use your blog to produce spam content, you are likely to have your account disabled until you remove the offending content. Blogger will send you a notice to the email address you registered with, and also> provide a notice in your dashboard to inform you of what to do next.
If you don't take action against suspected spam content in your blog, you will ruin the risk of your account being deleted.
Learn more about what to do if your blog is suspended due to suspicion of malware, and be sure to take the steps required to resolve this!
Blogger will not delete your blog without warning! Only blogs which violate the terms of service (which includes copyright theft) will be deleted, and only then after warnings have been made.
Adult content is allowed on Blogger, but you are advised to specify your blog as having adult content by confirming this through your blog settings.
Even if you choose not to confirm an adult-content blog as such, Blogger may add a content warning for readers to make them aware of this (which is only fair considering anyone can read a blog, no matter how young they are!).
If you discover a Blogger blog which contains spam, copyright theft, violates the terms of service or features adult content without warning, you can report this to the Blogger team who will take action where nescessary.

How to get help when you need it

As many of you will be aware, Blogger do not provide an email support system per-se. Instead we can make use of other services and methods to resolve any issues with our blogs.

Read about known issues: Blogger may be having a internal problem which is causing problems for your blog.
Take a look at the Blogger help center, where you can find answers to many questions about using Blogger and customizing your template.
Post your question in the Blogger Help Group where the experts hang out! At times, there may be a Blogger staff member lurking around too...
If you've been receiving BX-codes, try looking at the BX-codes blog.
You can also report BX-codes here
Do you have login issues or trouble accessing your account? Take a look at this page.
Find out what to do if you find a bug or problem with the Blogger system.
If you have a problem using a non-standard template, try contacting the author or leave a comment on their blog.
If you have problems using templates and articles featured here at Blogger Buster, leave a comment on the post's page or send me an email (I try to help as much as I can, but this may not always be prompt!).
You can also tell me which articles you'd like me to write by using the Skribit suggestion widget in the sidebar.

Do you have any useful tips you would like to add to this list? If so, please share your insights by leaving a comment below. There are already over 200 quick tips in this list, but with your help we could make this list even bigger!

If you've enjoyed this post, please consider subscribing to Blogger Buster, and receive free articles (and even more tips) to help you use Blogger more effectively.

92 Blogger XML Template: Blue Steel (Magazine Style) March 24, 2008 / Filed under: Free Blogger Templates