Learn how to push Your Lens up the Squidoo rankings to Increase your Popularity and Earnings.
Squidoo.com ranks high on search engines because of the number and quality of those pages or lenses. Of course, like any website, each page (lens) is ranked individually according to merit.
Naturally, the best lenses are those whose content and design attract, interest and engage the most visitors, ie., they are the most popular lenses.
Squidoo's basic modules are just that; basic. Fully adequate for the purpose, which is to enable almost anyone who can use a computer keyboard to set up their own web page, but still basic enough to be simple to use.
As lensmasters (web page designers) gain experience, they may wish to add personal touches and enhancements to their work. Putting simple boxes around certain sections of text, serves to catch the visitor's eye and draw them towards items the lensmaster thinks are special and will hold the visitor's interest.
Putting boxes around important pieces of text is only one of many ways of enhancing your lens. But it is a very versatile process and reasonably simple to learn.
My aim here is to show you the easiest way to set up a text box, or border, give you some HTML code you can copy and paste into your own text modules, and show you how to tweak the code to vary the box to suit your own individual requirements.
Updated 15th March 2012
Table of Contents
First Things First
Of course you can!
You can have any colour you want for your box border!
You can set the thickness from really thick down to invisible!
You can put your box almost anywhere you like within a Text Module.
You can give it a coloured, or even a patterned background or leave it clear.
And finally you can choose from a variety of designs of border.
If that ain't flexible, I don't know what is!
Lesson One - Make Your First Box.
Suppose you are creating some new content in a standard Squidoo Text Module and there is a particular passage you want to draw attention to.
For this box I have used the CSS style attribute in a single HTML element. Ok!Ok! Don't switch off yet, it's really quite simple!
In the Squidoo Text Module I typed my text into a paragraph between <p> and </p>
I set the style within the opening <p> and specified a "solid red border 2 pixels thick" to appear all around whatever text I type in. The resulting box will expand to accommodate the text, however many lines I type.
I also specified 5 pixels of padding all round the text to separate it from the box border.
NOTE: At this stage it might be an idea to Bookmark this lens so you can return to it while practising on your own lens.
Now! Here's the code:-
<p style="border: solid 2px red; padding: 5px;">Type YOUR TEXT here.</p>
SYNTAX: Note the punctuation ... border is followed by a colon ... the parameters have a space between them, if more than one, and are followed by a semi-colon. The whole style specification is enclosed in double quotation marks.
Simply COPY and PASTE the line into your own lens in a Text Module in the area where it says "Enter your text below".
This is how it should look when you save the module.
Now in Edit carefully replace "Type YOUR TEXT here" with your own wording.
Warning, DO NOT change any punctuation within the <p> brackets. Just one missing colon, semi-colon, or quotation mark may cause the whole string to malfunction!
Go to the next section to see
what else you can do with your Box.
Earn Money from Writing about what you know.
Publish your Interests on Squidoo! Join for FREE!
Click Here: www.squidoo.com/learnmore
Lesson Two - Try Changing your Border.
I've shown you how to make a simple box border. Now you can experiment.
In the code I gave you in the last section, border is defined thus:
... style="border: solid 2px red;" ...
The parameters are:
solid -- with the alternatives of dotted, dashed, double, groove, inset, outset, ridge and hidden. (see examples in the next section: Box/Border Designs)
2px -- which denotes 2 pixels thick and can be changed to any suitable number. 0px would result in a hidden border.
red -- the line colour, which can be simply defined as any of the standard HTML colours (blue, green, black etc.) or by inserting a hexadecimal code eg., "#2C60C7" (see examples)
Tweak the code to see what suits the style of your own lens. Be bold, tweak, save, and re-edit until you come up with a box border you are happy with. Play around as much as you want until you are ready to publish. Squidoo is very forgiving.
My Advice: Don't go mad with Borders! Sometimes less is more. They can become distracting. Decide which type, colour and thickness of box border best suits your particular lens content and mainly stick with it. Not only that, but once you have set the code for one box you can copy and paste it elsewhere in your lens, and indeed to any other lens. Saves a lot of typing if you copy and paste a wodge of code to another lens and simply change a couple of parameters to make the box look completely different.
Add a Bit More Colour to your Lens
Fill your Box with a Tasteful Background
Let's face it black/gray text on a white background can some times look a tad boring! But, you can brighten up your lens with some colourful backgrounds. These can be a plain colour, or a pattern generated from a small sample, or even a complete whole picture, such as a photograph. Alright, let's not run before we can walk. Let's stick to plain colours for the moment.
Here's the code:
<p style="border: double 6px green; padding: 10px; background-color: #FFFFAA;">Your Text Here</p>
Notice I've added:
... background-color: #FFFFAA; ...
#FFFFAA is the Hexadecimal code for the colour I chose. (see some examples here)
Again, you can COPY and PASTE the code to your own lens and play around with the parameters. Have fun!
A Textured Background can also Look Good
Now I have chosen to use this small snippet of "parchment" for my box background. It's a .JPEG file, parchment.jpg, and it is only about 50px square. I have uploaded it to my hosting website. I will now set up a text box with this pattern as a background. The pattern will automatically be tiled over the box to whatever size it grows as I type in my text content.
So, here's the box:
Now here's the code:
<p style="border: solid 5px brown; padding: 15px; background-image: url(YOUR IMAGE URL HERE);">Type Your Text Here</p>
Notice I've added:
... background-image: url(YOUR IMAGE URL HERE); ...
COPY and PASTE the line into your Edit Text area and insert the full URL of your hosted image in the form:
Once again, when editing HTML code, be very careful not to disrupt the syntax.
Was This Guide Helpful?
This module only appears with actual data when viewed on a live lens. The favorite and lensroll options will appear on a live lens if the viewer is a member of Squidoo and logged in.
Learn More on Amazon about Making Squidoo Lenses
The Squidoo Success Formula Training Guide - Everything You Need To Know To Make Money From Squidoo!
Making Money on Squidoo: A Step By Step Guide to Making A Real Income with Squidoo Lenses
The New Rules of Marketing & PR: How to Use Social Media, Online Video, Mobile Applications, Blogs, News Releases, and Viral Marketing to Reach Buyers Directly
Do You Squidoo? The Power of Web 2.0 for Generating Floods of New Traffic
How To Use Squidoo: The Power of Recommendation
Did You Find these TIPS Helpful?
Any criticisms or suggestions? Please share them here.