Local Schools Widget

1. Name your widget:

2. Enter the City and State or Zip for the Schools you want to display:

3. What size would you like it to be?
 Panoramic (750x250)
 Large (300x400)
 Small (250x300)
 Custom
Width: px Height: px

4. Pick the colors:
Background: or Hex #
Text: or Hex #
Borders: or Hex #

5. Email

Download Wordpress Plugin   OR   Generate HTML Code

Copy and paste this code into the webpage(s) on your site or blog:  

<!--Local Schools Widget Starts Here - Please Do Not Edit below this line--> <style type="text/css" media="all"> .selected-tab{ padding-bottom: 1px; background-color: #FFFFFF; font-weight:bold; position:relative; top:1px; } </style> <script language="javascript"> function updateTab(tabName) { if(tabName=='maptab') { setClassName('maptab','selected-tab'); setClassName('datatab',''); setClassName('searchtab',''); hideDiv('mapcontent',false); hideDiv('tablecontent',true); hideDiv('searchcontent',true); } else if(tabName=='datatab') { setClassName('maptab',''); setClassName('datatab','selected-tab'); setClassName('searchtab',''); hideDiv('mapcontent',true); hideDiv('tablecontent',false); hideDiv('searchcontent',true); } else if(tabName=='searchtab') { setClassName('maptab',''); setClassName('datatab',''); setClassName('searchtab','selected-tab'); hideDiv('mapcontent',true); hideDiv('tablecontent',true); hideDiv('searchcontent',false); } } function setClassName(CompID,ClName) { document.getElementById(CompID).className=ClName; } function hideDiv(DivID,isHidden) { if(isHidden) document.getElementById(DivID).style.display="none"; else document.getElementById(DivID).style.display=""; } </script> <div style="border:1px solid {widget_bordercolor};background: {widget_bgcolor};width:{widget_width}px;color: {widget_txtcolor};"> <div style="padding-bottom: 10px;background: {widget_bgcolor};"> <h4 style="text-align:center;">{widget_title}</h4> </div> <div id="widget"> <ul style="font:12px Arial, Helvetica, sans-serif;list-style: none; padding:0;margin:0;"> <li id="maptab" style="display: inline;float:left;border: solid;border-width: 1px 1px 0 1px;border-color: {widget_bordercolor};margin: 0 0.3em 0 0.9em;padding:0.2em 0" class="selected-tab"><a href="#" style="color:#666;width:50px;background:'transparent';padding: 0 1em;text-decoration:none" OnClick="javascript: updateTab('maptab');return false;">map</a></li> <li id="datatab" style="display: inline;float:left;border: solid;border-width: 1px 1px 0 1px;border-color: {widget_bordercolor};margin: 0 0.3em 0 0;padding:0.2em 0"><a href="#" style="color:#666;width:95px;background:'transparent';padding: 0 1em;text-decoration:none" OnClick="javascript:updateTab('datatab');document.getElementById('tablecontentframe').src='http://www.education.com/widget/schoolfinder/SF_SearchResults.php?widget_key={widget_key}&widget_searchterm={widget_searchterm}&search_type={widget_searchtype}';return false;">school list</a></li> <li id="searchtab" style="display: inline; float:right;border: solid;border-width: 1px 1px 0 1px;border-color: {widget_bordercolor};margin: 0 0.5em 0 0;padding:0.2em 0"><a href="#" style="color:#666;width:50px;background:'transparent';padding: 0 1em;text-decoration:none" OnClick="javascript:updateTab('searchtab');document.getElementById('searchcontentframe').src='http://www.education.com/widget/schoolfinder/SF_SearchForm.php?widget_key={widget_key}&widget_searchterm={widget_searchterm}&search_type={widget_searchtype}';return false;">find</a></li> </ul> </div> <div style="clear:both"></div> <div id="mapcontent" style="text-align:right;border: 1px solid {widget_bordercolor};width:{widget_width_less_padding}px;height:{widget_height}px;background:#FFFFFF;margin:0px 5px 0px 5px;"> <iframe width="100%" height="100%" frameborder=0 src="http://www.education.com/widget/schoolfinder/map.php?widget_key={widget_key}&widget_searchterm={widget_searchterm}&search_type={widget_searchtype}"> Loading map.... </iframe> </div> <div id="tablecontent" style="border: 1px solid {widget_bordercolor};width:{widget_width_less_padding}px;height:{widget_height}px;background: #FFFFFF;display:none;margin:0px 5px 0px 5px;"> <iframe name="tablecontentframe" id="tablecontentframe" width="100%" height="100%" frameborder=0 src=""> </iframe> </div> <div id="searchcontent" style="border: 1px solid {widget_bordercolor};width:{widget_width_less_padding}px;height:{widget_height}px;background: #FFFFFF;display:none;margin:0px 5px 0px 5px;"> <iframe name="searchcontentframe" id="searchcontentframe" width="100%" height="100%" frameborder=0 src=""> </iframe> </div> <div style="margin: 5px 5px 0px 5px;background-color:#FFFFFF;"> <div id="bottom-school-links" style="float:left;font-size:10px;font-family:verdana;width:{bottom-school-links-width}px;">{bottom-school-links}</div> <div id="bottom-links-right" style="float:right;"> <a href='http://www.education.com?cid=80.100' target='_blank'><img src="http://www.education.com/i/logo/edu-logo-150x32.jpg" border="0" alt="Provided by Education.com"></a> </div> <div style="clear:both"></div> </div> <div style="clear:both;padding: 0px 5px 0px 5px;"> <a target='_blank' href="http://www.education.com/schoolfinder/tools/localschools-widget/?cid=80.100" style='text-decoration:none;font-size:12px;clear:both;'><strong>Get your own Local Schools Widget</strong></a> </div> </div> <!--Local Schools Widget Ends here-->