php tutorial for beginners Introduction to php

Watch this on YouTube

                      

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

Add Keyboard Keys Effect To Your Text in Blogger with CSS

For many of us the design and the template are the most important, making our readers be more interested and coming back to our blog. There's an HTML element meant for marking up keyboard keys named <kbd> which can be styled with CSS, so why not use it to make those elements look the keyboard keys?

Thus, in this tutorial, I am going to show you how to create a keyboard keys effect with CSS. It doesn't require images so your blog will load faster.

How to Add Keyboard Keys to Blogger

Step 1. From Blogger Dashboard, select your blog and go to Template > Edit HTML

Step 2. Click anywhere inside the code area, press the Ctrl + F keys and search for this piece of code:

]]></b:skin>

Screenshot

Click on the arrow to expand the code

Step 3: Just above ]]></b:skin> paste this CSS style:

kbd{
border:1px solid gray;
font-size:1.2em;
box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
margin:2px 3px;
padding:1px 5px;
}

Step 4. To save the changes, press the Save change button.

Finally, we need to add the html <kbd> tags to the text on which we want to apply the keyboard keys style.
From your blogger's dashboard, go to create a New Post, write the text on which you want to apply the style and go to the HTML tab. Before and after the text, add the following HTML tags:

<kbd>Ctrl</kbd> + <kbd>F</kbd>

Screenshot

This will make it to look like this:

Ctrl + F

Quick reminder: Free The Monsters open game art crowd-funding

We talked about it before here, but now there is only about 2 days left and even though all funds go to the team regardless of if the goal is reached, they are still a long way off what then would need to create a nice set of openly licensed fantasy monsters.

So please head over to their indiegogo fund-raiser page: "Free the Monsters" and donate.

How to do natural SEO on Blogger

Although many insist that blogs hosted on free servers, such as Blogger, are not ideal for getting your blog well-ranked, the truth is that a blog hosted by Blogger can be really fast and well positioned on the Internet if you are using the right SEO tools.

Now, given the latest updates from Google, the best would be hiring a specialized person. However, if you don't have the resources or you want to learn doing this job alone, you can choose to begin with the natural SEO.

Here are some tips to do natural SEO (Search Engine Optimization).

Natural SEO Techniques for Blogger

Pick a Good Domain

We must try having our keyword included in the domain name, and even if this may sacrifice our branding, we can use the redirection.

Create Value Added Content

Not only rewrite articles, or write like they would be intended for us. When writing our posts, we should consider our target audience, i.e., giving advices, tips, suggestions or guidance on specific topics and aside, use links, anchor text and key phrases.

The topic of the links is important

They should be of quality and while, it's no longer required to place five or ten links within the text of your website, now what truly matters, is to make the link relevant to the context.

Finally, the domain, in value-added content and a right use of the internal and external links, will prove to be useless if we don't try to update our blog constantly.

How often should you update your blog?

You don't have to do this on daily basis, even if this may be ideal as, this way, we could achieve a greater relevance in search engines. But don't forget about your blog either. Let's say, two or three times a week would be enough. What should not happen is updating only three times a week and doing nothing next week.

Keep in mind that search engines happen to pass daily on our blog in order to index our content.

I hope that you find these SEO tips useful and if you would like to receive more tutorials by email, subscribe for free to this blog, check out the facebook page or add the RSS feed.