How to incorporate cool widgets into your Lens

1 - I can do better 2 - Jury's out 3 - Pretty darn good 4 - Splendiferous 5 - Awesometastic by 34 people | Log in to rate

Ranked #430 in Squidoo Tips, #71,849 overall

The Wow Factor

****New Widget: Lens Stats****
There are millions of blogs and Lens out there, and many have decent content, an abundance of style etc. So how do you make your Lens stand out from the crowd?

It's not simple, but with a little tweaking here and there, and some cool 'gadgets' you'll be able to stand out a little. These may not give you the 'wow' factor - but hopefully many Lensmasters will go 'Cool widget'

This Lens will rely on your input. While I will continue to add 'ideas' for widgets I have, the more ideas that come from the community the better - so please add ideas in the guestbook.

If you use any of the methods below on your Lens, please let me know if you'd like it to be featured on this Lens as an example.

You may note that this Lens loads fairly slowly - therefore if you are going to use Clearspring, I'd only use one or two of the methods below, otherwise viewers will not wait for your Lens to load.



Here are some cool widgets that will help:

Create a Widget with Clearspring. 

***NOTE: THIS METHOD CAN BE USED ON OTHER SITES OTHER THAN SQUIDOO - JUST CHOOSE THE APPROPRIATE SITE WHEN PUBLISHING WIDGET***

All of the following features follow the same method. Simply insert the HTML for each feature in 'Step 6'.

You must be logged into Squidoo for this to work.

Step 1 - create a Clearspring account
Step 2 - click on 'add widget'.
Step 3 - click on 'Go' beneath the 'On My Webpage' section.
Step 4 - name the widget - for example 'Squidoo scrolling text widget'
Step 5 - Click on 'What do you want to share'
Step 6 - click on the box below the 'Insert Code Here' - and paste the HTML as required (see below for example HTML).
Step 7 - click Save.
Step 8 - click 'Publish Widget'.
Step 9 - click 'Widget Home Page settings'
Step 10 - click on the hyper link next to 'Link' -this will open another browser.
Step 11 - if you see a 'squidoo' icon, click it - otherwise click on 'all' and scroll down to find 'squidoo'.
Step 12 - click on 'add to account' and select the Lens to receive the 'widget'.
Step 13 - click on 'Continue' - this will add the 'widget' to the bottom of the Lens chosen - move the widget and publish your Lens.">

For a more detailed explanation of how to use Clearspring please go to How to Add Amazon Widgets to Your Lens by Squidster

Lens Statistics 

New Text module 

Add the HTML below in Step 6 of the 'Create a Widget with Clearspring' section. (Amend the URL and description)

STEP 1 - surf to the site VisitWidget
STEP 2 - click on Javascript / HTML widgets.
STEP 3 - under the 'all in one' heading click 'Get it Now'
STEP 4 - in the dialogue box, click on 'reveal advance options'
STEP 5 - amend options as appropriate, and change Site URL to manual - type in the Lens URL.
STEP 6 - click Get Widget and copy the Widget Code - this is what you will use as the HTML in the Clearspring widget.

Floating Flickr Pictures 

Roy Tanck's Flickr Widget requires Flash Player 9 or better.

Get this widget at roytanck.com

Floating Flickr Picture Code 

Add the HTML below in Step 6 of the 'Create a Widget with Clearspring' section. (Amend the URL and description)

STEP 1 - surf to the site Flickr Widget
STEP 2 - follow instructions to get rss feed information for Flickr Photostream.
STEP 3 - enter this information into the 'Feed URL' box.
STEP 4 - amend width, height and color as appropriate.
STEP 5 - click 'Generate Code Snipper'
STEP 6 - copy the Widget Code - this is what you will use as the HTML in the Clearspring widget.

Embed Quizzes 

Embed Quiz Code 

Add the HTML below in Step 6 of the 'Create a Widget with Clearspring' section.

Step 1 - create an account at Quibblo.com
Step 2 - click on 'create a new quiz' on tabs.
Step 3 - select type of quiz and amend questions etc as appropriate.
Step 4 - copy the code in the embed code' box and use this in the Clearspring method above.

Featured Lens using the Quiz 

Clickable Button 

Click the button to visit my Lensography:

Clickable Button HTML 

Add the HTML below in Step 6 of the 'Create a Widget with Clearspring' section. (Amend the URL and description)

<form action="http://www.yoururl.com" method="get">
<input style="background-color: #8b008b; color: #ffff00; font-weight: bold; font-size: 10pt;" type="submit" value="Your description">
</form>

Timeline 

Timeline Code 

Step 1 - create an account at TimeRime.com
Step 2 - click on 'create a new timeline' under options.
Step 3 - name the Timeline and select a category.
Step 4 - click save.
Step 5 - create some events! (Click Save and New to keep on adding events - they appear immediately in the Timeline).
Step 6 - on top of the Timeline - click . - choose the size you want.
Step 7 - click Generate code and copy the code provided - use this in the Clearspring method above.

Brolmo Calendar - Click on the 'yellow' days... 

How to get HTML for the Bromlo calendar 

I've found a free calendar that is pretty cool. It allows you to setup events on the source website, but you can add the calender to your lense.

The procedure below will create the HTML to be added in Step 4 of 'How to Add Amazon Widgets to your Lens' procedure.

STEP 1 - create a free account at Brolmo
STEP 2 - log in and click on the MY ACCOUNT button.
STEP 3 - click on MY CALENDERS
STEP 4 - click on CREATE A CALENDER
STEP 5 - enter a name for your calender.
STEP 6 - next to the new calender click on the HTML Code button. Copy this code - this is what you will use as the HTML in the Clearspring widget.

NOTE: You maintain the events on the Bromlo site, but these are visible on the lens. Try it out below on my example:

Example of a Lens using this calendar. 

This is a great Lens that uses the calendar very effectively - it really showcases what can be done with this simple calendar.

Textured Backgrounds 

Add a Hyperlink

It's pretty easy to add text and hyperlinks - and still add a pretty cool background

Textured Backgrounds HTML 

Does not use the Clearspring method - simply add HTML in your Text module.

<p style="background-image: url(http://www3.baylor.edu/textures/gray_fabric.gif); padding: 10px; color: white;"><a href="http://www.papertank.com/" target="_blank">Add a Hyperlink</a><br /><br />It's pretty easy to add text and hyperlinks - and still add a pretty cool background</p>

How to embed music using ez-tracks.com 

Add the HTML below in Step 6 of the 'Create a Widget with Clearspring' section.

Note You can embed music on your website easily - however, it does cause problem on browsers other than IE - this may be OK to you as IE is used on the majority of computers. However, from my experience, this does infringe on People's choice - they may not want music to 'play' - perhaps the best options would be simply to include a link to the relevant website. I include the HTML for those who still want to embed music.

I used the HTML that the site e-z tracks gave me.

Step 1: go to the e-z tracks page
Step 2: Scroll down to find popular songs (and click Get Code) or use the search feature to find the song you want.
Step 3: Copy the HTML provided.

<a href="http://ringtones.ez-tracks.com/ringtone-31028.html"><img src="http://image.ez-tracks.com/MySpace_RingtoneButton.jpg" border="0" alt="Click here to get your free Lady ringtone!" /><br /></a><param name="movie" value="http://stream.ez-tracks.com/player2.swf?songid=31028&uid=0|581984300&t=1" /><param name="wmode" value="transparent" /><embed src="http://stream.ez-tracks.com/player2.swf?songid=31028&uid=0|581984300&t=1" width="302" height="91"quality="high" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" bgcolor="FFFFFF"></embed><br />
<font size="1" face="Verdana, Arial, Helvetica, sans-serif" color="#FF6600"><strong>Click here to get </strong></font><font size="1" face="Verdana, Arial, Helvetica, sans-serif" color="#FF6600"><strong> <a href="http://www.ez-tracks.com" style="text-decoration:none; font-style:italic;">Free Music</a> at EZ-Tracks.com</strong></font><br><br>

Click on the links below to hide or unhide some text: 

Click me
Another Click Me

Hide / Unhide HTML 

Add the HTML below in Step 6 of the 'Create a Widget with Clearspring' section.

NOTE - this HTML only seems to work with Internet Explorer

<script>
function toggle(obj)
{

if (obj.style.display == "none")
{
obj.style.display = "";
}
else
{
obj.style.display = "none";
}
}
function setHand()
{
document.body.style.cursor = 'hand';
}
function setNormal()
{
document.body.style.cursor = 'default';
}
</script>

<span style='color: #003399'>
<A onClick="toggle(a1)" onMouseOver="setHand()" onMouseOut="setNormal()">
<B><b>Click me<BR></b></B></A></span>
<span id="a1" style="display: none">
You can enter your own text here. You can include any standard HTML, links, bold etc.<BR><BR>
</span>
<span style='color: #003399'>
<A onClick="toggle(a2)" onMouseOver="setHand()" onMouseOut="setNormal()"><B><b>Another Click Me<BR></b></B></A></span>
<span id="a2" style="display: none"
You are not limited to the number of hyperlink - the only limit is the characters allowed on Clearspring.<BR>
</span>



You are not limited to the number of hyperlinks - the only limit is the characters allowed on Clearspring. To increase the number, use chane the toggle(a2) and 'span id="a2" to the next number in the sequence (in this case a3)

Scrolling Text 

This Enter your scrolling text here!

Scrolling Text HTML 

Add the HTML below in Step 6 of the 'Create a Widget with Clearspring' section.

<div align="center"><FONT
color="#ffffff" size="+1"><MARQUEE bgcolor="#000080"
direction="right" loop="20" width="75%"><STRONG>Enter your scrolling text here!</STRONG></MARQUEE></FONT></DIV>

Text slide show - wait a few seconds for the text to change. 

Text Slide Show HTML 

Add the HTML below in Step 6 of the 'Create a Widget with Clearspring' section.

<SCRIPT type="text/javascript">
var quotations = new Array()
quotations[0]= "Squidoo is an amazing place.<br/><b>Simon Cook</b>"
quotations[1]= "To be or not To be, that is totally illogical captain.<br/><b>Spock</b>"
quotations[2]= "Wait a second, this quote will change.<br/><b>M Mouse</b>"
quotations[3]= "Only two things are infinite, the universe and human stupidity, and I'm not sure about the former.<br/><b>Albert Einstein</b>"
quotations[4]= "Yet another meaningless quote<br><b>A B C</b>"
quotations[5]= "Who wants to be a Millionaire?.<br/><b>I do</b>"
function display()
{
a=Math.floor(Math.random()*quotations.length)
document.getElementById('quotation').innerHTML=quotations[a]
setTimeout("display()",5000)
}
</SCRIPT>
<div id="quotation">
<SCRIPT type="text/javascript">display()</SCRIPT>
</div>

Embed Games HTML 

Add the HTML below in Step 6 of the 'Create a Widget with Clearspring' section.

I used the HTML that 'addictinggames.com' created for me.

<embed src="http://www.addictinggames.com/D78AQSAKQLQWI9/5582.swf" type="application/x-shockwave-flash" width="450" height="550"></embed><br><a href="http://www.addictinggames.com" target="_blank" title="Play Games">Play Games at AddictingGames</a>

What features would you like to see? 

I am no expert, but please feel free to add some ideas - if feasible, I'll add 'widgets' based on your requests.

submit

Some HTML books 

HTML, XHTML, and CSS, Sixth Edition (Visual Quickstart Guide) by Elizabeth Castro

HTML, XHTML, and CSS, Sixth Edition (Visual Quickstart Guide) by Elizabeth Castro

Need to learn HTML fast? This best-selling referen more...0 points

Head First HTML with CSS & XHTML by Eric Freeman, Elisabeth Freeman

Head First HTML with CSS &amp; XHTML by Eric Freeman, Elisabeth Freeman

Tired of reading HTML books that only make sense a more...0 points

Build Your Own Web Site The Right Way Using HTML & CSS by Ian Lloyd

Build Your Own Web Site The Right Way Using HTML &amp; CSS by Ian Lloyd

<i>Build Your Own Website The Right Way Usin more...0 points

HTML, XHTML, and CSS All-in-One Desk Reference For Dummies (For Dummies (Computer/Tech)) by Andy Harris, Chris McCulloh

HTML, XHTML, and CSS All-in-One Desk Reference For Dummies (For Dummies (Computer/Tech)) by Andy Harris, Chris McCulloh

Want to build a killer Web site? Want to make it e more...0 points

HTML & XHTML: The Definitive Guide (6th Edition) by Chuck Musciano, Bill Kennedy

HTML &amp; XHTML: The Definitive Guide (6th Edition) by Chuck Musciano, Bill Kennedy

,,"."lucid, in-depth descriptions of the more...0 points

Some other cool Lenses 

Other things to make your Lens cool

by SimeyC

I'm an aspiring writer who has been writing on the web for a while. Initially on Epinions.com (as quitesimply) I've branched out with my own blog that... (more)

Explore related pages

Create a Lens!