WebSpawner.com Blog

Check out this cool music player, courtesy of playlist.com (go ahead, click the Play button or click on a song):

In a few easy steps you can add a great music player like this (with your own song selections) to your web site for FREE; in this post, we’ll show you how.

To begin, in a new browser window go to www.playlist.com.

Next you’ll need to create a free playlist.com account; click the Sign up button or link. You’ll see a form like this one:

Fill in the form with a Username and an Email Address (be sure the address you provide is a valid one that you can access). Enter a Password, then re-enter the Password Again as requested, and click the Continue button.

Now you’ll see a form like this:

Fill in your First and Last Name, and enter your Birthdate and Gender, then click the Sign up! button.

An ad will display asking you to select your cellphone carrier… you can bypass this if you are not interested by clicking the link at the top that says “No thanks, continue to my Project Playlist account.” Then you’ll see the following confirmation that your account has been created:

Now you’re ready to start selecting your songs from the many songs uploaded by other playlist.com users. Enter a song or artist name and click the Search button. The results of your search will display like the example below:

Click the triangular Play button (as shown in the image above) to hear a song file, and when you’ve found one that you like click the plus-shaped Add button (just under the Play button) to add the song to your own playlist. Continue searching and adding songs as you like.

A sample music player appears to the right of the search results, and will reflect the songs that you have added so far, as shown in the example below:

The little pencil icon at the top of the player allows you to edit your playlist… click the pencil and then click and drag songs up or down to change the song order, or double-click the little button marked X to the right of a song to remove it.

When you’ve finished adding songs to your playlist, click the EMBED link at the bottom-right of the sample player (shown in the image above).

You’ll be asked “Where do you want to put your playlist?” and you will need to click the last answer labeled E: Get the code for any other social network, blog, or your own personal website.

Then you’ll be prompted to “Choose which of your playlists you want to get the code for:” and you’ll need to click on your desired playlist (if you’ve created more than one, they will all appear in the list).

Next the Player Configuration options will appear as shown below.

Use the pull-down menus to answer the three questions regarding Autostart, Random/Shuffle, and Custom Skin (we recommend choosing “No” for all three). Then select your desired music player color from the pull-down list. When finished, click the green Get Code button as shown above.

A box will appear like the one below:

Click inside the box and select all of the code (use Control-A on a Windows keyboard or Command-A on a Mac), and then Copy that code (Control-C on Windows, or Command-C on a Mac).

Open a new browser window (but keep the code window open in case you need to go back to it), and log in to your WebSpawner account at www.webspawner.com.

In the WebSpawner Member Menu, click to select the page to which you would like to add your music player, then click the Modify button.

In the Modification form, scroll down to the Body Text step and click inside the text box where you would like your music player to appear (that is, above, below, or in the middle of any existing text on your page). Now Paste in the copied code (Control-V on Windows or Command-V on Mac). Complete the process by clicking ‘Continue’ at the bottom of the form, and then click ‘I Like It’ at the test page preview to publish your changes.

Your website will now include your music player for all viewers to enjoy.

If you ever want to change the songs in the music player on your web site, just log back into your playlist.com account and modify the same playlist; any new songs that you add will automatically appear in the music player on your website, without the need to copy and paste the player code again. Very cool indeed!

To make your web site more useful to viewers, you should add links to other web pages or sites which have additional information related to the content of your site. Adding such links will provide your site’s readers with a quick way to access other relevant content, and can also serve to improve your web site’s positioning in search engines results by increasing the relevancy score of your site. Today, we discuss different ways to add links to your web site.

As you build out your web site’s content and add additional pages, the WebSpawner system will automatically add clickable text links on each page to all other pages in your account… this makes your web site easy for viewers to navigate without the need for you to manually add each link. This Automatic Linking feature is controlled by a single checkbox in the Modification form for the Index page of your account:

By default, the auto-linking option is checked, and should be left checked unless you have a specific reason for not wanting each page in your web site to have links to the other pages in your site.

Links to other external webpages and sites can be added using the rest of the same Links List step in the Modification form, as shown below:

By typing in the Name of the Link and the URL of the Link fields as shown in the example above, you can add clickable text links to your site. The links will appear in a bulleted list or a pull-down menu on your page, depending on the Layout Template selected and the number of links. Links that you add should be relevant; that is, the content of the linked sites should be related to the content of YOUR web site.

You can also add links within the Body Text portion of your web site’s pages, by adding a small bit of code known as the Anchor tag. Using Anchor tags, you can create a clickable text link which will appear within a sentence or paragraph of text… we have used a couple of these types of links (sometimes called a “Hyperlink”) in the first two paragraphs of this article. Following is an example of how an Anchor tag is entered within a sentence into the Body Text area of the Modification form:

I created this web site using <a href=”http://www.webspawner.com”> WebSpawner.com</a>!

The way this text will appear on the published web page is as follows:

I created this web site using WebSpawner.com!

You can use the Anchor tag to create a link to any web site you like. Here’s another example of using it to create a text link within a sentence, again showing how the code would be entered into the Body Text area in the Modification form:

I prefer to use the <a href=”http://www.google.com”>Google Search Engine</a> for most of my online searches.

And on the published page viewers would see it appear in this manner:

I prefer to use the Google Search Engine for most of my online searches.

The Anchor tag is pretty easy to use once you get the hang of it. By using the Anchor tag you can add relevant Hyperlinks throughout your web site’s content to direct your readers to additional related information.

For a more detailed explanation of how to add Hyperlinks to your website using the Anchor tag, click here to read a previous article on the topic.

Are you thinking of creating a web page or building your own web site, but have no idea of how to start? No need to worry… YOU CAN build your own web page in minutes, even if you are a complete beginner. You DON’T need to buy expensive software programs or spend days learning to use them, and you DON’T need to learn any complicated programming languages. In today’s post we’ll go over some of the basic info you need to help you start your own web site.

WebSpawner has been helping individuals (including beginners) create their own web pages and multi-page web sites for more than a decade, with online creation tools that are easy to use. WebSpawner’s all-in-one user-friendly system simplifies the entire process of creating and updating web pages, and also takes care of hosting your web pages online so they can be viewed by others from anywhere in the world… all of which allows you to spend more of your time doing other things you wish to do. For newcomers and experts alike, there is no faster or easier way to create an online presence. And, FREE Customer Support is available to assist you with any questions you may have.

To get started, create a FREE account by going to www.webspawner.com (just click the link). Then, click the green Sign Up Now button near the top-right… this will bring up a simple step-by-step form which you use to create your FREE web page. Don’t worry if you don’t know exactly what you want the first time through the form; you can modify your web page later as often as you like to make changes and select  additional options.

Follow the onscreen instructions to fill in the form’s steps:

1. Complete the Headline step with the title text you want to appear at the top of your web page.
2. Click the button above the Background option you like (more options will be available later if you modify the page).
3. Type in the Body Text that you want on your web page; this is the main text portion of the page.
4. If you’d like to add some links to other web sites, enter those in the Links List step, following the example provided (you can also add more links later by modifying the page).
5. Carefully enter your E-mail Address, making sure it is correct, so that WebSpawner and your web page’s visitors will be able to contact you.
6. In the Image step, click the Yes button if you have an image on your computer which you would like to place on your web page.
7. Enter an Account Name (a.k.a. User Name) which you will use to log in to your account. Your Account Name cannot be changed later, and it will appear in the web address for your web page, so choose and type it carefully. Also enter a Password which you will use to log in to your account.
8. Type the Validation Code that appears in the image under Step 8 into the small box provided.

Next, click the Test My Web Page button at the bottom of the creation form… the screen will refresh and you will be shown a test preview of your new web page. The test preview will include green buttons with the following options:

• You can click the Let’s Modify It button to access the modification form, where you can make changes and choose from additional options; or…
• You can click the View as Free Web page and View as Enhanced Web page buttons to preview your page as it will appear to viewers; or…
• You can click the I Like It button to save your changes and proceed.

When you click the I Like It button, you’ll be presented with the choice between a FREE Basic web page and an Enhanced web page account, with a side-by-side list of the features of each for easy comparison. Free Basic web pages have limited features (Headline, Body Text, and Links, with banner advertising to support the hosting of the page), while the Enhanced web page account removes the banner advertisements and unlocks additional tools so you can create a nicer website, including unlimited additional pages and unlimited image galleries. The Enhanced upgrade includes:

The Enhanced account upgrade is available for the super-low price of only $4.99, and is available to you anytime you wish, with no long-term commitments and no obligation.

Simply make your choice by clicking either the Basic or Enhanced option, and your web page will be immediately published online, available for the world to see. The screen will refresh and provide you with the web address for your new web page, as well as a button to access the Member Menu of your account.

While completing these steps completes the initial creation of your web page, you can still make changes to your web page anytime you like, as often as you like, by clicking the Modify button in the Member Menu of your account (under Step 2 near the top).

If you have selected an Enhanced account, you now have access to many additional options in the Member Menu of your account… here are a few articles to help you get started with some of the Enhanced features:

• Adding more pages to your web site
• Adding Image Galleries to your web site
• Adding an Opinion Poll to your web site
• Activating your WebMail account

Remember, if you have any questions along the way, Customer Support is available to help you 7 days a week… just click the orange ‘Customer Service’ tab in the Member Menu of your account, then click the ‘Contact Customer Support’ link. Enter your questions, and be sure to check back a short time later to receive the responses to your questions.

Another important step in creating an online presence, especially for web sites which are business-related, is to get your web site listed in search engines so it can be found online by others. Be sure to read this article to get the information you need to promote your web site online; it is the first and most important step to take to make your web site a success.

The World Wide Web is a huge assortment of various web sites and documents, many of which are linked together for easy navigation from one to another by viewers. The element which creates such an interlinked connection is often referred to as a hyperlink. A hyperlink is either an image or colored text which, when clicked by a viewer, takes the viewer to another web site. In today’s post we’ll cover how to add hyperlinks to your web site.

To add a hyperlink, you use a small bit of HTML (HyperText Markup Language) code. Once you understand the HTML format required, adding a hyperlink is really quite easy… you just add the bit of code to the Body Text area of the Modification form for your WebSpawner website.

Let’s start off with a text hyperlink. The HTML code required is in the following format:

<a href=”URL”>
The Text to be displayed goes here
</a>

This particular HTML tag is called the Anchor tag. It’s really not complicated; you simply substitute in the URL address and the text to be displayed. Here is an example:

<a href=”http://www.webspawner.com”>
Create a free web site!
</a>

The line of code above will result in text displaying on your web site like this:

Create a free web site!

The text that you substitute into the ‘text to be displayed’ portion is displayed as colored clickable text, and when that colored text is clicked, it takes the viewer to the web site indicated by the URL address.

Now let’s take a look at the format for using an image as a hyperlink:

<a href=”URL”>
<img src=”URLofImage”>
</a>

Using this format, you simply substitute in the URL of the web site to which you are linking, as well as the URL address of the image that you wish to have displayed (the image must exist somewhere online… see Tips below for more information). Here is a usage example:

<a href=”http://www.webspawner.com”>
<img src=”http://www.webspawner.com/ads/freewebpages/wsanrevb.gif”>
</a>

Adding this line of code will result in a clickable image being displayed on your web site like this one:

When the image hyperlink is clicked, the viewer is then taken to the web site indicated by the URL address.

You can add hyperlinks of either type to the Body Text area of your WebSpawner web site any time you are in the Modification form.

Some closing tips:

• For your first few hyperlinks, try selecting and Copying (Control-C on a Windows PC, or Command-C on a Mac) the format we have provided above and then Pasting it (Control-V on Windows, or Command-V on Mac) into the Body Text area of the Modification form. Then you can easily replace just the URL and Text portions as you wish to create your own hyperlink.

• The easiest way to correctly enter the URL address for a web site is to first visit that web site in a separate browser window, then click in the Address Bar to select all of the address there and Copy it. Then you can simply Paste the entire URL into the Anchor tag code.

• The image used in an img src tag must already be hosted somewhere online where it can be viewed on a web site. You can obtain the URL address of an online image by right-clicking on the image in your web browser, choosing “Properties”, and then Copying the information marked “Location” or “URL”. On a Mac, Control-click on an online image, then select “Copy image address.” Once you have the URL of the image copied, you can then easily Paste it into the img src tag.