Squidoo Maestro – Make Money On Squidoo

Hi, my dear Squid friends!

Have you ever wanted to place a picture into either a text or any other module on your lenses and you didn’t know how to do it? When checking out the old SquidU forum, I’ve noticed that many lensmasters need help with this issue. For this particular reason I’ve decided to write a new article about image HTML and CSS tricks for Squidoo. This will be one of the more long articles, so take your time and learn along the way.

If you’re creating lenses on Squidoo, you have to know the basics of HTML in order to make great lenses. So, are you ready? I hope you’ll learn something new from this article, but if you still have any questions about image HTML, please write them down in the comment area!

The first important thing is to host your pictures somewhere on the web. I prefer PhotoBucket, because it’s free and it works great for lenses. Just simply upload pictures from your computer to sites which will host them. You can also use Flickr, Imageshack, and Tinypic, and they are all free. Always re-name images with the keywords you want to get traffic from. Always use images you have the rights for. You don’t want to get into the problems.

If you have your own site or blog, you can use your paid hosting, which is what I do for pictures on this blog. I use BlueHost.

Disclosure: If you purchase hosting through this link, I will get a commission. This link is an affiliate link.

When you upload images to PhotoBucket you have to click on “Direct Link” (which you’ll use later) and the link will copy itself to the clipboard, so you don’t need to copy it yourself. Just click on it and then you can paste it anywhere you want to.

I’ll give you the codes and when adding something new to it, I’ll color it differently.

1. You’ll need to use the <img> tag;  img means “image” and src means “source”.

This is the image HTML code to place a picture into the text module:

Code: <img src="insert your image url here">

2. You can also align your pictures to the right, left or center. With these short and easy codes you’ll be able to do just that.
For aligning the image to the right or left you’ll need to use “float” in your code. With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it.

Code: <img src="insert your image url here" style="float: left">

After you do that, the text is too close to the image so we need to create more space. To do that, we need to add the margin CSS code.

You can select where you want to have a margin: top, bottom, left or right. In this case we will use right and bottom.

Code: <img src="insert your image url here" style="float: left; margin-right: 30px; margin-bottom: 20px;">

After the code you can write your text. It will be automatically on the other side by the picture.

To align the image to the center, you need to use the paragraph HTML code.

Code: <p align="center"><img src="insert your image url here"></p>

• p stands for paragraph
• </p> means the end of the code. You need to close the code, otherwise it will not work.

3. Your web browser doesn’t do as good of a job as a graphics program with resizing the pictures, but with some tricks we can do that! Specify either the height or the width, and the browser resizes the other dimensions to match. If your pictures are too big for a text module, you can resize them easily with this code below.

Code: <img src="insert your image url here" width="200px" height="200px" style="float: right; margin-left: 15px; margin-bottom: 10px;">

• Our width of the picture will be 200 pixels with this in the code: width="200px"
• Our height of the picture will be 200 pixels with this in the code: height="200px"

4. If you would like to take a step further, you can add borders around the picture. Pictures will look nicer with colorful borders. Each border (left, right, top, bottom) can have a different color. How cool is that?

Insert (add) “border” to your HTML code or “border-right”, etc. You get the point.

Code: <img src="insert your image url here" style="border: 7px solid red">

• 7px = size of the border

• solid= style of the border

• red = color of the border


You can choose from several border styles. Play with them to get the best you want. You can choose from: solid, dotted, double, dashed, grooved, inset, outset or ridge.

Learn more about borders here.

And check out this site where you can get your HTML color codes to make your borders in your favorite color.

5. Now you’ll learn a trick on how to create a clickable image inside of text or other modules. You can add text on the picture and write for example “Click Here” (something that will encourage the visitor to take action).

Code: <a href="insert your url here"><img src="insert your image url here"></a>

• a href is a HTML code to create a clickable link = <a href="url">keyword</a>

If you want your link to open in a new tab, add target=”_blank” to your code.

Code: <a href="insert your url here" target="_blank"><img src="insert your image url here"></a>

Don’t forget to save your pictures with keywords and add alt and title tags in the code. That’s good for SEO. An “alt” tag provides Google and other search engines information about what is on the picture, because Google’s spiders can’t see what’s on them. When you add a “title” into the code, this is what happens: When a visitor hovers over one of your images, the text with the keyword will show (a little pop-up).

Code: <img src="insert your image url here" alt="keyword" title="keyword">

To learn even more, you can also visit some great lenses about HTML and CSS tricks below:

• http://www.squidoo.com/graphics-layout
• http://www.squidoo.com/how-to-align-images-side-by-side
• http://www.squidoo.com/basichtml
• http://www.squidoo.com/advancedhtml

I hope this tutorial will help you in the future. Please leave feedback if you have learned something new and let me know if you have any problems with HTML or pictures on Squidoo, so I can help you. And please share this post with your friends if you found it useful.

I created a new bonus for you if you subscribe to my blog. I encourage you to get it, because it’s totally free and you can learn something new about Squidoo.

To your success,

Mitja

Did you enjoy this article?

Share the knowledge

Tweet

Get updates + FREE gift

No related posts.