Interactive Slideshows For Your Homepage

jQuery offers some neat effects that are easy to integrate into your website. All the user needs is JavaScript enabled in their browser to view the slideshows. It’s a clean way to present items such as upcoming tournaments, important news or announcements. Research shows that people gravitate towards images and visual representations of announcements – which makes a slideshow a great addition to any Region website

Here is a link to SLIDEJS, a simple one to use. They have multiple options for the slideshow, including text versions, image versions and a version with thumbnails. You can even change the transitions from a slide to fade.

The code is as simple as shown below:

AYSO Social Media Webinar Tonight

For the webmasters out there that also handle your Regions' social media initiatives, I’m presenting a webinar tonight that may have some valuable information for you.

Social Media 101: Using Facebook and Twitter to Increase Registration is a webinar focused on how to take advantage of these social media tools and all of the features they offer. I’ll go in depth with Facebook especially, explaining how to use/analyze Facebook Insights (metrics), how to properly adjust your admin and moderator settings and much more.
 
The webinar is tonight, 6:00 p.m. - 7:00 p.m., PT.

I hope you can join me! Learn more about the webinar and register here.

How to Add Margins and Padding to Your Content

Adding extra spacing around a paragraph or an image can make your content more aesthetically pleasing and easier to read. You can do this by changing the margins or the padding on a specific object. When you’re creating a paragraph, think of it as text inside a giant rectangle. With no padding and no margins, the text will be flush on the edge of the rectangle. See below.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in ipsum sed eros dignissim blandit. Sed turpis justo, egestas sit amet porta non, ornare ac erat. Phasellus malesuada consectetur posuere.

CODE: <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in ipsum sed eros dignissim blandit. Sed turpis justo, egestas sit amet porta non, ornare ac erat. Phasellus malesuada consectetur posuere.</p>

Note: the black border is just for example and is “invisible” in the code above.

HOW TO ADD PADDING

Padding adds space INSIDE the border of the rectangle. Let’s add a padding of 15 pixels to give the text some nice breathing room.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in ipsum sed eros dignissim blandit. Sed turpis justo, egestas sit amet porta non, ornare ac erat. Phasellus malesuada consectetur posuere.

CODE: <p style="padding: 15px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in ipsum sed eros dignissim blandit. Sed turpis justo, egestas sit amet porta non, ornare ac erat. Phasellus malesuada consectetur posuere.</p>

This will add padding to all four sides of the object. Margins work exactly the same way, except they add space on the OUTSIDE of the box.

Facebook Time-Saver: How to Schedule Your Posts

A lot of webmasters also act as the admin for their Region’s Facebook page. If this includes you, here’s an easy time-saving tip that will make your job a little bit easier: Schedule your Facebook posts ahead of time.

Facebook recently added this useful feature this summer – and it’s easy to use. When posting a status update, photo or video, you’ll see a small clock-shaped button in the bottom left corner, as seen here:

The AYSO News Widget

We recently debuted a news widget for use on AYSO Region websites. It’s fairly simple to use and comes in three different sizes to complement a variety of website layouts.

The widget is programmed in JavaScript, but doesn’t need to be placed in the page’s header tag. Simply copy the JavaScript tag and place it wherever you want it to show up on your website. If you want to have text wrap around the widget, you can place it in a DIV tag and float it in the text. Below is an example of how you would do that:

Code: <div style=”float: right;”><script type="text/javascript" src="http://marketing.ayso.org/js/aysonewswidget200.js"></script></div>

The DIV tag defines a division or a section in an HTML document and is used to group element, and then formats them with CSS.

To add the news widget to your website, visit the Region Toolkit.

For more information about how a DIV tag works, visit the W3C Schools website. They have great information on all things HTML/CSS.

Floating Images with Inline Styles

There is a wide range of webmasters in AYSO and I want to get a feel for what we have out there. I know we have quite a few of our websites on the Clubspaces platform. Do you prefer to use the design view or the HTML view when editing pages? Sometimes it’s easier to edit the page in HTML mode to get things to look exactly the way you want - the design view can be a little tricky to format things specifically. 

Styles are one way you can format your text and images. Most styles should go in the header of the HTML page. However, if you have a Clubspaces site, you don't have access to the page headers, so we use what are called inline styles. Inline means that the style is applied directly to the element instead of in a separate location. Here's one way to format your page with styles (CSS) to get a nice format:

FLOATING IMAGES

Say you have an image and you want your text to wrap around the image; similar to a magazine or newspaper style. You could use a table to format it, but it's not always precise and can get messy. Styles can make this work very easily with just a few simple words.

Here is a basic image tag:  <img src="myimage.jpg">

To float this image, you would add the BOLDED RED text to the tag above:

<img src="myimage.jpg" style="float: right;">

Welcome to AYSO's New Blog for Webmasters

Hello everyone! 

We are so excited to be launching this brand new blog for AYSO’s webmasters. From updating Region websites to running AYSO social media – webmasters are such an important component of an AYSO Region. We hope that this blog will be a place for you to learn new things, connect with fellow webmasters and discover ways to make social media work for you and your Region.

Time for personal introductions – my name is Aliya Hassan. I’m the Senior Editor of Marketing Communications here at the AYSO National Office. My position encompasses several different things, but here are the highlights: I create, edit and send AYSO’s newsletters (there’s a lot – see them all here!), I handle all of AYSO’s social media initiatives (Facebook, Twitter, Youtube, Pinterest, LinkedIn, Instagram and more), I write, edit and post content on AYSO.org and I manage the Google Analytics for the national site with a focus on improving SEO (search engine optimization).

In a nutshell – I’ll be your go-to person for anything social media and SEO related, and that’s what the majority of my postings will center around.

Your feedback is important to us, so please do leave comments if there’s anything you’d like to share! And if you’d like to stay connected with this blog and our future posts, there’s a subscribe link at the bottom.

Welcome Webmasters!

Hi all of you AYSO webmasters out there! My name is Jen and I will be here to help you with everything and anything web related! I am the Manager of Digital Media and Graphic Design at the AYSO National Office and have been working on websites since 1997, so I have been through most of the trends of the web, and can help with just about anything related to your websites.

We'll have a wide variety of information in this blog, from simple HTML and how to place an image on your website, to advanced things like fun and interactive modules you can put on your website. We'll help you get your websites found on search engines, as well as help you make sure all of your Region's most important information is listed on your website.

We chose to go with a blog over a newsletter to help encourage a community atmosphere. Feel free to comment, ask questions or answer other people's questions. I will help with as many questions as I can, but others are encourage to put in their two cents. After all, the web is nothing but a giant collaborative effort, right?

Here's a little bit of background on me before I start posting away. That way you can see what my professional background is and where my strengths lie.