Getting started with the OpenLinkz search widget - read these posts and get up and running

Setting up OpenLinkz OpenLinkz Simplified Changing Appearance of Links OpenLinkz Cheat Sheet

Changing Appearance of Links

Examples of OpenLinkz have so far been shown on light colored backgrounds. Suppose you have a dark color scheme on your pages? No problem.

The OpenLinkz widget can be configured to provide different styles for the appearance of links. There are three options:

(1) You can adjust the border underneath the link. It can be solid or dashed.
(2) You can adjust the color of the border under the link.
(3) You can adjust the color of the link when you hover over it.

Some examples are shown below against a dark blue background.



Here is how it was done: At the very bottom of the page, just before the /BODY tag, paste the following Javascript code snippet:



Note that the first parameter was left blank; ie, two single quotes with nothing in between. This means accept the default value which is 'dashed'.

Here is a cheat sheet:



#ParametersPossible Values
1Bottom Border'', 'dashed', 'solid', 'none'
2Border Color'', color names such as 'red', 'blue', etc. and numeric colors such as '#e6e6e6 or '#000000'
3Background Colorsame as Parameter #2

Posted by TradeRadarOperator at 4/27/2007 02:15:00 PM 0 comments  
Digg!



OpenLinkz Simplified

OK, so you took a look at OpenLinkz and decided there is just too much typing involved. Should you use the ANCHOR tag or the SPAN tag? What's with all this stuff in the "onmousever" event? And for that matter, why fool around with "onmouseover" at all?

You'll be glad to know that we've taken OpenLinkz to a new level of simplicity. Here are the improvements.

First, you don't have to add the script at the end of your page to initialize OpenLinkz.

Second, if you don't want to use ANCHOR tags, you don't have to. Since SPAN and ANCHOR tags work pretty much the same, OpenLinkz lets you use either one. But if you want to be simple, just use the SPAN tag. OpenLinkz will underline it with a dashed line so readers will know it is clickable.

Third, if you don't want to designate search terms, you don't have to. This means you can leave out the "onmouseover" function call to openLinkz(this, ...). As long as there is a reasonable search term within the opening and closing parts of the tag, OpenLinkz will figure it out. Here is an example:



Here is how it looks in a sentence: AJAX is driving the development of Web 2.0

It can't get much simpler than that.

Let's look at a couple of other examples. Here is a sentence that uses links to general news and to stock market tools.



Here is how this looks: Options backdating is even affecting Apple (AAPL).

Posted by TradeRadarOperator at 4/24/2007 09:57:00 PM 0 comments  
Digg!



OpenLinkz Cheat Sheet

Use this cheat sheet to make sure you are following the basic rules for setting up the OpenLinkz widget and getting it to work on your pages. Once you have the initialization stuff done (see the prior post on Enabling OpenLinkz for more details), there are just a few things to keep in mind: use the right tags, set up the onmouseover event properly and spell the class name correctly.

Load the Code

To load the javascript file at run-time, paste into the HEAD section of your HTML page the following code snippet:

<script type='text/javascript' src='http://openlinkz.com/scripts/openlinkz.js'></script>"

Tags

  • Use either an ANCHOR tag or a SPAN tag

Events

  • Set up the "onmouseover" event:
  • onmouseover="openLinkz(this, 'first search term', 'second search term');"
  • Be careful with the quotes.


  • Or leave it out altogether and let OpenLinkz supply a default (see the OpenLinkz Simplified post).

Class name

  • Supply the tag with the appropriate CLASS name (class="xxxxLink") as shown in the table below.
  • Remember, class names are case sensitive.

OpenLinkz Themetag Class
stock marketstockLink
technologytechLink
news and current eventsnewsLink

Link Styles


Here are the input parameters to the initializeOpenLinkz() function that you can use to modify the appearance of links (see the Changing the Appearance of Links post).
  • Parameter #1: Bottom Border, possible values: '', 'dashed', 'solid', 'none'

  • Parameter #2: Border Color, possible values: '', color names such as 'red', 'blue', etc. and numeric colors such as '#e6e6e6 or '#000000'

  • Parameter #3, Background Color, possible values: same as Parameter #2

Posted by TradeRadarOperator at 4/21/2007 02:52:00 PM 0 comments  
Digg!



Setting up OpenLinkz

Enabling OpenLinkz in your pages


It is very easy to install the OpenLinkz widget in your web page or blog. The script file needs to be loaded. When the page loads, the functionality will be automatically initialized. The following code snippets show you how to do it.

To load the javascript file at run-time, paste into the HEAD section of your HTML page the following code snippet:


If you are using Blogger or one of the other XML-based blogging applications, you may find that the code snippet above causes an error. In that case, try pasting into the HEAD section of your XML template the following code snippet:


Using OpenLinkz


Please read the post OpenLinkz Simplified to see all the tips on how you can streamline your HTML by leaving out any reference to the OpenLinkz functionality.

To take full advantage of the power of the OpenLinkz widget, however, you need to call a javascript function named openLinkz from the onmouseover event of either an ANCHOR tag or a SPAN tag. The openLinkz function is flexible. It can take one, two or three parameters.

(1) The word 'this' (with no quotes) must always be the first parameter.
(2) The primary search word must always be the second parameter. In the case of a stockLink, this must be the symbol for the stock.
(3) The third parameter is optional. It can be any search term that enhances the search experience. In the stockLink example, you could pass the company name in this parameter to enhance the search capability. This where you can really fine tune the search.

Note that the tag must have the correct class in order to work properly. At this time it can be either "stockLink", "newsLink" or "techLink". Be careful: it is case sensitive and must be spelled exactly as shown. This is the one thing that must always be included in your tag in order for the OpenLinkz widget to work.

An example of using StockLinkz (OpenLinkz for the stock market) with an anchor tag and the stock symbol:


Here's how the example above looks: Microsoft (MSFT)

There may be situations where you are using a classname for your anchor tags already in order to give links a particular look or style. No problem. In this case, you can implement OpenLinkz using a span tag and your links will remain just as you like them. An example of using TechLinkz with a span tag and two search terms:


Here's how the example above looks in a sentence: AJAX is driving the growth of Web 2.0

You can download the OpenLinkz Javascript file in zip format. Unzip and paste the code directly into your pages or install the Javascript file on your own web server. Get it now!

Be sure to review the other posts on setting up the OpenLinkz widget, especially OpenLinkz Simplified and OpenLinkz Cheat Sheet.

Posted by TradeRadarOperator at 4/19/2007 12:09:00 PM 0 comments  
Digg!



OpenLinkz - targeted search widget

OpenLinkz is a new widget I have been working on that I'm ready to share.

OpenLinkz is a pop-up menu widget that automatically provides links to commonly used information sources organized by a particular theme. As examples, themes can relate to the stock market, technology, general news, social sites, maps and geography, etc.

OpenLinkz takes a search term that you provide (usually the key word you are highlighting in your text) and constructs the links to each site listed in the theme so the user can immediately retrieve information related to that key word.

So far, there are three ways to use OpenLinkz and I have a nickname for each:

  • stockLinkz - OpenLinkz for stock market bloggers
  • techLinkz - OpenLinkz for technology bloggers
  • newsLinkz - OpenLinkz for those who write about news and current events

Here are some examples (move your mouse and hover over the underlined word):

- Microsoft (MSFT) recently reported strong earnings.

- AJAX is driving the growth of Web 2.0

- Senate leader Harry Reid says the war in Iraq is lost.

OpenLinkz is written in Javascript but the major widget makers consider it an "in-line HTML widget" because it interacts with elements of your page (but in a good way!) To use it, you will need to learn how to use a SPAN or ANCHOR tag and designate a CLASS name for it. The details are all in the Setting up OpenLinkz post.


Posted by TradeRadarOperator at 4/18/2007 06:52:00 PM 0 comments  
Digg!



 
Support our sponsors!
Close this ad panelX