As we inch closer and closer to the final days of MobileMe, many iWeb users should now be looking for a real hosting company to host their websites for them. In this tutorial, I am going to show you how to easily move your website from MobileMe to a real web host.

The first thing you will need to do is sign up for hosting. To do this, go to ragesw.com and click on Web Hosting. Then click on the Sign Up Now button. In this first step, you can either register a new domain name if you do not already have one, or you can transfer your domain over to RAGE Web Hosting. If you are not familiar with what a domain is, google.com, and apple.com are both domains.

So if you want to register a new domain, type in the name in the first box under the Register a new domain option. You can also select the extension for the domain by clicking on this drop down menu.

If you are transferring a domain, click on the second option to transfer existing domain to RAGE Web Hosting and type in your domain. When you are all done, click the Click to Continue button. You should see the domain you typed, and the Status reading Available. Then click the Click to Continue button.

On the next page, you will see some information about the services you will be getting. The drop down menu next to Billing Cycle will allow you to select how long you want to sign up to hosting for. I recommend choosing the 36 month price as it is the least expensive option and you also get a free domain

You can read through the remaining configurable options and check off anything else that you want to add to your order. When you are done, click on the Update Cart button.

On the next page, you will need to enter your EPP code. An EPP code, or authorization code, is a security code that verifies that you are the actual owner of the domain you are trying to transfer.

You can obtain this code by logging into your account where you purchased your domain from. You should be able to find the code by browsing around, or you can e-mail your current registrar and ask them to give you the code, and to also unlock your domain so you can transfer it.

Once you obtain the code, simply key it in and click on Update Cart. From there you will be able to checkout and order your hosting.

A few notes on some of the things I just mentioned. Firstly, I didn’t show the process for people who are just buying a new domain. That is because it is very straight forward and you won’t need any help with it. Second, if you are having trouble obtaining your EPP code, you can just e-mail RAGE Web Hosting and they will help you get it.

After you have signed up, you will receive your signup e-mails from RAGE Web Hosting. In one of those e-mails, you will see an e-mail that looks similar to this one. These are the FTP login details. All we need to do with these is plug them into the corresponding fields on the iWeb publish page. It’s always a good idea to click the Test Connection button to ensure you copied and pasted everything correctly.

And that’s it. Once you publish your site, you can then visit your website on your new web host.

So for iWeb users, what is an easy way for you to do this? MailShoot, a mailing list manager by RAGE Software makes it really easy for iWeb users to collect e-mail addresses from their website visitors. In MailShoot, you can send out e-mails to your entire mailing list, or certain segments of your list. RAGE Software just released an update to MailShoot recently and the user interface has become very easy to work with.

Watch this video tutorial to see how to add the signup form to your site in iWeb.

Let’s use an example to illustrate this. Phillip and Joffrey are friends on Google Plus. Phillip is searching for a laptop to buy online. He finally finds a site (after much shopping around) and decides to place an order. When Phillip’s laptop arrives, he is so happy with the quality, speed, and service of the website that he decides to go back to Google, and he locates the exact same site in a search result, and clicks on the little Plus 1 button next to the URL.

Just like linking to a site, Phillip has essentially voted for, or recommended this website. A few months later, Joffrey is looking for a laptop too. During his Google search, he is now seeing the exact same site that Phillip purchased from. But this site now appears higher in the search results for Joffrey, and even tells him that his pal Phillip recommends this website. Joffrey clicks on the link, likes what he sees and buys a laptop from the site. This all happened because Phillip recommended a site, and without the two even communicating really, Joffrey saw that website and made a purchase.

So what does this mean for you? Well, your iWeb sites can also be recommended by people, not just in the search result, but on the actual site as well. This is a no brainer, and a must-do for all website owners. Luckily, adding a Google Plus button to an iWeb site is pretty easy. Watch the video below to learn how to do it. I highly recommend everyone with an iWeb site to do this. Even if you don’t think Google Plus is popular now, you will thank me later!

The problem with this is that the internet has become so fast that people’s patience has decreased. Google has even stated that the speed at which a site loads is now taken into consideration when ranking a website.

This poses a problem for virtually all iWeb websites. An extremely large majority of iWeb sites will load much slower than the average website. You can even check your site’s loading time if you have a Google Webmaster Tools account.

So how do we fix this problem? The solution is actually a lot easier than you might think. An application called WebCrusher allows you to simply drag and drop your website folder, click one button and have your entire iWeb website ‘optimized’ to load significantly faster in a web browser.

I have embedded a quick video tutorial below which will show you how easy it is to use WebCrusher on an iWeb website. I highly recommend this application for all iWeb users. Personally, I hate waiting for a site to load, and I have been guilty in the past of clicking the back button just because a site loaded slowly.

Adding e-commerce to an iWeb website does not have to be a tricky thing. Using PayPal gives your website visitors a familiar method for payment, while offering you an easy way to integrate e-commerce into your iWeb website. The video tutorial below will walk you through the necessary steps needed to add e-commerce to an iWeb website. It’s easy to do and can be done by anyone!

Click here to view the embedded video.

http://www.mydomain.com/My_Site_Name/Page_Name.html

There is a very easy way to change this URL to appear much cleaner. The end result will have your URL look something like

http://www.mydomain.com/Page_Name.html

which is much shorter, and much cleaner looking.

Take a look at this video tutorial which will show you how to easily do this. All you need is iWeb SEO Tool, which is available to download for free! This extremely popular video over 5000 views and many iWeb users have been utilizing this method for making their URLs shorter.

Click here to view the embedded video.

Sign up on a 3 year plan and receive hosting for $3.50/month, plus get a free domain and a free license to iWeb to Wordpress.

That’s a $300 value, all yours for just $126. A savings of $174! You’ll only find this offer available here, on iWebUnlimited.com

Note: This offer expires November 28th 2011. Only available to first time RAGE Web Hosting users. Enter promo code BLACK

Edit: For those of you who find this tutorial to be a bit too advanced, here is an extremely easy way to add a forum to your iWeb website.

Original Article: So most all of us have used forums before. It’s a great way to spark discussion on your site as well as create a community so people with similar interests can communicate with others. You probably have visited our iWeb Forum and gotten your iWeb questions answered there before.  Well this post is all about getting a forum into your iWeb site.  If you have a site that you think could benefit to provide a forum, here is the absolute easiest way to do so.

To get this to work in iWeb we are going to be using the great Vanilla Forums.  It’s probably the best forum software out there. before we talk about how to get it into iWeb let’s talk about the different options that we have with Vanilla Forums. With choosing how to set up your forum you basically have 3 options:

1. VanillaForums.com – Free Version (Limitations: 30 members only, w/no customization)
2. VanillaForums.com – Paid Version (Pricing Starting at $49 p/month, unlimited users. See Plans and Sign Up Here)
3. VanillaForums.org – Open-Source and Free, Unlimited Users, No Restrictions. (Manual Install, hosting, and database required)

So as you can see you have a few options. Using the “.com” version, the forum is purely hosted on VanillaForums.com’s servers (hence the cost and limitations with the free version), but is by far the easiest to setup.  You can be up and rolling in less than 1 minute it’s pretty nice, but there is a cost involved to get some of the more fancy features such as unlimited users, etc.  So for ease of setup and less hassle I suggest using the 1st and 2nd options.

The third option is the “.org” version.  Which is open-source and totally free.  You can have unlimited users, and pretty much all of the paid features are included. The only catch is that because it’s open-source you have to set it up completely yourself on your own server and create your own database. It’s really not too scary and I’ll walk you through that here on this tutorial. So let’s get started, we’ll start with the “.com” versions first.

VanillaForums.com Free and Paid Setup:

The VanillaForums.com (free and paid) version is quite easy to setup and embed into iWeb. Here are the necessary steps:

1) Create an account - (free or paid) by going to VanillaForums.com and follow the simple 3 step process to sign up for your forum. Step 1 asks for your login information (name, email, password, etc.), step 2 you create your forum name, and step 3 (if paid version) you add your credit card information.

2) Choose Embed Theme - After creating your account you’ll be redirected to the “Getting Started with Vanilla” page which simply gives you some steps on how to customize your forum.  Feel free to spend some time with that if you’d like, but we want to head over to the “Themes” link on the left sidebar under the Appearance section.  In there choose the “Embed-Friendly” theme by clicking “Apply”.

3) Copy Embed Code – Now that you have the “embed-Friendly” theme applied, you can now go and get the code so you can embed it into your iWeb site.  To find the embed code click on the “<Embed> Vanilla” link on the left side under the “Add Ons” section. There you will find the Embed Code. Copy that code and head over your your iWeb page you want to have this forum on.

4) Paste Embed Code – Now that you have your embed code and you are on the page that you would like your Forum to be embedded on, add an HTML Snippet to the page and simply paste this forum embed code into it and hit apply. You should now see your forum Embedded into your iWeb page.

5) Publish Your iWeb Page – Now simply publish your iWeb site online and your forum will be ready for your viewers to start discussing and communicating on.

Feel free to head back to your account on VanillaForums.com to customize a few things.  Such as adding your logo (Appearance > Banner), or adding Forum categories (Forum Settings > Categories), etc. There are many options in the backend, I’d recommend going through them and seeing if there are any settings that you’d like applied to your site.

VanillaForums.org Open-Source Setup:

This setup has great features being free and fully featured.  It does require us to set this up on our own, on our own server, and create a database with the install. But once installed it’s pretty nice because it’s on your servers, unlimited users, gives you more control, and some great options and add-ons. So let’s get started.

First off, before taking the manual setup to install this on your server first check to see if your server offers a way to install it automatically. There are many web hosts out there that have automated options to install common installs such as this.  Let me run through a few of the popular ones first:

• GoDaddy - Go into your hosting control center and click on the Applications install link on the right sidebar. In there you can do a search for “Vanilla Forums” and you can install it automatically on your server.  You might want to create a folder on your server called “forum” and install it there.
• iPower – Log into your control panel and click on the “Simple Scripts” option in the “Website” section. You’ll then be sent to the Script List where you’ll see a section called “Forums” and you’ll find “Vanilla Forums” at the bottom.  Simply click that and go through the steps and it will install for you.
• BlueHost – This is the same as iPower, simply log in, and here in (what they call the) cPanel you’ll find a section called “Simple Scripts Installation” and you’ll find the simple scripts option. Once you click on that you can scroll down to find “Forums” and click the “Vanilla Forums” and begin the installation process.

Many other hosts out there have this “Simple Scripts” option and if they do, they most likely have the option to install Vanilla Forums. By doing this method it creates the database and installs it on a directory on your server for you and it’s done, complete, and installed very quickly and easily. It’s quite nice.

If you are on a host that doesn’t have the option to install it automatically or simply don’t want to use the auto-install methods available for whatever reason here is how to install it on your server manually.

Manual Install:

1) Check Requirements – First off make sure that your server you want to install it on is compatible by viewing the Vanilla Requirements here: http://vanillaforums.org/docs/installation-requirements.

2) Pre-Requisites:

This guide assumes you have:

• FTP access to your webserver (such as Apache) with PHP5 (Typically, you upload the files via a FTP client such as Transmit, WinSCP, or FileZilla.)
• Access to a MySQL database (should be provided by your web host)

3) Create the Database - You can name the database anything you want, but don’t get fancy with the name — perhaps use something simple like “vanilla” or “forum”. Be sure to take note of the database name, you will need it later.  If you are unfamiliar with how to create a database with your web host, I suggest contacting them and they can guide you on how to create a MySQL Database.

Note: Vanilla uses UTF-8 for your database encoding. We strongly encourage you to select “utf8″ in the “collation” drop-down box in phpmyadmin. If you select a different encoding method, you may need to manually update your ../db/local.php file.

Tip: If you plan on having multiple Vanilla installations, don’t use vanilla as the database name.

Create a database user (with password):

• Again, don’t get fancy with the database username. In fact, you can use the same name that you selected for the database.
• Select a strong password. You can easily recover your database username and password if necessary (by reviewing the vanilla/conf/config.php file in your Vanilla directory.
• Be sure to record the username and password. You will need it later.
• Some hosts have you create the database name, username, and password all in the same step.
• Be sure to assign all database permissions to the database user that you created (if applicable)

4) Download Vanilla Forums - Download the current version of Vanilla to your local computer. The full download is roughly 2MB. Once you have downloaded, you should decompress (unzip) the Vanilla archive file to your local hard drive.

5) Upload Vanilla Forums to Your Server – Next, you need to connect via FTP to your web host. Once connected, find your web directory. It is often called www or public_html or httpdocs (this is different from host to host). Then, copy all the Vanilla files to the location you’d like the forum to be installed on (Note you cannot install this on MobileMe). Since your iWeb site is probably installed on the direct level of your server you might make a directory (folder) called “forum” and upload the files there.  So that your web address ends up being http://yoursite.com/forum/.

6) Install Vanilla Forums: Go to your newly installed forum web address (i.e. http://yoursite.com/forum/) and the installation screen will appear. Simply follow the easy steps in the installer.

7) Sign In for the First Time: Sign in using the Sign In button in the right-hand column, also known as the panel. Enter the information used in step 6 and click Sign In.

8) Configure and Explore Vanilla – Congratulations and welcome to your shiny new Vanilla Forum! Take some time to familiarize yourself with the Dashboard and the many features Vanilla has to offer.

One thing you may want to do here first is to enable “Pretty” URLs Apache: Requires .htaccess to be working on your server. Edit your config.php file and set $Configuration['Garden']['RewriteUrls'] = TRUE;

Embed Into iWeb

Now that you’ve install Vanilla Forums on your server (either through the automated process or manually) we can now embed the forum on our iWeb site. Here’s how:

1) Choose Embed Theme – Head over to the “Themes” link on the left sidebar under the Appearance section.  In there choose the “Embed-Friendly” theme by clicking “Apply”.

2) Copy Embed Code – Now that you have the “embed-Friendly” theme applied, you can now go get the code so you can embed it into your iWeb site.  To find the embed code click on the “<Embed> Vanilla” link on the left side under the Add Ons section. There you will find the Embed Code. Copy that code and head over your your iWeb page you want to have this forum on.

3) Paste Embed Code – Now that you have your embed code and you are on the page that you would like your Forum to be embedded on, add an HTML Snippet to the page and simple paste this forum embed code into it and hit apply. You should now see your forum Embedded into an iWeb page.

4) Publish Your iWeb Page – Now simply publish your iWeb site online and your forum will be ready for your viewers to start discussing and communicating on.

Feel free to head back to your account on VanillaForums.com to customize a few things.  Such as adding your logo (Appearance > Banner), or adding Forum categories (Forum Settings > Categories), etc. There are many options in the backend, I’d recommend going through them and seeing if there are any settings that you’d like applied to your site.

Conclusion:

That’s all there is to it. Hopefully that make sense and you can get some great forums embedded onto your iWeb site.  Please remember that Vanilla is not our product, so any support or problems with Vanilla should be sent directly to Vanilla support on their website.

If you have any questions about actually getting the forum into iWeb or similar questions feel free to comment below. And if you feel like iWebUnlimited has helped you, please consider making a donation to the site.  Thanks for reading and happy forum embedding.

After adding the attention bar on my site in July 2011 to show the article “iWeb and Beyond” I had a lot of people on the comments, forum, facebook, and Twitter requesting to post a tutorial on how to add an attention bar to their iWeb sites.  So this tutorial is on how to do just that.  First off let’s explain what an attention bar could be used for.  Of course I used it to on my site to get peoples attention and make sure a certain article I wrote got read.  It’s pretty hard to miss.  You might also use it to let your viewers know that your site will be experiencing some matainance, or perhaps you have a big deal or sale on your site, or you could use it for advertising, or if you really just need to get your viewers attention.  So there are some ideas for how you could use this.  

View Demo »

How to add it to iWeb

Now, let’s get to the fun part on how we actually implement this into iWeb.  It’s actually quite easy.  Here are the steps:

Step 1) Create your page that you’d like this alert to be on in iWeb

Step 2) Publish that page to a folder or your server.

Step 3) Download this file that contains all the javascript and css script files that will power the attention bar.

Download attention-bar.zip File »

Step 4) Unzip this folder (if you haven’t already) and you should have a folder simple called “attention-bar” with three folders inside it. Add this folder so it’s along side of your .html file that you published.

Step 5) Open up your publish HTML page in an HTML Editor (Such as Coda, Espresso, or even Text Edit (if you are using textedit be sure to go into the preferences of textedit and check the box that says ignore rich text in html)) and add the code below right before the closing </head> tag of your page.

Step 6) Make changes to the code as necessary such as your message, your link, and other parameters that you may want to change (details on that below).

Step 7) Save your file and your done.

That’s really all there is to it and you’ve got a great looking attention bar on your iWeb site.

Questions

What about if I want this on every page of my site?

You’ll have to add this code to all the pages that you want this to show up, so if you want it on all pages of your site you’ll need to open up each page individually and add this code to the head of each page.  If you have a lot of pages you might want to use one of those tools I’ve mention previously such as iTweak or Mass Replace it and it you could do a find </head> and replace with the code, but just add the </head> to the end of the code and tell it to mass replace it and it would do all your pages.

Do I have to do this each time I publish my site?

Yes, when you republish a page in iWeb your html files will get re-written, so you’ll have to go and add this code to the head of your site again.

Customization:

You can customize quite a bit of this tip.  You’ll see other parameters in the code the is customizable.

Here are the parameters and a little explanation of what they do:

• “positioning” : “fixed” – Inline = scrolls with the page, Fixed = stays on top of the screen also when scrolling the page.
• “display” : “delayed” - This is how the attention bar is displayed upon first load. Options are: delayed, expanded, collapsed, on scroll. The options delayed & on scroll, depend on the Display delay settings.
• “displayDelay” : 2000 – When the site is visited the bar is colapsed by default, it will be expanded after this delay (in milliseconds).
• “speed” : 500 - How fast it animates up and down.
• “height” : 30 – How tall in pixels do you want the attention bar.
• “collapsedButtonHeight” : 30 – The height of the show button when the attention bar is collapsed
• “messagesFadeDelay” : 1500 – The delay that the message fades in.
• “easing” : “swing” – The options are: swing or linear (swing looks better ;-).
• “fontSize” : “10pt” – Size of the font.
• “fontColor” : “black” - Color of the font (you can use hex color values too, such as #ffffff for white).
• “aFontColor” : “black” – The font color of the link.
• “aFontSize” : “10pt” - The font size of the link.
• “backgroundColor” : “lightyellow” - The background color of the attention bar. You can also use hex color here too.
• “positionClose” : “left” – Position of the arrow button when the attention bar is closed.  The options are: left or right only.
• “enableCookie” : true – With this option set to true the users browser will remember the preference of the attention bar.  That way if they close the bar, it won’t pop up on every page.  If you set this to false it will always show whatever settings you set here every time.
• “cookieHash” : “fc3e8788bb772c04d0807b3cc2590518″ - Don’t bother changing this.
• “cookieExpire” : 1 – Cookie expire time in days. If the cookie expires, the user saved states will be ignored (The Attention bar will be auto expanded then! this only applies if you have the enable cookie option set to true.)
• “messagesDelay” : 5000 – Display in milliseconds (for ex: 2000 = 2 seconds)
• “announcement” : Long line is the image that shows up on the attention bar.  By default it’s a bullhorn, and the image path is attention-bar/images/announcement.png, but it comes with two other options, just change the announcement.png to “important.png” for a explanation point, or change it to “tip.png” and get a light bulb.
• “announcementClass” : Of course this is where you actually put your message.  I have a default message in there right now, but you can change that as well as the link.

That should just about do it.  Let me know if you have any questions by adding it to the comments below.

Video Tutorial

Here’s a video tutorial on this just in case your still not sure.

Thanks everyone and hope you had fun with this iWeb tip.

If you found this tutorial helpful, please consider donating as it takes a lot of time to put together these tips. Thanks much for visiting iWebUnlimited.com.

CSS Buttons

Really all there is to this tip is find the button your want below, copy the code, and paste it into an HTML Snippet.  That’s really all there is to it.  View the buttons below to view all the buttons and their interactive rollovers, then find matching button code to paste into your site.

CSS Button HTML Snippet Code

Simply click the button that you’d like to add, copy the code, and paste it into an HTML Snippet.  Don’t forget to change the link URL and button text at the bottom of the code.

Button-1

Button-2

Button-3

Button-4

Button-5

Button-6

Button-7

Button-8

Button-9

Button-10

Button-11

Button-12

Customization

The only customization you’ll need to do is regarding perhaps colors, fonts, and sizes.  So to do that just find the line in the code that has what element you want to edit and change it to what you want.  For example you might see the line of code font: 14px/100% Arial, Helvetica, sans-serif; which is telling it that you want to use the font Arial, and if the user doesn’t have that font it will use Helvetica, and if they don’t have that font it will use any san-serif font like verdana, or something else.  So you can just change that to be the (web-safe) font you want.  You’ll also see font sizes like 14px, etc. Just change those to what size you want. So spotting font options in the code is pretty easy.

Changing colors in the buttons requires for you to change the colors according to hex values.  So for example black is #000000 and white is #ffffff and so forth.  There is a special color picker that you can install right into your iWeb that will add an extra tab in the default color picker with hex values.  It makes it super easy to change colors and is a must for any iWeb designer.  You can get it by going here.  If you don’t want to install that (which you should) you can view an online color picker by going here.  You’ll see the code to change colors under the section that’s labeled: /* iWebUnlimited Button Color */  then you’ll see a line of code that starts with “background” then it states the gradient color to and from.  Just replace the # color code to what you want it to be.

As for sizes (width), you’ll notice at the very top of the code (the 2nd line) there is a line that has the width in it.  Just change that width till your button fits.  The current width of the buttons is so it fits the current text in it.  So if you put some text in your button that is longer or shorter you’ll probably have to change this width so the snippet fits your button better.

So how do I change the button link and button text you say? Simple you’ll see a line of code that says “Button Link” towards the bottom of the code snippet.  Just replace your link URL, then the text of the button you’ll see is wrapped in same code that’s called “span” tags.  It’s labeled probably “button-#”, just change that to what you want, for example you might change it to  ”Learn More”, or “Contact Us”, etc.

I’ve added some code here so you can easily adjust the size and some styling of your button.  Here’s some examples:

To add these styles to your button just add the code below inside of the style tags right before the close </style> tag.  Then you’ll need to add the link identifier to your link.  Where is that, you ask? You’ll see in your link which starts with <a  you’ll see a section that says class= then a bunch of css identifyers, for example you’ll see “iWebutton blue” for example.  So to get the large button for example, just add the large code to the style section and put in the identifyer “large” so the full class part would look like this class=”iWebutton blue large”.

Here are the codes you’ll need to add to your code to get these styles:

XXLarge (identifier: "xxlarge)"

XXLarge Rounded (identifier: "xxlarge rounded")

XXLarge Iconized (identifier: "xxlarge iconized"

XLarge (Identifier: "xlarge")

XLarge Rounded (Identifier: "xlarge rounded")

XLarge Iconized (Identifier: "xlarge iconized")

Large (Identifier: "large")

Large Rounded (Identifier: "large rounded")

Large Iconized (Identifier: "large iconized")

Small (Identifier: "small")

Small Rounded (Identifier: "small rounded")

Small Iconized (Identifier: "small iconized")

XSmall (Identifier: "xsmall")

XSmall Rounded (Identifier: "xsmall rounded")

XSmall Iconized (Identifier: "xsmall iconized")

So basically, you get the code from the first snippets, then if you want to customize that button with one of these styles above then add the code above the closing style tag and add the identifier to the link class.  Here’s some screenshots to help you out.

So the final code would look like this:

If you are using the “Iconized” style in your button you have to add some extra code to the actual link itself.  Here’s what your link should look like:

Notice the link to an image.  So basically you’ll need to upload an icon (that’s 16 x 16 at most in pixels) to your server, then link to it in the code.  You’ll notice that the difference is that in the span tags we’ve added this one line of code that has the link to the image in it: style=background:url(http://iwebunlimited.com/examples/css_buttons/bird.png) no-repeat 0 45%;

I’ll be adding a video on this tip soon, so if you are a bit lost you’ll be able to follow the video to get these cool buttons on your site.  Thanks again.

With both examples (post in HTML Snippet and in HTML Code after publishing) you have to download the snowstorm.js file below and place it somewhere on your server (whether it be mobileme or your server account with someone like GoDaddy, iPower, BlueHost, etc.).  So for both of these you can do so by clicking the download button below:

Download Snowstorm.js file »

Snow on the entire site:

This one is quite simple, but it does require you to add a single line of code to the html after you publish it, but here are the steps to accomplish it.

1) Download the snowstorm.js file above and put in on your server.  Whether that be on your mobileme server or your hosted server with GoDaddy, iPower, etc.  If you’re hosting with MobileMe then I’d recommend creating a folder called “snow” in this location iDisk/Web/Sites/snow (this is the folder you’ll create).  If you are hosting this on your own server like GoDaddy or something similar I’d make this folder on the root level of the server (by root level I mean to immediate one to the live files.  It’s sometime listed as public_html, sometime’s it just the first level that comes up, etc.).

2) Then drop the snowstorm.js file in that “snow” folder we created in step 1.  If your using MobileMe your link to this file will become http://web.username.com/snow/snowstorm.js (of course replace “username” with your own mobileme account name).    If your using your own host (like GoDaddy, iPower, etc) then your link then become http://yoursite.com/snow/snowstorm.js

3) Create your iWeb site, make it look nice ;-) and publish your site to a folder.

4) Open up the html page that you want the snow to appear on in an HTML editor.  (I recommend using Coda from Panic Software, but as I’ve mentioned before you can just use TextEdit if you’d like, but be sure before opening it in TextEdit that you go into the TextEdit prefs and check the check box in the Open and Save tab that says “Ignore Rich Text Commands in HTML files”.  Then you can open it in TextEdit.

5) Add this line of code right before the closing </head> tag.

<script src=”http://yoursite.com/snow/snowstorm.js“></script>

Of course replace the URL to link to where you put the .js file on your server.

6) Save and test.  If you open your html file now in Safari (or any other browser) you will see that your site is now snowing. Yay!  Upload it to your server and let your viewers enjoy the lovely snow on your website.

View Demo »

Snow in HTML Snippet

This use of the code makes it so you don’t have to go into the html after publishing the site and add any code, you just add this code to an html snippet, hit apply, and it will snow in the html snippet.  The nice thing is, is that you can size the snippet to be whatever size you want, so can it be handy if you  (for example) only want it to snow over the top of a photo or something similar.  But keep in mind that wherever you put the snippet any links or button that are under it will not be “clickable”.  So only put it over the top of items that you don’t really need to be “clickable” underneath the snow.  This method does not put snow across the entire page, only in the html snippet.  If you want it to snow across the entire page, then use the tutorial above.

So here’s how to get it in an HTML Snippet:

1) Download the snowstorm.js file above and put in on your server.  Whether that be on your mobileme server or your hosted server with GoDaddy, iPower, etc.  If you’re hosting with MobileMe then I’d recommend creating a folder called “snow” in this location iDisk/Web/Sites/snow (this is the folder you’ll create).  If you are hosting this on your own server like GoDaddy or something similar I’d make this folder on the root level of the server (by root level I mean to immediate one to the live files.  It’s sometime listed as public_html, sometime’s it just the first level that comes up, etc.).

2) Then drop the snowstorm.js file in that “snow” folder we created in step 1.  If your using MobileMe your link to this file will become http://web.username.com/snow/snowstorm.js (of course replace “username” with your own mobileme account name).    If your using your own host (like GoDaddy, iPower, etc) then your link then become http://yoursite.com/snow/snowstorm.js

3) Add this line of code inside of an HTML Snippet.

<script src=”http://yoursite.com/snow/snowstorm.js“></script>

Of course replace the URL to link to where you put the .js file on your server.

6) Click apply on the snippet and you’ll find that it will now be snowing in your html snippet.  Feel free to resize the snippet to whatever size you need and the script will automatically size the snow to your snippet. Yay!  publish your site and let your viewers enjoy the lovely snow on your website.

View HTML Snippet Demo »

Notes:

You’ll find in the .zip file you downloaded there was two .js files.  If you find that the original snowstorm.js file is loading slow on your site, then try using the snowstorm-min.js file instead.

Customization:

Once you have Snowstorm running in your page, you can customize its properties either by editing the snowstorm.js file directly, or assigning new values to the snowStorm object after snowstorm.js has loaded.

For example:

<!-- required snowstorm JS, default behaviour -->
<script src="http://yoursite.com/snow/snowstorm.js"></script>

<!-- now, we'll customize the snowStorm object -->
<script>
snowStorm.snowColor = '#99ccff'; // blue-ish snow!?
snowStorm.flakesMaxActive = 96;  // show more snow on screen at once
snowStorm.useTwinkleEffect = true; // let the snow flicker in and out of view
</script>

Thanks everyone.  Hope you like this tip and have fun with it.

If you found this tutorial helpful, please consider donating as it takes a lot of time to put together these tips. Thanks much for visiting iWebUnlimited.com.

First off I’ve gathered and prepared 3 different image sliders.  The first is one called the Pikachoose Slider, the second is the Anything Slider, and the 3rd is the Beautiful JQuery Slider.  They all look fantastic in iWeb.  Now as always I try to make these tutorial as easy as possible, this one you’ll have to dabble in the code a bit, but the nice thing is, is that it’s not a post publish code edit, meaning that you won’t have to redo this each time you publish.  You can do it once and it will stay on your site with every update you do to your site. Yay!  Aslo, I’ve also made video tutorials for each slider so you can watch how it’s done instead of just read how it’s done. Yay!  You’ll find the video at the end of each slider text description .So let get started with how to get these great sliders into your website.  We’ll start with the Pikachoose Slider.

Pikachoose Slider

This slider is probably my favorite one out of the sliders cause it has so many features and options to suite your website.  It sports slider buttons on both sides of your image, thumbnails with the option to place it on the bottom, right, or left.  You also have the option to have a title go over the image as well.  You can view a working demo done in iWeb by clicking the button below:

View Demo »

Download Pikachoose Files »

Here’s how to get it in iWeb:

1) The first step is to download the code that makes this slider work.  You can do so by clicking here.  You’ll see the downloaded file is called pikachoose_slider.zip, just double click it to unzip it and you should have a folder called “pikachoose_slider Folder”.  Inside that you’ll see three folders “HTML Snippet Code »”, “assets”, and “images”.  The first thing we are going to do is create images to go in the images folder.

2) My slider in the demo has 8 images, but you can have really as many or few as you want.  But you will need to size your images down to 500 x 315 px.  I recommend using Photoshop or something similar to do this, you could even use Preview to do this which comes on all Macs.  If you don’t know how to resize an image just google “how to resize a photo” in google and you’ll find a bazillion results helping you out, even YouTube has a bunch of tuts on how to do that.  But however you do it just size your images down to 500 pixels in width and 315 pixels in height.  Save those photos in the folder called “images” inside the “pikachoose_slider Folder”.

3) Step three is to 2 of the 3 folders in (assets and photos) on your web server.  This part for some reason seems to confuse people, so I’ll try to make this as simple as I can.

If you are hosting your site with MobileMe then I first recommend make a folder called “iweb_slider” in this location on your iDisk.

iDisk/Web/Sites/iweb_slider (this is the new folder you will create)

How do you access your iDisk?  Well first off you have to be a MobileMe member, 2nd just click into a finder, then up top on the menu bar click the “Go” button and go down to “iDisk”  then click “My iDisk”.  Then you can browse your iDisk create your folder and drop those two folders (“assets” and “images”) into that “iweb_slider” folder we create on our idisk.

If you host your site with an FTP Server then you are going to need to connect to your FTP server via an FTP application.  I recommend using Transmit from Panic Software.  It’s fast, easy to use, and awesome!  Then enter in your ftp host, username, password, and you’ll be into your web server.  Now I recommend also making a folder on your server to hold these two folders, similar to  the iDisk idea above I’d make a folder called something like “iweb_slider” and put it on the root level of your server.  Many ask, “what is the root level?”, some hosts mark as “public_html” for some it’s the first level that shows, but basically it’s the main level where your site is stored.  So once your into your FTP and you’ve created your folder “iweb_slider” then drop those two folders (“assets” and “images”) onto your server, you don’t need to put the folder “HTML Snippet Code »” onto your server.  That folder simply has the code we’re going to put into iWeb in the next step.

Everyone with me?  So far all we’ve done is download the pikachoose folder (which has 3 folders in it), gather and size our images and put them in a “images” folder, then put those two folders on our web server in a folder called “image_slider”.  If your good with all this then move on to step four.

4) Now it’s time to get into iWeb and add the fancy code that makes this slider come to life!

The first thing you need to do is choose if you want to have the thumbnails below the main image, to the left, or to the right.  You can see the example done in iWeb as a reference by clicking here.  Once decided, find the code provided in the “HTML Snippets Code »” for the type of slider your want (bottom, left, right) and paste the code into an HTML Snippet in iWeb, and hit apply.  You will see my default images in place.  We now just need to modify the code so it references to that assets and images folders that we uploaded to your server.  Simply change the URL’s to point to your server.  Here is an example:

Change the code in red to link to your own server

<link type=”text/css” href=”http://iwebunlimited.com/examples/image_sliders/pickachoose/assets/css/style-right.css” rel=”stylesheet” />

Example:

<link type=”text/css” href=”http://mysite.com/iweb_slider/assets/css/style-right.css” rel=”stylesheet” />

or if your using mobileme it might look like this:

<link type=”text/css” href=”http://web.me.com/username/iweb_slider/assets/css/style-right.css” rel=”stylesheet” />

Same thing goes for the images.  Here’s an example:

<li><a href=”http://www.iwebunlimited.com“><img src=”http://iwebunlimited.com/examples/image_sliders/pickachoose/images/palms.jpg”/></a><span>You can add cool captions to your photos!</span></li>

<li><a href=”http://www.mysite.com/mypage.html“><img src=”http://mysite.com/iweb_slider/images/palms.jpg”/></a><span>Change this to say whatever you’d like!</span></li>

5) After you have successfully modified the code go ahead and hit “Apply” on your HTML Snippet and you should see your images and can say that you’d successfully added the Pikachoose Slider to iWeb.  Hooray!

Can I use PikaChoose on a commercial site?

Yes. You are within the license to use and distribute PikaChoose as long as you do not sell PikaChoose itself.  That said, the development for the pikachoose slider is done by Jeremy Fry, and the iWeb modification was done by me. It takes a good portion of our personal time to keep PikaChoose up to date, so if you can donate to Jeremy and myself we’d greatly appreciate it.

Pikachoose Slider Video Tutorial

Anything Slider

The anything slider is a nice slider for someone looking for a minimal approach to the image slider.  This one doesn’t have any thumbnails, but you use arrows and numbers to navigate the image slider.  View the demo below.

View Demo »

Download Files »

1) Step one is to download the files above and decide how many images you want to have in your slider.

2) Next size your images down to about 680 x 317.  Add all your sized photos into the images folder located in the “slider” folder.

3) Next upload the “slider” folder to your web server.  So for example if you uploaded it to your root level of your server it would be http://yoursite.com/slider/

4) Next open up the html file (or .txt file) named “slider-edit_this_one.html” in an HTML editor (such as Coda, Espresso, or even TextEdit) and modify the code.  You’ll need to change the two links at the top of your page to link to your site.  Notice the my comment in the code that says “Change these links to go to your own site”, then you’ll see the same for the images where I’ve commented all the different slides in there (Slide 1, Slide 2, etc).  Just change the image URL’s (for example http://www.yoursite.com/slider/images/1.jpg to go to your site.  Do that for each image, as well as change any text (such as on slide 2 and slide 5).

5) Once you’ve modified the code, copy it, and paste into an html snippet and press apply.  You will then see a beautiful anything slider in your iWeb page.

6) One problem I’ve noticed is that it makes the snippet rediculously wide (like 10,000 px), so select the snippet and go into the inspector and change the width in the Metric Inspector (the icon with the ruler) to be about 800px and hit apply.  You should now have your anything slider that is the right width and works great.

Anything Slider Credits:

It was written by Chris Coyier, with code piecemealed together from some of Remy Sharp’s sliders and Chris’s own previous sliders. Doug Neiner stepped in and helped make it more efficient, smart, and fix some bugs.  Then I modified it for use in iWeb.

Anything Slider Video Tutorial

Beautiful jQuery Slider

The next slider is an elegant and beautiful wide jquery slider.  It’s implemented into iWeb very similar as the last two, but is much wider for those designs that calls for a nice wide image slider.  Here’s how to get it into iWeb.

View Demo »

Download Files »

1) First download the files and decide how many and what images you want to have in your slider.

2) Next size your images to be the dimensions 967 x 330 px.  Save those images in the beautiful_jquery/images folder.

(Note that your site width will need to be at least 1000 wide for this slider to work in your iWeb site.  Go into the Page Inspector and see what the content width is.  If it’s less than 1000 than either change it to be 995 or wider, or use one of the other sliders for your site.)

3) Next put the “beautiful_jquery” folder onto your server (the folder that has the “images” and “scripts” folders in it.

4) The next step is to open up the “beautiful_jquery.html” file (or .txt file) in your editor and modify the code.  Modify the 3 links at the top of the page to go to the 3 script files, then modify the url’s to go to your images (adding and removing image lines as you need), then you have the option to add some comments at the bottom of the code for each image.

5) Then copy that code and paste it into an HTML Snippet in iWeb and hit apply.  You should see your Beautiful jQuery slider now working.

Credits:

Beautiful jQuery Slider was developed by “Dream CSS” and modified by me for iWeb.

Beautiful jQuery Slider Video Tutorial

I hope these tutorials aren’t too difficult and you’re able to get them into your iWebsite with ease.  If you have any questions or comments about these sliders feel free to add them below.  If you found this tutorial helpful, please consider donating as it takes a lot of time to put together these tips. Thanks much for visiting iWebUnlimited.com.

You can see a demo of both Print page button as a form button and a graphic button in action created in iWeb by clicking the button below:

View Demo »

There are two versions of the code below.  One is to use your own button, the other is to use a form button.  We’ll first start with a form button.

Print Page Form Button

The print page form button doesn’t require any extra graphics or anything, simply paste the code below in an HTML Snippet in iWeb and you’ll have a print page button.  It’s as simple as that!  Here’s the code:

Print Page Button with your own Graphic

This one does the same thing but lets you use your own graphic for the print button.  Much better if you’re trying to match a similar style to your custom iWeb design.  It just takes a few steps:

1) First make a graphic in photoshop or whatever else to be your print button and upload it to your server (i.e. MobileMe, Your Host Server, etc).

2) Paste the code below, but replace the code in red with the URL link to your image.

<a href="javascript:parent.window.print()"><IMG SRC="http://www.mysite.com/imagefolder/mybtnimage.png"; width="127" height="31" alt="Print this page" border="0"></a>

3) Hit apply and presto!

If you don’t know how to make a button here are some free print buttons you can use for your own sites.

Download Print Buttons

Or you can find some great print icons by going here: http://findicons.com/search/print

That should be it.  If you have any questions or comments post them below.

Tweet

View Demo »

There are 4 major options when choosing to get comments onto your iWeb site.  The four big commenting systems are:

• MobileMe – Paid (http://www.apple.com/mobileme/)
• Disqus – Free (http://www.disqus.com)
• Instense Debate – Free (http://www.intensedebate.com)
• Echo – Paid (http://www.aboutecho.com)

Each of them have different features and looks to them.  So I’d recommend looking at each one and deciding which one will work best for you and your website.  I’m going to show you how to get your comments if your using MobileMe first, then we’ll get into implementing comments if you’re not using mobileme.

Comments with MobileMe:

MobileMe is probably the easiest way to get comments into your website.  It’s already built in to iWeb, and it’s very simple for users to use.  If you don’t have a MobileMe account yet, it’s a great option that Apple offers.  It gives you 20GB of online space for storage or a website, it syncs contacts; calendars, bookmarks, and more across all your macs and devices, as well as many other features which you can read about by visiting the MobileMe Site.  Here’s how to get your comments working if your hosting your site with MobileMe.

1. Create your page(s) in iWeb, then click on the site folder (it’s the main site above all your pages).
2. Choose MobileMe as the choice where it says “Publish To:”
3. Then go to the Blog/Podcast page your wanting your comments on, then open the inspector and choose the “Blog and Podcast Inspector” (It’s represented by a an RSS button).
4. In the Blog and Podcast Inspector you’ll see a tab that says Blog, click that and you’ll see a section that says Comments.
5. Click the Comments Checkbox.  You’ll be presented with a box that tells you about what comments does, just click OK.
6. Then click the Allow Attachments (Optional).  This allows users to attach images, documents, etc.  It is possible for visitors to attach items that are objectionable to you or others so if you choose to use this option be sure to moderate the comments often.
7. Publish your site and that’s it!

You’ll see that when someone comments on your site using the MobileMe Comments iWeb will have a little number tick next to it’s icon (similar to Mail) when there is a new comment, so you’ll know when there is a new comment on your site.  That’s it and have fun.

Adding Comments to your site without MobileMe:

To add comments to your site without MobileMe, we first have to sign up for an account at one of the comment platforms by going to Disqus.com, IntenseDebate.com, or AboutEcho.com.  Disqus and Intense Debate are free and Echo costs about $99 p/year.  We then setup our settings on their sites, get comment code and paste into an HTML Snippet.  The only problem with this is that we need to adjust our snippet to the size our commenting is going to be, because the HTML snippet will not adjust in size as more comments are added to our site.  So you have to either stretch your snippet to the size that you expect your comments to grow as, or you can put the code onto a blank HTML page and iFrame that into iWeb, that way you can set the size of your snippet to be whatever you want and as more comments are added, the iFrame will simply have a scroll bar to show all the comments.  It works really good and makes it easier for you to manage and design.  I tell you this upfront cause there are really two ways to implement this into your site 1) A Direct Snippet and 2) An iFrame (as I discussed).  So Let me first show you how to do it with a Direct Snippet, then I’ll instruct you how to do it with an iFrame so you can have scrolling comments and won’t have to worry about the size of your HTML Snippet as more comments are added to your site.

1) First Sign up for a Free account at Disqus.com or InstenseDebate.com (Or AboutEcho.com if you want to pay the $99 yearly fee) and get your comment code.

Signing up and getting comment code with Disqus.com:

1. Go to Disqus.com and hit the “Sign Up, Free” Button.
2. Enter your Site URL, Site Name, Site Shortname, then decide your username, password, and email address you want to use.
3. You’ll then be directed to step number 2 where you will choose the language for your comments, and some optional features such as providing allowing users to log in with Twitter, Facebook, Yahoo, Open ID, and others, and the ability to share across social networks.
4. Step 3 is where you will get your install code.  Choose the option that says “Universal Code”.
5. Copy the code that is next to the “1.” (don’t worry about the code in the 2. section) and you’ll now have the code we’ll need in the next steps.

Signing up and getting comment code with IntenseDebate.com:

1. Go to InstenseDebate.com and hit the “Sign Up” Button.
2. Enter in a Username, Email, and Password, and choose the option “I want to install IntenseDebate on my blog or website”, and hit the sign up button.
3. You’ll then need to check your email to verify the account before you can go on.
4. Once you’ve verified you email go ahead and login.
5. Upon logging in you’ll be directed to your dashboard, you’ll see a section on the right side under “Manage Blog/Sites” a button that says “You have not installed IntenseDebate on any blogs yet. Install IntenseDebate.” click on that link.
6. You’ll then be walked through 3 steps to get the code we need to go on. Step 1 is to enter in your blog/website URL.  Do that and hit “Next Step” to continue.
7. Step 2 is to choose your platform.  You won’t find iWeb in the list there so just choose the option “Generic Install”.
8. Step 3 is where they will give you your install code. On the left side it says “JavaScript Install”, copy the code next to the “1.” and move to the next step.

Comments using a Direct HTML Snippet:

2) Now take that code and paste it into an HTML Snippet on your iWeb page that you want the comments to be on and hit apply.

3) You’ll notice that it seems nothing has happened.  That’s because your site isn’t online yet.  Your comments actually won’t work until your site is online, so don’t worry that you don’t see your comments show up yet.  At this point you need to size your HTML snippet to accommodate the comment response box and all the comments and future comments that you are going to have.  So be sure to stretch it long enough to accommodate all the comments that you foresee your page having.

note: If you’re unsure about what the size of your snippet should be you can jump to the “Comments using iFrame” which will make this snippet scrollable so you won’t have to worry about the size and comments not showing.

4) Now publish you site to your server either using direct FTP publishing in iWeb or to a folder then to your server.

5) Visit your page to make sure it is working properly with the comments and give yourself a pat on the back for adding comments to your iWeb page.

Comments using an iFrame:

2)  Now open up an HTML editor such as Coda or TextEdit.  Start a new page/document and paste in this code to create a blank HTML page:

and replace where it says <!– Add Comment Code here –> with your own comment code you got from Disqus or Intense Debate.

3) Now save the document as an HTML file (something like pagecomments.html)

note: If your using text edit be sure you go into the textedit prefs and under the Open and Save section and check the checkbox that says “Ignore Rich Text command in HTML files”.  Then when you save your html document be sure to change the file format to “Web Page .html”.

4) Now put your newly created html file on your web server host using an FTP program like Transmit.  You might want to make a folder somewhere that is just for comment pages.

5) Now that your HTML file is online, go visit the page to make sure it is working.  Your URL to test it might be something like www.yoursite.com/comments/commentHTMLpage.html, if it is working that you can smile and continue on, it not, go back and make sure you got everything in order.

6) Now all we need to do is iFrame that page into iWeb.  Simply go to the iFrame tip page by clicking here, and paste the iFrame code into a snippet, but don’t hit apply quite yet.

7) With the iframe code in a snippet, replace the iframe URL in the code to be the URL to your comment page (i.e. www.yoursite.com/comments/commentHTMLpage.html), then hit apply.

8) If your using Disqus you should actually see the comments show up, if your using IntenseDebate you actually won’t see your comments until it’s online.  At this point we need to do two things.  Resize our snippet and put those dimensions in the iframe code.  So…

9) Adjust your HTML Snippet to be where you want it to be on the page and the dimensions you’d like it to be on your page as well.

note: you don’t need to worry about stretching the snippet length extra large like on the direct snippet method above because this method is going to have a scroll bar when more comments are added.  So just make the snippet a good size to see a good comment post or two.

10) Now that your snippet is where you like it you need to put in the snippet width and height into the iFrame code.  You would have seen the dimensions while dragging the size of the snippet, but if you didn’t see it simply click the snippet so it’s selected and go to the Metrics Inspector (the one with the ruler icon) and see what the width and height is of your HTML Snippet box and put that into the iFrame code where it says width and height, and hit apply.

11) Your comments should now be ready to post online.  Simply publish your site online, test to make sure it is working and looking properly, and give yourself a pat on the back for successfully implementing comments into your iWeb site.

That’s all there is too it.  If you having problems you can watch the video tutorial on how to do this by clicking below:

Watch Video Tutorial »

Hope that answers all your commenting questions.  If you have further questions or if anything is unclear feel free to comment below.  If you feel that this tip has helped please consider donating to the iWebUnlimited;

Thanks for stopping by.

—iJason

It’s finally here!  An easy way to get Google search on your iWeb site! Woo hoo!

So there are a few ways to get a Google Search into your iWebsite, an easy “paste code into an html snippet” way and a “more complex but sweet integrated google results” way.  So let’s start with the easy one first, then we’ll move to the more complex one.  Here we go!

See Demo »

Simple Google Search Code:

Google Search Box 1:

This code will put a simple Google Search box on your site that gives visitors a choice to search your website or google.  When a visitor enters a search term the search will take them to a new page with search results.  To add this to your website simply paste this code in an HTML snippet:

Then simply change the code in red to modify to fit your site.  You can adjust the font, size, and color, then (most importantly) add your site’s name and URL.  Hit apply on your snippet, publish, and your set!

Google Search Box 2:

This box is the same as Google Search Box 1, but it only searches your site.  Simply paste this code in an HTML snippet:

Then just replace the text in red with your site, hit apply, and your set.

Google Search Box 3:

This box is the same as #3, but it has no Google branding.  Just add this code:

Google Search Box 4:

This one is just a simple “search the web” Google search.  For those that simple want the convenience of search the web through their own website.  Just paste this code below:

And that’s it, have fun!

Advanced Google Search in iWeb:

Alright, let’s now dig a bit deeper.  This tip here will give you a google search box that when a user searches, they remain on your site and your results will show up on your site as well. WooHoo!  It gives users a much better user experience.  So here we go:

1) The first thing you need to do is to log in or create a Google Adsense account.  Do so by going to https://www.google.com/adsense/

2) After your logged in go to the “Adsense Setup” tab and click the “Adsense for Search”

3) You’ll be guided through a series of questions to setup your search for your site of which are:

• Search Type: Choose “Only Sites I Select”
• Selected Sites: Enter your website (the full site, http://yoursite.com, or http://web.me.com/mobilemeusername
• Optional Keywords: Enter keywords that have to do with your site.  Here’s a link with examples.
• More Options: Site Language: Of course choose your language.
• Your site encoding: I recommend leaving it at it’s default.
• Country of Territory: Choose your country.
• Custom Channel: If you’ve made previous ad channels you can set this up in relation to one of those, but if not no worries, just keep the checkbox that says “Automatically create new channel”
• Safe Search: I recommend leaving it on.  Keeps inappropriate items out of your visitors search.

Then hit continue.

4) You then can choose the style of the search box you wish to have on your site.  So just click the radio button that looks most like it would fit in with your site.  You can also choose how many characters you want your search box to be.  Feel free to modify to best fit your site.

Then hit continue.

5) The next page asks where the search results will be.  Choose the option that says “Open results within my own site”, then specify the URL that the results will be at (this will be a page that we will create later.  I suggest putting in http://yoursite.com/results.html or http://web.me.com/mobilemeusername/sitename/results.html, we can always change this later if you need to as well).  It also asks you to put in the size of the results in width.  The smallest it can be is 795, so we’ll have to be sure we’ll make room for this on our site later on.  I recommend just keeping it the default 800px wide.

You then will choose where you would like the ads placed (Don’t worry you’ll get cash for people clicking on the ads that are on your site).  I suggest choosing “right only”, unless you want to persuade people to click the ads, in that case choose “top and right”.

The last option on this page is the modification of the colors.  It’s a pretty neat feature here where you can change the colors of the search results so it will match your website.  So do that here.  They have some presets if you’d like to play with those, or you can just change the colors individually.

Then hit continue.

6) The next page simply has you name your new search engine we’ve just setup.  Give a name (doesn’t really matter what you name it) , read the additional terms (if you want), click the checkbox that you agree, and hit the “Submit and Get Code” Button.

7) Alright we have arrived! WooHoo! You now have two boxes with code.  Copy and paste those bits of code somewhere where you can access it.  I personally like to use Evernote (it’s free and syncs with everything), but you could save it in a document (pages, word, google docs, text edit), Apple Mail Notes, etc.  Doesn’t matter where you save it, just save it so you can access it later.

So the first box is the search box and second box is the results code.  So the first thing we are going to do is copy and paste the search box code into an HTML Snippet in iWeb.  This can be anywhere and on as many pages as we’d like.  If you want to have a search box on everypage, go for it.  Just get that search box on your iWebsite somewhere.

8) Alright now that we have a search box on our website, we now need to make the results page.  Sooooo, to do this we are going to create a new page on our site.  So go ahead and hit the “Add Page” button in iWeb in the bottom left or click file > New Page, or you can duplicate an existing page by selecting it and pressing “command + d”.  Name this page “results” in the sidebar.  This will end up being the http://yoursite.com/results.html page the we specified back in step #5.  Now design the page how you would like it to look leaving the main content area empty using your imagination that our results will be in the middle.

9) Now that you’ve created and designed the page add a text box onto the page and type in the text box this “%%GOOGLE SEARCH RESULTS%%” (without the quotes).  Then stretch the text box to be the size that you would like your results to be.  It has to be at least 800px wide (remember when we specified that in step #5) and you’ll want to make it about 875 pixel’s in height too. So adjust your design layout accordingly to this textbox size.

10) OK now, publish your website, either to a folder, your server, or mobileme.

11) Now before this can work, we need to go in and replace that crazy text I had you enter %%GOOGLE SEARCH RESULTS%% with our code.  So to do that we need to open up that results.html page we created with an html editor.  Again I like to use Coda or Espresso, but you can use TextEdit (if you go into the prefs and turn on the “Ignore Rich Text Commands in HTML” check box).  Do a find and replace option by pressing “command + f” search for our crazy text “%%GOOGLE SEARCH RESULTS%% and replace it with our results code.

Then hit save and put your files live online to test.

12) TaDah! Your finished.  Go visit your site and test it out to make sure it is working properly.

Troubleshooting:

Your page has to be online for it to work (you can’t test it locally because when you type something in the search box the results will only show up at http://yoursite.com/results.html, if your search is not working for any reason it could be that your results.html file is not in the right spot.  Also if your site is brand new to the web it might take some time for your results to show up because google hasn’t cached your site yet.  You can try to speed up this caching process by submitting your site into Google by going to http://www.google.com/addurl/?continue=/addurl

If you need to change where the results page is you change that URL in the google search box code.

I already know I’m going to get this question: Do I have to do this everytime I publish. The answer to that is yes and no.  Anything that we have to modify outside of iWeb (i.e. the results code), then yes we have to do each time.  So what I recommend for this tip is to have your results page in another site (file > new site), get your code setup, and published, then the main site you can update all you want and it won’t effect the results code page cause you won’t be needing to really update that page…really ever.  So just get that page online, then you can put the search box on as many pages as you want.

Any other questions feel free to leave in the comments below.

I’ve had a lot of requests for this in the forum, so hopefully this takes care of all your iWeb site searching needs.  I’ll probably make a video tutorial on how to do this in the near future for those that want to do the advanced search tip, but are a little overwhelmed or stuck.  So stay tuned for that.

If this tip helped you, consider donating to the iWebUnlimited cause by clicking below;

—iJason

There are times when your web design gives you little space for a lot of text.  That’s where this tip comes in handy.  This little bit of html in a snippet will allow you to size your snippet to really whatever size you want and the text will be scrollable  inside.  I’ve even added a bit more advanced code at the end that will allow you to add an image, a link, and more.  The user just uses a handy inline scrollbar to read your text and works very nice.  The other option on this page is to have a auto-scrolling text box.  I have one to scroll horizontally and another to scroll vertically.  They have a lot of options to adjust the speed, direction, font, color, etc.  So let’s get started.

See Demo »

1) Add an HTML Snippet to the page you want your scrollable text box to be.

2) Then paste this code into your HTML Snippet:

3) The code in red is where you’ll make adjustments to your own code for your own design specifications and the text in blue is the paragraph text you’ll put in.

4) After making your changes hit apply, publish, and your set! ;-)

Auto-Scrolling Text Boxes:

If you want an auto-scrolling text box then use this code below:

Horizontal Scrolling:

Vertical Scrolling:

That’s it, hope that helps.  If iWebUnlimited.com helped you please consider donating by hit the donate button on the sidebar.  Thanks for visiting iWebUnlimited.com.

—iJason

This tip shows you how to redirect a page to another page.  There are many instances where you might find you’ll need to redirect one page to another and this tip will show you how.  One example might be if you are using iWeb built in auto navigation and you want one of the links to actually go to an external page.  Another example may be that you’ve posted a page and many people are linking to that page from other sites, so you need to keep the same page up to keep the link, but you actually want to redirect them to another page.

So here is how to redirect your page to another page:

1) Go to the page that is going to be the redirect page.
2) Add an HTML Snippet onto your page and paste this code:

<script type="text/javascript">
parent.location.replace('http://yoursite.com/yourpage.html');
</script>

3) Then simply change the URL in the code to the page you want the page to be redirected to.
4) Then hit apply and your set.  You’ll find that once you publish your site and visit that page it will automatically redirect to the page you specified in the code.

Sometimes you want to redirect to another page after some time.  For example if you are redirect a user to another site you could send them to one of your pages that says something like “You are now being redirect to AnotherSite.com” then after 3 seconds or so it automatically directs them to the page.  To do that do the same steps as above, but simply paste this code below in an HTML snippet.

<script type="text/javascript">
var url ='http://yoursite.com/yourpage.html';
var delay = 3;
var d = delay * 1000;window.setTimeout('parent.location.replace(url)', d);
</script>

Then specify the URL and how long you want the redirect to delay and you’re set.

Hope that helps.

View Demo of Shadowbox in iWeb »

Step 1) Make a page in iWeb and add links to your media in one of the following ways:

Images: Drop an image on your page and enable as a hyperlink from the hyperlink inspector and link to “a file” and choose the same image (preferably a higher res version of the photo, at least 800 x 600).

SWF’s (Flash Files): Drop an image to represent the swf (could be an image, a shape, text, you could even launch your swf and do a screen capture (command + shift + 4) and drag over it to get an image to add in.)  Basically just get something that will be clickable that we can link to the swf.  After adding that image or whatever enable it as a hyperlink and link to the swf file itself.

HTML: Simply enable as a hyperlink your image, shape, text to an external page.

FLVs (Flash Video): Same as the swf, get/make a graphical representation of the video (an image, shape, or text) and enable it as a hyperlink and link to “A File” and choose the .flv file.

QuickTime: Same as the FLV and SWF.  Get/make a graphical representation of the video (an image, shape, or text) and enable it as a hyperlink and link to “A File” and choose the .mov file.

WMV (Windows Media Video): Same as the FLV,SWF, and MOV.  Get/make a graphical representation of the video (an image, shape, or text) and enable it as a hyperlink and link to “A File” and choose the .wmv file.

YouTube: Get/make a graphical representation of the video (an image, shape, or text) and enable it as a hyperlink and link to an external page.  Copy the you tube URL from you tube and paste it in URL field in iWeb hyper link inspector.  Then here your going to do one more step.  You need to alter the URL just slightly.  Your YouTube video code will look like something like this: http://www.youtube.com/watch?v=qKiIm5EcQ7A you need to alter it so it looks like this: http://www.youtube.com/v/qKiIm5EcQ7A, basically you delete the “watch?”, put a slash after the v, and get rid of the “=” sign. If you don’t do this your YouTube video for this effect won’t work.  So this is an important step for you YouTube users.

This effect works with many other video services like Vimeo, Google Video, Yahoo Video, etc.  For those sites you don’t need to alter the code like the YouTube, simply make a graphical representation for them and link them to an external page with the URL of the video in it.

Step 2) Publish your iWeb file to a folder, MobileMe, or FTP

Step 3) Download the Shadowbox .zip file by clicking the download link at the top of this page or click here ».

Step 4) Unzip the shadowbox.zip file (if your mac didn’t unzip it for you), and drop the folder called “shadowbox” into your site folder.  Not your page folder, your site folder.  You want the shadowbox folder to be right next to your html page.

Step 5) Open your html page (the one with your hyperlinks of course) with an HTML editor.  I prefer to use Coda, but again you could use an array of other ones out there (Espresso, TextWrangler, Even TextEdit)(if you use text edit be sure to check the checkbox in the textedit prefs that says ignore rich text commands in html files).

Step 6) Add this code before the </head> tag of your HTML page:

OR you could also just do a find and replace by finding:

</head>

and replace with

Where it says players, go ahead and delete any/all the players that you don’t need.  So for example if your not linking to an swf flash file, delete the ‘swf’, code.

Step 7) Find your hyperlinks that we created in iWeb in the html code here and add a

rel="shadowbox"

to your image links so it looks like this

<a href="myimage.jpg" rel="shadowbox" title=“Whatup”>My Image</a>

An easy way to find your links is to do a search for “title”, then you can spot the link code and put the rel=”shadowbox” right before the title tag.

For your video links you need to add a width and height dimension to it, so for all flv, swf, mov, wmv, html, and youtube like links you’ll need to add this code instead:

rel="shadowbox;width=640;height=480"

Just adjust the dimension to match your swf, webpage, or video. Here’s an example for a quicktime video.

<a href="mymovie.mov" rel="shadowbox;width=480;height=640" title=”My Movie”>My Movie</a>

You can also group items to together in a slideshow like way by adding a grouping text to all the shadowbox code you add to the links.  Here’s what it would look like:

rel="shadowbox[Group]"

Just be sure to add that [Group] to all the links you want to be connected.  You can have 2 or more seperate groupings by just making a different text group like [Group2], and add it to the other ones you want to group.

For YouTube videos you have to use this code:

rel="shadowbox;width=425;height=344;player=swf"

Same princible goes with adjusting the width and height for your YouTube video.  So your YouTube link would look something like this:

<a href="http://www.youtube.com/v/qKiIm5EcQ7A" rel="shadowbox;width=425;height=344;player=swf" title="YouTube Video"><img src="my_webpage_files/flash_in_iweb-youtube.jpg"

Step 8 ) While your in adjusting your links adding rel=”shadowbox” code, you should probably change your “title” code to say something more relevant than just the path to your file.  So where you see the title=”big_long_link_files/this_is_not_a_good_title.html”, change it to say something else like title=”Check out my cool photo” or whatever.

Step 9) Hit Save and your done! Yay!  Make sure all your files are online, test it out to make sure it’s working properly and your set.

There are many other options that you can add for advanced users that I won’t go into here, but you can check them out by going to http://www.shadowbox-js.com/options.html.

Note: Shadowbox can be used for free for non-commercial websites.  If you are going to use it for commerical purposes you must purchase a license.  You can do that by visiting their website at www.shadowbox-js.com.  Also included with the iWeb version of shadowbox that I have made is a JW FLV Player.  It also can be used for free for non-commercial websites.  If you use the JW FLV Player to play flv files for commercial purposes you must purchase a license.  You can do that by visiting https://www.longtailvideo.com/players/order2.

**Also note that this effect cannot be used with links using a shape or text box. Link only a true graphic (jpg, png, gif, etc) or link the text itself.

I know it can get a bit complex getting into the code, especially if you’ve never really dealt with html code much before.  But just take it slow and go step by step and you’ll get it.  If you mess up, just go back to iWeb and republish and you can start over.   I think this is the best of the popup effects cause it deals with all media formats so easily.  So I hope you enjoyed the tip and if you feel like this helped you in some way consider donating to the iWeb cause.  The more donations I get the more time I’ll put into making more tips like this.

Thanks for visiting iWebUnlimited.com

—iJason

Facebook and Twitter in iWeb

So you have an iWebsite, you have a FaceBook account, and you have a Twitter account.  You want people to visit your website, but you also want them to visit your facebook, but you also want them to follow your tweets.  What is the solution?  Well, bring them all into iWeb of course (big cheesy grin here).

Adding these to your website is quite simple.  It’s simply a matter of getting code from facebook and/or twitter (that they provide) and putting them in an HTML snippet.  Here’s how:

View Facebook Demo »

View Twitter in iWeb Demo »

Adding Facebook to iWeb

First off there are a few different ways to get Facebook on iWeb.  Either put a Badge (a customizable way to share your Facebook information), Fan Box (a social widget that allows Facebook Page owners to attract and gain Facebook fans) or a Live Stream Box (which allows others to connect to their facebook account on your webpage and update their status about something on your site on their facebook within your site).

Facebook Badge:

Simply go to www.facebook.com/badges.php, it will then ask you to log in (if you don’t have an account, where have you been, get one here). Then you will see a button that says “Create a New Badge”.   You will then see many options to customize your badge between two categories, Layout and Items.  All these option depend on your preference for your site.  As far as orrientation you can choose if you want a vertical, horizontal, or 2-columns badge.  Then you can choose what items you’d like to be on your badge by simply checking on the ones that you want.  Hit save, then you will be given some code to copy.  At that point jump into iWeb, grab an HTML snippet, paste code into snippet and hit apply.  All done.

Facebook Fan Box:

To have a Fan Box you must create or have created a page for a band, business, etc.  You can’t do this for your personal profile page (that’s what the badge is for).  You can create a page from facebooks homepage.  Below the sign up form, there is a button that says “Create a Page”.

For this one go to www.facebook.com/developers/wizard.php, choose Fan Box button on the left, then choose which page you’d like to make the fan box for under the drop down menu.  You have 2 checkboxes of option you can add; 1) Include Stream (status updates) 2) Include Fans.  It gives you the code right away for you to paste into an HTML snippet.

The Javascript code that the wizard generates looks similar  to this:

You can change the items in red even after you’ve pasted it into an html snippet. Here’s a little explination of the customization options:

• profile_id: The ID of the Page associated with the Fan Box. Specify either the profile_id or the name, but not both.
• name: The Page’s name (the name after the final backslash) or username (if one was specified). Specify either the profile_id or the name, but not both.
• stream: Set to 1 to display stream stories in the Fan Box or 0 to hide stream stories. (Default value is 1)
• connections: The number of fans to display in the Fan Box. Specifying 0 hides the list of fans in the Fan Box. You cannot display more than 100 fans. (Default value is 10 connections.)
• width: The width of the Fan Box in pixels. The Fan Box must be at least 200 pixels wide at minimum. (Default value is 300 pixels.)
• height: The height of the Fan Box in pixels. The height defaults based on the elements you include in the Fan Box. For a Fan Box that contains only the Become a Fan button, but no stream or friends, the height is 64 pixels. If you include all the features, the Fan Box is 554 pixels high. If you change the number of connections shown, you may need to edit the height to ensure they are all visible.
• css: The URL to your own style sheet. See fb:fan for policies on using your own CSS.

The rest are pretty self explanitory. Now there are a few known issues with this in iWeb.  First off when you hit apply the widget automatically resizes the height to 10,009px (which is way to super long for any website), so this is easy to fix, just click on your snippet and go into the metric inspector (that’s the one with the ruler) and adjust the height to about 90px if your using the simple one without the stream and fans and at least 554 if you are.  The other issue (at least that I’ve found) is that it seems that it is not compatable with the iWeb browser so you won’t see it show up in iWeb (which makes is hard for layout purposes), but when you publish it it will be there and you’ll see it.  Yay!

There is another option if you want to make sure you see it in iWeb.  You can do a Facebook Fan Box in an iFrame instead.  They incourage you to use the javascript one that is the default, but you can also use this iFrame code below:

<iframe scrolling="no" frameborder="0" src="http://www.facebook.com/connect/connect.php?id=YOUR_PAGE_ID&connections=10&stream=1" allowtransparency="true" style="border: none; width: 300px; height: 550px;"></iframe>
<div style="font-size:8px; padding-left:10px"><a href="URL_TO_YOUR_PAGE">PAGE_NAME</a> on Facebook</div>

Here’s some things you’ll need to do to make sure this works:

• You need to specify your Page ID in the iframe src attribute (You’ll find your page ID at the end of your page’s URL, only the numbers).
• You also must specify the URL to your Page in the anchor tag in the div.  You can choose to hide the stream from the Fan Box by changing 1 to 0 in the stream URL parameter.
• You can modify the number of fans to display by changing the setting for the connections URL parameter. Setting connections to 0 hides your fans. You cannot specify more than 100 fans.

And that’s it! Few!

Facebook Live Streambox:

This option pretty much works exactly like the Fan Box, but it has a different purpose. The Live Stream Box is a social widget that lets users visiting your site or application share activity and comments in real time. The Live Stream Box works best when you are running a real-time event, like live streaming video for concerts, speeches, or webcasts, live Web chats, webinars, mass-multiplayer games, and more.

The Live Stream Box lets users:

• Log in to your site using their Facebook accounts with Facebook Connect.
• Communicate and share with each other and their friends in real time at large scale (supporting millions of simultaneous users).
• View what their friends are saying as well as the general audience viewing the live stream.
• Comment on and “like” their friends’ posts.
• Share their updates directly on their Facebook profile and in their friends home page Streams. Each story on Facebook includes a link back to your site (through a URL you specify).

Implementing it into your site works the same way as the Fan Box.

Adding Twitter to iWeb

There are a few ways to add Twitter to iWeb as well.  You can create a Twitter Profile Widget (Color & Size customizable profile widget), Flash Widget (Flash 9 Required), or a HTML Widget (simple text with your updates).

Twitter Profile and Search Widgets:

To get this Twitter Widget go to www.Twitter.com/goodies/widget_profile, it will then ask you to sign in.  You’ll then be presented with 3 options; for your website, for facebook, or for myspace.  Obviously we want to choose the option “My Website”.  Then it gives you an option to choose a Profile Widget or a Search Widget.  The profile widget is a listing of your your Tweets (updates).  The Search Widget is a customizable widget that allows you to show when people are talking about a certain topic or event.  We’ll start with the Profile Widget.

When you choose Profile Widget you get three options to customize; settings, appearance, and dimensions.  Go through each section and adjust it as you see fit to match the colors and size of your site, when finished click the button that says “Finish and Grab Code”.  At that point simply copy the code, grab and HTML snippet and paste in your code and your set!

When you choose a Search Widget you get the same three options of settings, appearance, and dimensions.  The difference is in the settings you can set what search criteria is loaded in.  So for example you might put in “iWebUnlimited.com” for the search.  That way you can see what people are saying about that topic on the whole planet of Twitter.  Kindof a cool way to bring all the topics of a certain subject to one place.  Again once you’ve adjusted all your settings and such, hit the “Finish and Grab Code” button, paste the code into an HTML snippet in iWeb and your set.  You have successfully implemented Twitter into iWeb, give your self a pat on the back.

Twitter Flash Widget

To get the flash widget go to www.Twitter.com/widgets/which_flash, it will first ask you to sign in (if you don’t have an account, get one here), then you will be presented with 2 options, for either an Interactive Flash Widget or a Display-only Widget.  It’s all preference here on what you’d rather have on your site.  Choose which ever you’d like, then hit continue.

If you chose the Interactive Flash Widget you’ll be presented with 3 styles; smooth (dark glossy look), velvetica (white stylish look), and revo (a red sunburst style).  Then you can choose if you want it to be narrow, wide, or full.  Of course both of these options depends on how you want it to look in your iWeb site.  So choose which ever fits best and you will see the code before you.  Simply copy and paste it into an HTML snippet and your set.

If you chose the Display-only Flash Widget then you are taken to a page where you can change the color and that’s it.  Then just copy and paste the code into an HTML snippet and your set.

Twitter HTML Widget:

To get the HTML widget go to www.Twitter.com/widgets/html_widget, this is a simple but customizable way to get your tweets on your iWebsite without requiring people to have flash player (this means it will show up in Safari on the iPhone).  You have a few options here at start, to show how many Tweets you’d like to have up at a time, and if you’d like a title.  Copy and past the code into an HTML snippet on your page.  Hit apply and you have successfully added the HTML snippet to your page.

Now to style it a bit.  At this point it’s a pretty plain bit of text. But the nice thing is that we can really style this however we want.  First of all you can adjust the size of the snippet to whatever you want, and to change the font and colors use this block of code below and paste it at the top of your code.

<body text="#4C4C4C" link="#4167BE" vlink="#000000" alink="#4167BE">

<font face="Verdana, Arial, Helvetica, Geneva"><font color="4C4C4C"><font size=2.5>

If your not sure how to get the hex color values use this handy little color picker from Google Gadgets.  Style as you choose, maybe even put a cool background behind it, whatever you’d like, and you’ll have a nice little widget that’s more compatable, and more styled to your liking than any of the other Twitter widgets.

That’s all for this tip.  Hope you enjoyed getting your social network on iWeb and if you have any questions on this at all feel free to leave a comment below.  And if you found this tip helpful, please consider donating to the iWebUnlimited cause.  Thanks again.

—iJason

So the first thing is that when you add a new page to your site in iWeb there is always a title box, even when you choose the blank template page.  Many people delete this text box when they are making a custom design, but don’t do it!  Try to make it so everypage has this text box on the page.

The problem lyes in that the text box can’t leave the header part of your page, so it almost forces you to use that textbox in your design.  But what if you don’t want to use that text box cause you want a lot of words to be part of your page title (meaning the part that will show in the browser top like this image)

But you don’t want it to be on the actual page.

So what you can do is put this text box really small at the top of the page and give it a good title and change the color to be the same as the background.  You do that by using the little magnifying glass on the color picker and click on the background.  That way you’ll be sure to get the right color. By doing this it will help you to have a good title for your page and it’s not seen.  And this way you can make your own design without being forced to really use that box in the design (if that makes sense). Here’s an image to show it better:

Sometimes you have an object, and image, or possibly a flash object in the header of your page you can just use the arrange menu on the menu bar and send it to the back (or press command + shift + B).  That way it’s not seen but you can still have a good title.  Notice my image below.  I turned on “Show Layout” by pressing Command + Shift + L and you can see that I sent the text box behind the top image.  That way it won’t be seen but I can have a long title, that will fully describe my page and help my web searchability out.

View Demo »

The built in iWeb Navigation:

First as you probably have noticed iWeb gives you a navigation menu at the top of the page automatically and with each added page it adds a new text button at the top that is the same name as whatever you named your page in the sidebar.  It’s pretty convenient sure, but lacks any constumization at all to out site.  So if you want to keep it simple than just keep the built in navigation

Your own Text Navigation:

If you want to have a similar look as the built in navigation, but want to customize it.  The first thing to do is to go into the page inspector > Page Tab, and uncheck “Display navigation menu”.  That will take the auto-navigation off.  But now you have no links or ways to get to the other pages of your site.  So what you do is, simply make a text box type the name of your pages as you want them to appear, style it (i.e. fonts, sizes, etc, but don’t worry about color yet), then go to the hyperlink inspector and highlight the text word button one at a time and enable them as a hyperlink going to your pages.  Then go into the Hyperlink Inspector > Format tab to style the colors of the “Normal” state, the “Rollover” state, “Visited” state, and “disabled” state.  Then your done.  Copy and paste the text box onto all the other pages now and you have yourself a cutom text navigation.

note: I recommend creating all of your pages first, then make your Text Navigation so that you can link them to the pages and proceed to copy them to the other pages as well.  Also remember that any font that is not websafe could cause problems.  So if you font is a special font you can guarantee that the font will show up by making it an image.  To do that go to the Graphic Inspector and give the text box a shadow then bring the shadow opacity down to 5%.  You won’t be able to see the shadow, but now your text will be turned into an image.

Graphic Menu:

Another great way to stylize your navigation is to use graphics in iWeb.  You can use the shapes to create some pretty good looking menus.  Here’s an example simply using two rounded cornered square shapes and a text box.

Here’s my quick workflow for this menu: 1) Create shape 2) Size shape according to site size desires 3) Add gradient color with darker on bottom and lighter on top 4) Add 2pt white stroke 5) add shadow 6) Duplicate shape (Option + Drag shape, now you have to of the same shape) 7) On 2nd shape, remove shadow and stroke, and change top gradient color to white with 26% opacity and bottom gradient color to white with 11% opacity. 8 ) size the 2nd shape so it’s half the size height-wize as the 1st shape.  (this effect gives you the shine look) 9) Add stylized text box over the top of shapes.

Photoshopped Rollover Menu:

If you really want to spice up the graphic menu and own photoshop, then here’s a cool way to do it.  Take the same graphic menu that we created earlier and copy and paste it into photoshop. To do that you hightlight the 1st shape and press command + c to copy, then jump over to photoshop and press command + n or File>New and photoshop will see that you have something copied to the clipboard and will default to that size.  But you need to change the color mode from “Greyscale” to “RGB Color”.  Then press comman + V in photoshop or press Edit>paste and your shape you made in iWeb will be in photoshop.  You’ll need to add a shadow to your shape here (if wanted/needed) cause the shadows don’t copy over.  You can then copy and paste your highlight shape (the 2nd shape) in there too.  You can even copy and paste the text box if you want also, but you can just as well type the text in photoshop too.  Once it looks pretty good in photoshop, hold your mouse down on the crop tool until you see the slice tool.  Use that to draw boxes over the different buttons of your menu.  For example our graphic menu above has 5 buttons on it, so you would draw 5 squares with the slice tool.  Then choose file > save for web & devices, and be sure that it says to save as a PNG 24, choose your location to save and file name (I recommend naming them “up”) and hit save.  You will then see the result is a folder called images with your 5 sliced boxes as individual graphics.  These are your “Up” graphics.  Meaning this is what the buttons look like when they are just sitting there…when their up.  Then you go back in and find the main shape layer and use some photoshop trickery to change the color slightly.  You could change the hue so it’s a different color, the brightness, etc.  Whatever you do, we just want something that looks different.  So that when they rollover they see something change.  It could even be the text.  Once you have that looking different, choose file>save for web and devices again, save as PNG 24, choose save location (should be the same place as before), name (I recommend “over”), and hit save.  You will then have another images folder with your “over” images.  These are the images that will swap out when the user rolls their mouse button over the graphic.  We now need to put these graphics on our server (meaning MobileMe iDisk or your own server from say RAGE iWeb Web Hosting). At this point go to my rollover tip and follow those instruction on how to get the rollover effect now that you have the graphics, and the result is something like this:

You can see the working version in the demo.  If you’d like here is the photoshop file you can download to get you started.

Drop Down Menus in iWeb:

This is a big one.  I’ve had a lot of request for this.  The problem with drop down menus is that they get a bit complicated.  I wish they were as easy as a simple html snippet to paste in, but it’s not.  So I’ve tried to make this as simple as possible.  To do this you must understand (and I’ll try to explain this the best I can) that the first and foremost problem with putting dropdown menus into an html snippet is that drop down menus require a lot of room to drop down over the top of your content and every object in iWeb (shapes, text boxes, snippets, etc) is layered, meaning one is above another.  So what happens is that the html snippet needs to always be on the top layer above all your text boxes and shapes, etc, but if you have any links under your snippet they will not be clickable because you snippet needs to be as big as your longest and widest drop down link and everything else on your page will be underneath it, again making any links under the snippet unable to be clicked.  So I’m going to show you first how to get around this with out using html snippets where we modify the code after publish to get the desired effect.  Then I’ll show you how to do this using HTML Snippets (as long as you understand that everthing under your snippet will not be clickable ;-).

1) Drop Down Menu without HTML Snippet:

First simply make your links from a text box.  Similar to our text navigation above.  Then simply publish your iWeb page.  Find your publish html page and open it with an HTML editor (coda, espresso, textedit, etc) and add the below code right before the </head> tag:

You then change the code to customize it to your site and style.  The items your going to want to change are the items outlined in the comment code.  You’ll see to change font size, color, and most importantly your links which are outlined by “Menu1″ and “Menu2″

Then you find in the code the text that you linked and add the line of code in blue, making sure the code looks like this:

<a href="My_Page_in_iWeb.html" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()" title="My_Page_in_iWeb.html">The Linked text that people see</a>

You’ll notice that in the head tag code there is text called menu1 and the link code that matches also has a menu1 in it.  That how you put them together, and you can add as many sublinks as you’d like in the head code where the menu1 is.  Just copy the line and keep adding another menu1[3], etc etc.  That is only for one button.  If you have more buttons that need it, just copy the whole menu1 part in the head code, paste it below the 1st menu1 part and change it to menu2, then in your links do the same and change it to say menu2 and so on (Hopefully that makes sense).  Once your done, just save it and your in business.  Be sure to test it out, once it is working successfully put online and your set.  I’ll have a video tutorial on this as well as I tend to do with the more complicated tutorials.

2) Drop Down Menu Using IzzyMenu:

Another way to create drop downs is to go to IzzyMenu.com.  It’s totally free (just dodge the ads), then you can build a drop down menu in a nice little drop down menu creator, then they let you download your complete menu.  Once downloaded you’ll see some ads on it, you can get rid of these by opening up the IzzyMenu.html in an editor and delete this last line of code:

<div style="clear:both; text-align:center; padding:10px;"><a href="http://www.templateo.com"><img style="border:1px solid black;margin-bottom:5px;" src="templateo600x100.jpg" /></a><br /><a href="http://www.izzywebsite.com/go?izzymenudownload"><img src="download.jpg" border="0" /></a></div>

You can also delete the ad images usually called “download.jpg” and “templateo600×100.jpg”.  Alright, we’re almost ready.  You need to do one more thing to make it work properly in iWeb.  Because it’s going to be in an HTML Snippet we can’t have the links be “_self” links, we need them to be “_parent” or “_top”, so we need to go through our links in the IzzyMenu.html and make sure all the links open with the “_parent” code. So add this code target=”_parent” after each link so it looks like this:

<li class=”item_active“><a href=”http://www.iwebunlimited.com” target=”_parent“onMouseover=”cssdropdown.dropit(this,event,’dropmenu_101′)”><span>iWeb Tips</span></a></li><li><a href=”http://www.iwebunlimited.com/videotutorials/videotutorials.html” target=”_parent”><span>Video Tutorials</span></a></li>

<li><a href=”http://www.iwebunlimited.com/links.html” target=”_parent“onMouseover=”cssdropdown.dropit(this,event,’dropmenu_104′)”><span>Links</span></a></li>

<li><a href=”http://www.iwebunlimited.com/qanda/qanda.html” target=”_parent“><span>QandA</span></a></li>

<li><a href=”http://www.iwebunlimited.com/html_snippets.html ”target=”_parent“><span>HTML Snippets</span></a></li>

Now that your links are working, you might notice the code in red.  That is what button you would like to have active on the page.  So if you wanted, you could make a duplicate of this menu for each button on your menu and just move the red code around to go on the page you want active.  If you don’t want it, just delte the code.

And boom we are done.  Post the Izzy Menu including all the folders that came with it on your server, perhaps in a folder called “izzymenu” and test it out by going to your url. i.e. http://www.mysite.com/izzymenu/IzzyMenu.html or http://web.me.com/myusername/izzymenu/IzzyMenu.html (mobileme users put the izzymenu folder in the idisk>Web>Sites>here).  Once you see your menu is working, we use the iFrame code to get it into iWeb.  Yay! We’re set.  Again remember that because it’s in a snippet any links under the drop down won’t be clickable.

3) Other Drop Down Menu’s to iFrame in:

• You can get similar drop down menu effects like the IzzyMenu at some of these links
• http://www.cssplay.co.uk/menus/pro_horizontal.html (Free)
• http://www.lwis.net/free-css-drop-down-menu/ (Free)
• http://greengeckodesign.com/projects/menumatic.aspx (Free)
• http://www.opencube.com/index.asp (Not Free)

CSS Play Download »

Free CSS Download »

Menu Matic Download »

Flash Menus:

Flash navigation can sometimes add a neat look and feel to your site and over 90% of all computers have flash installed on their machines.  But as we most know, that the iPhone does not have flash, as well as many other mobile devices.  So that’s why if you go this route you add some text links at the bottom of the page.  That way people can still navigate if they don’t have flash.

Simply go to FlashComponents.net and browse through their emence library of flash menus and purchase it, modify it (usually using the xml code), post it, and iFrame it in.  Don’t forget to make sure your links are _parent or _top.

Hope this helps you get some great navigation menus in iWeb.

View Demo »

Step 1) Download Lytebox by clicking here »

Step 2) Add images to your iWeb page and make them a hyperlink (as a file) to itself (the same image).

Step 3) Publish your iWebsite to a folder, iDisk, or server.

Step 4) Add the “lytebox” folder you downloaded in step one to the site folder (not the page folder)

Step 5) Open html page (the one with the images linked to itself we did in step 2) in an HTML editor.  I like to use Coda (by Panic Software), but you could use TextEdit (if you check on ignore rich text commands in HTML files checkbox in the preferences of TextEdit), or Espresso, TextWrangler, etc, etc, there are a bunch.  Just something that you can edit HTML in.

Step 6) Right above the </head> tag in the HTML, paste these lines of code.

<script type="text/javascript" language="javascript" src="lytebox/lytebox.js"></script>
<link rel="stylesheet" href="lytebox/lytebox.css" type="text/css" media="screen" />

Step 7) Then find where your image links are and add a rel=”lytebox” in between the link and the tittle tag. For example, here is what your looking for in the HTML:

<a href="mypage_files/my_image.jpg"  title="Image Description">

Put the rel=”lytebox” inbetween the image link and the title tag so it looks like this:

<a href="images/image-1.jpg" rel="lytebox" title="Image Description">

Step 8 ) Save and that’s it your done.  You’ll have a cool image popup effect, similar to highslide or fancyzoom, but slightly different.

Options: (If you dare :-))

Grouped Images:

If you want to have the images scroll through with a cool next and previous button to the lytebox, then instead of adding rel=”lytebox” in between the image link and title tag, add rel=”lytebox[group1]“to each image link and there will be a neat navigation to cycle through the images.  Here’s an example of what the code would look like:

<a href=”images/image-1.jpg” rel=”lytebox[group1]“ title=”Image Description”>

You could have multiple sets on one page too if you change the group1 to something like group2 for all the ones you want in a seperate group and so forth.  Click the example button above for reference.

Keep in mind that the images will scroll through in the order they were dropped onto the page (not necessarily the order top to bottom that you have them in on the page.  So be sure to add images to the page in the order you want them to show up in the lytebox effect.

Lytebox Slideshow:

You can also have a little slideshow effect in the lytebox popup by using rel=”lyteshow[group1]“ instead of the rel=”lytebox” (single images) or rel=”lytebox[group1]” (multiple images).  So your link code would look like this:

<a href="images/image-1.jpg" rel="lyteshow[group1]" title="Image Description">

iFrame Content in Lytebox:

If instead you want a webpage in the lytebox effect instead of an image, then simply add a link to an external page (it could be one of your own pages).  Find the code in the html where your link is and add rel=”lyteframe” instead of the others above.

Note: When using this effect it only works with highlighted text links (not textbox links) and image links.  It does not work very well with iWeb shapes for links.  For those, use the Highslide effect.

When applying the Lytebox effect it will take a default width and height of 400px and scrolling is set to auto.  If you want to control how big the frame is for your iFrame then add this code in your title tag

rev="width: 400px; height: 300px; scrolling: no;"

Replace the items in the brighter red to the size you want and your set.  Here is an example of the full link code as an example:

<a href="http://www.google.com" rel="lyteframe" title="Search Google" rev="width: 400px; height: 300px; scrolling: no;">Google Search</a>

You could even group pages together like we did with the images above by using this “rel” tag instead: rel=”lyteframe[group1]

Another note on doing this if your using iFrames on your iWebpage: If you plan to use Lytebox in an iFrame environment, then you need to include lytebox.css in the parent document, while including lytebox.js in the iFrame document.  They are both found in the lytebox folder.

Browser Compatability:

This effect was built with browser compatability in mind, so it’s safe to say it works on most all browsers.  The following browsers have been tested with this script:

IE 5.01 SP2 – The fade effect does not work, but the background is darkened (completely).

IE 5.5 SP2 – No known issues.

IE 7.0 – No known issues.

Opera 9.23 – No known issues.

Firefox 1.5+ – No known issues, of course.

Safari 2.0+ – No known issues, of course.

End Notes:

Well that’s it folks.  Hopefully it’s not to crazy for you.  Like I’ve said in other posts.  I usually don’t like having to get into the HTML code after publish if possible, but sometimes to get a cool effect you just gotta.  So don’t work yourself up to much if you don’t get it the first time.  A simple republish in iWeb will let you start over and try again (though I recommend publishing from the File menu with the publish entire site option to get a clean full publish).

View Demo »

Highslide with Images |   Highslide with Flash Files |   Highslide with iFrames

To get started I will separate the tip into Images, Flash, and iFrames (which would include any other html page (websites, videos, youtube, etc)).  Here we go:

Highslide with Images:

Step 1) Add an any image(s) or graphic(s) to your page in iWeb.

Step 2) Open up the inspector and make it a hyperlink in the hyperlink inspector.  Choose to Link To: “A File” and choose the same image (so it basically it is linked to its self).

Step 3) Publish site to Folder, Server, or MobileMe iDisk – Whatever your method is.

Step 4) Download files. I’ve made a special iWeb version of Highslide to simplify things.

Step 5) Unzip the downloaded file called “highslide_iweb.zip” and you will see a folder simply called “highslide”.  Drop that folder into your published site folder (not your webpage folder).  When publishing iWeb makes a index.html file and your site folder (named whatever you named it in iWeb), this is the folder you want to drop this highslide folder into.)

Step 6) Open your favorite HTML Editor (Coda, Espresso, TextEdit) and you are going to find and replace the code below:

Find:

</head>

Replace with:

Step 7) Now we’re going to find and replace one more item:

Find:

title="pagename_files/imagename_1.jpg">

Replace with:

title="Click to Enlarge" onclick="return hs.expand(this)">

When it says “pagename” that means whatever the title of your webpage you are doing this one in the sidebar of iWeb and imagename is the name of the photo you put on the page.  If your not sure what these names are, you can go back into iWeb and take a peek.  Here’s where you will look.

So for example if I was wanting this effect on my page called “iweb09” in my sidebar and my image was named “myimage.jpg”, then my replace code would be:

title=”iweb09_files/myimage_1.jpg”>

Important Note: If you are linking to a shape made in iWeb take off the “>” tag at the end of the search and replace. If you are linking an image to text get rid of the “_1” at the end of the find code.

Basically your are replacing the “title=…” tag of your items.  So if your having a tough time finding the right items to replace just do a search for “title” and copy that whole line “title=”mypage_files/myimage_1.jpg”>” and paste it to replace with the other code.

Step 8 ) Save your modified html file online and your good.

Highslide with Flash Files:

I’m going to go through the flash one a bit faster assuming you’ve gone through the image one already. So I’m just going to give you the quick steps:

1. Make flash file (Adobe Flash, Keynote, Bannersnack, etc) be ready to link to it on your hard drive.
2. Make or get an image or button to represent that file (this will be your button.  It could be anything really, text, shape, image, etc) and put it on your iWeb page.
3. Link image/button to .swf file from the hyperlink inspector as a “A File”
4. Publish site
5. Add “highslide” folder to published site folder
6. Open your html page with HTML editor and find and replace the following code:

Find:

</head>

Replace with:

7) Now find and replace these:

Find:

title="pagename_files/flashfile.swf">

Replace with:

title="Click to See Flash" onclick="return hs.htmlExpand(this, { objectType: 'swf', width:300, objectWidth: 300, objectHeight: 250, maincontentText: 'You need to upgrade your Flash player'  } )">

8 ) Replace the items in red with your page name, flash file name, file width (twice), and height.
9) Save your page make sure it’s online and your set.  It looks pretty cool.

Highslide with iFrames:

Again I’m going to go through this one fast assuming you’ve gone through the image one already. So I’m just going to give you the quick steps:

1. Create or Find your webpage that you’ll be iFraming in the highslide zoomer and put it online.
2. Make or create an image or button or text that will pull up this iFrame when user clicks on it and make it a hyperlink in the inspector to “An External Page” and type in the full address of the page (example http:www.iwebunlimited.com/iwebtips/iwebtips.html)
3. Publish site
4. Drop “highslide” folder (downloaded from above) in published site folder
5. Open html file with html editor and find and replace the following code:

Find:

</head>

Replace with:

6) Then find the following code and replace it:

Find:

title="http://www.yourlinkyouadded.com">

Replace with:

title="Click to Enlarge" onclick="return hs.htmlExpand(this, { objectType: 'iframe' } )">

7) Replace what’s in red with the size your want the highslide to be and the page you linked to. Save online and your set.

Note: If you have a page that has all of these items images, flash, and iFrames.  Use this code to replace in the <head> tags as the first thing you replace

Find:

</head>

Replace with:

Then replace the second one’s with the ones above in their sections with their links.

It makes for a pretty neat effect.  Hope you find it helpful and if your not very comfortable using external editors, just take it slow, be very careful of your code and if you mess up, no big deal, just republish from iWeb and it’ll be brand new again to try again.

Back to Top

See Demo

Step 1) Make 2 graphics. One that is the up/normal state, or what you want to be up when the users mouse is not over the image.  Then make the other graphic the rollover state or what the graphic will look like when you roll the mouse over it.

Step 2) Size those 2 graphics as small as you can get them without losing quality.  Photoshops save for web features works good for this, but you can get this effect just as easy by opening it with Preview and saving as jpeg and adjusting the quality.

Step 3) Put those 2 graphics on your server.  You can use the iDisk with MobileMe or your own server.  Just make a folder somewhere on the server perhaps call it “rollover_images” or something like that.  If your putting it on MobileMe make the folder in this location: iDisk/Web/Sites/rollover_images . Then the URL to the images will look something like this: For MobileMe—http://web.me.com/username/rollover_images/rollover.jpg or if you using your own host it would be —http://www.yoursite.com/rollover_images/rollover.jpg in which you would put the folder right on the root level of your public server.

Step 4) Then simply copy the code below and paste into a snippet.

<script type="text/javascript"> function mouseOver()
{document.rollover_one.src ="http://web.me.com/username/rollover_images/rollover.jpg"}
function mouseOut()
{document.rollover_one.src ="http://web.me.com/username/rollover_images/normal.jpg"}
</script>
<a href="http://www.your_button_link_here.com">
<img alt="Link Title" src="http://web.me.com/username/rollover_images/normal.jpg" name="rollover_one" width="175" height="175" onmouseover="mouseOver()" onmouseout="mouseOut()" style="border: none;"/></a>

Step 5) Replace what’s in red with your URL’s to your images and image sizes and put in what link you want it to go to by replacing the iwebunlimited link and your set.

Note: If you’d like the link to open in a new page replace the link

<a href="http://www.iwebunlimited.com">

with

<a href="http://www.iwebunlimited.com" target="_blank">

View Demo »

iWeb Player |   Google Player |   Yahoo Player |   Odeo Player |   Premium Beat Players

Using the Built in QuickTime to play Audio:

First of all iWeb does have built in support to play music or any audio file by default by simply dragging in an audio file. By doing that you get a QuickTime looking playbar, they even give you the option to add a picture (album art) to the player if you choose. It looks like this:

But if you don’t drag an image  into the box, it will disappear leaving only the playback controls, which is sometimes all you want.  iWeb also gives you some options for music in the QuickTime inspector.  It gives you the option to 1) Autoplay 2) Loop Song 3) Show controller or not.

I know some of you have asked about playing music on your site for just background music, well this is one way you can do it.  Simply drag a song in, have it auto play upon opening, and leave the controller so people can stop the music if they’d like, presto your set.

Google Player:

If you want a playback player there are many options and Google is one of those choices.  The thing I like about this player is that it’s simple and it has no branding on it.

To use this MP3 player on your website or blog, copy-paste the following code into an html snippet and replace the MP3_FILE_URL with the link to your MP3 file.

In other words, find your MP3 you want to stream to your site, and throw it on your iDisk or on your own server.  If your doing it on your iDisk go to iDisk>Web>Sites>Then make a folder here called “mp3” and put your MP3s in there.  Then your link to replace in the red will be http://web.me.com/username/mp3/mymp3file.mp3 and that’s it. If your using your own server, it would be similar.  Make a “mp3” folder on your server, then drop your MP3s in to that folder and your link will be http://www.mysite.com/mp3/mymp3file.mp3

Note: I would recommend naming your mp3 files with no spaces to make the URL easier.

Advanced Tip: You’ll notice that the Google player is coming from googles site.  If you don’t want to rely on Googles site to provide the player.  You can download it Here » (courtesy of me ;-) Your Welcome).  Then just put that player in the same mp3 folder you made and change the google link in the code to link to your downloaded player and your set!

Yahoo Player:

The new Yahoo player works a bit different, put the mp3 files in the mp3 folder on your server (like we did with the Google Player) and add this code to an HTML snippet and replace the link in red.

Note: You can resize the widget how you’d like so that they would be in a column or a row.  Has a very Mobile iTunes Store feel to the player.

Odeo Player:

Same idea as before.  Add code to a snippet and replace the red with the link to your mp3 URL.

<embed type="application/x-shockwave-flash" src="http://www.odeo.com/flash/audio_player_standard_gray.swf" width="400" height="52" allowScriptAccess="always" wmode="transparent" flashvars="audio_duration=DURATION&external_url=MP3_FILE_URL" />

Note: This player can be downloaded to put on your own server so you don’t have to rely on Odeo’s server.  Here’s the player to download and put on your own server, then just change the odeo link in the code to your own server linking to the odeaplayer.swf

Premium Beat Players:

These players work the same way, but you’ll do one extra step.  This one you have to have the player on your own server.  So you’ll first download the player (provided below), then put the player on your server/iDisk in “mp3” folder or perhaps even make one more folder in the mp3 folder just for these players, paste code into html snippet, change links to your player .swf, .js. & .mp3 files and your set.  Here are the players

• Mini Player—Download Player »

HTML Snippet Code:

Note: If your using your own server the links will look like this instead.

http://www.mysite.com/mp3/playermini/swfobject.js

http://www.mysite.com/mp3/playermini/playermini.swf

http://www.mysite.com/mp3/mymp3file.mp3

Also note that you don’t have to have the files in these exact locations you can put them where you want just make sure your URL points to the exact place.  You can also change the “no” to “yes” in the autoplay part of the code.

• Single Player—Download Player »

HTML Snippet Code:

• MultiMenu Player—Download Player »

HTML Snippet Code:

This one works pretty much the same, but the big difference is that you tell the player where the mp3 files are by the .xml file.  So in the download you’ll see an .xml file, open in up with an html editor (Text Edit will do), I prefer Coda myself and just change the path to your mp3 file and change the name.  Here’s an example below.

• Multi Player (Playlist Player)—Download Player »

HTML Snippet Code:

This one is the same as the multi-menu player where you will have to edit the xml file to point to your mp3s.  Again open up the .xml file in an html editor and change the path of the mp3 files and titles.  Save that, upload it to server, make sure code is pointing to the right spot and your set!

Again just to make clear, if your using your own server your link won’t be from the iDisk it will look like this:

http://www.mysite.com/mp3/playername/swfobject.js

http://www.mysite.com/mp3/playername/playermini.swf

http://www.mysite.com/mp3/playername/player.xml

http://www.mysite.com/mp3/mymp3file.mp3

Hopefully that’s all not to confusing.  It’s kindof fun to put music or audio files on your webpage and hopefully this gives you some great options that you can do that easily.  Remember not to put any mp3’s that are copyrighted and owned by another artist (there now I’m covered ;-))

Back to top

Step 1:
Go to PollDaddy.com and create a free account,

Step 2:
hit create poll and choose your questions and your answers for your poll.

Step 3:
Adjust features to be on your poll and change the look and feel, then save.

Step 4:
You’ll then get some code to copy, jump over to iWeb and paste it into an html snippet.

That’s it.  It has many features that I’d recommend checking into while your logged in.

Really that’s it! Go make some fun Polls for your website.

Here’s an example I’ve made from PollDaddy working in iWeb »

Favicons in iWeb

Edit: There is now a much easier way to add a favicon to an iWeb website. This is done using iWeb SEO Tool. Watch the video tutorial to learn how.

Original Article: How to get favicons in iWeb.  First off, lets answer the question, ‘What is a favicon?  A favicon (short for favorites icon), also known as a website icon, shortcut icon, url icon, or bookmark icon. It is an icon associated with a particular website or webpage. A web designer can create such an icon and install it into a website (or webpage) by several means, and most graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page’s favicon in the browser’s URL bar and next to the page’s name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page’s favicon next to the page’s title.

For example when you visit Apple.com this is what you see for the favicon.

notice the Apple logo in the URL bar.  Wouldn’t you like to have a custom one of those on your website?  Well here is how.

If using MobileMe to host your site:

First off, favicons are usually as simple as dropping a file on the server and that’s it.  But mobileme is a bit different and makes it a bit harder, but it can be done.  If your hosting on mobileme I would probably recommend that you just forget about having a favicon, cause everytime you make an update to your site you’ll have to go through all these steps again, and you’ll tire of it.  But if your determined to get a favicon on your mobileme site.  Then here is how.

Step 1) Create Graphic
Create a graphic that is 32 x 32 that you want to be your favicon.  You could use Photoshop, Pixelmator, or even design a small something in iWeb and take a screenshot of it by pressing “command + shift + 4” and then drag the crosshairs over your graphic making it 32 x 32, then modify and enhance using Preview.  How ever you decide to make your favicon just make it a graphic that is 32 x 32 and looking the way you want.

Step 2) Save file as .jpeg
Save it as a .jpeg file (If you used the screenshot method then open it in preview and save as a .jpeg).  Name your file “favicon.jpg”

Step 3) Change Extension to .ico
Now, select your favicon.jpg file and simply change the extension to .ico by selecting the file and pressing return on your keyboard and change the .jpg to .ico.  You will then get a warning dialog that says this

Choose “Use .ico” and your favicon is ready.

Step 4) Add favicon to server
Put new favicon.ico file on your iDisk in the site you want the favicon to be.

Such as iDisk/Web/Sites/yoursitefolder/put favicon.ico file here.

Step 5) Find and Open HTML files
I wish that were it, But we have to add a bit of code on each page that you want the favicon to show up on.  So go to your iDisk/Web/Sites/and choose the site folder and find the .html page you want the favicon to show up on.  You now going to open that .html file in something that you can see the html with.  Power users may use something like Coda or Dreamweaver, if you don’t have those apps, it’s OK you can just use TextEdit that comes on every Mac.  But before you go opening the HTML file with TextEdit be sure you fix one thing in the TextEdit preferences under the Open and Save tab, check on “Ignore rich text commands in HTML files” checkbox.  Looks like this:

So now that you’ve done that choose your .html file on the iDisk and right-click or control click and choose “Edit With” and choose your html editor Coda, Dreamweaver, or TextEdit (there are many others too).

Step 6) Add Code
You will now see a bunch of HTML code your going to put the code below inbetween your <head> tags

<link rel="shortcut icon" href="http://web.me.com/username/sitefolder/favicon.ico" />

A good spot to paste this code might be right after your <title> tage of your site.  Just be sure to adjust the text in red to your own info.

Step 7) Add to other pages
Then go through and add that same code to each page you’d like to have the favicon appear.  Vist your site and you’ll see a new fancy custom favicon on your mobileme site.

Notes:

Favicons don’t work with masked domain sites
Favicons with MobileMe don’t work if your site is uses a masked domain.  Many people purchase a domain from say GoDaddy then foreward the domain to their mobileme site (which works great).  Many also decide to mask the domain so when forewarded it doesn’t show the web.me.com/username/site etc. it only shows the domain name.  But just know that if you do that your favicon will not show up.  So if you really want the favicon with your mobileme site you can’t mask it with a forwarded domain.

3rd Party Software
Another Option to get a favicon without doing this manually by the above steps is to use some 3rd party software.  A few are iTweak, iWebExpander, iWeb Valet and they save you a bit of time to add a favicon.  You still have to do it each time your update/re-publish your site, but it could be helpful.  Check out my Links page to check’em out.

If using your own server (i.e. RAGE iWeb Webhosting, GoDaddy hosting, iPower, etc):
If your using another server other than mobileme it’s much easier and it’s a one time shot and your done.  It’s great.  Just follow all the above steps 1,2, and 3 above, then put the favicon.ico file on the root level of your server.  That’s it!  No code to add to the html or anything.  Most browsers will see the favicon.ico file on the root level of the server and it will load it in.  To get the file to the server I would recommend using Transmit which is a good FTP client that helps you get your favicon and iweb html files onto your server.   If you want to make sure all browsers are compatible with it you could add the same code that we did for the MobileMe setting:

<link rel="shortcut icon" href="http://www.mysite.com/favicon.ico" />

Put that code in the <head> section of your document and it’ll guarentee the favicon look, but again most modern browsers will recognize the favicon if you just put it on the root level of the server

Good luck with the favicons hope that helps.

VIEW DEMO »

Step 1:

Get video you desire to be a flash video and convert it to .flv format if it’s not already.

How do I convert my video to flash video you ask?

Well there are a number of different ways.  You are going to need one of these converter below:

• Adobe Media Converter (comes with CS4 or Flash Video Encoder from CS3)
• Visual Hub (no longer in development, but if you got it while it was out, lucky you)
• Aimersoft Video Converter ($65)
• Perian QuickTime Plug-In + QuickTime Pro (Perian is free, QuickTime Pro is $29)
• SoThink FLV Converter ($45)
• FFMpegX (Free, but it requires some external file installations, they make it a little difficult to get, so here it is made easy by me.  Click here to download the app and here to download the extra files.  Your welcome ;-).  You can get instructions and more info on the software here. After you open the .dmg file and drap application to your app folder and launch the app it will ask you to locate 3 files to add onto it.  They are the ones I provided.  I would recommend moving them to home folder/library/application support/ffmpegx (you’ll make this folder)/put 3 files here that were in the .zip folder here.  Then in the FFMpegX App you’ll know where to find the 3 files to install and they’ll be in a safe place where no one will touch them.  Hope that makes sense.  If it sounds to complex, just go buy one of the other converters above to make life easier for you.)

Which ever converter you use, just convert that video file to a .flv format.  So in a nutshell, step one is convert video to .flv

Step 2:

Download the Longtail Video JW player by clicking here»

You’ll be downloading a .zip file.  Double-click to open and inside you will see 2 files; one called “player.swf” and the other “swfobject.js”.  We will need these files to make this work.  So now we should have a total of three files

1. Our .flv flash video we converted in step one
2. player.swf file
3. swfobject.js file

We just need to do one more thing and we’re ready to roll

Step 3:

We’ll need to have an image that will sit there until the user decides to click play.  So just export out a frame of your video.

It might be easier to go back to your original video to export out the frame.  You can do this in QuickTime pro, iMovie, Final Cut, and many other apps.  Or if you want to make it simple, just play your video, stop it on a frame that you would like to be your hold image and do a screen shot.  You can do a screen shot by pressing “command + shift + 4” on your mac, then draw a box around the frame of video your holding on.  When you let go you’ll have a new .png still frame  on your desktop.  We are going to use this to be the video preview.

You should now have four files.  Fyew.  These are all the files we need and we are ready to roll.  So we should have these four files

1. Flash Video (our .flv video we converted in step one)
2. “player.swf” (file we downloaded in step 2)
3. “swfobject.js” (file we downloaded in step3)
4. Preview image (file we created in this step.  You should name it preview.png)

For file size reasons you may want to open that image you created in step 3 in the application “Preview” and choose file>save as and save it as a jpeg image and bring the image quality down a bit so that the file loads quickly on the web.  Just a suggestion, if you have photoshop you could choose file>save for web and size it down that way too.  You can use a .png file or a .jpeg file for this

Now put those four files (.flv, .swf, .js,(.png or .jpeg)) onto the server, meaning your iDisk or your own ftp server.  If your using MobileMe I’d recommend making a folder called flash in this location: iDisk/Web/Sites/flash/put 4 files here. Just make sure you have these 4 files on your iDisk or server all all will be well.

Step 5:

Almost done.  All we need to do now is use the below code in an html snippet and replace the items in red with our own server path names.

Just replace the items in red with the path that goes to your files on the iDisk replacing the appropriate names to point to the right place.  So be sure to put in your MobileMe username and your correct flash video name (yourflashvideo.flv) and your preview image (myimage.jpeg or myimage.png).  Also be sure to adjust the width and height of your video with the 2 numbers that are red in the code.  Once it’s all updated and you have all your links pointing to the right spot, hit “apply”.

Done!

We now have flash video in iWeb successfully! Yay!

Hope it wasn’t too complicated for ya.  Just do it a couple times and you’ll have it down in no time.  There is a video I made that will walk you through this too if you’d rather look at that.  Just got the Video Tutorials section and it’s all about flash video.

Note: You can use Longtail Video JW Player on your site for free as long as your not selling anything, have ads on your site, etc.  If you are doing those things you need to purchase a license.  It’s €30 (Euro) which is about $41 dollars.  You can purchase a license here»

More Notes:

If your wanting to customize the JW player, they have a nifty little embed code creator that you can tell it what paramaters you want to be set.  Click here to go to it.

FancyZoom in iWeb

FancyZoom in iWeb, huh? What’s that. Well there are a many websites these days that have that popular image zoom effect so that when you click on the image it animates the photo larger. Well many have asked, how can I do that with iWeb? Well here it is, this is the tutorial to show you just how to do that. Keep in mind this one is a bit more complex, but it can be done without getting your hands to dirty in code.

VIEW DEMO »

Step 1:
Drag a photo onto your iWeb page that you would like the photo fancy zoom to be on.

Step 2:
Click on your photo, and head to the hyperlink inspector and make the image a hyperlink. Where it says “Link To:” choose “A File” and find your same photo that you dragged onto the iWeb page.

Step 3:
Now your done with the iWeb part. Now publish, either to a folder or to MobileMe.

Step 4:
We now need to do just 2 more things. First download this .zip file.

DOWNLOAD FANZYZOOM .ZIP FILE

Once downloaded, open the zip so you have your folder titled “fancy-zoom”. You will see a bunch of files inside of that folder. You’ll need to drag this folder into your site folder. To move to site folder see options below:

If you published to a folder:
Find the web export folder that you published to and you will see inside a index.html file and a folder which is the name you gave your site. Drag the “fancy-zoom” folder into that site folder.

If you published to MobileMe:
Open up a finder window and go to the iDisk. You are then going to search for the “Web” folder, then go into the “Sites” folder, and in there you should see a folder named the name that you titled you site in iWeb. Drag and drop this fancy-zoom folder into that folder (it may take a while depending on your internet connection).

Step 5:
Almost done. We now just have to alter some code. Now don’t get scared quite yet, it’s not to bad. In that same folder that we dropped the fancy-zoom folder you will find a bunch of other files including that page that you want to have your fancy zoom on. Find that html page that you added the photos to and we need to open it up with something that allows you to edit html code. I personally use “Coda” by Panic Software, they even have some trial version so you can try it out or just use it till you get your fancy zoom going. Anyway, you can also simply use TextEdit on your Mac. So here’s what you going to do. Find that .html file, right click, choose “open with” and choose your html editor, it will say TextEdit or Coda or whatever you choose. You will then see all the great code that iWeb users typically try to stay away from, but we just need to alter 2 lines of code. Both Coda and Text Edit have a Find and Replace feature. So press command + F on your keyboard and you’ll get the find and replace window. Simply find and replace these two things:

1) Find:

</head>

Replace:

<script src="fancy-zoom/FancyZoom.js" type="text/javascript"></script><script src="fancy-zoom/FancyZoomHTML.js" type="text/javascript"></script></head>

2) Find:

onload="onPageLoad();"

Replace:

onload="onPageLoad(); setupZoom();"

Then just save (command + s, or File > Save).

Done!

Now that wasn’t so bad eh?

From there you should have a fancy, shmancy zoom that will look great and it will also work on the iPhone. Pretty cool, eh.

Note: You can only use FancyZoom on none commercial websites, if you would like to use FancyZoom on a commercial site you must purchase a license for $39 on Cabel’s Blog (the creator of FancyZoom)

More Notes:

If you are looking to do other things with FancyZoom here are some tips:

• If you want to replace the Title below the photo then, do a search for href and find the title it’s using and change to what you want. Example title=”Add Your Title Here”

• If you want to get rid of the title entirely just Edit the FancyZoom.js file and on line 431, change the “visible” value to “invisible”

• If you want to add a border on the popup just add something like a 10px border on the image by adding the following at line after 63 in FancyZoomHTML.js: inImage1.style.border = ‘10px solid white’;

• FancyZoom will attach itself to any jpg, gif, png, bmp, or tiff link in your page.

• There is not a way to put anything else but photos into the fancy zoom, so no videos, flash, etc. But I’m working on another tutorial to use another method so you can get video and flash in them, check back.

MobileMe Web Gallery in iWeb

We all love the MobileMe (.Mac) Web Gallery for sharing photos, uploading, downloading, etc. and it’s great how iWeb has the little integration with the gallery in the Web Widgets.

But all you get is a little tiny window of skimming photos that then takes you to the gallery in a new window. So here is how you can get your entire gallery in iWeb so visitors won’t ever have to leave your iWeb site at all which will also let you decorate around your gallery. Here’s how.

VIEW DEMO »

Step 1:
Choose an HTML snippet from the Web Widgets.

Step 2:
Paste this code below replacing the items in red with your own MobileMe (.Mac) name and the size you want it to be on your page.

<iframe height="600" width="800" allowTransparency="true" frameborder="0" scrolling="no" style="border:none" src="http://gallery.me.com/yourusername"></iframe>

Step 3:
Click “Apply” and resize and position the snippet till it fits well on your page and your set.

Sizing suggestions:
You’ll need to make your snippet at least 800px by 350px to get the scroll bar to show up (assuming you have enough published events and videos to make it scroll)

Other Options:
If you want to have a specific gallery to show up use this code below:

<iframe height="600" width="800" allowTransparency="true" frameborder="0" scrolling="no" style="border:none" src="http://gallery.me.com/membername#albumnumber&view=mosaic&bgcolor=dkgrey"></iframe>

you can equally just copy and paste the URL for the gallery look and feel you want. For example if you want the background of your gallery to be white in iWeb then visit your page online make the background white, then just copy the URL and paste it into the section in red below.

<iframe height="600" width="800" allowTransparency="true" frameborder="0" scrolling="no" style="border:none" src="http://gallery.mac.com/membername#albumnumber&view=mosaic&bgcolor=dkgrey"></iframe>

Good luck with it and have fun.