The rumours have been confirmed, and the iWeb replacement will be called EasyWeb.

EasyWeb will be demoed at this years MacWorld/iWorld show in San Francisco.

Users can ‘Like’ the EasyWeb Facebook page, and interact with the app’s developers, and other highly excited future users.

This is extremely exciting news! We have all been waiting for an iWeb replacement since Apple has had no plans to update the current version and there is nothing that really comes close to what iWeb offered. It could even be iWeb itself, but we won’t know until more information is released.

You can sign up to be notified when the iWeb replacement is released.

Let’s hope this is actually what we have been waiting for! Leave your comments below if you are excited as I am.

Leave your comment on All About iWeb

MobileMe is Closed

Fortunately this is an easy issue to fix. Instead of using the Google Maps widget you’ll have to use the HTML Snippet Widget;

Add Google Maps to your iWeb site With an HTML Widget

1. Go to https://maps.google.com
2. Enter your location in the search field


Enter Google Maps Address

3) Select the “link” button. It looks like a Chain link and is on the left hand side of the window



4) Copy the code that says “Paste HTML to embed in website” into an HTML Widget in iWeb



Copy Google Maps Code to HTML Widget

And that’s all there is to it. So you can continue to use Google Maps even though MobileMe has been discontinued. You will have to go through your iWeb site and delete all of your Google Maps Widgets and replace them with HTML Widgets.

If you’ve read this blog before, you will notice that I recommend using RAGE Web Hosting as your replacement web host. Over the last few months, RAGE has put together some great articles and video tutorials that give MobileMe users more insight into the changeover from MobileMe. Most importantly, RAGE has been doing a great job illustrating why iWeb users need to switch to a new host, and how to do it so that it is an easy and seamless transfer. Below are a few of these resources that I have found to be most important and crucial for any iWeb user who is still using MobileMe.

Edit: One more thing I’d like to add is that for those of you familiar with iWeb SEO Tool, the program is no longer available for free, so RAGE will provide users signed up to their hosting for at least one year with a free serial number. Take advantage of this offer while it is available.

Leaving MobileMe but still retaining some of its features

Transferring a domain from GoDaddy to RAGE

RAGE Web Hosting FAQ

RAGE’s hosting sign up wizard

Also, keep in mind that you can visit their website, and wait about 60 seconds for a popup to appear that will allow you to live chat with a RAGE agent. You can ask them any question you want and they’ll be able to answer you. I hope everyone takes this switch seriously, as it will be a real shame to see what happens come June 30 and many website’s go down without people even realizing.

If you have any questions about switching from MobileMe to a hosting company, feel free to ask in the comments section.

Just a quick note: SEIntelligence is available to purchase on RAGE Software’s store, or the Mac App Store for $199.95, but for those of you who wish to purchase it at 25% off, just leave a response in the comments section and a rep from RAGE Software will send you an e-mail with the discount link. This is a limited quantity offer, so post your comment as fast as you can. Also be sure to leave your e-mail address as a way for them to contact you.

Click here to view the embedded video.

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.

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. If you transferred your domain, make sure to follow the instructions in the Domain Name Details section of the e-mail, as you will need to update your name servers to indicate that RAGE Web Hosting is hosting your site as well as housing it.

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

Hi Everyone! My name is Jeremy and I will be taking over iWebUnlimited for Jason. Jason has done such a great job with the site and I am extremely happy to be able to have this opportunity to fill his shoes. I have run other mac software video tutorial site for a few years now, and have done work, and continue to do a lot of work with RAGE Software. I have made hundreds of video tutorials on iWeb for both AppTorial and RAGE Software, including the popular SEO For iWeb Walkthrough Video Tutorial. RAGE Software has been an integral part of the iWeb community for many many years, offering the well known free tool called iWeb SEO Tool. I will be discussing many of RAGE Software’s products and services during my tenure with iWebUnlimited, and hope to show iWeb users how using these products will make their lives a lot easier.

I hope to add a lot more to this ever growing site of amazing iWeb tips and tricks. You might notice some edits at the top of older posts. This is just my way of keeping those posts up to date with the most current methods, and simplistic approaches to accomplishing the goals set out in each tutorial.

I know there is some panic right now about the future of iWeb, and I want everyone to know where I stand on this matter. While Apple might no longer continue to develop iWeb, it is still the best option available in terms of drag and drop or WYSIWYG editors for the Mac. As long as you have iWeb on your computer, there is no need to find an alternate web builder right now. I will do my best to keep everyone up to date on this matter, as things will most definitely change in the future (as they normally do). But for the time being, my recommendation to iWeb users is to not panic, and continue using iWeb as you normally do. Use this site and your other available resources to continue to produce the best possible website you can.

If you are a MobileMe user, please know that your account with MobileMe will be expiring in June of 2012. This means you will need to find a new web host very soon. I encourage everyone to do this sooner rather than later. My personal opinion is that if your site is for a business, you should not be using MobileMe as a web host. In previous posts, Jason has recommend RAGE Web Hosting, which I also highly recommend. RAGE Web Hosting is the only hosting company on the market that provides users with iWeb support. As an iWeb user, that type of support is so rare  and so important. Having experienced other web hosts before, I can safely say that you will not be disappointed using RAGE.

That is all for now. To finish off, once again, I am extremely happy to be here, and I look forward to discussing iWeb related topics with you all!

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.

Here’s a video on how it works:

Click here to view the embedded video.

You can learn more about it by clicking here:

Visit Rage Software iWeb to Wordpress Page

Then to learn all about Wordpress visit our brand new site called Learn2Wordpress.com to learn all about how to build and create websites with Wordpress.

Visit Learn2Wordpress.com »

iWeb is pure and simply the easiest way to create a website on a Mac and we think it should stay that way.  So I’ve created a poll to show you how many users would like iWeb to continue.  You can view the numbers below.  Our question is how many people and votes would it take to convince you that there is still a large amount of users that still want iWeb in development from Apple?  Hopefully you can see by the vote results below and the comments of those who truly care and will see that this application is truly worth continuing as part of the iLife suite.

iWeb Fans make your voice heard!

iWeb fans please make your voice heard and tell apple how much you want iWeb to remain in development.  Click the link below and fill out the form as often as you can (perhaps daily) and maybe, just maybe, we can let Apple know that iWeb users are many.  (Ever read the Dr. Suess story of “Horton Hears a Who”?, we are the who’s that need to yell “We are here, we are here, we are here”).  Make your voice heard.

Tell Apple You Want iWeb to Stay »

You can also express your thoughts on iWeb in the comments below

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.

Watch the video above the “How To” or you can view the text tutorial by going here.  Below are the resources you’ll need:

File Download:

Download attention-bar.zip File »

Code:

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.

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.

As many of you may know, Apple’s plans for iWeb don’t seem very bright.  The last update of the iLife suite didn’t include any update to iWeb and they aren’t even selling iWeb on the App Store at all. Then to push the knife in a little deeper they announced with iCloud that iWeb publishing will be discontinued as of June 2012.  So…the question then comes to be, what happens now.  So here are my suggestions for all my great iWeb fans of what to do with your websites done in iWeb and how to continue creating a great website easily.

Current iWeb Users

First off, iWeb will run on your computer for quite a while, so if you are privileged enough to have a copy of iWeb on your Mac, that’s great, and you will be able to continue to use it, however you just won’t be able to publish to MobileMe in the future.  So if you have invested a lot of time in your iWeb site or want to continue to develop and build your site in iWeb that is totally fine, however just be sure to make the plans and arrangements to host your website somewhere other than MobileMe.  My suggestions would be to get a web host somewhere such as RAGE iWeb Hosting (iWeb Optimized Hosting).

So as you can see you’ll still be able to run, create, and manage your site with iWeb for some time if you already have it.  The problem is…that iWeb will most likely not be getting an updates or any further development.  When that happens with software that means that it’s shelf life clock has started.  There will come a time where your current version of iWeb won’t be compatible with your operating system or hardware and you’ll have to make a decision to move your site to a different platform, or simply not upgrade your system. My suggestion is always to keep your system current, so then the question then comes…what are my alternatives to iWeb?

iWeb Alternative

There are many other options for those that want to switch to a different platform to host their website.  The success of iWeb has been that it’s simple and easy to make a website.  That’s been the whole motivation and drive for me to run this website.  I being a web developer and an ex-apple employee have loved developing websites with iWeb, but there came a time when my clients wanted a site that had more features, and a web-based backend to manage the site, a more powerful blog, etc. etc.  It was then that I started developing website with a system that has now become my favorite web development platform and tool.  That platform is Wordpress!

Wordpress

Some of you may of heard of wordpress and other’s it might be something totally new.  WordPress is a free, Web-based software program that anyone can use to build and maintain a website or blog. It was originally intended as an easy way to set up a blog. But, thanks to the efforts of a large “open source” community of WordPress programmers working to extend and improve its capabilities, WordPress has become much more than just a tool for bloggers. Today’s WordPress is really a “content management system” (CMS), which means that it can be used to run full-sized, social media-rich business websites.  This website here is actually a Wordpress website, not an iWeb website.  By just browsing this website you can see the great features that Wordpress as a CMS can be for those who want websites.  So then the question comes, “I’ve been using iWeb for so long and I’ve never touched Wordpress, how do I learn such a system?”, well ask no longer, I’ve been working on a new website to continue this website with the focus being on Wordpress.  So I’m launching the site called Learn2Wordpress.com to help those of you who wish to transition from iWeb to a more powerful web publishing platform.  It’s still pretty new and I’m adding more content all the time, but it’s goal is to help my iWeb users and fans to transition into learning how to use wordpress to develop their own sites.  So I urge you to visit my new site and let me know what you think.

Visit Learn2Wordpress.com »

Other iWeb Alternatives

There are many other iWeb Alternatives out there for those looking to replace iWeb.  Here’s my list of some of my favorite apps that I’ve tried out that are fairly similar to iWeb:

• RapidWeaver from RealMac Software – This one was alive even before iWeb came to be.  In fact when iWeb first came out I remember thinking, this is a lot like RapidWeaver.  RapidWeaver continues to be developed and is a great option for those that are very familiar with iWeb.
• Sandvox from Karelia Software – This is another one that is very similar to iWeb.
• SquareSpace – Squarespace is a nice and easy onlinepaid subscription service that lets you easily create and manage a website. They take all the headache out of building your own site.  There are some limitations, but it’s pretty expandable to create what you want.  The only problem is that it’s a monthly subscription service in ultimately it’s the most expensive option in the long run.

There are of course many other options to create website easily such as Freeway, Posterous, Tumblr, Blogger, even Facebook as a Page, but these above are my top options if you are looking for easy software similar to iWeb.  But of course as I mentioned above I think Wordpress is by the far the best publishing platform for building a website.  For that reason I created a whole new website Learn2Wordpress.com where I’ll continue to teach you everything on how to get a website running with Wordpress.

Conclusion

All in all iWeb is and has been an incredible tool and I really wish Apple would continue to develop it as I think there is so much potential there.  If you think about it iWeb is the only iLife application that doesn’t have a pro application counterpart.  iPhoto has Aperture, iMovie has Final Cut Pro, Garageband has Logic Pro, iDVD has DVD Studio Pro, and iWeb has…nothing.  I think if Apple were to serious invest in creating a pro iWeb application it would soar through the roof.  I hope that they realize that, but until they do I will continue to add great iWeb tips and tricks here on iWebUnlimited.com and will start to build more content on Learn2Wordpress.com to help those who want to go to the next level in web development.

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.

Here’s quick MicroTip on making shiny buttons. We’ve all seen it on other sites, buttons with that reflective shine to it.   Well this microtip will show you how to get a shiny button without using any fancy graphic program like photoshop or illustrator.  Just watch this and you’ll be making shiny buttons in no time. Enjoy!

(By the way there is no audio, just watch :-) )

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

Are you hosting your iWeb site on your server? That means that you can’t use the built in comments feature in iWeb. It only works if you have a MobileMe membership. Well here comes iWebUnlimited to the rescue. Now you can get comments into iWeb no matter who your hosting your website with. Just follow the steps in this video and your set!

If your doing the iFrame way use this code below to create a blank HTML page:

Photo Swapper HTML Image Viewer in iWeb.

This adds a little image swapping viewer in iWeb.  Just follow the steps in the video tutorial.

Here is the snippet code below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Expanding Photos </title> <style type="text/css"> img.mini {border:none} /*no border around left column images */ div#minis a img.big {height: 0; width: 2; border-width: 2} /* hide the big image by making its height and width 0 */ div#minis a:hover img.big {position:absolute; top:18px; left:120px;height:400px;width:500px;border:none} /* make the big image appear in the same space as the frame at right when the visitor hovers over one of the image in left column */ #frame {position:absolute;top:16px;left:118px;height:355px;width:480px;border:none solid grey;font: 1em "Trebuchet MS", Verdana, sans-serif;color:grey;padding:10px} /* create an empty frame so that visitors expect something to go there */ p {margin-bottom:30px} /*add bottom margin to p elements so that they are (roughly) aligned with the big image frame */ </style> </head> <body> <div id="frame"> <p>My cool text that is there when no image is. </p> </div> <div id="minis"> <!-- Photo 1 --> <p> <a class="photo" title="Paradise with Palms"> <img class="mini" src="http://www.iwebunlimited.com/examples/htmlimageviewer/palms_t.jpg" width="100" height="75" alt="Study of Women" /> <img class="big"src="http://www.iwebunlimited.com/examples/htmlimageviewer/palms_b.jpg" width="535" height="381"/> </p> <!-- Photo 2 --> <p> <a class="photo" title="Panda at the Zoo"> <img class="mini" src="http://www.iwebunlimited.com/examples/htmlimageviewer/panda_t.jpg" width="100" height="75" alt="Old Man Water" /> <img class="big" src="http://www.iwebunlimited.com/examples/htmlimageviewer/panda_b.jpg" width="535" height="381"/> </p> <!-- Photo 3 --> <p> <a class="photo" title="Viva Las Vegas"> <img class="mini"src="http://www.iwebunlimited.com/examples/htmlimageviewer/lasvegas_t.jpg" width="100" height="75" alt="Study of Hands" /> <img class="big" src="http://www.iwebunlimited.com/examples/htmlimageviewer/lasvegas_b.jpg" width="535" height="381"/> </p> <!-- Photo 4 --> <p> <a class="photo" title="iJason in Paradise"> <img class="mini" src="http://www.iwebunlimited.com/examples/htmlimageviewer/ijason_t.jpg" width="100" height="75" alt="Infant in Womb" /> <img class="big" src="http://www.iwebunlimited.com/examples/htmlimageviewer/ijason_b.jpg" width="535" height="381"/> </a> </p> </div> </body> </html>

Then just replace the items as outlined in the video to your images URL’s, and your Titles, and your set.

This was a video answer submitted in by an iWebUnlimited fan. You can submit your own questions in for a video answer under the “Video Tutorials” tab and click Video Answers or just click here.