Feb 13

Snow in iWebAfter adding snow to my site here on iWebUnlimited.com back in December I got a lot of people on the forum, facebook, and twitter requesting to post a tutorial on how to add snow to their iWeb sites.  So I’ve found a really easy way to add this to your own site.  I’ve created two ways that you can do this.  You can either just add it into an HTML snippet and it will only snow in the snippet (which you can size to whatever size you want), or if you want it to snow everywhere (like I had on the site) you have to publish your site, then open your html page in an html editor and add just one line of code.  It’s super simple, so let me walk your through how to do it. Continue reading »

Tagged with:
Dec 19

Image Sliders in iWebiWeb Tip #25 is on how to get image sliders in iWeb.  Adding an image slider to your website is a great way to catch the eye from your viewers and draw there attention in.  You can easily add an image in iWeb, but what makes image sliders great is the ability to make the images interactive with your visitors.  So this post is all about getting different types of image sliders into iWeb. So let’s get started!


Continue reading »

Tagged with:
Aug 14

Print Button in iWebiWeb Tip #24  is on how to add a print page button in iWeb.  There are times when you create a page on your website that viewers might want or need to print frequently, so this tip will help you add an easy “Print Page” button to your site.  This tip makes it quick and easy!  Simply paste the code below in an html snippet and that’s it! So here we go:

Continue reading »

Tagged with:
May 12

Comments in iWebSo you have a website you’ve created in iWeb and you have a blog or page that you want to add comments to, well then this is the iWeb tip for you.  This post is all about getting comments into your iWebsite.  iWeb has a built in commenting system, but it is for MobileMe Members only.  In this tip I will show you how to add comments to your iWeb made site no matter who you are hosting your site with!  Adding comments into your iWeb made site is great way to add interactive elements for your viewers, they start conversations and it starts to build a community on your website, plus giving you some feedback on your post.  I’ve seen many people post that they’ve wanted this added as a tip in the iWeb Forum here, and finally here it is.  So lets get started.

Continue reading »

Tagged with:
Apr 23

Google Search in iWeb

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!

Continue reading »

Tagged with:
Feb 20

Scrolling Text in iWebScrolling Text in iWeb

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:

<div style="height:425px;width:300px;color:#000000;font:13px/16px Verdana;overflow:auto;">
<font color="004080"><strong>This is my title</strong><br></font>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer.
<br><br>
<font color="004080"><strong>Another title</strong></font><br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer.
<br><br>
These tags below add breaks from one paragraph to the next
<br><br>
<font color="004080"><strong>This is another title</strong></font><br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer.
<br><br>
<font color="004080"><strong>This is another title</strong></font><br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer.
<br><br>
You could even add an image to it if you add this code:
<br>
<img src="https://www.iwebunlimited.com/images/iweb.png" alt=“iWebUnlimited” />
<br><br>
If you want the image to be on the left and the text on the side use this code:
<div style="height: 0px; left: 0px; position: relative; top: 0px; z-index: 0; ">
<a href="https://www.iwebunlimited.com" target="_blank"><img src="https://www.iwebunlimited.com/images/iweb.png" alt="Image Title" style="border: none; " /></a>
</div>
<div style="left: 65px; position: relative; top: 2px; width: 200px; z-index: 1; ">
This is my text that is along side an image in a scrolling textbox in iWeb.  Pretty cool huh.  Pat yourself on the back and call yourself an html coder.  You can even make a link in here if you do this: <a href="https://www.twitter.com/iwebunlimited" target="_blank">Here's my link</a>
</div>
<br>
<br>
That's all folks
</div>

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:

<div align="center">
<font color="000000" size="4" face="Verdana"><marquee bgcolor="transparent" direction="left" loop="true" width=100%"><strong>I Love iWebUnlimited.com's tips!</strong></marquee></font></div>


Vertical Scrolling:

<div align="center"> <marquee bgcolor="transparent" scrollamount="3" direction="up" loop="true" width="100%"> <center> <font color="#000000" size="4" face="Verdana"><strong>My Scrolling Text Title</strong><br>I love iWebUnlimited.com's tips and Tricks.<br><br>This below is just some jabber text to show you what it would look like if there was a lot of text here.  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer.<br><strong>iWebUnlimited.com</strong></font> </center> </marquee></div>

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



Tagged with:
Feb 20

Redirect Pages in iWebRedirect pages in iWeb

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('https://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 ='https://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.

Tagged with:
Aug 22

Shadowbox in iWebSo I know that I have done 3 other tips similar to this one (Fancyzoom, Highslide, and Lytebox) and I thought I was done posting tips about the fanzy popup realm, but when I found this effect I just had to post it.  This in my opinion in the mother of all popup effects.  Why? Because it supports so many formats natively to it.  You can do, of course image, but it can also do swf’s, html, flv’s, YouTube, mov (Quicktime), even wmv (windows media), and more.  It’s fantastic and works pretty much just like the other effects.  So if you have done my other fancy popup tutorials than you will kindof already understand how this one works.  But here goes the tutorial on how to do it.

Continue reading »

Tagged with:
Aug 15


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:

Continue reading »

Tagged with:
Jun 25

Page Titles in iWebYou’ll notice that when you visit a webpage at the top of your browser there is a title of the page.  In iWeb you get this title by the header text box and if you delete that it just uses the name of the page in the sidebar.  Search engines do a lot better finding your page if you have a good title for your page so here are some tips to help get your page to have a title.

Continue reading »

Tagged with:
May 19

Navigation Menus in iWebThis iWeb tip is all about navigation menus in iWeb.  I’ve had many request to get into menus.  Simple navigation is pretty simple in iWeb and you can make the navigation pretty customized.  Drop down menus get a little more complicated in iWeb, however it is possible.  This tutorial will show you how, so here we go.  Let’s start simple and go more and more complex.

Continue reading »

Tagged with:
Apr 28

Lytebox in iWebSo I know I’ve been on this kick of the little pop-up effect in iWeb and the FancyZoom and Highslide effects I thought we’re enough, but then I came across this effect here and found it to be pretty easy to implement (easier than Highslide), I thought I’d post this one as well.  So here we go:

Continue reading »

Tagged with:
Apr 10

Highslide in iWebHere it is, finally a fancy zoom that will allow us to get not only images, but flash, video, and other html content.  So first let me answer the question, what is Highslide JS?  Highslide JS is a great way to get that ever so popular image zoom effect just like the fancy zoom post I did in the past.  The difference is, is that this one will give you the ability to zoom more than just images.  Though FancyZoom is a bit more light weight, there are some great advantages to Highslide.  This tutorial you will need the use of an HTML editor like Coda, Espresso, Dreamweaver, even TextEdit.  Just as long as you have some way to edit the html after iWeb publishes.  I try to do as many tutorials trying not to get into post published html, but sometimes you just gotta do it to get the desired effect.  So here is an easiest way I’ve found to get it into iWeb.

Continue reading »

Tagged with:
Feb 01

Rollovers in iWebIt’s always fun to add some user interaction to your website and currently the only rollover like interaction iWeb gives us is text rollovers as links.  Well this post is to show you how to get image rollovers on your iWebsites.  Here we go:

Continue reading »

Tagged with:
Jan 01

MP3's in iWebEver want to have a simple song or audio file play on your website? Well this tip is all about playing audio files in iWeb.  There are many great audio players out there that can help us get mp3s streaming to our iWebsite.  Google, Yahoo, Odeo, Premium Beat all offer some great audio players.  Some that are single players, some that are multiplayers, some that are playlist players.  So here’s a great little tip that will help you get them all on your website whether it be for entertainment, background music for your site, a song or sound file you’d like to share, etc.  So here’s how to do it:

Continue reading »

Tagged with:
Dec 01

Polls in iWebEver wanted to put a poll of some sort on your website?  It’s actually quite easier than you may think.  The key to getting a great looking poll on your site is the 3rd party service Poll Daddy at PollDaddy.com.  It’s very customizable, has many features to play with, it’s super easy, and it’s free!  Here’s how:

Continue reading »

Tagged with:
Nov 01
Favicons 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.

Continue reading »

Tagged with:
Oct 01

Flash Video in iWebI’ve had many request asking for a tip on how to get flash video into iWeb.  There are many different ways, but this tutorial is going to show you how to do it with Longtail Video’s JW Player, which is the number one open source media player.   The reason we use flash video is because it’s most compatible with all computers Mac’s and PCs and if your wanting to reach an audience like that it’s the best outlet next to QuickTime and Windows Media Video.  JW player is pretty flexible to customize, but we’re going to make this as simple as possible for you, so here we go:

Continue reading »

Tagged with:
Sep 01

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.

Continue reading »

Tagged with:
Aug 01

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.

Continue reading »

Tagged with:
Jul 01

Pop Up Windows in iWeb

Opening certain small windows on a page can be very helpful and convenient. As long as the content of your pop-up window is relative to your site, visitors don’t mind the pop-ups, it’s when it’s for something unrelated to your site, like an “ad” of some sort, that visitors don’t like them.

Continue reading »

Tagged with:
Jun 01

Forms in iWeb

This has been a big one for many people who ask “How do I get a form in iWeb?”

iWeb doesn’t have this feature built into the app yet, but through the HTML Snippets we can achieve this and we can achieve this very easily.  You might want a form for a contact form, a sign up for our newsletter or email list, request an appointment form, get a quote form, email us form, etc.  Most all sites have a form on them now and so can you with iWeb, here’s how:

Continue reading »

Tagged with:
May 01

Transparent Flash in iWeb

This is much like the tutorial before on adding flash to iWeb, but sometimes you still want to use the background that you have in iWeb, or you want to use other graphics behind your flash file. Well here is the solution to have the background of your flash (.swf) file transparent. Continue reading »

Tagged with:
Apr 01

Drop Down Navigation in iWeb

Here’s a tip that will allow you to have a neat little drop down navigation menu in iWeb.  It might be handy for a site map, quick links, or even the main navigation of your site.  Here’s how:

Continue reading »

Tagged with:
Mar 01

iFrames in iWebThis page lets you load another webpage (whether made in iWeb or not) into your site.  Very helpful if you have a page made somewhere else and want to put it directly onto your webpage.  Some things you might want to iFrame on your page are:

  • iCal published calendars
  • Aperture made photo galleries
  • Pages made in 3rd party web software such as RapidWeaver, DreamWeaver, Sandvox, etc.
  • HTML Flash Galleries with XML files
  • and many more

Here’s how to do it:

Continue reading »

Tagged with:
Feb 01
Flash in iWeb

See how to get Flash SWF files into iWeb

This tutorial will show you how to get an Adobe Flash created file into iWeb.  Flash adds all sorts of interactivity to your site as well as fun animations.  It really makes your sites come to life. iWeb does not accept those files natively to just drag and drop them in, so how can you get those files into iWeb?  Well, the HTML Snippets is the key. If you don’t know what flash is or how to use it there are many books, podcasts, online tutorials that can help you learn.  This tutorial is just how to get that flash created file into iWeb.  So buckle up, here we go.

Continue reading »

Tagged with: