Mar 9 2009

DexKnows.com Yellow Page Site Update – New Widgets

February 24th saw the release of the new and improved DexKnows.com 2.0 web site. With it, also came the updated Free Tools page. As with the 1.0 site, I helped develop not only this page, but also the newly-branded Banner AdsSearch Boxes, Widgets & Gadgets, and Text Links. I will, for purposes of this post, only go over the Search Boxes and Widgets.

What’s New With The Dexknows.com Site, Search Boxes & Widgets?

All of us who work at Dex are really excited about the new 2.0 site launch. I’m especially excited about the new Search Boxes, Widgets & Gadgets. So what’s new about these from the previous versions? Good question! Keeping in mind that the Search Boxes are mainly used by Dex Affiliates, I wanted to streamline the code that needed to be copied and pasted to implement them into pre-existing sites. In order to accomplish this, I used div tags instead of the previous methods of using tables in the HTML. These div tags were then controlled by specific CSS to perform better across all browsers. There’s even a custom CSS rule to accomodate the Safari browser, which I think everyone should download. It’s available for both the Mac & PC and is quickly becoming one of the up-and-coming browsers people use today.

Code Implementation for the DexKnows.com Search Boxes

So how does one go about using these so-called Search Boxes? It’s as easy as copying and pasting two bits of code into your HTML. 

  • Step 1 – Paste this code below between the <head></head> tags in your HTML.

<script type=”text/javascript” src=”http://images.dexknows.com/logo/searchbox-files/widget.js”></script>

  • Step 2 – Paste this code below between the <body></body> tags in your HTML.
  • <form class=”search” name=”search” id=”search” action=”http://www.dexknows.com/rd/” onsubmit=”return checkform();”> <input type=”hidden” class=”dku” name=”dku” value=”http://www.dexknows.com/search/?mkt=dk20&mkw=L2Us300x250″ /> <div id=”dex_widget300x250″> <div id=”top300x250″><IMG SRC=”http://images.dexknows.com/logo/searchbox-files/300x250_top.gif” alt=”Dex is one of the leading Yellow Pages publishers. Dex publishes the AT&T Real Yellow Pages in Illinois and NW Indiana, the EMBARQ™ Yellow Pages, and the Dex® Yellow Pages (as the official publisher of Qwest®).” width=”300″ height=”70″ border=0 usemap=”#DexLogoLink”></div> <div id=”bottom300x250″> <div class=”styleWhat300x250″><LABEL for=”what”>What</LABEL><br> <input name=’what’ type=’text’ class=”formbox300x250″ id=’what’ tabindex=’1′ value=’category, business name, keyword or phone number.’ maxlength=”50″ onClick=”clearWhatData();” onKeyPress=”this.style.color = ‘#000000′;” /> </div> <div class=”styleWhere300x250″><LABEL for=”where”>Where</LABEL><br> <input name=’where’ type=’text’ class=”formbox300x250″ id=’where’ tabindex=’2′ value=’city, state, address, ZIP code or landmark.’ maxlength=”50″ onClick=”clearWhereData();” onKeyPress=”this.style.color = ‘#000000′;” /> </div> <div id=”search300x250″> <input name=”image” type=’image’ tabindex=’3′ src=’http://images.dexknows.com/logo/searchbox-files/300x250_button.gif’ title=”Begin Your Search” /></div> <div align=”center”><a href=”http://www.dexknows.com/rd/?dku=http%3A%2F%2Fwww.dexknows.com%2F%3Fmkt%3Ddk20%26mkw%3DL2Us300x250″ title=”Visit DexKnows.com” target=”_blank” class=”styleYP300x250″>DEX YELLOW PAGES</a></div> </div> </div> </form> <map name=”DexLogoLink” id=”Map”> <area shape=”rect” coords=”-196,1,300,70″ href=”http://www.dexknows.com/rd/?dku=http%3A%2F%2Fwww.dexknows.com%2F%3Fmkt%3Ddk20%26mkw%3DL2Us300x250″ target=”_blank” alt=”Dex is one of the leading Yellow Pages publishers. Dex publishes the AT&T Real Yellow Pages in Illinois and NW Indiana, the EMBARQ™ Yellow Pages, and the Dex® Yellow Pages (as the official publisher of Qwest®).” title=”Visit DexKnows.com” /> </map>

And that’s all there is to it to get a Search Box working on you web site. Now anyone can perform a business search on the DexKnows.com site directly from your site! Here’s how the above code looks once implemented:

The code has been stream-lined to dynamically load the necessary CSS for each separate Search Box from the javascript call within the header. And since this code and all the images are hosted on a DexKnows.com server, this means no taxing of the users server and translates to better load time and functionality. There are 8 different IAB-approved sizes for the Search Boxes, so you should easily be able to find one that fits your web page.

The New and Improved Dex Gadgets & Widgets

Not only did the Search Boxes get and overhaul, but so did the Gadgets & Widgets. There are currently 4 choices to choose from. A Dex iGoogle Gadget for your iGoogle Home Page, a Dex Google Gadget to install in your Google Desktop, a Dex Yahoo! Widget for Yahoo! Widgets, and finally a Dex Mac Widget for the Mac Dashboard. The latter three contain a version checking script which will allow easy validation for users of the Gadget or Widget to check if they are up to date on the most current version. A 5th Widget will be added in the future, but for now will be posted here for you in advance so that you can test it out. This would be the WidgetBox Widget and is shown below:

 

 

 
Thanks and enjoy the new DexKnows.com site and all of it’s new features!

Chris J. Politzki
Studio 119 Degrees


Jul 17 2008

Developed Widgets & Gadgets Live Now!

The DexKnows.com site recently posted a new page I helped develop.

It contains all of the current Widgets, Gadgets, Text Links, Banner Ads as well as ‘What & Where’ Search boxes. It’s known as the Free Tools page and is available anywhere on the Dex site if you head to the bottom of the page and click on the link, ‘Free Tools’ in the footer. This is right in between the ‘Direct Marketing’ & ‘View Phone Books’ links.

These are nifty little free tools that one can use to search the Dexknows site.

The Search Boxes are great for embedding into your own HTML page. They come complete with Javascript, CSS, & HTML code for a great looking resulting search box! They come in a few varied sizes to perfectly fit into the right spot on your web site. 728 x 90, 468 x 60, 300 x 250, 234 x 60, 160 x 600, & even a 120 x 90 size, which is pretty small, but could very well fit in a tight spot.

If you only want a text link, this is also available. Banner Ads as well.

The Gadgets and Widgets include an iGoogle Gadget for your iGoogle Home page. There’s a Google Desktop Gadget which you’ll have to download the Google Desktop application first, but the link for that downloaded is provided. Then there’s a Yahoo! Widget that also requires an external application to run, but once again the link is conveniently provided. There’s even a Apple / Mac Dashboard Widget, which I’m quite fond of being a Mac user. ;-)

The next feature is a Widgetbox Widget and I’ll embed it below to show you how easy it is to obtain. Go ahead and try typing something into the ‘What’ & ‘Where’ boxes and hitting enter or the ‘Find’ button above and see how the widgets work and function.


I personally like the cohesive design on all of these. Some sites have multiple platform widgets and gadgets, but haven’t kept the design the same across the board. Maybe because there were multiple people working on the different platforms? Perhaps. Not the case here though. I saw the design & development from end to finish and the result is there for you to see.

Can’t wait for our next versions of these to come out! In the meantime, enjoy!

Chris J. Politzki
Studio 119 Degrees