#template editing

This article is about the consequences of modifying your blog's template.

Overview

Previously I've explained that your blog is made up of a number of components:   your content, and a number of other parts including the blog template. Initially, every blog has a blog-templates chosen from the options supplied by Google when the blog was created.  However it's possible to change to a different blog-template at any time, and there are lots of options both from Google (custom, layout and now designer templates), and from third parties. You can edit your template, from the Layout / Edit HTML tab.   And the recommended answer to many "how do I ..." questions in the Blogger Help Forum is to do just that. However there are some consequences, and (at least) one of Blogger's software engineers recommends not editing your template [in the comments following from this post]- even though s/he also says that doing so is very much part of the supported features that Blogger offers. This article explains these consequences, so that you can make an informed decision about whether to edit your template or not. Google's blog-templates Google / Blogger offers four different types of template:  Custom, Layout, Designer and Dyamic.  (Ref:  types of blog template) - and there are mobile variations within the Designer options, too. For Layout, Designer and Dynamic templates, they also offer a number of different styles, for example Minima, Minima Stretch, Denim, Rounders, Thisaway Rose, Simple, Awesome, etc). For each style of template, Google has a current version.   But there are also earlier versions that used to be current but have been superseded as problems with them have been found and fixed:

When Google make a change to their "master copy" of a particular template, they also look at all the blogs that already use that template:  if a blog's copy of the template has not been editied (by the owner), then it is updated to include the changes that Google made to the master copy.

But if a blog's template has been changed, Google cannot update it with the improvements that they've made to the master template, because doing so would over-write the change that the blog-owner made.

Advantages and Disadvantages The major disadvantage of editing your blog template is that you may not get the benefits of improvements that Google make to the master template. There are some other disadvantages too:

You might make a mistake, and corrupt your template (possibly in subtle ways that you don't notice at first).

You need to take back-ups, just in case you make a really horrible mistake - and it can get confusing managing all the versions of the backup file.

It's more difficult to get support from the Blogger Help Forum is your template is non-standard (because the helpers there don't know how you've changed things

When it's time to update your blog to use a new template, there is no way to make a list of all the changes that you have applied to your current template (unless you've got a copy of the un-changed template as it was when you applied it to your blog for the first time).

But there are some pretty major advantages:

You can make changes to your blog that you cannot make in any other way

It's easy to back up any changes that you make:  while there are some changes that could be put into HTML/Javascript gadgets on your blog, there is no easy way to back these up.  If you accidentally delete a gadget, the only way to get it back is to re-create it manually.

Final thoughts: The Add CSS function in the Template Designer is at attempt to let us change our templates in a way that is known, and gets around these issues.   But I'm not convinced that it always shows all the template changes I've makde, and there are some changes I want to make that don't relate to the CSS. Personally, I'm going to continue editing the HTML in my blog-template. You need to make the own decisions about whether to do so or not.   Hopefully this article will help you to understand the consequences, either way.

Related Articles:  <!-- google_ad_client = "pub-4862549906412680"; /* BHAT - shortLinkUnit for postFooter */ google_ad_slot = "7179465952"; google_ad_width = 468; google_ad_height = 15; //--> Components in your blog Types of blog template. Adding a new CSS rule to your blog's template Setting up Google Analytics for your blog Adding a line between your posts

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:

//<![CDATA[

THE CODE GOES HERE

//]]>

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.

Related Articles:  <!-- google_ad_client = "pub-4862549906412680"; /* BHAT - shortLinkUnit for postFooter */ google_ad_slot = "7179465952"; google_ad_width = 468; google_ad_height = 15; //--> Adding HTML into your blog, Installing extra CSS rules into your blog. Planning changes to your blog - in private Showing Presentations in your blog Is code from a 3rd party safe to install on my blog?   (coming soon)

This article is about giving your blog an attribution gadget, either one of Blogger's standard ones, or one that you make yourself.

Blogger's standard attribution gadget

If your blog has a Designer template (ref What sort of template do I have?) then by default it will have an attribution gadget at the bottom of the footer. Previously, I've described the concerns that many people have with the attribution, and how to delete it.

However some people may want to add a standard gadget back in again, and others would like to make a customised version of the gadget that gives credit where it's due.

Adding a standard Attribution Gadget

The attribution gadget is not available through the usual Add a Gadget option. The only way to get it onto your blog is to apply one of the Designer templates. To do with with the old (ie pre-Sept-2011) Blogger:

If you have a Layout template, use Design > Template Designer and pick one of the new options

If you have a Custom template, use Template > Customize Design > Upgrade your template

If you already have a Designer template, use Design > Template Designer and choose another one.   (And maybe use the same command again to change back to the template you had previously, if that's what you want to do.)

To do with with the new (ie post-Sept-2011) Blogger:

If you have a Layout or Designer template, use the Template tab , hover over one of  the new options and click either Appy to blog or Customize 

If you have a Custom template, use Template > Customize Design > Upgrade your template

Remember:  changing templates undoes all the customisations you have previously applied through the Edit HTML tab.  Plan your template change carefully.

Building an alternative Attribution Gadget

The only way to customize the standard attribution gadget is to add some text to the Copyright field.  This text is show an the beginning of the standard statement. But many people want to change the other items too, for example to credit Tina Chen for the underlying template AND themselves for the colour scheme and layout.  This can be done by changing the template-name in your template.  If you want to more than just change the existing names, your options include:

1  a Blogger icon Add a Blogger icon gadget to your template:  and choose one which you like. 2  A picture Design a graphic that gives the appropriate credits, and add it to your blog  as a picture gadget 3  A Text Gadget Add a text gadget, and put phrase(s) like these in it.

"Template created by WHOEVER, modified by YOUR NAME." 

"Photos by YOU (OR WHOEVER).   Page background image by WHOEVER"

"Powered by Google: site design by Blogger, file-hosting by Google-Sites"

"© YOU. You may copy and adapt this document for non-commercial use provided this notice is not reblog moved. This work is licensed under the Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/ or send a letter to Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA."

Think carefully about where to put the attribution, and how to format it:  not many web-design or hosting companies expect their clients to devote prime screen-space to acknowledgements for the web-host - but you may want to advertise your own services ("customised by YOU"). Note:   at the moment, these methods only work on non-mobile template blog views.

Related Articles:  <!-- google_ad_client = "pub-4862549906412680"; /* BHAT - shortLinkUnit for postFooter */ google_ad_slot = "7179465952"; google_ad_width = 468; google_ad_height = 15; //--> Changing the template-name in your template Deleting the attribution gadget Removing the attribution gadget from your mobile-template. Planning your template change - seven simple steps to a snazzy new look blog Adding a gadget to your blog

This article shows how to put a horizontal separator line between posts in your blog, using either HTML's line command, or CSS rules.  It also has suggestions about ways of formatting these lines using different colours and line-styles.

There are at least four approaches to choose from if you want to put a divider between your posts in Blogger.  These days, I prefer the CSS-rule approach, because it's so easy and flexible.  But I've shown details of a few other methods too:

Manually add a horizontal line command to each post

Use the post-footer colour block as a line (in Designer templates only)

Add the HTML command for a line to the main section of your template, in one of the post-footers

Add a top or bottom-border to the CSS rule that formats the body of your posts.

The following sections give more detail about each option, including how to apply them to your blog, and their advantages and disadvantages.

Manually add a line to each post:

When you are editing a post, you can put a horizontal line anywhere in the contents. If Compose Settings (under Post Options) is set to  Interpret typed HTML, then you can just type

, and Blogger will place a line like this in your post.

If your Compose Settings (under Post Options) is set to  Show HTML literally, then you need to switch to the Edit HTML tab before you type

. Disadvantage: If your post is set to display comments, or the blog is set to show the author, labels etc under the post, these items will be underneath any line that you add manually to a post.

Designer Template - post footer colour

If your blog has a designer template (ref, What sort of template have I got), then the Template Designer > Advanced tab may have an option for setting the background colour of the post-footer (depending on which template you are using).

If you use a dark colour (or have a dark background and use a light color), this makes the post-footer look like a line. Disadvantage:  The "line" might be a bit thicker than you like.   And if your post is set to display comments, or the blog is set to show the author, labels etc under the post, these items are shown right inside the footer line.

Add a line-command to your template

If you don't like the other two approaches, you can change your template to add a horizontal line.  To do this: 1  Edit your template: In Sept-2011-Blogger (ie the new interface) go to Template > Edit HTML > Proceed In pre-Sept-2011-Blogger (ie the old interface) go to Design > Edit HTML. 2  Download a full copy of your template, and put it somewhere safe (in case things go wrong, and you need to go back to where you were). 3  Click on Expand Widget Templates. 4  Most templates have three footer lines:  what is in each one depends on the template, and how you have arranged the items in the Layout > Blog Posts editor. Look at the template for code like the following,

                                               ,                        

OR

      and add the

command to which ever one you want, for example

      Advantage:  you can easily place the divider line anywhere you want it, relative to the other items in your post-footer. Disadvantage:  you need to modify your template, and this does have some risks.  And it does use the

tag which some people (CSS purists) suggest is not a good idea. Enhancements to the basic 

command: There are lots of ways you can modify the

code.   For example

-  to left-align it

-  to change the colour

-  to make it narrower See w3c.schools

tag for more information. 

Add a border to the CSS rule that formats your posts:

The cascading-style-sheet rules in your template control most aspects of how your blog looks.   They can be a very powerful way to control how your blog looks. Quick option: If you have a designer template, then the quick way to make this change is to add a CSS rule to your template.  The rule code to add is:

.post-body { border-bottom:1px dotted #666666; }

or this one if you want the border at the top of each post:

.post-body { border-top:1px dotted #666666; }

In-depth: The specific CSS rule that controls how the "body" of your posts look is .post-body.   To make changes to it: 1 Go to Design > Edit HTML 2 Download a full copy of your template, and put it somewhere safe (in case things go wrong, and you need to go back to where you were). 3 Look for .post-body in the rules section of your template. It will look something like this, but  the exact lines and values may be different:

.post-body { margin-top: 0; margin-$endSide: 2px; margin-bottom: 0; margin-$startSide: 3px; }

 4  If you can find a .post-body rule, then add this line, just before the } character.

border-bottom:1px dotted #666666;

5    If you cannot find a  .post-body statement in the rules section of your template, then you need to add it. Put it somewhere:

After    <![CDATA[/* Before  ]]>

But not in the middle of any other rules: look at how the rest of that section of your template is laid out for clues. The statement to add is something like the following, though you may want to try out different values for parts of it.:

.post-body { border-bottom:1px dotted #666666; margin-top: 0; margin-$endSide: 2px; margin-bottom: 0; margin-$startSide: 3px; padding-top:10px; margin-top:20px; }

Alternative formats: The #666666 means draw the line in black - you may like to use a different colour, or use the word "solid" instead of "dotted" to make a firmer looking line. As an alternative, you can say border-top:1px dotted #666666; - this puts a line at the top of the body of each post, just underneath the title.

Related Articles: 

<!-- google_ad_client = "pub-4862549906412680"; /* BHAT - shortLinkUnit for postFooter */ google_ad_slot = "7179465952"; google_ad_width = 468; google_ad_height = 15; //--> What sort of template have I got Disadvantages of editing your blog's template. Adding a new CSS rules to your template Centering the Post-title or Page-title Putting HTML from elsewhere into your blog.

It's easy to let readers see your blog using the new dynamic views / templates.  But there are some consequences.

What are the dynamic templates? In April 2011, Blogger announced:

" ... five new dynamic templates ... that you’ll soon be able to customize and use for your blog."

The post below is what I wrote then.    Some of the information is now out of date - for example you can now add a limited range of gadgets to dynamic-view templates, and you can choose them as a default.   You have control over colours etc the same as normal templates.    And Yoga on Southern Speakers has published a lot of ways you can use CSS rules to tweak dynamic templates. But I am keeping the original content below, because the linking technique is useful for people who don't want to have a dynamic template all the time.

Original Post content: I'll write more about what these are/aren't later on.   But for now, people want to know how to use them.

Applying the dynamic views to your blog:

Right now, there is no way to make any of the new dynamic templates the default opening view for your blog:  your blog still opens to the home page that you used, which in most cases shows the entire contents of your post recent post. This may change, as Google works out how people want to use Blogger.   But in the meantime you can, very easily, give your readers a way to switch into any of the default views. In short, just put some text that links to  

http://www.YOUR-BLOGS-URL/view 

into a place that your visitor can click on - and of course make sure that your blog meets the other conditions (ie public, feeds enabled, views not disabled) . To give your readers more options, you could have five different links, similar to what I've done here:

   Flipcard      

      Mosaic     

      Sidebar     

      Snapshot  

      Timeslide     

In this option the links are to:

Flipcard http://www.YOUR-BLOGS-URL/view/flipcard Mosaic http://www.YOUR-BLOGS-URL/view/mosaic Sidebar http://www.YOUR-BLOGS-URL/view/sidebar Snapshot http://www.YOUR-BLOGS-URL/view/snapshot Timeslide http://www.YOUR-BLOGS-URL/view/timeslide

I've done fancy things to format the links as buttons (will explain how to do that in another article).  But there are lots of possibilities:  you could just make the links plain text in a row, or even put them into a link-list gadget. Consequences: If you let people look at your blog in a dynamic view, there are restrictions that they will face. These may not be a problem, depending on your niche and how important a customized-look-and-feel and right-up-to-date news is for your audience.  But you do need to think about: Displays and Monetization: Initially, you cannot customise the way that the dynamic template look at all:

Fonts, colours, item placement - everything is based on the standard template

None of the widget that are on you blog are included

None of your "static" pages are shown

None of your advertisements are shown:  this includes AdSense ads that are embedded right inside blog-posts.

Some of the view templates are very visual:  the reader is shown a page of pictures, and each page represents one post.   Currently you don't have ANY control over which picture Blogger uses to represent your posts on these displays.

Search Results Most (all?) of the dynamic templates have a search-function built into them, and some let you search by Label or Post-date too. However Blogger have said that the search-results are limited to posts that are shown on the screen at the time the search is done.   So if a viewer has a slow connection, or is impatient, the search will not include a lot of your posts. Even if your readers have a fast connection, I'm pretty sure that the search only looks at posts that are currently in your RSS "feed".   The last time I looked, this was limited to 512kb (or was it 524kB) - something like that).  If your blog's feed is set to "full" and you have some large pictures in your blog, this may mean that only a small proportion of your overall posts are available to be searched.  . Internal navigation: When you're looking at a blog in a dynamic template, clicking on any post-title takes you to a view of that post in the current dynamic template.   But clicking on an in-post link to another post title (eg a link like how to display a powerpoint presentation inside your blog as a slideshow) opens the post in a new window using the "standard" template that you have set up for your blog. Statistics: Currently, most statistics-gathering tools (eg Google Analytics) are put onto your blog either by changing the blog-template, or by installing some code into a widget.   Either way, the statistics tool code will not run, so you will not get any statistics about people who view your blog using the new templates. (NB  I haven't tested this, but I'm 99% certain that it's correct). Other consequences: Dynamic template are a brand new feature.   There will be issues that I haven't considered yet.   I'd love to hear your thoughts about the templates and the challenges that we face in adapting to this new way that Blogger may start working.

<!-- google_ad_client = "pub-4862549906412680"; /* BHAT - blend no border - banner */ google_ad_slot = "9086307931"; google_ad_width = 468; google_ad_height = 60; //-->

Related Articles:  <!-- google_ad_client = "pub-4862549906412680"; /* BHAT - shortLinkUnit for postFooter */ google_ad_slot = "7179465952"; google_ad_width = 468; google_ad_height = 15; //--> Introducing Dynamic Views in Blogger Showing a PowerPoint presentation as a slide-show inside your blog Choosng the colours in your blog, Putting AdSense ads right inside your blog-posts. Setting the home page on your blog Google Analytics and your blog

This article is about how to change or delete the attribution that Google has added to add blogs which have a Designer template.    (Updated May 2011 with the latest status of the methods listed.)

What is the attribution - and what's wrong with it.

If your blog has a Designer template (ref What sort of template do I have?) you may have noticed a gadget in the blog-footer called attribution.   This gives credit to:

The template designer (Even though s/he only designed the structure, not the colour, font and gadget layout combination that you're using - and readers who aren't familiar with Blogger probably won't understand the distinction between your work and the template-programmer)

The copyright owner of the background photo you're using (Even though s/he doesn't own any of the zillion other photos in your blog - and again, readers aren't going to understand what photographs are part of the template and what aren't)

Blogger for "powering" your blog (Even though they're hosting it, and the real power may be provided by other tools:  eg I have blogsites hosted by Blogger but whose real power comes from Google Maps, Google Custom Search, and Sites.)

The gadget also has a field "Copyright (optional)".  Whatever you put into this is shown at the beginning of the attribution.  It will accept some simple HTML commands, for example a line break ( ) as shown in the picture.   But I have a feeling that adding something more complex, eg an entire Creative Commons statement, won't work.

How to remove the Attribution Gadget Removing this gadget has been troublesome since it was introduced.   Several times, we found a method to remove it, which worked for a while.   But then Blogger added a check for that method, and code to put the gadget back again each time the template was saved - so we had to find another approach.. For a while they stopped putting the gadget back and the earlier, simpler methods of removing the gadget were working.  Then they stopped again.   So the complete list of removal methods that I've found, with notes about their current status, is below.

WARNING:  

I have not checked the Blogger Terms and Conditions to find out whether you are allowed to remove the Attribution.   Even if they don't mention it today, a requirement to keep the statement could be added tomorrow.   This advice does not mean that I, or Google/Blogger, are saying that you should/can/may/must remove the attribution statement.

Methods that currently work:

Adding a CSS rule to hide the attribution gadget 

Changing your template name to a non-standard value AND removing the gadget by either unlocking and removing the gadget  or  commenting out the code.   As at 20 Sept 2010, these methods both work if the name-value has been changed.

Adding a "not on mobile templates" command to the gadget code (only works on mobile templates, not required if you have been successful with removing  or commenting out the code)

Techniques that used to work, but don't any more:

Unlocking and removing the gadget This worked initially, then stopped.   Most recently (Jan 2011), it was working again.    If you try it, and it doesn't work, please leave a comment below, and try one of the other methods.

Commenting out the code. (I haven't tested this again lately - it may be that it works again too.)

Advantages and Disadvantages: I'm not keen on methods that involve hiding things, because it may make search-engines think you're being sneaky. But changing the template-name may mean you don't get improvements that Google apply to the standard templates in future (eg support for new browser features, bug-fixes). It may also mean that you get less-sympathetic responses to future question in the Blogger Help Forum:  when people use 3rd party templates, one regular reply to, "how do I do XXXX to my template"  is "ask your template provider." To avoid this, you should at very least remember what template you were using, and possible even rename yours to something like "WHATEVER, based on Awesome". Give credit where it's due:  If you do remove the standard attribution gadget, it may be a good idea to replace it with a customised attribution that acknowledges any or all of your domain registrar, blog-host (Blogger, AKA Google), file host, template designer and customiser, graphic designer, content writer(s) - in short anyone whose efforts have contributed to your blog.

Related Articles:  <!-- google_ad_client = "pub-4862549906412680"; /* BHAT - shortLinkUnit for postFooter */ google_ad_slot = "7179465952"; google_ad_width = 468; google_ad_height = 15; //--> Giving your blog a customised attribution gadget Adding a CSS rule to hide the attribution gadget Changing your template name or designer-name Removing attribution from mobile-template blogs Deleting the attribution gadget by unlocking and removing it Deleting the attribution gadget by commenting out the code.   How the data in your Blogger blog is organised

This article is about changing the template-name and the template-designer-name associated with your Blogger template.

If your blog has a template from Google (and indeed from many third-party template providers too), the code has a documentation section at the top, which says the name of the template, and perhaps the date it was created and the name & website of the template designer. You can see the header in your template by editing the template in the usual way - you don't need to expand the widgets.   Near the top of the code, just after   <![CDATA[/*   there will be something like this: In blogs with Designer templates:

/* ----------------------------------------------- Blogger Template Style Name:     Simple Designer: Josh Peterson URL:      www.noaesthetic.com ----------------------------------------------- */  

In blogs with Layout templates:

/* ----------------------------------------------- Blogger Template Style Name:     565 Date:     28 Feb 2004 Updated by: Blogger Team ----------------------------------------------- */

In blogs with Custom templates:

/* ----------------------------------------------- Blogger Template Style Name:     Rounders 2 Date:     27 Feb 2004 ----------------------------------------------- */

Notice that in each case, the code is between /*  and  */ These characters tell Blogger to treat the words between them as comments and not to show them when the blog-post is turned into a web-page for your readers. If you make changes to your blog template, it's a very good idea to make some notes about this in the documentation section, so that people who look at it later on (including you!) know what you've done and why.  For example:

/* ----------------------------------------------- Blogger Template Style Name:     Simple Designer: Josh Peterson URL:      www.noaesthetic.com Updates:   August 2010:  removed shadow around outer body border - as per instuctions from XXX (because it looks ugly in IE) ----------------------------------------------- */

But as well as this, you can also make changes to the existing information, for example:

/* -----------------------------------------------

Blogger Template Style

Name:     Simple

Designer: Josh Peterson and Freda Frog

URL:      www.noaesthetic.com

----------------------------------------------- */  

Any elements in Blogger (eg the attribution gadget) that use the existing data will pick up the change you make.   In the example above, the attribution gadget becomes:

You can also change the template name, for example

/* ----------------------------------------------- Blogger Template Style Name:     Not-quite-so-Simple Designer: Josh Peterson and Freda Frog URL:      www.noaesthetic.com ----------------------------------------------- */

Changing the template-name has two side effects:

It makes it possible to successfully delete the attribution gadget (by either unlocking and removing it, or commenting out the code) and

Your blog may not get any new features and bug-fixes that Blogger apply to existing templates (ref Disadvantages of editing your template).

Related Articles:

<!-- google_ad_client = "pub-4862549906412680"; /* BHAT - shortLinkUnit for postFooter */ google_ad_slot = "7179465952"; google_ad_width = 468; google_ad_height = 15; //--> Deleting the attribution gadget How to edit your blogger template Disadvantages of editing your template.