bollywood latest news

We see panic, exhibited by many blog owners, in Blogger Help Forum: Something Is Broken.

I used the W3 Template Validator, and got hundreds of errors! Is my blog broken?

This blog owner, like many others, does not understand the differences between W3 Standard HTML / XHTML, and Blogger HTML / XML.

The unpleasant truth is that, ever since Blogger released the Layout class templates, in 2007, Blogger has been providing templates that can't be successfully validated using HTML / XHTML standards. Blogger has a lot of features that don't validate, according to public standards.

That's not to say that the W3 Template Validator, and similar online analysis tools and code validators won't be useful, in helping you proactively check your blog for problems.

If you've tweaked your template, and / or added various HTML based accessories, you may find a few informative entries, in a typical validation report.

Upon examining the validation report for this blog, I can find more than a few references to various accessories and tweaks that I've made in the past, which I can identify. Some of the 498 errors (as of today) can maybe be fixed - but many can't.

If you want to look for problems with your blog, start by creating a test blog, using the same template that you have. Then, run the validation of your choice against your test blog. The report that comes from your test blog, you can use as a baseline.

Take your baseline report, and compare it with the report for your working blog. Unless you've done a lot of customisation to your blog, you'll find a lot more errors identified on both reports, than not. You can (maybe, should) fix the problems which are unique to your working blog - and you may have to walk away from the others.

Like the frustrations caused by referer spam, which you learn to live with, I may have to ignore some coding imperfections. Your blog may be the same.

>> Top

This article explains the issues faced by Blogger users who try to see if the HTML in their blog is valid - and why this doesn't matter in most cases.

What is "valid" HTML

If you read SEO advice or webmaster guidelines or web-best-practises, you should be told to make sure that the HTML in your website is valid.

Valid HTML is simply website code that totally meets the rules defined by W3C, the non-profit organisation that ultimately makes the rules about HTML and the other scripting languages that are used on the internet.

You can tell if the code on a site is valid by using a validator tool, like http://validator.w3.org/   - this is the best one, since it's from W3C:  if anyone knows whether something follows the rules, then they do.

But really, what is valid HTML/XHTML, and why does it matter?   Basically, it's code that meets all the rules and standards that have been decided for the current version of HTML, as at today.   It matters because web-browsers are written so that they correctly show information on screen if the code that is used to describe it follows the HTML rules.

However, as personal devices/computers and the web gets more sophisticated, the rules are enhanced so that browsers can do  more interesting things.   This means that code that was valid several years ago may not be valid today, because the rules have changed.

How to make the code in your blog valid

The short answer is that there is no way to force Blogger to generate valid code.

The slightly longer answer is that Blogger software makes your blog's posts and pages into web-site pages by combining:

• Its own rules, and
• Your data, ie your posts, your selected template, the settigns you've chosen in the Layout and settings tabs (ref:  How the data in your blog is organised.).

You can control whether the code on your posts is "valid" - but only as far as Blogger's Post-editor lets you (eg it takes out <p> </p> tags and uses <br /> instead - this isn't regarded "good practise").

And you can edit your template to remove certain things that are not valid.

But no matter what you do, you can not remove all the "invalid" code that's generated by Blogger when your posts or pages are published, and you don't have the freedom to "clean" their code either:  Blogger provides us with free hosting and unlimited bandwidth - the price of this is that they impost some limits on what we can do with them.

So your overall site will not be valid accordingto the W3C rules.  There is nothing that you can do about this - and personally I don't think this will change any-time soon.

Is invalid HTML code really a problem:

At first glance, this may seem like a disaster - if Blogger won't make "valid" code, then we cannot use it to make blogs/sites that display properly, or that meet Google's own webmaster guidelines.

That's not quite right, though:  an important feature of the way browser-software and the internet work  is that browsers try to to work out what to do with HTML code that they don't understand (eg code that isn't valid any more, or code that's got new features that the brower doesn't support yet).  Instead of crashing, they make a best-guess about what to show on the screen, even though this might take them (a little) longer than showing valid code.

What that means for us Blogger-users is that our sites will be just fine most brower-software..

What's more, Google have promised that the  HTML which Blogger produces will work on the  most recent and last-most-recent version of the currently popular web-browsers - even though it's not "valid".

The only consequence is that our blogs may take a little longer to load, while the browser decided what to do with the "invalid" code - but in most cases, this extra time will be small compared to the time needed to load our pictures and gadgets, not to mention other cool things like Twitter messages or Facebook like buttons.

Of course, if you're a purist and hate "breaking the rules", then having an "invalid" blog may be more of a problem than you can bear.  But if you're realistic, you will notice that there are many, many fine sites made with Blogger, and this lack of valid HTML doesn't appear to be doing them much damage.

SEO and code-validity

In the early days of search-engine-optimization, people thought that having valid code would make it easier for Google and other search engines to look at and index your website - and this would make it do better in search results.

Initially, they may have been right.  But Google et al are pretty motivated to index everything - especially the blogs that their tools create.   And today, web-search "spiders" have become pretty clever about understanding web pages, no matter whether they're valid or not (or were valid before, or will be valid in future, etc)

In short, if you've been reading up about SEO and found a recommendation to "make sure your website code is valid", then I'd suggest skipping that advice, and spending your time worrying about more important things, eg that:

• Your posts are all original, with no copyright material in them.
• They all have titles with important(*) words in them
• They all have descriptions with important words(*) in them
• Your pictures all have titles and alt-text.
• You are using the social media (Facebook Twitter, LinkedIn, etc - what ever works for your audience  effectively.

(*)  technically, the phrase is "key words" - and there are zillions of guidelines telling you how to choose "good" key words for your niche.   But  the simplest approach is to use version is "interesting" words, that people who are looking for your blog post are likely to use.

---

Related Articles:

Does search-engine-optimization matter for your blog.

Copyright, blogs and bloggers

Showing a picture on your blog

Understanding Blogger's Add-a-Gadget tool

Showing a working Twitter message in Blogger

Adding Facebook like, Send and Share buttons.

This article explains where to find alternative code for many of the gadgets provided by Blogger - and why you might want to do this, and how to back up your HTML gadgets.

Gadgets in Blogger

Blogger makes it  easy to add a gadget to your blog: you pick the one you want from a list, enter the details on the gadet-options screen, click ok and save. Voila, a gadget doing "just what you want" appears where you put it.

But there are some issues with this simple process.

1  Controlling (and even knowing) what the code does

You don't control what the code does - and you can't even see it, so you have to believe that it does what it says it will do, and nothing else.

For many people this seems obvious:  of course a gadget will do what it promises, or people won't use it.   But maybe it does what it promises and more, eg if you use the poll-gadget, the results are shown on your blog. But does Google keep a record of them anywhere else?    You can't tell, because you cannot see the code behind the gadget.

2  No more customisations

You can only customize the gadget using the options in the gadget screen - and sometimes these are limited or out-dated..   For example, if you have signed up with Adsense and use the AdSense gadgets, then there is no way to restrict them to only show image ads, even though the option is available in AdSense itself. And you can only choose from the limited the ad-unit sizes and colour-schemes availabel in Blogger

3  Keeping a backup copy

You can't back up the "widget settings" that you put into the gadget-options, besides manually writing a note to yourself or taking a screen shot.

Is there a way around these issues?

The answer to these issues is to not use the gadgets that Blogger provides.   Instead, replace them with the HTML code for the gadget which you need to "find somewhere", and install it into your blog as code.   (And if you install it into a HTML/Javascript gadget, make sure you keep a backup copy in a documentation blog or similar).

This table lists places where you can get HTML/Javascript code equivalents for many of the popular Blogger gadgets.  In general, this code is not restricted to Blogger - it can be installed into any blog or website that accepts HTML / Javascript gadgets.

Gadget	Where to get the code?
Any of the AdSense gadgets	Log in to your AdSense account at www.adsense.google.com, and get the code from there in the usual way.
The Amazon Affiliates / Associates gadgets	See Amazon/Blogger integration is finished - what are our options now for information about these
Search	Use a Google Custom Search engine
Translate	Go to  https://translate.google.com/manager/add, enter your website name and the language it is in.   Then on the next screen, choose the options you want (all languages vs specific ones), and press Get Code. You are given a meta-tag to add to your blog in the usual way for adding meta-tags, and some HTML/Javascript which you add in the usual way for code.
Labels	You can build your own linked list (see below) and put the label-search value into them (eg  http://YOUR-URL/search/label/LABEL-VALUE).  This isn't quite the same, because it doesn't give a count of posts by label, but may be good-enough for some cases
Link List - and Unlinked list.	Make your own, by using the post-editor to make the code, and creating a linked-list there.
Google Plus	Get code for a range of gadgets from http://www.google.com/webmasters/+1/button/
Offering an RSS subscription to your blog	See offering an RSS-subscription service, using Feedburner.
Follow-by-email	See Offering an email-subscription to your blog, using Feedburner
Recent Posts	If you have used Feedburner to make an RSS-Subscription option (see above), then you can also get the code for a Recent-posts gadget from Feedburner:  go into the Publicize tab, choose BuzzBoost.  Choose the settings, Save, and Feedburner gives you the HTML code  to display your feed.
RSS	Make an RSS feed for the site you want to display, then use Feedburner's BuzzBoost tool to get the code to display the feed.
About Me	Make your own, by using the post-editor to make the code eg you might like to include a picture etc. Or you can just type the plain text into the Contents field of an HTML/Javascript gadget if you won't want any formattting or links
Archive	I haventt been able to find any way to do this - apart from making your own in a page and linking to it.
Picture	See getting the HTML-code to put a picture into your blog

I'm sure that there are others too - what gadgets would you like to find the code for?  Drop a comment below, and I'll see what I can find.

---

Related Articles:

Use a documentation blog to keep important information about your blog.

Installing code into your blog

Adding a gadget to your blog

Setting up Adsense for your blog a

Showing picture-only AdSense ads in your blog.

Google have released their own style guide for HTML and CSS code.

It will be interesting to see how much of it they apply in future changes to Blogger templates

But for Bloggers who do a lot of modifications to their own template, there might be some useful tips. I especially like the one about putting CSS rules into alphabetical order for maintainability.

Doing this would mean adding CSS rules manually rather than than through Design > Customize > Advanced > Add CSS

And it will be harder to do a code-compare to see the difference between our customized template and the current standard-issue ones.  But storing like-named rules together appeals to me more than just tagging new ones on the end.

This article shows how to change a picture in your blog, so that when it is clicked, it opens another blog post, or even a totally different website.


Clicking pictures in your posts 

Previously I've described how to put a picture into a blog post.

By default, when a picture in your post is clicked, the file that is used to load the picture is opened, in a new window and at its original size.   This can encourage readers to steal photos that don't belong to them, so I've also described how to stop pictures in your blog from being "clickable".

But sometimes you may want to set a picture up so that clicking it opens up a different post, or even a whole different website.

How to change where a picture is linked to:

Add the picture into your post in the usual way.

Note where in the post your picture is - you may want to put some temporary marker-text (text that doesn't appear anywhere else, eg ZZZ) just before or after it, so make it easier to find.

Look at the HTML behind your post

• Pre-Sept-2011-Blogger:  Click Edit HTML in the top-right of the editor window 
• Post-Sept-2011-Blogger:  Click HTML in the top-left of the editor window

Find the code for your picture   (Hint - use the find-feature in your browser, eg Ctrl/f in Chrome to look for the marker-text if you used some).   It will look something like this:

<a href="http://4.bp.blogspot.com/tkoGx2454hA/s1600-h/Inserting+a+picture.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqkhV0hm0z_1yfRFJk1HIRj_tuD1wJvcqZ9pn_MldyGx5ME9E17_iYN46s09ZQ7tRAWR_CJE-Sr0XHwGSKhPJqIhmb31_LiAq4AYZ_030LFrcUM6i7aOw17HJxCHR5jEDS94kisKdjTv9Q/s400/Your-picture-file-name.gif" />&nbsp;</a>

Notice the part in bold, ie the href="CONTENTS"

Replace this with the URL that you would like your readers to go to when they click on the picture.
For example, if you want them to be taken to Google to do a search, the code would look like:

<a href="www.google.com" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqkhV0hm0z_1yfRFJk1HIRj_tuD1wJvcqZ9pn_MldyGx5ME9E17_iYN46s09ZQ7tRAWR_CJE-Sr0XHwGSKhPJqIhmb31_LiAq4AYZ_030LFrcUM6i7aOw17HJxCHR5jEDS94kisKdjTv9Q/s400/Your-picture-file-name.gif" />&nbsp;</a>

By default, clicking the picture will take your visitor to the link you give in the same window.   But if you would like it to open in a new window, add target="_blank" to the code too, like this:

<a href="THE URL TO GO TO" target="_blank" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqkhV0hm0z_1yfRFJk1HIRj_tuD1wJvcqZ9pn_MldyGx5ME9E17_iYN46s09ZQ7tRAWR_CJE-Sr0XHwGSKhPJqIhmb31_LiAq4AYZ_030LFrcUM6i7aOw17HJxCHR5jEDS94kisKdjTv9Q/s400/Your-picture-file-name.gif" />&nbsp;</a>

Go back to Compose mode (so you don't get confused next time you edit a post)

Remove the marker text, if you used any.


Some more things to think about:  

Will your readers realise that they should click the picture?   Unless it says "click me", some of them won't - and if they're used to Blogger, they may just expect to see a larger version of your photo.   So it might be a good idea to add a caption, or even some instructions in your blog to tell them to click the picture.

Also while you're editing the code, you might also like to add some alt-text to your picture link too, to make your blog more friendly for readers who use screen-reading tools, and for search engines / SEO.


What you will see:

At some times in the past, when you added a link a picture and then hovered over the picture in the post editor, your would see a double-row of in-post editing options:

• one row had the usual options for editing pictures (which lets you set the picture size, alignment and caption)
• one row had the usual options for editing links (with options to go-to, change and remove the link.

Today, as I'm writing this post using the new-interface editor, I can only see one row of options in hyperlinked pictures - so I need to edit the HTML again if I want to change or remove the link.


But it's quite possible that this is a mistake and that you can see the two rows of options in the old-interface editor, and that it will be added back to the new one too.    Fingers crossed.


What your readers will see:

When you readers look at a picture that you have linked to somewhere, it will seem just the same as any other picture.

For example, the picture to the right of this paragraph looks just like the one one at the top of the article.  But when someone clicks on it ...

Go on, click this one yourself, to see what happens!


(Acknowledgement: public domain image from Wikimedia Commons)

---

Related Articles:



Adding a picture to your blog

Making your blog friendly for search engines and screen-reader software

Stopping pictures from being able to be clicked

Aligning text and pictures in blog-posts

Integrating Picasa and Blogger

You can set your blog up so that all clicked links open in a new page.  But this is not a good idea if you are an AdSense publisher - this article explains why.

Making links open in a new tab

Sometimes, you need to refer to outside material in your blog:  your ability to quote it is controlled by copyright laws, so you may need to link to an outside source, rather than quoting it in full.

Blogger's Post Editor has a tool for changing some text into a link - and it's been much easier to use since they added a check-box turns the "open on a new tab / window"  option on/of.   If you tick this option, then the post-editor automatically adds target="_blank"  (the HTML code for this) to your link.

For example

< a href="www.blogger-hints-and-tips.blogspot.com"> Blogger-HAT's Home Page </a>

becomes

< a href="www.blogger-hints-and-tips.blogspot.com" target="_blank"> Blogger-HAT's Home Page </a>

Doing it automatically

Occasionally there are requests in the Blogger Help Forum like

"How can I make all the links in my blog open in a new window" 

These often cone from people new to Blogger who, understandably, want to keep the traffic on their site.

There are ways to do this, provided you're willing to accept the disadvantages of editing your template - this explanation shows how to do it.    Although this approach works, the advice in the help-forum usually includes a warning to think very carefully about whether you really want your visitors to see a new page whenever they look at your own "about" page or one of your older posts.

Another option is to set the blog up so that only external links (ones to pages outside your own URL) open in a new window - one way to do that is described here.
But there is one issue that's often not mentioned:  the relationship between this command, and the terms and conditions of other tools that you may be using on your blog.

It's not a good idea for AdSense publishers

The last time I read AdSense's terms and conditions, it was very clear that when a user clicks on an AdSense ad in your site, the ad must open in the existing window:  advertisers are paying for your viewers full attention, not to have them still thinking about YOUR website!

I'm no lawyer, but it seems clear to me that setting your links to automatically open in new pages would be a clear violation of this.

So based on this, I would recommend that

If you use AdSense,
Then don't install auto-new-page code into your template, and check that any 3rd party templates that you use don't have this feature either.  

If this advice worries you, you may like to use an alternative advertising programme:  it seems that Chitika, at least, does let you customise your ads in this way.

It's fine to open individual links on a new page - just don't do it for all of them.


Disclaimer:  this advice is based on my interpretation of the Terms and Conditions.   Caveat emptor.  Always read the terms and conditions yourself,  every publisher is responsible for making sure that their site complies.

---

Related Articles:

Setting up AdSense on your blog

Alternative advertising programmes

Copyright, blogs and bloggers

Advantages and disadvantages of editing your template

Extra customization of Chitika ads

Other tools you may like to use on your blog

The snippet and thumbnail attributes now appear to be available for all Blogger posts, even though they're not documented in Blogger's official list.  This article shows documents what I've found out about them.

"Fields" in Blogger:

Many people are used to computer systems that are based on databases which have rows (records) and columns (fields).

Blogger use a database, which has tables and fields.

But instead of record.field notation, Blogger templates use XML tags to access the data  that make up blog posts.

This means that Blogger templates can be made up of statements like this:

<b:if cond='data:post.title'>
      <h3 class='post-title entry-title'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h3>
    </b:if>

This basically says "If the post has a title, and if it has a link, then show the title value linked to the URL.   If it just has a title but no link, then just show the title.   Otherwise don't show anything in this spot.   And if something is shown, format it with the header-3 style."

A list of the tags (much like fields or attributes in other programming languages) that Google has told us about is available in this help article (I have a link to it in the "handy tools" section of the sidebar).

But recently people have noticed two new tags that are not included in this list, and have started writing Blogger tweaks, hacks etc to make use of them.   They are are

• data:post.snippet
• data:post.thumbnail

I haven't been able to find any official documentation about what these tags refer to.

But I have done some investigations in a test blog    (by altering the template to explicity show these things, and then making posts with particular possible values.    And this is what I've found.

Post.Snippet

If a post has a jump-break before character 140, then the snippet is all the text before the jump-break.

But if the post does not have a jump-break, or it is after character 140, then the snippet is the first 140 or so characters.   (Line breaks are shown when the snippet is displayed, in Blogger, but they are not included in the character count).

Currently, the only way to control what is in the snippet is to put the contents at the start of the post.  There is no other way to edit it.    (You may notice that all the posts in Blogger-Hints-and-Tips start with a paragraph or two in bold.   This is how I flag the "snippet" code to myself.)

Post.thumbnail

I haven't been able to work out the rules for this item by testing options.   So far I know that:

• Not every post has one, sometimes it's blank even if there's an image in the post
• It's not automatically the first image in the post
• It's not automatically the last image in the post.
• It's not the automatically the biggest image in the post.

I now strongly suspect that it's the first image in a post that is both hosted in Picasa-web-albums and  over a certain size (possibly about 18kb).

What your readers see:

Unless you edit your blog template to use these values in a visible way, then your readers will not see anything different about your thumbnail and snippet - they just look like regular parts of the post.

But there are some specific ways that you might to use them, including:

• Setting the post-description meta-tag to the value of post.snippet
• Editing the template to only show the snippet or thumbnail on certain types of pages.

And if you allow your visitors to see your blog using Dynamic templates, then I'm 99.9% sure that the post.snippet is the picture used to represent your blog in some of the more graphical formats.

Using the post.thumbnail and post.snippet tags

If you are happy to accept the disadvantages of edit your blog's template, then you can show the snippet and thumbnail anywhere inside the blog post area.

The code to use to display them is:

<data:post.snippet/> - for the snippet, and

<img expr:src='data:post.thumbnailUrl'/>  - for the thumbnail

You need to put the thumbnail into an image tag because, of course, it is an image.

Do you have any more information?

In this article, I've shared what I have found out about these two fields by doing some testing.   But it's likely that I've missed some things out.

Have you been able to find, or work out, any more detailed rules about what post.thumbnail shows?

What else have you found out about these tags - or any other tags that are available in our blog-templates but not in the official list?

---

Related Articles:

Installing code into your blog

Centering gadgets in your blog.

What are dynamic templates

Advantages and disadvantages of editing your blog's template

Putting text and pictures side-by-side

This article is about how to show an email address in your Blogger blog.

Overivew

Previously, I've described the email address that is shown in the navbar when someone is reading your blog.

But there may be cases when you do want to display your own, or perhaps your company or club,  email address on your blog.    Lots of people warn against doing this because you could get lots of dodgy spam, but so far I haven't had problems on several blogs where I've done it (or maybe my ISP just has a good spam filter).

How you put an email address into your blog depends on where you want to put it, and whether you just want to display the actual address, or to display some other linked text that is set up so that when a reader clicks it, they are taken to their email system to send you a message.


Putting a linked email address into a Post or Page:

Edit the Post or Page in the usual way:

• In the place where you want the address to go, type it - eg  fred@frog.org.cc

• Select the address, and click the Link button on the toolbar

Most probably, Blogger will recognise that you've put in an email address, and automatically make the link as soon as your click the button.   eg   fred@frog.org.cc

If the link isn't automatically made, then the link dialog box opens.  In it, select the "Email address" radio button.

• Type the words you want your reader to see into the Display field.  

• Put the email address that you want messages sent to into the Link to field.

• Press Ok.

Later on, if you want to change the email address (eg if it was automatically made, and you want to change the words that are shown), just hover your mouse over the address, and choose "change" from the blue hover menu.


Putting a linked email address into a Text or HTML Gadget :


Putting an email address into a text or HTML-Javascript gadget is similar to putting it into a post, with one important change:

• Add the gadget the usual way - it can be either a Text or  HTML-Javascript gadget

• Type the words that you want your reader to see, 

• Select them and click the Link button.

• In the dialog box that comes up, delete "http://" that is there initially.

• Type in     mailto://THE-EMAIL-YOU-WANT-TO-USE and press OK

The HTML in the gadget now says

 <a href="mailto:YOUR-EMAIL-ADDRESS"> THE TEXT YOU WANT TO DISPLAY</a> 

(though you may not see this if you're looking at a text gadget).


Using an email address with a picture Gadget:


It's easy to have a picture on your blog, set up so that when a reader clicks on the picture they can send you an email.  :

• Add the gadget the usual way - choose the Picture gadget option

• Link to the picture-file in the usual way (either upload or select it from your Picasa-web-albums).

• In the Link field, type  mailto://THE-EMAIL-YOU-WANT-TO-USE

Once you save the gadget, the picture will be click-able, and when a reader clicks on it they will be invited to send an email message.


What your readers will see:

If you have put an email address into your blog in this way, your readers will see it as a link (or a picture, if you used this option).  It may be look like an email address, or it may look like something else if you have used display text.    For example, this phrase is linked to emailing fred@frog.org.cc

When your reader clicks on the link, they are taken to whatever system is set up on their computer / internet-browser for sending a new email message, and the the email address that you used is in the To box.

For example, my own computer is set up to use Microsoft Outlook, so if I click on a mail-to link, a new Outlook message opens, with the address filled in and my default signature included.

---

Related Articles: 



Understanding the email address that is shown in your blog

The Follow-by-email gadget - an easy way to add Feedburner to your blog

Putting HTML from a 3rd party into your blog

Setting up your custom domain (including your admin email address)

Tools for applying copyright protection to your blog

You can use the Post Editor to get the HTML code that you need to put a picture into your sidebar (or header or footer, or anywhere else a gadget can go).

Overview

The Picture gadget is the normal tool for adding a picture to your blog's sidebar.

But there are times when you want more control over the picture size or behaviour.  Eg, you may want to have two pictures very close to each other and guarantee that they're the same size.   To do this, you need to get the HTML code for the picture, and then put it into your blog.  Fortunately, Blogger's Post-editor make it very easy to do this without writing the code yourself.

Using the Post Editor to generate the HTML for a picture

1  Start a new Post  (you're not ever going to publish this:  it's just a work-area)

2  Don't enter any text:   just use the Picture icon on the toolbar to add a picture.   Blogger will prompt you to upload the picture, or to choose it from a Picasa-web-album, or to enter its URL:  add the picture the way that you usually would.

3  Switch to Edit HTML mode   (called HTML in Blogger-2011)
This will show you the HTML code for displaying the picture, as it is set to display in the Post (depending on the picture-settings you've chosen, it may be centered or right/left aligned, and the size may vary).

4  Copy the HTML.

5  Switch back to Compose Mode, called Compose in Blogger-2011), so you don't get confused the next time you edit a post.

6  Return to the list of posts:  you may be asked if you want to leave the page without saving - the answer is Yes.  Or you may have a new draft-status post, which you can delete.

You can now paste the HTML code that you copied into into an HTML/Javascript gadget, or anywhere else that you may need it - even into another post that you are editing in a separate window.

---

Related Articles: 

Stopping pictures on your blog from being "clickable"

What are Picasa-web-albums?

Finding the URL of a picture that's stored in Picasa-web-albums)

Inserting a Picture into a blog Post.

Putting 3rd party HTML into your blog

Center-align the gadgets on your blog

Hosting pictures outside of Google / Picasa

Inserting a picture into your blog as a gadget

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 </head> statement

3  Put the code immediately before </head>, using this format:

Related Articles: 


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 centering gadgets from 3rd parties that you install onto your blog.

Previously, I've described how to put HTML code from a 3rd party into your blog.

When code like this is put into a gadget, one common question is "how do I center it?"

There are (at least) three options for doing this.

Option 1:   Centre all the gadgets in your blog

To do this, add a CSS rule to your blog.  The rule to add is:

.widget {
  text-align: center;
} 

This will centre the contents and title of every gadget on your blog.

Option 2:  Only center-align the specific gadget

Put the code from the 3rd party (eg PayPal, Amazon, etc) inside a centering statement, like this:

<div style="text-align: center;">

PUT THE CODE FROM THE 3RD PARTY HERE

</div>

Install the code into your blog the way you would usually install this 3rd party code.

This will centre-align the contents (not title) of the specific gadget that you add.

Note the American spelling of the word "center" - and don't forget to put the closing </div> statement at the end.

There may be some gadgets where it would be possible to add the centring statement to the gadget code itself, rather than putting it outside.    I don't recommend this (unless you're so comfortable with HTML and CSS that you don't need to be reading this article), because it introduces a risk that you will interfere with some other aspect, or that you will lose the centering if you ever need to refresh the code.

Option 3 - Make a new style rule just for the gadget

Define a new style that is to be used on specific gadgets:  put this new style into your template, and then apply it to the gadget like this.

<div class="YourNewSytle">

PUT THE CODE FROM THE 3RD PARTY HERE

</div>

This approach will only centre the gadget contents - not any header that you give to it.

There are lots of options that you could put into the new style rule, but at a minimum it needs to have

.YourNewStyle
{
  text-align: center;
}

Notice that there is a "." (ie a full-stop) before the name of your new style.

Also, it's best not to use a number as the style-name (eg "2nd-gadgetStyle"), because this doesn't work with some browsers.

---

Related Articles: 

Putting HTML code from a 3rd party into your blog

Adding a new CSS style into your template

Centering the header in your blog

Putting a gadget above your blog's header

Removing the attribution gadget from Designer-template blogs 

This article is about lining up text and pictures side-by-side in your posts - and about how to add a "break" so that some text goes beside a picture and some goes underneath it.

The post editor's picture menu:

When you have put a picture into a post  in Blogger, (either using the Insert-picture option on the toolbar, or by adding the HTML for it some other way), the Post Editor gives you options for picture size, and for aligning the picture to the left, right or centre. 

You cab see these options by clicking on the picture.  This opens a "mini-menu" under the picture, like this:



This one mini-menu has options for:

Size	Options are small, medium, large, extra-large, and original-size
Alignment:	Options are left, right and centre (default is center)
Caption:	Add caption, and Remove
Properties:	Where you can add the hover-title and alternative-text for the picture
Remove:	Taking the photo totally out of the post

The alignment options:

When you first add a picture, the alignment is set to "center".

Choosing Left or Right moves puts the picture to the far side of the post and, if the picture isn't as wide as the window it's being displayed in, the text that was after the picture fills up the space on the other side - like this:

Stopping all the text from flowing around the picture:

Many bloggers want to have pictures left or right aligned, and to have some words showing beside the picture.

But they also want to control what text is shown beside the picture, and what text doesn't start until underneath it.   Many people spend a long time putting extra lines into their posts, so that the text and pictures are set up in a way that's "just right" - and then they're disappointed when they publish the post and their hard work is all lost, because the screen is wider and more text fits into the area beside the picture.

There is a very easy way  to control this.  You just need to edit the HTML that is behind the post.  Luckily, this is very easy to do:

1  Put some place-holder or "marker text" where you want the flowing-text to stop.
(eg BREAK HERE  or  XXXXX  - use some words that won't be anywhere else in the post)


I've made it bold and with a yellow background to make it show up in the picture - but I don't recommend that you do this, because it makes it harder to find and replace exactly the correct text later on.

2  Choose the HTML option (top left or top right of the post-editor screen, depending on which version of blogger you are using).

3  Find the place-holder text
(hint:  use your browser's search function - in Firefox, it's Edit > Find)

4  Replace the place-holder text with this code:

<div class="separator" style="clear: both;"> </div>

5  Choose the Compose tab  (to get back to the regular post-editor screen).  The text after where the marker text was is now underneath the picture - and it will be there when you publish the post, too, no matter what size of screen your reader has.

Troubleshooting:

Extra blank lines:

At the bottom-left of the post-editor, there is a link for Post-Options.  Clicking this opens an options panel, where you can choose what effect line-breaks (ie pressing the "enter" key) have.   I always put it on "Use <br /> tags", so that I can put extra empty lines into the HTML to make it easier to read.   If it's on "Press Enter for line breaks", then each extra line put into the HTML will also show up in the Compose-mode view, and in the final post.

Editor versions:

The pictures and instructions in this article are based on Blogger's "updated" post editor, not the old one.  The technique will work in the old editor too, but things may look a little different.

---

Related Articles:

Stopping pictures on your blog from being "clickable"

Getting the HTML code to put a picture into your blog

Putting HTML from elsewhere into your blog

Telling Google about the pictures in your blog

Inserting a picture into a blog post

Applying hover-text to pictures

Tools for applying copyright protection to your blog

This article is about why and how to attach keywords and related text to the pictures in your blog posts.  This is helpful for both search engine optimisation (SEO), and for making your blog accessible to people who use screen-reader software.

Pictures and your blog

Blogger has a set of tools for putting pictures into your blog, including several options for putting images into posts or gadgets. 

In most cases, the other content in each post provides enough information for Google's indexing tools to know what the post is aobut.

But if your blog mainly has photos, your posts may not have enough key words to get properly indexed.  And even if the image-indexing tools do some auto recognition, a description of a picture written by a human being  will almost always be better.

Also, if your blog-viewers may include visually impaired people or others who use screen-reader software, you need to think about how well your content will work for them:  if you put key information inside images but not in the text, then they won't be able to get this information in any way.

These two good reasons for adding "alternate text" to your pictures - and there may be more.

What's even better is that Blogger now has a tool for to make it easy to fix this.

How to add captions and alt-text to your pictures

Add the picture to your Post.

In Compose mode, float your most over the picture.   This will show the picture-editing-toolbar, like this:



Choose the Properties option.

This opens a dialog box where you can enter

• A title - this is shown when a visitor hovers their mouse over the picture
• Alt text - this is kept in the background, and only displayed to people who (for whatever reason) cannot see the picture.

What your readers will see

People who read your blog on line, either with a standard browser or an RSS feed reader, won't see anything different, until they hover over the photo.   When they hover, they will see the text you put into the Title field.


People who read your blog in their email (because you've offered a subscribe-by-email option) may see the alt text instead of the picture, depending on what setting they have in their email system.


People who use screen reader software will have the text that you added read out to them in the usual way that their software works.

And most importantly, search engines will see the text you added, and hopefully the will use it in indexing your post.

Other Alternatives:

Picasa and Picasa-web-albums captions can be included in slideshows (provided you don't use the Blogger gadget), but aren't included with individual pictures. 

And the Post and Pages editor also has an Add Caption option on the photo toolbar, although I only recommend using  if you're comfortable editing HTML, because it puts the picture into a table, and so to move it inside the post you need to edit the code, not just drag-and-drop it.

---

Related Articles:

Tools for putting pictures into your blog

Addingng a Picasa slideshow to your blog

Tools for applying copyright protection to your blog

Why RSS/Subscribe to Posts is important for your blog.

Adding a subscribe-by-email option to your blog

This article is about how to stop people who read your blog from clicking on a picture and seeing a full-size copy of it.




Currently, if you put a picture into a blog post using the Picture toolbar item, and someone reading your blog clicks on that picture, then the person sees a full-size copy of the picture.   There is no universal setting that you can apply to stop this happening, or even an easy way to stop it for specific pictures.

But you can stop it for each picture in a post by editing the HTML that is behind the post and removing the href part of the picture statement.   If you're not sure what that means, read on.

Making a picture "unclickable"

1  Put the picture into your post in the usual way.

2  Find some unique text that is immediately before (or after) the picture - you will use this to locate the HTML for the picture among all the other HTML used to make up your post.
Sometimes, I put "XXX" or some other marker text (ie text that isn't used anywhere else in the post) just before it  (and take it out again afterwards too!).

3  Click HTML - it's a tab at the top corner of the Post Editor window.

4  Find the unique text (use your browser's Find tool, eg Edit > Find in Firefox)  

5  Then find the HTML-code for the picture which will be just before (or after) that.    It looks something like this (some settings may be different in yours):

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTANdqbd2woQxV5jsxf1MHpyA0ECRsf-w6aRUrctpHISXcLOj6oDNNQ9Y5ca38Bsh_6ZTl5Htg2h_qN07h0V-6x-t8ZL-LAxJqAgzBylqNznDOZSeFNZFzlBpB7V5uTAJGCyjlcMG5awiE/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="235" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTANdqbd2woQxV5jsxf1MHpyA0ECRsf-w6aRUrctpHISXcLOj6oDNNQ9Y5ca38Bsh_6ZTl5Htg2h_qN07h0V-6x-t8ZL-LAxJqAgzBylqNznDOZSeFNZFzlBpB7V5uTAJGCyjlcMG5awiE/" width="400" /></a></div>

That looks hard to read.   But if you break it down, it becomes something like:

<div class="separator" style="clear: both; text-align: center;">

<a

href="THE URL THAT THE USER IS TAKEN TO IF THEY CLICK ON THE PICTURE"

imageanchor="1" style="margin-left: 1em; margin-right: 1em;"
>

<img
border="0"
src="THE URL WHERE THE SOURCE PICTURE IS READ FROM"
/>

</a></div>

NB  provided you've selected "Use <br /> tags" under Edit HTML Line Breaks, then you can add extra new-lines, to make the code easier to read.

6  To make the final picture unable to be clicked, you need to remove the part of the HTML code that says:   

href="THE URL THAT THE USER IS TAKEN TO IF THEY CLICK ON THE PICTURE"

So that the eventual code for the picture looks like:

<a

imageanchor="1" style="margin-left: 1em; margin-right: 1em;"
>

<img
border="0"
src="THE URL WHERE THE SOURCE PICTURE IS READ FROM"
/>

</a>

Job Done!

At this point, you might Publish your post, or you might want to edit it some more - for example by adding alt-text or a title to the pictures, or by showing your pictures in a slideshow.

Either way, I recommend switching back to Compose mode now (using the Compose button at the top right of the editor), so that you don't get confused the next time you edit a post.

---

Related Articles:

Putting a picture into a blog post

Telling Google and visibly-impaired people about the pictures in your blog

Tools for applying copyright protection to your blog

Hosting pictures outside of Google/Picasa

Creating a button that links to your blog

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

Overview

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

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

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

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

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

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

• Copy the code from the third-party site.

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

• Paste the code into the Contents field.

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

• Press Save.  

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

• Save the layout

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

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

Option Two: Put third-party code inside a post

• Copy the code from the third party site

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

• Switch into HTML mode

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

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

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

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

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

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

---

Related Articles:

Editing your blog's template:  advantanges and disadvantages

Types of blogger template

Enabling a mobile template for your blog

Choosing which gadgets are shown on your mobile-template view

Blogger and other Google products

Blogger and some key non-Google products

Amazon integration with Blogger

Putting Chitika ads onto your blog