Home » Squidoo Community

PIMP Your Squidoo Lens, Or Use These HTML Codes In Articles!!!

Ranked #2,124 in Squidoo Community, #175,937 overall

A Squidoo Lens W/ Out A Creative Touch Of HTML Code Is Really No Squidoo Lens At All...

T
his lens of HOT Squidoo HTML Codes & Tips will help perfect not only my lensmastering skills but other squids as well by being better organized & only having to come back to ONE Lens for all the codes...

If there are any HOT Squidoo HTML Codes & Tips to Pimp your lens that I am missing, let me know right away.


I'm tired of trying to find that specific lens I used a css or HTML code for effect off of and then having to go to edit-mode, copy paste, and go back to the lens I am working on and yet another for a different code. Time is money so lets get pimpin w/ ALL the codes...

Learn how to make for a more dramatic impact on your lens! This tutorial will guide you to inserting graphics, links, clickable pictures, and other awesome codes to make your lens STAND OUT!


Ie. 1.) Copy & Paste the following code
For the same dash-boxed paragraph as seen above!
Starting Tag:

< p style="border: dashed 10px #ff6600; padding: 10px">
Text goes HERE
Closing tag: < /p >


These codes are not yet complete. If they were you would not see them! So be sure to erase 'closing tag:' and check for NO spaces between the "< and p" in both opening AND closing tags in order for the code(s) to work throughout this tutorial.

Bottom Line:

Make your lens different from all the rest w/ these codes you can play around with! It's all in the tricks that, aren't tricks at all... Tip Of Advice: Dont go over board, keep them simple, catchy, and clean!

Make A PIMP Table Of Contents!



• A Link
• A Link
• A Link
• A Link
[etc, etc]



Heres The Code:
< p style="background: url(http://www.istad.org/squidoo/toc/notepad.jpg) no-repeat; width: 223px; height:300px; float: left; padding-right: 15px;">

• < a href="#link">A Link< /a>
• < a href="#link">A Link< /a>
• < a href="#link">A Link< /a>
• < a href="#link">A Link< /a>
[etc, etc]< /p >

Basics: Bold, Italics, Indent Paragraph etc.

Plus a yellow box w/ text that floats code!

How Do I Indent My Text / Paragraphs?
----> Simple Copy And Paste This Code : <----

P.S. ERASE THE SPACES!

Between letters p and angle brackets, in both opening and closing tags...

< p style="margin-left: 20px">Text goes HERE</ p>



Some Of The Easiest And Most Used Code Is bolded HTML-code.

< b>Text Here< /b> <---- Use This Code For BOLD
< i>Text Here< /i> <----- Use This Code For Italics
< b>< i>Text Here< /i>< /b> <---- Use This Code For Bold Italics



STRIKE THROUGH

If you have to correct something in a coding lens - where the previous text needs to stay in place, you may use this.

< p style="margin-left: 20px">< b style="text-decoration: line-through; font-weight: normal">Text w/ line through goes here.</ p>

Text floats on either side w/ yellow backround and larger more bold text etc.



This is just text that goes on... and on, and on, etc... Like I have used in examples above. You can use this as a "sticky note", or it can even be the content in your rss or contents module.

This, "trick" can be done in most every module. You simply start with the text you want to highlight and enclose it in the following code:

< b style="background: #FCF8C0; width: 200px; float: right; padding: 15px; margin: 15px; font-size: 150%; line-height: 1.5em;">Text goes here.< /b >

Add A Click-able Link or Email - Change Text Color, Size, Font

Use This Color Complimenting Chart To Help You Get P.I.M.P.I.N.

To Change Font Size :
< b style="font-size: xx-large; font-weight: normal; line-height: 1em;">Text goes HERE< /b > OR
< b style="font-size: medium; font-weight: normal; line-height: 1em;">< /b>



xx-large You can now change your text to any of the following sizes, all you do is simply change the part of the code to the size you are looking for in your text...

To Change Colors, Use These Codes Where Applicable :
White | #FFFFFF
Black | #000000
Gray | #808080
Silver | #C0C0C0
Green | #008000
Lime | #00FF00
Olive | #808000
Teal | #008080
Blue | #0000FF
Navy | #000080
Purple | #800080
Fuchia | #FF00FF
Maroon | #800000
Red | #FF0000
Yellow | #FFFF00
Aqua | #00FFFF
Seashell | #FFF5EE
Lavender-blush | #FFF0F5
Linen | #FAF0E6
Ivory | #FFFFF0
Beige | #F5F5DC
White-Smoke | #F5F5F5
Lavender | #E6E6FA
Honeydew | #F0FFF0
Wheat | #F5DEB3
Burly-wood | #DEB887
Tan | #D2B48C
Turquoise | #40E0D0
Teal | #008080
Crimson | #DC143C
Salmon | #FA8072
Orange | #FFA500
Khaki | #F0E68C
Deep-sky-blue | #00BFFF
Thistle | #D8BFD8
Gold | #FFD700
HTML Code 4 COLOR Text :

< b style="color:#FFFFFF; ">White< /b >



Remember, make sure there are no spaces between " < & b " in the starting tag and also no space between " < & /p > " in the closing tag erasing the word "Closing Tag:" and making sure there is no space between '1em;">' and your Text as well in order for the code to work.

Once the code has been pasted go ahead and change the size, From

x-large

large

medium Or

small Even

x-small

All you do is simply change the code where it says "xx-large" to any of the above for the size your looking for, and presto!

-----> Here's A PIMP HTML Code For Mouse Over Text: <-----


Example :
What Is an HTML Code?

Readers have Questions. Sumerize your Answer quickly w/ a P.I.M.P. Mouse Over Code :

put your text here

< b style="border-bottom-style: dashed; font-weight: normal; cursor: help; border-bottom-width: thin; border-bottom-color: Green;" title="Mouse Over Words Go Here">Text goes HERE< /b >



< " Adding Your Email! "

< a href="mailto:email-adress-here">Text Or Email Here

Which Will Look Like This...
Email Me, Mike Here!



""Adding A Click-able (Affiliate!) Link" : "

< a href="http://url.com" target="_top">Click Here!< /a >

Plain Click-able Link...!

OR... Scroll Over "ALT" Text!!!! Heres The Code:

< a href="http://url.com" title="ALT Or Hovering Text Here!!!">LINK TEXT HERE< /a>

PIMPED CLICK_ABLE LINK ;) !



How About A Fancy Navigation Bar!
Just make sure to erase the space between ALL angle brackets and the letter A, and P and this code will work for you as well!

Inside The List ♦ Beating Adwords ♦ Who Loves Money



< p style="border: 2px #999 solid; background-color: #046381; color: lightblue; padding: 5px 20px; text-align: center; font-family: verdana; font-weight: bold;">< a href="http://www.my-linker.com/hop/Inside_The_List_4_FREE" style="color: white;">Inside The List< /a > ♦ < a href="http://www.my-linker.com/hop/Beating_Adwords_4_FREE" style="color: white;">Beating Adwords< /a > ♦ < a href="http://www.my-linker.com/hop/Who_Loves_Money_4_FREE" style="color: white;">Who Loves Money< /a >< /p >

P.I.M.P. Your Letters And Numbers!

Change the sizes, colors etc. Be Creative.

A
Heres The Code :
< b style="FONT-SIZE: 100px; FLOAT: left; COLOR: silver; LINE-HEIGHT: 70px; PADDING-TOP: 2px; FONT-FAMILY: times">A< /b >



B
Use This Code :
< b style="FONT-SIZE: 100px; FLOAT: left; COLOR: silver; LINE-HEIGHT: 70px; PADDING-TOP: 2px; FONT-FAMILY: times; border-bottom: medium; border-left: medium; border-right: medium; border-top: medium; border-style: groove; margin-right: 4px; padding-bottom: 6px; padding-left: 4px; padding-right: 4px;">B< /b >

C
Here's The Code :
< b style="FONT-SIZE: 100px; FLOAT: left; background: #EBEBEB; color: gold; LINE-HEIGHT: 70px; PADDING-TOP: 2px; FONT-FAMILY: times; border-bottom: medium; border-left: medium; border-right: medium; border-top: medium; border-style: ridge; margin-right: 4px; padding-bottom: 6px; padding-left: 4px; padding-right: 4px;">C< /b >

D
Using This Code :
< b style="font-size: 40px; font-family: Georgia, Palatino; float: left; margin-right: 4px; line-height: 1em; color: #FFFFFF; background: green; padding: 0 5px;">D< /b>

E
Lastly Use This Code For Effect :
< b style="font-size: 35px; font-family: Georgia, Palatino; float: left; margin-right: 4px; line-height: 1em; color: #FFFFFF; background: #CC3300; padding: 0 5px; font-weight: normal;">T< /b >

WARNING: Some "Bad" Squidoo Codes... Ones You Cannot Use.

Theres only a few codes you cannot use on squidoos servers, however they have a module for pretty much anything you can think of anyways!

I have went ahead and adapted most of the color schemes on this lens to fit the default theme of squidoo lenses (as of June 2009).

However an even easier way to be sure your colors fit your theme, is to pick the black-white-gray 'Zen' theme. This layout will go with just about any lense. Please Note...
Squidoo.com disables the
following 3 codes :
Find any more, let me know...

You dont have to go change all your CSS Codes, you simply change your 'theme' (located under 'workshop tools' at top right of your lens in edit mode) to, ---> Moment Of Zen <--- Or ---> Paintball <--- etc.

1.) < strike > : Making text appear to have a horizontal line through it.

2.) < hr > : Horizontal lines &

3.) i-frames

What you CAN use is this :

Font-size in pixels (px). Change font sizes on any code etc.

HINT:

Here's a little tip I learned from the pros>>> A good designer doesn't use pixels, so I advise using % to size text - as I show in a few codes on this lens.

Adding Pictures & Click-able Pictures

No Photoshop? No Problem...

There are a number of image manipulation programs out there that will allow you to make your own graphics more professional looking.

Barring that, you could have someone else do it for you (there are even groups on Squidoo dedicated to stuff like that!) or you can roll up your sleeves and find a decent program.

The absolute best free equivalent to Photoshop is GIMP. Theres a bit of a learning curve for newbies, however once you crack it, it's like the squid angel of picture making. Plus you cannot beat the fact that it is 100% FREE!


Pictures give your lense(s) that extra awesomeness to grab your readers attention.

You may use any picture w/ these codes, you simply go to google, type in a keyword, click on the picture you want... wait... then click "click to enlarge view", and then copy the url adress at top and paste it in any of the following codes.

You may float your images to the right, or left to give them some space and make the page flow. Change it up, where it says, "float: right... Change to left, it's that easy, so be creative!

This will work in all kinds of modules within your lense(s). I particularly like the effect you get when adding one in the guestbook module (check mine out), but it will also work in for instance in the table of contents module and so on.

---> Float Pics Left To Right : <---

< img style="float: right; padding: 10px;"
src="http://www.yourwebsite.com/picture.JPG" />



Dont forget to ERASE THE SPACE! In this one it's between " < & img " ERASE THAT SPACE. Also in the starting tag between the " < & p "...

The placement of your picture is that of the golden squidoo eye located above. Change it up, erase left and put right where it says "float; left".

You can also experiment with a border, (width;10px in this case, color: solid orange), the padding and the margin can also be played with.

You may use a different color by adding the #FFFFF for example for white and so on.

---> P.I.M.P. That Picture W/ A Border Like This : <---

< img style="float: right; padding: 10px; margin: 10px; border: 10px" solid orange; src="http://www.yourwebsite.com/picture.JPG" />


How About A Clickable Picture!


< a href="http://www.yourdomain.com/picture.gif" title="http://www.where you want to send people">< img src="http://www.yourdomain.com/picture.gif(again)" alt="Mouse Over Text Here" align="right" />< /a >

Headlines, Quotes... Make Them POP

Give your "headlines" a creative touch that will stand out more throughout your articles!

Remember : Get Rid Of The SPACES after pasting, between '< b >' or '< p' on either starting and/or Closing Tags in order for the codes to work correctly.

Want Text Like This...


------> Copy & Paste This Code : <------


< p style="color: #1f94bf; font: 150%/1em 'courier new'; padding:10px;">Text goes HERE...< /p >


Or What About Like This!


------> Copy & Paste This Code : <------

< p style="color: #f60; font: 150%/1em 'courier new'; padding:
10px;">< b >Text goes HERE...< /b > < /p >



You Can Change Color Too Remember!


------> Copy & Paste This Code : <------

< p style="color: #1f94bf; font: 150%/1em 'courier new'; padding:
10px;">< p style="color: #1A67B8; font-size: 150%; ">Text goes HERE...< /p >


"Cool Way To Make Quotes Stand Out, You Think?"

------> Copy & Paste This Code : <------

< p style="color: #1f94bf; font: 150%/1em 'courier new'; padding:
10px;">< p style="color: #1A67B8; line-height: 1.5em; font-size: 150%; padding: 0 15px; margin: 5px; border-bottom: 1px dashed;">Text goes HERE< /p >



Make Your Text Really POP!



------> Copy & Paste This Code : <------

< p style="color: #1f94bf; font: 150%/1em 'courier new'; padding:
10px;">< p style="width:100%;color:white;background: #1A67B8;padding-top:3px;padding-left:5px;font-family:Georgia, 'Times New Roman',Times,serif;font-size:30px;font-weight:bold;line-height:1em;padding-bottom:5px;">< b >Text goes HERE< /b >< /p>

Watch & Learn How 2 Copy And Paste A Link

Remember that on this lens, when you copy and paste: YOU MUST ERASE THE SPACE BETWEEN EACH ANGLE BRACKET AT THE BEGINNING AND CLOSING TAGS.

Why Use Squidoo - 8 Reasons
by bobtheteacher | video info

7 ratings | 7,838 views
curated content from YouTube

Help ME Help SQUIDOO > It's For An Awesome Cause

THIS IS A NON-PROFIT ADVERTISEMENT.


If you have a pay pal account, then why not help others around the world that are less fortunate?

In economic times like these people all around the world need more help now then ever before. Show you care, help support squidoo to continue making a difference around the world!

The Squidoo Charity Fund has raised hundreds of thousands of dollars for charity. Thanks to the Squidoo community, we've built schools in Cambodia, given underprivileged classrooms computers and software, funded important reseach against Juvenile Diabetes

F.A.Q. About This Lens

I know I dont have them all, but let's see if I can answer a few of your questions here.



Is This The Most Helpful HTML Code Lens On Squidoo Or What!?!

Loading Fetching blurbs now... please stand by

CH-YEAH!!! [your positive affirmation on why here! lol]

GardenCherub says:

I'm just starting on squidoo & know a little html. This is great. Am printing it so can try a lot of these things as I go. Thank you! Blessings.

Posted July 11, 2011

Pushchairs says:

Perfect lesson about HTML! :)

Posted July 03, 2011

Quickcutters says:

I totally love your lens. I learned more on this page then on some put together.
I would like you to keep going with other ideas and explain it the way you have here.
Thank you much for this lens i will be keeping it ready to go while I'm doing my own lens until i get it.
excellent...

Posted May 03, 2011

DallasNicole says:

Great! Very helpful.. learned a lot of new tricks! Thanks

Posted December 02, 2010

sumanj says:

Great lens. Very helpful. How do you embed You Tube videos?

Posted April 05, 2010

Alfiesgirl says:

My own html & CSS codes leave something out & never work so yes i shall most definitely save this lens for easy viewing whenever i need to steal one of your codes. Do you know how to add gif.animation borders using a repeat gif.?..if so then PLEEEEEASE add it to this lens for me..lol..fankoooo

Posted January 26, 2010

patrickbrianoneill says:

How can I add a box with 3 or 4 columns? You know, to compare 3 or 4 different items. Danka my friend. Great lens!

Posted August 14, 2009

karen550 says:

I added you as a favorite, so I can come back and spice up some of my duller lens. Thank you so much. You've really done a great job here and thought of so many creative ways to add to our lens. You're the bomb!

Posted July 21, 2009

Moninn says:

I wish I was a nerd at HTML but no I did not confuse myself for the most part. Your steps are easy to follow. I would love to learn more from you and hopefully help each other to become greater pimps.

Posted July 01, 2009

NOT EXACTLY, You Don't Have This Code I Was Looking For... >>

wealthysublime says:

< p style="float:left; width:290px;">text in first column goes here< /p >< p style="float:right; width:290px;">text for second column goes here< /p >

Im sure this will also work if you add more! ;)

Posted April 30, 2010

wealthysublime says:

< p style="float:left; width:290px;">...< /p>...

Earse the space between all "<" tags!

Posted April 30, 2010

wealthysublime says:

PATRICK >> The only codes I could come up with to maybe help you out for "columns" is: ......

Posted April 30, 2010

wealthysublime says:

SUMANJ >> To add ANY youtube video, when in editor mode simply click on "Brose all modules" and type "youtube vids" in the search box in the upper right hand corner. There is a youtube video module you can add to your lens and look up videos on youtube from the module itself. Very easy - hope this helps!

Posted April 29, 2010

Pan_narrans says:

Great lens, I'm busy re-learning HTML and this stuff is very useful.
Regarding pictures, did you know that you can use a Squidoo lens as an image store? It saves loading pictures into an external site. I'm nowhere near your level yet, but if this useful for anybody...
http://www.squidoo.com/storing-images

Posted March 06, 2010

wealthysublime says:

scratch that the codes worked lol.
what i meant was that you need to put the < /b > after the font code otherwise all the text in the module will be that size...

Posted July 22, 2009

wealthysublime says:

Thanks karen! Im not quite sure I know what you mean, but Ill give it a try, make sure that any font you would like to have bigger than the rest has at the end of the code. For example:
Text goes HERE OR you can use this to make all the font medium which makes the page easier to read through.

So if you put that code first in all your modules it will automatically put the for you at the end.
Hope this helps, let me know.

Posted July 22, 2009

karen550 says:

Wonderful! Except, after you get your font changed to all those fabulous fonts, how do you change it BACK to normal??

Posted July 21, 2009

wealthysublime says:

Got a question not on the lense? It will more than likely be answered here.

Posted June 24, 2009

 

Positive Affirmations Here ;D

Thanks To All Who Have Favored... I Will Never Stop Building & Revising So I Apprciate Your Support


SquidWords.com

submit
Show All

by

wealthysublime

The "PIMP-IST" Codes On Squidoo Are Right HereOn This ONE Lens!!!
Make sure to bookmark so you can keep coming back and building more quality lens's... more »

Feeling creative? Create a Lens!

Explore related pages

Related Tags