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


Your Name:

Your Email Address:

Your Message: