How to incorporate cool widgets into your Lens

Ranked #7,847 in Squidoo Community, #465,997 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

There was an error loading the Clearspring module (Unable to load Clearspring widget from Uri: http://widgets.clearspring.com/cscallback/urlexchange/4a1596707abb95de/squidoo.xml?x=KmwBFgRCDEECRwIWVxUMQlESGENURgBOAxZTQ1NPAhVUQFRaARYEQgxBAkcCFlcVDEJREg). Please try again later.

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

There was an error loading the Clearspring module (Unable to load Clearspring widget from Uri: http://widgets.clearspring.com/cscallback/urlexchange/4a06426d249cd27d/squidoo.xml?x=ZT1EKUB.RHpGLEJ8SSsUekcsXXwReEZ8Qn8SfEMuRy0SfhZlRClAfkR6RixCfEkrFHpHLA). Please try again later.

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

There was an error loading the Clearspring module (Unable to load Clearspring widget from Uri: http://widgets.clearspring.com/cscallback/urlexchange/49f5d7d80a59f1d9/squidoo.xml?x=swuKL9gj2iHaLo53iy_YJ9ovkyKHcItyhnXfd98j3HXYL9w7ii_YI9oh2i6Od4sv2CfaLw). Please try again later.

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

Loading

Clickable Button

Click the button to visit my Lensography:
There was an error loading the Clearspring module (Unable to load Clearspring widget from Uri: http://widgets.clearspring.com/cscallback/urlexchange/49f4c6f3b1eb1b3f/squidoo.xml?x=MtMJ51vqXuhb7V_vWLwMvA64EOoEuAm9Culc7Q_sXOsF6AzzCedb6l7oW.1f71i8DLwOuA). Please try again later.

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

There was an error loading the Clearspring module (Unable to load Clearspring widget from Uri: http://widgets.clearspring.com/cscallback/urlexchange/49e540a26188cb3e/squidoo.xml?x=Bz8mc3d_JnpzeCR7KnJxKCEvP34rLyd.IihzLyB.dywrLCVnJnN3fyZ6c3gkeypycSghLw). Please try again later.

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...

There was an error loading the Clearspring module (Unable to load Clearspring widget from Uri: http://widgets.clearspring.com/cscallback/urlexchange/49cc27d39eb9ec6a/squidoo.xml?x=a65CgBXaRI4Sik_cFIAT2kDYW41P2hONQosQiRfcTooSj0OUQoAV2kSOEopP3BSAE9pA2A). Please try again later.

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.
Loading

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:

There was an error loading the Clearspring module (Unable to load Clearspring widget from Uri: http://widgets.clearspring.com/cscallback/urlexchange/49cd74707bf0d417/squidoo.xml?x=SaZgiDfVY4VjgWPTMoEwhWWGeYVt0jGFYIdj0zGFYIhtgDacYIg31WOFY4Fj0zKBMIVlhg). Please try again later.

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

There was an error loading the Clearspring module (Unable to load Clearspring widget from Uri: http://widgets.clearspring.com/cscallback/urlexchange/49cebbc912fa9969/squidoo.xml?x=y5HipbX5tP61peeusP3vpeCl.6jv_7P.tPrlr.7_tamyquGx4qW1.bT.taXnrrD976XgpQ). Please try again later.

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.

There was an error loading the Clearspring module (Unable to load Clearspring widget from Uri: http://widgets.clearspring.com/cscallback/urlexchange/49cebe6841d3d57c/squidoo.xml?x=kgWpKf51_3WrKKkh.SP5JapzsCSkc_hy.yWqJ6ojriL8Kfw9qSn.df91qyipIfkj.SWqcw). Please try again later.

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

There was an error loading the Clearspring module (Unable to load Clearspring widget from Uri: http://widgets.clearspring.com/cscallback/urlexchange/49cec1748387b443/squidoo.xml?x=NiR1FiJKIh52G3kceRgjG3UcbBt4TCRMchYiSXcddBt4FyACdRYiSiIedht5HHkYIxt1HA). Please try again later.

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
  • Reply
    The_Health_Lady Aug 31, 2009 @ 7:50 pm | delete
    You've got some pretty cool widgets going on here and I'll have to try a few.
    Thanks for your hard work in figuring it all our for us.
  • Reply
    ChapelHillFiddler Aug 24, 2009 @ 8:43 pm | delete
    I just learned how to use clearspring today, it's cool! And I figured out how to get my own music into it! Too bad you can't put it in a box? Since it's invisible? How odd.

    I'm looking for a player.swf that's not as big and clunky as the one at Playlist.com. Found a wordpress plugin player.swf but it's too small. I own Wimpy, which is very customizable, but haven't figured out yet how to make it work with clearspring.
    Thanks for all your work!I
  • Reply
    GabrielGadfly May 27, 2009 @ 11:00 pm | delete
    I don't know that I'll use many of these, but the timeline thing in particular piques my interest.
  • Reply
    Sojourn May 19, 2009 @ 9:16 pm | delete
    SimeyC, found this lens through the forum and it's just what I was after. Great tips. Thanks for sharing!
  • Reply
    CherylK May 13, 2009 @ 5:35 pm | delete
    This is wonderful, Simey. I'm favoriting it so I can keep up with the updates and also use it as a reference. Thanks!
  • Load More

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

Loading

by

Aldric_Chang

Aldric Chang is a creative businessman who is active in music composing and production, internet marketing, casual games production, animation production,... more »

Feeling creative? Create a Lens!