skip navigation

How'd They Do That? Livermore American Little League

By Jim Dahline, 04/07/15, 3:00PM CDT

Share

An inside look on a unique way to provide quick links to team pages for all of your leagues/divisions.

Organizations are always looking for ways to improve visibility of their teams on their homepage. While the traditional navigation lists work, finding a visually appealing way is a topic of discussion. A few weeks back, we found an organization, Livermore American Little League, that used a few simple elements and code to create a really cool way to feature its divisions and teams. You can go to its website and see on its homepage what it is doing, but for this article, I've included a screenshot below.


So, how did they do it? There are three main steps we'll need to go through:

1) We need to upload the team logos to Sitebuilder. 

2) We have to create a Tab Element listing out the divisions.

3) Use the Code Element in each tab to add the logos and links to the team pages. (we're assuming you have team pages set up, if you need help with that, here's the step by step and video)


Upload the team logos

Livermore created a page called "File Manager". It's view permissions are set to "private" since it's not a page that makes sense to make publicly available. Then, using the single Photo Element, add each logo to the page. 

Create Tabbed Element for Logos

Next, you'll want to set up the logo layout using the Tab Element. You can organize and put divisions, levels, or group in any way you want. 

Add a Code Element in each tab

Now, add a Code Element in each tab. We'll need to add code which will include the photo/logos we added earlier with a link to each team page (or whatever you want to link to) as well. 

Add Code with Logos and Links

Now, you'll want to add code to each element. 

  1. Get the url you want to link to and replace the text in green with that link.
  2. Get the link to the photo/logo and place replace the text in red with that link. 
  3. Repeat for the number of logos you want to include copying all content between the <td> and </td> tags and placing it before the </tr> tag.

<table width=“100%” cellspacing=“10”>

  <tr>

    <td><a href=“http://www.livermoreamerican.com/page/show/1579293-a-angels”><img src=“http://cdn2.sportngin.com/attachments/photo/4475/0429/angels_large.jpg” alt=“Angels” height=“42” title=“Angels”></a>

    </td>

    <td><a href=“http://www.yourwebsite.com/page”><img src=“http://linktoimage.jpg” alt=“altag” height=“42” title=“titletag”></a>

    </td>

 </tr>

</table>

Test and Repeat

Keep adding in each tab until you are done. Make sure to test out your links to make sure you did them correctly. If you did, you should have a great looking presentation for your divisions and teams on your homepage.

Awesome job Livermore American Little League.

About Jim

Jim Dahline is Director of Marketing at SportsEngine. He is active with many customers and specifically with tournaments. He is on the planning committee for US Pond Hockey Championships, serves on the board as Sponsorship/Fundraising Coordinator for Edina Hockey, coaches 6U hockey, and coaches kindergarten soccer for Edina Soccer Association.

Jim is a strong supporter of the American Development Model (ADM) and has completed SafeSport (07/17), USA Hockey CEP Mite Modules (9/147), USA Hockey background screen (05/17).

Social Media