Creating Tooltip Popups in Blogger: Part 1

Sometimes it may be nice to have a popup Tooltip. These are common in Javascript, this is done however without using any Javascript.
The next couple of posts will show you though, how to create them using CSSCascading Style Sheet only.
Note the tooltips shown here are for display purposes only, none of them contain ads.

Drop Capitals in Blogger

aving a cursive text on your page, could look very nice.
The problem however, is that although you may be able to
set the style sheet to show it, the text may not appear the
same on all browsers. This lack of consistency across browsers
is a problem web designer’s deal with regularly.

ntil this problem is solved the best solution for consistent
cursive fonts, is to use an image as I have done here.
Although it may be time consuming, it may be just what your blog
needs to give it that special touch.
A dropped capital letter works in well, say with a poetry blog.

ollowing on from this problem. Blogger spaces the text that
follows away from the image. This is done by the default
style settings. The image padding is set to 1em, in order
for our text to look nice we need to reduce this.
This paragraphy I have left at it's default. As you can see
the paragraph does not look as nice as the previous two.

oving the text closer is achieved by editing the images html settings.
This is the default code for the letter ‘m’.
style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;
Em's can have a value, such as 0.1em, and even a negative value such as -0,2em.
I hope you may find this information useful!

Content edit

You can edit this post!

Top Five Blogs On The Web

1. one
2. two
3. http://ardansblogtalk.blogspot.com/

Changes will not remain when page is refreshed!

Placing a table inside a Blogger post: Video Tutorial

Notes in previous posts on this blog.

Test post used for video tutorial

My Fitness Journal
Monday	Walked 10 kilometers.
Tuesday	Paddled 20 laps of the pool.
Wednesday

Adding a table to a Blogger post

My Fitness Journal
Monday	RanWalked 10 kilometers.
Tuesday	SwamPaddled 20 laps of the pool.
Wednesday

This is the code:

<table>
<thead>
<tr> 
<th colspan="2">My Fitness Journal</th>
</tr>
</thead>  
<tbody>
<tr> 
<td>Monday </td> <td><del>Ran</del><ins>Walked</ins> 10 kilometers.</td> 
</tr>
<tr> 
<td>Tuesday</td> <td><del>Swam</del><ins>Paddled</ins> 20 laps of the pool.</td> 
</tr>
<tr> 
<td>This is where the image date was pasted 
</td> 
</tr>
</tbody>
 </table>
<style>
td
{
padding:1em;
border: 1px solid blue;
}
table
{
border:2px solid red;
}
</style>

Placing Text Near Image: Video Tutorial

Notes:
The first thing needed is to place the text inside an element,
in this case I placed it within a paragraph tag <p>
and gave the p an id, in this case 'move'.

The name here can be almost anything, just remember it, if code is longer.
The p tag needs to be closed and must encompass all the text you wish to move.

The positioning is then done within the style tags with CSS,
explained in an earlier tutorial on this blog.
As seen in the video positioning can be a bit of a hit or miss
and you may require changing it a couple of times.

Problems to watch out for:
In changing the paragraphs position, any further paragraphs will then appear out of place.
Work around this by giving paragraphs a class rather than an id.
Or place all paragraphs within a div tag.

The result of the tutorial is below.

#move
{
position:relative;
top:200px;
left:-60px;
}

Picture of a princess.
This is the text we wish to move closer to the image.