Monday, April 25, 2011

Hiding your blog's attribution gadget, using a CSS rule

This article is about how to hide your blog's attribution gadget using a CSS rule.

It is part of a series about removing the attribution gadget from blogs which have designer templates.

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.

Previously I have described what the attribution gadget is, and the concerns that a number of people have with it.

It's been a bit of a cat-and-mouse game with Blogger since I put up my first post on the subject: I think up a new way to take the the attribution gadget out of my blog, they put in some code to put back in again the next time I edit the template.

However, as at right now:

How to remove the attribution by hiding it:

One way of removing "powered by Blogger" from your blog is to hide it. To do so, simply add this rule to your template:

#Attribution1 {display: none;}

(See Adding a new formatting rule to your blog for more information about doing this.)

Note: Hiding elements on your blog can have downsides, if the search-engines think that you are trying to deceive them. Use this technique at your own risk.

Mobile template blogs:

The approach above only works on your non-mobile template. If you have enabled a custom mobile template, you can either use the standard way of removing your attribution from your mobile blog, or by adding a 2nd rule:

.mobile #Attribution1 {display: none;}

Give credit, too:

And as always - I do recommending adding an alternative attribution gadget, which gives credit where it's due.

Troubleshooting:

If this rule doesn't work and you have tried several other approaches on the same template, your gadget may now be called Attribution2 or even Attribution3. Look at your template (Design > Edit HTML) and search for "attribution" to find out what the correct digit is, and modify the rule to use it.

Giving your Blog a Home Page

This article is about the options for setting the home page for blogs made with Google's Blogger.

Blogs don't have a "home page", main page or "landing page" in the same way that regular web-sites do. Instead, they show the newest post first, since (hopefully!) most readers will be return visitors, coming back to see what's new.

But there may be blogs/websites where you want a welcome message or a particular post to appear first whenever someone visits your blog, or where you want to put all your posts in reverse order.

This article is about options for giving your Blogger blog a "home page".

It lists three options, and gives advantages/disadvantages of each approach, and links to articles with details about implementing each case. If you can think of any more approaches, please leave a comment below.

Options for giving your blog a home page include:

Static page combined with a custom re-direct - as discovered by Nitecruzr.
This is now my recommended method of home-page implementation, and I am progressively applying it to those blogs that need a "home page". However it does not work on mobile templates. So if your blog has a mobile template - and you want mobile-device visitors to see the same home-page as everyone else - then you need to use another approach.

Displaying all the posts in reverse order

Choosing one post to be a welcome message, and always giving it the latest post-date

Displaying a gadget at the top of your posts area, and only showing it on the home page.

Advantages and Disadvantages of each option

Option	Advantages	Disadvantages
Static page and custom re-direct	No template editing is needed Easy page editing - no messing around putting content into a gadget No gaps on other pages due to the gadget being "missing" Simple, elegant, and fully functional.	Google probably didn't intend to give us this option when they set up custom re-directs, so it's possible that they might remove it again. (It's such a nice solution, though, that I think it's worth the risk for now) Doesn't work for mobile device users if your blog has a mobile template enabled.
Show all posts in reverse order	Great for new readers - they can "follow the story".	Return visitors have to navigate down to where they were up to last time: the blog has no way of helping them to remember where that was. You can't use most of Blogger's date features: newer and older posts links will take the reader in the "wrong" direction. And you have to manually enter any dates that would be relevant. Your posts will get "older" as you write more: this may confuse search-engines, and there's a risk that google might to things to "very old" posts in the future.
Make one post always show up first	You can still use all of Google's date features. Readers will know when you actually posted to your blog. Great for returning readers: they can see your (current) welcome comments, and then go straight to the latest post after that.	You have to remember to edit the "chosen" post every single time that you make a new post - one day, you might forget. This approach probably won't work on multi-author blogs: there's a very high chance that someone would forget to edit the chosen post and change its date.
Show a "welcome gadget" on the home page only	Doesn't need any changes to Post date-time settings. Your blog still functions like a blog (older/newer post links , archive gadget etc). An HTML/Javascript gadget can be very flexible, and you can get Blogger to write all the HTML for you - see Making a Gadget Like a Post. You can use things other than text, eg a picture or even a poll. It includes an extreme option: you could show no posts on the "home" page, and just show the gadget.	You need to edit your HTML template to make this work. You need to re-do the template customisation every time that you change templates. The welcome gadget isn't one of your posts: it's not included in exports of your blog contents (It is in an export of your template - but I don't think that the words inside it are included). A gadget cannot show quite as many things as a post. Doesn't work for mobile device users if your blog has a mobile template enabled.

Can you think of other ways? Please leave a comment below.

Setting the homepage's post date into the future doesn't work

Some people suggest that you can set the post-date of your main page in the future - and at some times this has worked.

But now that scheduled posting is working the way most people expect it to (ie if you write a post today, and publish it with tomorrow's date, then it is shown to your readers from tomorrow onwards), this will not work - because your "home page" won't show until that future date is reached.

There may be some ways you can fudge it in to working (eg post the page with a date in the past, and then post it again with a future date). But I VERY STRONGLY don't recommend this: even if they work today, they may stop working at some time in the future when Google make a change to how future-dated posts are handled.

Displaying a gadget only on the home page

Showing your oldest post first in Blogger (AKA Showing your posts in reverse order)

Making one post always come up first

Changing the date for a post.

Stopping certain pages from ever appearing on the home page

Linking Blogs and Websites

This article looks at the answers to a very common question on the Blogger help forum: "How do I link my blog on blogspot to my web site?"

There are many ways of linking blogs and websites.

The simplest is to give them mutual links, ie put a link to the blog onto the website, and a link to the website onto the blog.

The major advantage is simplicity - but there are disadvantages because you have to maintain two separate sites, your readers/customers may get confused or may miss the link, and it may not be good for attracting search traffic (which only matters if you are replying on search to bring visitors to your blog).

Another option is to use RSS feeds to display content from one site (blog, website) on the other. For example, there are RSS feeds from both Blogger-Hints-and-Tips, and from Blogger Buzz in the sidebar of this blog. These work better for displaying content from sites that keep getting new posts, rather than sites that have updates made to existing post: usually your blog is the site that gets new posts, so you may want to put an RSS feed from it onto your website.

Or you could display the content of one site (website or blog) right inside the other site: it appears that <iframe> statements provide this option.

Mutual Links:

Putting a link to your blog onto your website

To do this, you will need to talk to whoever built your website, and probably pay them to change it: you cannot control your website from inside your blog, unless your website was built with Blogger in the first place.

They will (should, anyway) ask you some questions about how you want it to work, for instance:

Where should the "blog" link go on your website?
What happens when someone clicks it - are they taken to your blog, or to a view of it that opens inside your website?
Should it be a link at all, or do you just want a "feed" of blog posts to show up in a window inside your website?

Put a link to your website onto your Blog:
You do this same way you'd do any other link.

If you want it in an individual Post, then write the post, choose the text where you want the link to be, and choose Link. Then enter your website as the URL.

If you want it in the sidebar, header or footer, then:

Follow the usual Add a Gadget procedure,
Choose which type of Gadget to use (eg a picture gadget), and enter your website's address (URL) as the "link to" or similar option. (The options that are available depend on what sort of gadget you use).

If you want it to be a menu bar entry (similar to ones set up by the Pages feature) - then you will have to do some work in the menu. There is more detail about this in Putting your Posts into Pages in Blogger.

RSS Feeds:

Put a feed from your blog inside your website

It is possible to build a RSS-feed from a Blogger blog.   The best way is to use Feedburner (http://feedburner.google.com), which gives you a range of options about how this feed should work.   You can even make several different feeds, each of which has slightly different features.

Therefore, provided your website is built in a tool that can display RSS feeds, the people who maintain it should be able to set it up to take a "feed" from your blog.

This means that you keep updating the blog within blogger, but that the words you write are taken into the website.   What is taken in probably does include the formatting you used (bold, italics, centering etc) and links that you used, but probably won't include the colour scheme or the things things that are in the sidebars, header and footer.   And the overall layout will look a bit different to how it looks in your blog

Another option, especially if the people who built your website don't know very much about RSS feeds or Blogger, is to shift your blog onto some other system that is already integrated with your website or web-host (that you simply haven't been using up 'til now).   Under this option:

You will need to learn how to use a new blogging system (which may not be quite as easy as Blogger)
You may or may not be able to import the content of your current blog in blogger
The new blog will look different, and will have different features to the ones you have in blogger.
Your readers will need to be told where you new blog is

Shifting to a different blogging system may be cheaper initially (especially if your web-hosting-plan already includes a blogging feature that you're just not using). It may not be cheaper in the long term (Blogger is free: a blogging-tool inside web-hosting company may chaarge an extra annual fee like you already pay for your website). Make sure that costs (initial and on-going) are discussed before you decide what to do.

Embedded Displays using iFrame statements:

I've seen a comment in the google help forums that you can insert a web-page using an iframe, like this:

<iframe
allowtransparency="true" scrolling="yes" frameborder="0" width="600" height="800"
src="YOUR BLOG URL, INCLUDING THE HTTP:/"
>
TITLE-FOR-THE-FRAME
</iframe>

I have yet to try this out, but if it works as well as I suspect, it could be a very powerful technique to displaying content either way (but not both ways at the same time - that would be an infinite loop).

This would put some Blogger functionality re leaving comments inside your website, so - I think - you would not be able to sell access to the website because that violates Blogger's Terms and Conditions about re-sale.

Removing the attribtion gadget by unlocking and then removing it.

This article documents removing the attribution gadget from Blogger by unlocking and then removing the gadget. This method no longer works (last tested 20 Sept 2010 - the gadget is automatically re-added to the blog's footer section), but the technique may be useful in future.

See the main article (removing the attribution gadget from blogs with Designer templates) for the most recent information about techniques that do work and for background information about the topic

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.

Note: the following instructions relate to the pre-Sept 2011 Blogger interface. They will not be updated, because this method (generally) does not work.

How to remove the Attribution Gadget by unlocking and then removing it.

1 Go to Design > Edit HTML.

2 Take a backup:
Download a copy of your template: this is a backup - save it somewhere safe, in case things go wrong.

3 Find this section in the template:

The simplest way to locate it is to use your browser's search function (Edit > Find in Firefox, similar commands in other tools), and look for "lock Attrib".

4 Change

locked = 'true'

locked = 'false'

5 Preview the template change, to check that everything else is ok. If not, fix the problem. (The attribution will still be showing at this stage.)

6 Click Save Template

7 From the Design > Page Elements tab, edit the attribution gadget. It will now have a Remove button on the left hand side. Click this, to remove the gadget from your blog.

8 If you want to, add an an alternative attribution notice.

Displaying a gadget only on the home page - or only on a specific page

This article is about how to set up a gadget / widget in Blogger so that it is only visible on the first place that a reader sees when they visit your blog (often called the "home page"). It is one of a series of articles about controlling what goes on the homepage of your blogspot blog.

Front Page Bob
By Paginator (Own work)
[CC-BY-3.0], via Wikimedia Commons

There are a number of reasons why you might want to put a gadget only the screen that shows when a visitor first navigates to your blog's home page.

You may want to show a welcome message, or a topic-index page, or to give a view of your recent tweets or some other RSS feed.

No matter what the reason, the process is very similar:

How to make a gadget only appear on the first page:

Note: in Blogger, the words "gadget", "widget", and even "page-element" all mean the same thing. I generally use "gadget", because the Page Elements tab currently says "Add a Gadget". But they're absolutely the same.

1 Add the gadget:

Do this in the usual way.

2 Place the gadget

Drag-and-drop the gadget to the place where you want it. It may be over or under your blog-posts gadget, or in a totoally different place.

A popular place for a gadget that is going to look like a "home page" would be in the Body section, just above the Blog Posts gadget, where "Test Gadget" is in this example:

3 Find the Gadget-ID in the usual way.

4 Find the code for your gadget:

Edit your template - and initially don't click expand widget templates.

Use your browser's text search tool (Edit / Find in Firefox, ctrl/F in Chrome) to look for the widget name that you noted in step 3. Notice what comes after it. In this example, it's the line for Blog1:

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Text1' locked='false' title='Test gadget' type='Text'/>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

Click on the Expand Widget Templates checkbox (so it's turned on)

After the expanded template has downloaded, find the widget name again. This time it will look a bit longer (the exact details depend on what type of widget/gadget it is.)

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Text1' locked='false' title='Test gadget' type='Text'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

5 Add conditional formatting:

You need to put conditional formatting code around the code for the gadget - makings sure that it doesn't go around the code for anything else! (which is why you noted what comes afterwards in step 4)

And to avoid leaving blank space where the gadget would have gone, you need to update a "hide" instruction to apply it to the gadget-id you noted in step 3.

The code to use is this. Put the gadget-id instead of the XXX.

<b:if cond='data:blog.url == data:blog.homepageUrl'>

THE red CODE FOR YOUR GADGET GOES IN HERE

<b:else/>

<style type='text/css'>
#XXXX {display:none;}/*remove blank space that the gadget leaves*/
</style>
</b:if>

The example above looks like this, when the code has been added:

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Text1' locked='false' title='Test gadget' type='Text'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'> 
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>

<b:else/>

<style type='text/css'>
#Text1 {display:none;}/*remove blank space that the gadget leaves*/
</style>

</b:if>

</b:includable>
</b:widget>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

6 Check that it's worked

Preview your blog before you save the changes: check that the the widget is visible.

Save the template changes, and look at your blog. Check that

The widget is on the first page
The widget is not seen when you look at an older page (eg one from your archive)
The other elements of your blog (other widgets, blog post titles, dates and contents) are all as you expect them - on the first screen, and on other screens too.

If anything is wrong with how your blog is working, go back to the template editor (Design > Edit HTML), and upload from the copy of your template that you made at the beginning of step 1. This will let you blog work properly, while you figure out what went wrong.

How to display a gadget only on a specific post or page

Follow exactly the same approach as above.

But instead of

<b:if cond='data:blog.url == data:blog.homepageUrl'>

Make the conditional statement based on something else.

This can be a different condition, or a specific page URL. For example to display a gadget only on a specific page, use this code, and put the address of the page instead of POST-URL:

<b:if cond='data:blog.url == "POST-URL"'>>

To display a gadget on every page except a specifc one, replace the double equals signs (==) with the HTML code for not, which is an exclamation mark followed by an equal sign (!=). For example:

<b:if cond='data:blog.url != data:blog.homepageUrl'>

Controlling what goes on the homepage

Adding a gadget / widget / page-element to your blog

Editing your blogger template

Putting a slideshow from Picasa onto your blog

Getting the HTML code to put a picture into your blog

Making a gadget that looks like a post

Changing the template-name and designer-name

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 <b:skin><![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).

Deleting the attribution gadget

How to edit your blogger template

Disadvantages of editing your template.

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

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

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

What are CSS rules

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

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

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

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

Adding a CSS rule to a Designer or Dynamic template

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

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

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

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

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

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

Adding a CSS rule to a Layout template

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

2 Edit your template in the usual way.

3 Insert the new rule immediately before this text:

]]></b:skin>
</head>

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

Adding a CSS rule to a Classic template