Putting a picture on your blog as a Gadget

You can put a picture anywhere in your Blogger blog that you can insert a gadget - and you can make it link to a post in your blog or to any other website.

The Image gadget

Dry dock in Claddagh Basin

A very simple way to put a picture into your blog is to use an Image gadget (previously called a Picture gadget).

This is a tool that Blogger provides to make is easy to add a picture that shows up on all screen and is linked to somewhere.

Often gadgets (sometimes called widgets or page elements) are put on the sidebar - but in many blogger templates they can go in other places too (header, footer, etc).

Follow these steps to add a picture gadget in Blogger

1  Make sure you know where the original picture is and that you have copyright permission to use it.

2  Copy the location (URL or file system full path-name) of the picture - and remember whether it's on your computer, or on the internet.
(This article tells you how to find the URL of a picture that's already stored in Google Album Archive. )

3  In Blogger, follow the usual Add a Gadget procedure, and choose the Image gadget from the list of options (you may have to scroll down to find it in the list).

4  In the Configure-Image box, enter the options you want for your picture.   These include:

• The title for the Gadget,
• The caption for the picture
  (the small words that go underneath it, usually explaining it, or where it came from),
• What should happen when a reader clicks the picture - put this into the Link field
• Where to find the picture
  (ie the file-location that you copied in step 2)
• Whether to re-size (ie shrink) the picture to fix the space in the sidebar in your current template.

5 Press Save.

6  If necessary, drag-and-drop the new gadget to the place where you want the picture to go, and press Save.

What your visitors see

People who visit your blog in a web-browser, will see the picture, in the place where you put the gadget.  However pictures are not supported gadgets for dynamic view templates, so it won't be see if you use one of these.

Also, people who see your blog through an RSS reader, or by receiving emailed updates don't see any gadgets, so they will not see the picture.  

If you entered a value for Link, your visitor's browser leaves your blog and goes to the Link location:  with the Picture gadget, then there is no way to make this open a new window.   If you want to do so, then use an HTML gadget instead, get the code for the picture, and put target = "_blank"   into it:, so the code looks something like: 

<a href="YOUR LINK" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target = "_blank"><img border="0" src="YOUR PICTURE LOCATION" /></a>

---

Related Articles

Options for putting pictures into your blog

Copyright, blogs and bloggers

Picasa and Blogger - an overview

Getting the HTML to add a picture to your blog

Finding a picture's URL in Google Album Archive

Finding the URL of a picture stored in Flickr

Showing a PowerPoint presentation in your blog

Why RSS / Subscribe to Posts is important for bloggers

Following a blog by email

Delete, change or re-format the "Showing posts with label" message.

This article explains options for deleting, or changing the content or formatting of Blogger's "Showing posts with  LABEL.  Show all posts" message and it's ugly grey box.

If your blog has a Layout or Designer template, then when a person who is reading it chooses a label value, Blogger displays a page with (a summary of) your most recent posts with that label.

If there are more posts that Blogger is willing to show on one page, then there will also be "older posts" and "newer posts" links at the bottom of the page.

And - unless you have removed it - there will also be a message at the top of the page saying "Showing posts with label yourLabel. Show all posts"

Reader actions that cause a visitor to see this message include:

• Clicking a value in your Label gadget

• Clicking a label value that is displayed in your post header or footer
  (unless you have turned them off in the Layout > Blog Posts edit option).

• Clicking a link that you have manually set up to show posts with a specific label (eg if you have used a Pages gadget to make a menu bar, and one of the options in it has a value like http://www.yourBlog.com/search/label/yourLabel?max-results=999

Unfortunately Blogger does not provide any way to customize or configure this message.
.
But it is easy enough to totally delete it, or to change the formatting, or to change the text..

How to delete the "Showing posts with LABEL" message

There are two ways that you can remove the "Showing posts with Label.   Show all posts" message.

Option 1:   Remove the code totally.   

To do this,

1  Edit your template in the usual way

2  Find the following text

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

3   Delete that text and replace it with

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

(If you just delete the text and do not put the replacement in, then it is possible that Blogger will add that section back in again later.)

Option 2:  Hiding the message using CSS

To do this, add  this CSS rule to your template in the usual way:

.status-msg-wrap,
.status-msg-body {
display: none;
}

(This approach is less risky because you do not need to edit your template, and because it's easier to change later.   But some people have reported that on their template, it has not worked.)

How to change the format of the "Showing posts with LABEL" message

Some people don't mind the actual  "Showing posts with Label.   Show all posts" message.   But they want to format it in a way that suits their blog's layout and colour scheme.

This is easily done, by adding some extra CSS rules to your template in the usual way.

To change the format of the message text, use rules like this:

.status-msg-body {

text-align: left;

line-height: 1.4;   

font-weight: bold;

color: red;

padding: 0.5em 0.3em;

width: 100%;

}

To change the grey-shaded background or the box:

.status-msg-wrap {
width: 100%;
margin: 0 auto;   /*  keep the auto statement if the width is less than 100%, so the box is centered */
position: relative;
}

There are a wide range of options - check with CSS reference guides for the options.   You may need to carry out some experiments with your template and how it looks with various options to decide on the best combination for your blog.

How to change the "Showing posts with LABEL" message

There are several ways that you can change the text in the "Showing posts with Label.   Show all posts" message.

Option 1:   Just replace it with some text

To show a sentence of your own instead of Blogger's standard message, 

1  Edit your template in the usual way

2  Find the following text

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

3   Replace the line in bold (ie <data:navMessage/> ) with your own words.

For example, you might say

<b:includable id='status-message'>

<b:if cond='data:navMessage'>

<div class='status-msg-wrap'>

<div class='status-msg-body'>

Posts in this category include (use the Older Posts link to see previous posts):

</div>

<div class='status-msg-border'>

<div class='status-msg-bg'>

<div class='status-msg-hidden'><data:navMessage/></div>

</div>

</div>

</div>

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

</b:if>

</b:includable>

To show the searched-for label value in your message, you need to use the   <data:blog.searchLabel/>   tag. For example, you might say

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
Posts about <data:blog.searchLabel/>  include (use the Older Posts link to see previous posts):
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Note:  if you are going to use this tag, then you need to choose your label values very carefully, so that they all make sense.   For example, in one blog I have some posts labelled "For quiz organizers" and others labelled "Finance", "Organisation" etc.    There is no way that I can write a sentence including the labels that makes sense for both of these.

---

Related Articles:

Types of Blogger template

Using Labels to categorize your posts

The Pages gadget is a menu bar for Blogger

How to edit your Blogger template

How to add a new CSS rule to your blog template

Adding tooltips or hover text to Blogger posts and gadgets

This article is about putting a "tooltip" (text that is shown when you hover over) into something (eg text, a web-address or even a picture) in a Blogger post or gadget.

What are tooltips?

Tooltips are a feature found in many websites and modern computer based software:  when a viewer hovers their mouse over an item, a small piece of text is shown, generally formatted in a box which is highlighted in some way.

They can be used for all sorts of things, to provide definitions of technical or foreign-language words, additional information about particularly interesting concepts - or as an incentive or invitation to take an action  eg you could tool-tip "click here to enter" with a description of the prize or benefits of entering.)

You can see them in Blogger's Post Editor when you put your mouse over an item in the toolbar.

But tool-tips can be used on other things too, including pictures and text: put your mouse over This Text to see one.

They can be particularly useful if you want to provide a translation for a few words from another language, or a definition for technical terms, but don't have enough to make a glossary worthwhile.

How to add a tool-tip in Blogger

Open the Post (etc) that you are working on.


Create the item that you want the tool-tip to be on (it may be text or a picture).


Select the item, and use the Link button on the toolbar to set up a link for it.  (Do this even if you don't want it to end up linked to anything - you can remove the link part alter on.)


Go into HTML mode (top right side of the editor toolbar), and find the HTML for the item.  
Hints:

• Use the find feature in your brower - it may be helpful to temporarily put some marker text just before and after the item.

• If you want to put a tooltip into a text gadget - just put the text into an HTML gadget instead, and that way you will be able to work in HTML mode.

• The HTML for the item will have this sort of structure:
  

  <a href="Your Link" > Your item text ... </a>

  or it may be like this if your item is a picture:
  

  <img border="0" src="URL FOR YOUR PICTURE" style="margin-left: auto; margin-right: auto;" />

  or even like this if it's a picture that's linked:
  

  <a href="Your Link" img border="0" src="URL FOR YOUR PICTURE" style="margin-left: auto; margin-right: auto;" </a>

Add  title="YOUR HOVER TEXT" to the HTML, so it becomes something like:

<a href="Your Link" title="YOUR HOVER TEXT" > Your item text ... </a>

or, if the item is a picture:

<a href="Your Link" img border="0" src="URL FOR YOUR PICTURE" title="YOUR HOVER TEXT" style="margin-left: auto; margin-right: auto;" </a>

If you don't want the item to be linked, remove the href="Your Link"
part of the statement, so the HTML becomes similar to:

<a title="YOUR HOVER TEXT" > Your item text ... </a>

or, if the item is a picture:

< img border="0" src="URL FOR YOUR PICTURE" title="YOUR HOVER TEXT" style="margin-left: auto; margin-right: auto;" />

If you're working in the post-editor, return to Compose mode (top right of the Post Editor window), so that you aren't faced with HTML the next time you edit a post.

Formatting unlinked text that has tooltips.

If you put hover-text on words that aren't linked to anything, it's good to give them a different format so that readers know to mouse-over them to see the hover-text.    For example

When you visit Ireland, you will undoubtedly experience rain, ceol and great craic.

To do this:


1   Add this CSS rule to your blog's template  (See Adding a new CSS rule to your template if you need help with this):

.toolTippedText {
   border-bottom: 1px dotted red;
}

2   While editing your Post (etc) to add the hover-text, also add this class statement

class="toolTippedText" 

to every URL which has title="YOUR HOVER TEXT" added to it.  So the full statements become

<a href="Your Link" title="YOUR HOVER TEXT" class="toolTippedText"> Your item text ... </a>

or, if you don't want the text to actually be linked to anything:

<a title="YOUR HOVER TEXT" class="toolTippedText"> Your item text ... </a>

It probably doesn't make sense to add a font-decoration like this to tool-tipped images - though it can be done in exactly the same way.


If you don't like using red dots as the way to highlight text that has hover-text, there are other rules you can add to your template.  For example to get a solid underline in the same colour as the text font, use:

.toolTippedText {

 text-decoration:underline;

}

There is more information about some of the options for formatting a line in this article.

---

Related Articles:

Adding a new CSS rule to your template.

Adding a horizontal line between blog-posts - including CSS line formatting options

Using marker-text to find places in your HTML

The "follow by email" gadget: an easy way to add an email subscription to your blog

Blogger have made it very simple to offer an email-subscription to your blog, with the "Follow by Email" gadget.  This article describes adding it to your blog, and how it works for your readers.

Previously, I've explained why RSS is important for your blog, and how to give your blog a subscribe by email option using Feedburner.

The Follow by Email gadget that Blogger provide makes this even easier:  you can add an email subscription option to your blog by following these steps:

How to add the Follow by Email Gadget

1. Log in to Blogger
   Use a Google account with admin rights to the blog, and which you want to use to get statistics about your email subscribers.
2. Go to the Design tab
3. Select Add a Gadget in the area where you want to put the email subscription option
4. Choose Follow by Email (it's current at the top of the list)
5. Enter the title that you want displayed on your blog (initially it's "Follow by email")
6. Press Save.

This puts the gadget onto your blog.  But there are two more things that you should do:

• Check that your blog's RSS feed is enabled: it should be either "Full" or "Until Jump Break", not "None".  You need to do this because the Follow-by-email tool will only send out emails if your feed is turned on.   

• Subscribe to it yourself- by entering your own email. 
  This isn't absolutely essential - the tool works even if you're not signed up to it.   But it's a good idea to try to see your blog from the reader's perspective.  
  And some items in your posts (eg slideshows or PowerPoint presentations) may not work as expected in the emailed version - and you won't know about it unless you're getting the emails.

What your readers see:

On Your Blog:

 

The Follow by Email gadget looks like this:

The title was set when you were adding the gadget:  you can change it by editing the gadget in the usual way.

The background colour, button colour, title underline and font are based on the settings for your theme:  you can only control them by editing the gadget colours in your theme.

You cannot put text immediately before our after the place where people can enter an email address:   though you could put a text-gadget before or after the Follow-by-email gadget.

When they enter an email address:

When your visitor enters an email address and presses Submit, a new window opens:

This window:

• Welcomes them to Feedburner
• Acknowledges their Google account, if they are logged in at the time - remember, not all your visitors will be Google users
• Tells them about the feed that they are asking to subscribe to
• Warns them that a confirmation message will be sent to the email address they entered 
  "will receive a verification message once you submit this form" and that "FeedBurner activates your subscription to ... once you respond to this verification message"
• Asks them to solve a text-catpcha puzzle, to prove it's a real person (not a computer) setting up the subscription.

The colours, design and content of this window are totally controlled by Feedburner.  You can't influence them in any way.

After the anti-spam-test is successfully completed, a second screen opens.   This tells the reader that

Your request has been accepted! Please check your inbox for a verification message from “FeedBurner Email Subscriptions”, the service that delivers email subscriptions for <<your-blog-name>>. You will need to click a link listed in this message to activate your subscription. If you dont see a confirmation e-mail in a reasonable amount of time please check your bulk/spam folder.

Again, you have no control over the color, format or placement of this window, it is totally up to Feedburner.    You also don't control the message text, which many people are likely to ignore.

In their email in-box, today:

Your potential subscriber gets an email from Feedburner, usually within 2-10 minutes, asking them to click a link to complete the subscription process.

• If they click the link, they become a verified subscriber.

• If they don't click the link, then they stay on the subscribers list as unverified.

You can customize the "click the link to subscribe" message, using some fairly simply settings in Feedburner.  

In their email in-box, when you post:

On days when you have posted to your blog, every verified subscriber is sent one email message, with all your posts during the day.

The message may include the full post or just a summary, depending on what settings you have for your blog's RSS feed  (Settings > Site Feed > Blog Posts feed).

Feedburner provides a number of options for controling how this email looks, and when it is sent:  see the Publicize > Email Subscriptions > Email branding tab in Feedburner for these.    (full article coming soon).

More information about the gadget:

This new gadget has been widely requested, and is an exciting addition to Blogger.  But there are some challenges with it, which are discussed in Understanding the Follow-by-Email gadget.

You can get a list of the people who have signed up to receive your blog-posts by email - be aware that this is all people who have subscribed, not just ones who used the widget.

What happens if you delete the widget

Even if the follow-by-email gadget is deleted from your blog (by accident or deliberately), the Feedburner subscription that it created, and the list of people who have subscribed, is still kept in Feedburner.

However to add the gadget to your blog again, you need to use Feedburner's gadget tool to make sure that you access the feed that you created when you added the gadget the first time around.

(Thanks to reader +Mary Bostow whose question got me thinking about this.)

---

Related Articles:

Why RSS is important for your blog,

How to get a list of people who are subscribed to your blog by email

An alternative to "Follow-by-email":  giving your blog a subscribe by email option using Feedburner.

Customizing Feedburners verification message

Removing the label values from the blog-post header or footer

This article explains how to stop label values from showing in the header or footer lines for each post in a blog that is made with Google's Blogger.

If you have used the Labels / Page-gadget approach to putting your blogposts into separate pages, then each of your posts will have one or more Labels attached to them.

Most Blogger templates are set up so that these label values are shown with the posts, too, in either just underneath the post-title or in the post-footer. And when a reader clicks one of these post-specific label values, they are shown a "post-listing format" blog page, which includes (the first part of) all posts which have that label.

However some people want to stop their blogs from displaying this these label values perhaps because:

• They want their blog to look more like a real website
• They are using some labels which are meaningful to them as administrators but not to readers (eg at the moment, I'm using a label "ZZZ - needs 2013 review" to identify posts that I need to check to make sure they're up to date.
• They just don't like having the label list shown for each post.

Note that you can select which Label values are shown in the Label gadget, but there is no way to do this in the label list shown for each post.

How to turn off the list of labels shown with each blog-post

Log in to the Blogger dashboard with an account that has administrative rights to the blog


Choose Layout from the options for the blog


Locate the Blog Post gadget in layout screen, and click the Edit link for it.


In the list of options that is shown, un-tick the Labels option


Save the changes, using the Save button (currently in the bottom left corner)


Click the Save Arrangement button for the layout (currently in the top right corner of the layout editor).



Job done! The next time anyone looks at your blog, the list of labels for each post should not be visible.

Troubleshooting

Sometimes, changes that are made in the Blog Post gadget don't appear to have been applied when people look at your blog. For example, the labels may still be shown for each post, even though the Labels check-box is turned off.

If this happens, the most likely cause is that your post template (ref: parts of a blogger blog) has become corrupt. The only ways I know to fix this are to either

• Change to a different template:
  This needs to be a total change, eg Simple to Picture Window, not just changing from one to another option within the same template.
• Resetting the blog-post gadget - described in detail here.

The disadvantage of of either of these approaches is that customizations you have made to your blog are lost - this can be easy to forget when your customizations include important-but-more-subtle things like ensuring your Analytics profile gets Adsense data or installing Facebook Open-Graph tags - or just plain annoying if you have put sharing buttons into individual posts, and have to re-instate these

---

Related Articles:

What are the components of a Blogger blog

How to put posts into pages in blogger

Labels: a way to categorize Blogger posts

Posts and Pages - navigating while you are reading a blog

Making a blog look like a real website

AdWords external keywords research tool is going to be retired

This quick article shares an observation about the likelihood that Google's free Keywords Research Tool is being turned off.

Most SEO advice says that if SEO is important for your blog, then you should use a keyword research tool to find out the words and phrases that people are actually searching for, and then use these words (so-called "keywords") a lot, because they are most likely to get more visitors for your blog.

There are many tools that can be used to look for keywords, but Google's own keywords research tool is often recommended:  it's free, and no one knows more about key-words than Google does.

The tool is provided as part of the AdWords product (ref AdSense vs AdWords what's the difference).

Usually, you need to sign in to an AdWords account to use their tools.   An AdWords account may be based on your usual Google account, but because it can be used to buy advertising, Google ask you to put a small amount of money into it, so you can use it to pay for advertising campaigns immediately.    (They don't charge you immediately, they just want your account to have a positive balance, so it's able to be used.)

However their Search-based Keywords tool (announced back in 2009) and it's upgraded version, the Keywords-tool ( http://www.adwords.google.com/keywordtool or https://adwords.google.com/select/KeywordToolExternal - both which currently re-direct to https://adwords.google.com/o/Targeting/Explorer?__c=1000000000&__u=1000000000&ideaRequestType=KEYWORD_IDEAS ) have been available without logging in, provided you complete a simple captcha-text .

Today, though, I've noticed this announcement at the top of the page:

In the coming months, the external Keyword Tool will no longer be available. To get keyword ideas, sign in to your AdWords account and try Keyword Planner.

I cannot see any announcements about this in the AdWords blog.   But this actually has very little information about the keywords tool anyway, most of what is there dates from 2008/09, and they haven't used "keyword" as a label for their posts.  

Google aren't in the habit of putting up notices like that which are wrong, so my guess is that, sooner or later, this tool is going to be removed, and their only keywords-research option will be the Keyword Planner, which isn't free .

So maybe it's time to start finding a new favourite free keyword research tool.   Some reviews to get started with:

• Search Engine Land:  Three Free Keyword Research Tools
• 22 Free Keyword Research Tools

Or maybe bloggers should just forget about keyword research, and focus SEO-basics, and then on writing good quality, natural-language, unique content.

---

Related Articles

AdSense vs AdWords what's the difference

 Five reasons why SEO is irrelevant for your blog

Getting started with SEO for Blogger users