Nov 06

Vanilla Forums in iWeb

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. Continue reading »

Tagged with:
Mar 20

Tip #27 - CSS Buttons in iWebThis tip is a very easy and helpful tip for any iWeb site.  It allows you to easily add great looking buttons to your iWebsite.  Usually to create buttons in iWeb you have to use the iWeb shapes with some creative colors, but this tip simply has you paste some code in an HTML Snippet hit apply and you’ll have a beautiful CSS button.  CSS stands for Cascading Style Sheets and is the core to the style, colors, fonts, etc to any website.  So we are using this type of code to create buttons only using code, meaning no images or anything.  They end up looking fantastic on your site, load very quickly, and are very easy to put into your site.  So let’s get started on how to get them into your site.

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="http://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="http://www.iwebunlimited.com" target="_blank"><img src="http://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="http://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('http://yoursite.com/yourpage.html');
</script>

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

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

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

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

Hope that helps.

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:
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:
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:
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:
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:
preload preload preload