Fixed aspects
The fixed navigation and shopping cart ensures that they are always in view. This ensures that users have access to the essential elements when needed.

Build up the layers
Typical of many websites is a selection of background images. Brew Shop uses multiple background layers, a body background and the main image to create the complete canvas.

The rollover effect
Rollovers give prominence to the selected item and Brew Shop makes good use of them. The product images have border rollovers and text has standard hover effects.

inspiration: www.brewshop.co.nz

To emphasise a product, the Brew Shop uses a border rollover effect with the original border changing colour on the rollover. Re-creating this simple but effective technique involves a single line of HTML and a few lines of CSS. This lightweight example uses a div tag to contain the images and adds the border to the images in the container tag. First create the container tag, name it accordingly, ie #nav01, then set the Width to 100% and the Height to auto. Alternatively, a fixed width can be used, if needed. Now insert an image or the images into the code and add the relevant link:

001 <a href=”link01.html”><img src=”images/wwtv.jpg” width=”80” height=”80” /></a>

This will add the images with the standard border. Now it is time to create the border for each of the images in the container tag by adding the following code:

001 #nav01 img {
002 border: 10px solid #000;
003 float: left;
004 margin-right: 5px; }

The border uses a solid style with a Width of 10 pixels and is black. All the elements can be modified to suit. The image is floated left to ensure correct positioning with multiple use of image, and the margin is to ensure there is a uniform space between each image. To create the rollover, add the following code:

001 #nav01 img:hover {
002 border: 10px solid #CCC; }

TECHNIQUE | Use multiple backgrounds

Body background
A body background creates the canvas for a page and gives designers a foundation to build on. In this example we are going to add a repeating gradient accompanied by a background colour. Inside the body tag, add the code shown. This will produce a small black gradient at the top of the page and a solid colour at the bottom.

001 body {
002 margin: 0px;
003 background-image: url(images/blackgradback.jpg);
004 background-repeat: repeat-x;
005 background-color: #FFF;
006 }

Overlay images
To overlay an image over the background image, the image will need to be transparent or at least have the same background colour as the body background. To insert an image simply add the following code to display a single instance of the new background image.

001 #title {
002 height: 100px;
003 width: 100%;
004 background-image: url(images/syt2011.png);
005 background-position: 0px 5px;
006 background-repeat: no-repeat;
007 }

TECHNIQUE | Create practical and beautiful lists

List creation
The basis of a list is the ul (unordered list) or ol (ordered list). The favoured choice for non-specific lists is the ul tag. The first step to creating an unordered list involves adding a set of ul tags. Split these and add a set of li (list) tags for each item to appear.

001 <ul>
002 <li></li>
003 <li></li>
004 <li></li>
005 <li></li>
006 </ul>

Add text and links
To start the list-building process, add the desired text between each list item. Typically, this would include one or two words, but any length is allowed. To add a faux link the # can be added instead of an actual address. Perfect for just a test link!

001 <ul><li><a href=”#”>Home</a></li>
003 <li><a href=”#”>Podcasts</a></li>
004 <li><a href=”#”>Features</a></li>
005 <li><a href=”#”>About Us</a></li>
006 <li><a href=”#”>Contact</a></li>
007 </ul>

List type
By default, the unordered list tag adds bullet points to each list item. To remove these in and create a simple list, the list type needs to be defined in the CSS. First create a pseudo class in the CSS that adopts the tag or class name where the list appears, and add the li after. Then add the list type and set to none.

001 #leftside li
002 {
003 list-style:none; }

Text style
By default, the text in the list will adopt the font defined on the body tag and the standard link blue colour with an underline. To smarten up the text the font, font size, style and colour need to be redefined. First create a new related pseudo class and add the following code:

001  #leftside li a{
002 font: bold 16px Corbel;
003 color: #FFF;}

No underline
By default, links are assigned the underline to indicate the text is a link. You can remove the underline completely, only show on rollover or hide the underline on rollover. To remove the underline completely, add the code shown below. To show while on hover, change ‘none’ in a:hover to ‘underline’.

001 a:link {text-decoration: none;}
002 a:visited {text-decoration: none;}
003 a:hover {text-decoration: none;}
004 a:active {text-decoration: none;}

Finishing touches
To add a graphic for each item in the list, add the code show below. Use an image that is similar in size to the text, a good guideline would de around 12 x 12 pixels or 15 x 15 pixels. The left padding is added so the text does not interfere with the graphic.

001 background-image: url(images/arrow.png);
002 background-repeat: no-repeat;
003 padding-left: 15px;
004 background-position: 0px 4px;}

TECH TIP | Short URLs

The short URL has become an integral part of the online experience thanks to the likes of Twitter. There are a host of services providing a shortening service, with well-known examples being bit.ly and tinyurl. However, users need to copy in a link, click a button, copy the new shortlink and paste into a retweet or post. The Shorten URL add-on for Firefox makes the whole process just that little bit easier and quicker. Two clicks shorten the URL of the page and a third copies it to the clipboard. Another effective add-on definitely worth trying out is Url Shortener 1l2.us found at https://addons.mozilla.org. This shortens the current URL, copies and links it to Twitter, among others

OneClickDog.com created Littlewheel which has won an MTV award for best browser game and it’s no wonder. They’ve taken the old point-and-click game and created some of the most beautiful animation, that tells an interactive story with a challenge of bringing you in-game friends back to life.

AUTHOR: Mark Shufflebottom | Web Designer Issue 180

ANNOTATIONS

Background
The background contains blurred imagery giving a sense of depth to the project and creates a rich environment that becomes very believable.

Point-and-click
The game is a familiar point-and-click that allows users to explore the interface and solve puzzles in order to progress. The white circles give you a clue as to clickable areas that are interactive.

Interactive
The scenery can be interacted with and usually some small detail is overlooked when trying to solve the puzzles.

Silhouette
The silhouette style of imagery gives a very striking look which uses Flash’s flat vector style to great strength instead of being perceived as a
weakness.

Avatar
Your character is a robot who is trying to restore power and life to a city and wake the powerless robot population.

inspiration http://fastgames.com/littlewheel.html

TECHNIQUE
1 Add symbols
Create the player Movie Clip you want to move. Add this to the stage and give it the instance name of ‘player’. Now create a button in the library and add two instances of the button on each side of the stage. Name one ‘walkHere’ and the other ‘walkThere’.

2 Setting up the code
On a new layer, select frame 1 and open the ActionScript editor. Copy in the code as shown into the editor. The irst three lines set up some variables that we will use. The irst is the most important as it will determine the speed at which your player moves. Then we set up listeners to listen for mouse clicks on either of the buttons.

var walkRate = 15;
var targetBuffer = 10;
var clicked:String;
walkHere.addEventListener
(MouseEvent.CLICK, goToPoint);
walkThere.addEventListener
(MouseEvent.CLICK, goToPoint);

3 Move when clicked
After the irst set of code copy in the next code as shown. This is the function that is called when either of the buttons are clicked on. Notice that the player is moved to the position of the mouse when the user clicks the button and this is stored in the targetx and targety variables. The player is then moved by adding the movePlayer listener which is called every frame.

function goToPoint(e:MouseEvent)
:void
{clicked=e.target.name
player.targetx = mouseX;
player.targety = mouseY;
player.addEventListener
(Event.ENTER_FRAME, movePlayer); }

4 Move the player
Add this code under the last. It is called every frame and moves the player towards the target position. You will notice a large if statement, this is checking to see if the player has reached the target and if so the listener is removed so that the player stops moving.

function movePlayer(e:Event):void
{
var pMove:Array = new Array();
pMove = getMovement(player.
targetx,player.targety);
var xinc = pMove[0];
var yinc = pMove[1];
player.x += xinc;
player.y += yinc;
if ((player.x > (player.targetxtargetBuffer)
&& player.x < (player.
targetx+targetBuffer)) &&
(player.y > (player.targetytargetBuffer)
&& player.y < (player.
targety+targetBuffer)))
{
player.removeEventListener(Event
.ENTER_FRAME, movePlayer);
}
}

05 Last code
The inal section of code works out the position increment to move the player to. Once done, hit Return and Enter on the keyboard to see the ile. Click on either of the buttons to see your player move to those points.

function getMovement(thisX, thisY)
:Array
{
var movement:Array = new Array();
var xdiff = (thisX – player.x);
var ydiff = (thisY – player.y);
var diff = Math.sqrt(Math.
pow(xdiff,2) + Math.pow(ydiff,2));
var fraction = walkRate / diff;
var xinc = fraction * xdiff;
var yinc = fraction * ydiff;
movement.push(xinc, yinc, diff);
return movement;
}

COMMENT | What the experts think of the site
Simple gameplay works best
“The beauty of Littlewheel is that it is a very simple game that anyone can play. The whole point of the game is to control a very limited selection of actions until you progress to the next screen. When you inally complete the game it is something that anyone can achieve but it gives you a massive sense of accomplishment because of all the beautiful animation.”
Mark Shufflebottom

01. Load content using AJAX

OBJECTIVE: Avoid page reloads by using jQuery to load content from other  les directly into your page

ACTION LIST:

1. Use the jQuery AJAX object to call another page after a user action
2. Select the part of the page to load into your document
3. Insert the loaded content into your page DOM, and animate the reveal

One of the best elements of having a JavaScript framework such as jQuery available is the browser abstraction. No longer do web designers and developers have to worry about targeting specific browsers, and instead we can concentrate on enhancing the user experience. It’s generally a good idea to take a progressive enhancement approach despite the wide browser support offered by the framework, however, and this tip does exactly that. Loading content using AJAX can increase the apparent speed of your website, reduce the page-loading  ash and improve the general user experience by providing a slick passage from
one piece of content to another. You can also use AJAX to control what web spiders see on your site, allowing for complex, non-keyword relevant content to be loaded separately. The basic coding premise is very simple: an event is  red by the user, and this in turn triggers the new content to be loaded into an object which is then displayed for all to see on the page. Because we can control which event we want to use as a trigger, content can be loaded at exactly the right time to provide the best user experience. In the example shown here we’re intercepting clicks on all links and using the href attribute to grab the relevant content before animating this into view. In itself this offers a wealth of opportunities – think in terms of iPhone-style swipes where the new content slides into view from the right, pushing the old content out to the left. By hooking into standard <a> tags we also ensure that if a user arrives at our site without JavaScript enabled, the website will continue to work exactly as it should do. The core code required to use this tip is a simple one line function:

$(‘#content’).load(‘mypage.html’, function() {
// Any code in here runs once the new con
tent has loaded
});

STEPS:
01 Create your site as usual
Create your page design as usual, using normal
HTML and CSS to style your content and arrange
it into pages. When you have a section that would
benefit from all the content being accessible without
page reloads, consider using AJAX to load the new
content in.

02 Attach an event to the link
Use jQuery to add an event to the link that calls the
next page. Make sure you either return false or use
the preventDefault() method to avoid the browser
taking over and loading the new page when you click
on the link.

// Attach an event to the link tag with a class of
“next”
$(“a.next”).live(“click”, function(){
// get the address of the page to load
var page = $(this).attr(“href”);
// this function will be called when the
data has loaded
function doSomethingWithData(data) {
// Select only the content
inside the new page’s #content div
var newcontent = $(data).
 nd(“#content”);
// Insert the new content into this page’s #content div
$(“#content”).
html(newcontent);
}
// load in the new page using AJAX
$.get(page, doSomethingWithData);
// prevent the browser from performing
the default link action
return false;
});

03 Test and refine
If you test your page now, it should swap out the
content inside your content div without reloading
the whole page. Consider adding an animation to
move the old content out and the new content in,
such as in this example where we’ve combined the
carousel and AJAX code to slide the new content
into view.

01. Find location

This step is simple and straightforward. Head to Google Maps (http://maps.google.com/) and enter the location to be included in the site. This can be a generic location like a county, ie Dorset, or a more precise location, ie a street name, or even the address of a specific location.

02. Choose type

Google Maps comes in a variety of guises. There is the standard issue map, a satellite view or a hybrid view. Select the option that is to be used. Alternatively, to get a Street View of the chosen location drag the peg to the desired location and adjust accordingly until correct.

03. Get the link

Click the Link link in the top-right of the map to view the related window. This includes the necessary HTML code to add to a page. Before copying the code click Customize and preview the embedded map link. Use one of the predeined sizes or click Custom and add width and height.

04. Copy and paste code

Once the map window has been resized, copy (Ctrl/Cmd+C) the HTML code in the copy and paste box. Now head to the web where the map is to exist and paste in the code. This will present a grey box where the map resides. Save the page and preview in the chosen browser.

05. My Maps

To create a more custom map, users will need a Google account, click My Maps>Create new map. Now add a title and description for the map. By default the map is Public, click Private to share with selected users. Alternatively, if a map has already been created select from the list.

06. Add places

The hand icon is the selection tool, use this to drag the map to the desired location. Use the pin icon to locate a
placemark and click in the desired location. Now add a title and description and press OK. When inished click Link and copy and paste the code and add to the webpage.

Typekit

http://typekit.com/

THE DADDY OF the web font industry, and much favoured by the design community at large, Typekit is run by Small Batch, a Silicon Valley-based team well used to being on the cutting edge of web technology. The group cut its teeth in web analytics, and made such an impression on Google, the search behemoth bought them out and employed them to overhaul its Google Analytics package. With Typekit, they’ve struck out on their own again. In certain circles, you can’t move on the web without stumbling across recommendations for the Typekit service, and it’s easy to see why. The service acts as a kind of conduit between type foundry fonts and webpages, allowing designers to circumvent any legalities over hosting or distribution of fonts. For range of fonts (it has partnerships with most major foundries), site usability and samples of application, Typekit is leading the pack. If there is any further innovation to be done in the web fonts arena, you’ll have to be quick off the mark to beat these guys.

FontsLive

www.fontslive.com

FIRST UP IS THE FontsLive site, from Ascender Corporation, which offers typefaces from five individual foundries (Ascender, Microsoft, Monotype, Bigelow & Holmes and Font Company). The sets available from the site include a mix of well-respected and B-list fonts, with very usable examples from Monotype, Font Company and Microsoft. The site itself is functional but rather minimal and in some respects perhaps favours simplicity over warmth of service. The search function appears limited to font names and a search for ligatures, for instance, returned no results. It’s also difficult to get a real feel for some of the fonts. Working previews are limited, but on the plus side you can view entire character sets for most of the fonts available on the site. Considering the not-insignificant costs for larger websites wanting to use the service, potential customers might wish to shop around a bit first, but on the whole this is a trusted option worthy of a look.

FontDeck

http://fontdeck.com/

FONTDECK STRIKES a rather nice balance between professional and informal, and although there’s not the greatest selection of fonts available through the service (about 100), having a limited choice is perhaps not a bad thing during the period of change the web is going through. The fonts that are available are serviceable enough for everyday needs, though you won’t find any of the more popular typefaces on offer here. The FontDeck site lets you search by designer as well as by style or foundry, so makes a nice resource for type fans as well as designers looking for fonts to try. FontDeck includes the work of 21 separate typographers, arranged alphabetically from Charles Bigelow through to Optima and Palatino creator Hermann Zapf. The site’s function of allowing a limited use of its fonts for initial design work is a great added benefit for helping designers decide on which fonts to purchase.

Font Squirrel

http://www.fontsquirrel.com/

FONT SQUIRREL OFFERS free commercial fonts, with a slightly concerning disclaimer that it hopes all the fonts you can download for @font-face usage are devoid of any licensing issues. Still, it has an impressive breadth of styles available on the site, with some nice looking faces available for the tip of a hat. These are full typesets, available to designers in all the standard formats. A perfect playground for the amateur or small budget designer, but probably not the best place to go for your type if you have a bluechip client and a reputation as a professional agency to uphold. The site also has a lovely friendly tone, and despite the reservations mentioned earlier, does give an impression of professionalism. It’s obvious these guys are doing this for their love of type rather than any particular desire to undercut or take advantage of either the commercial foundries or, more to the point, the up-and-coming type designers whose labours they distribute.

Fonts.com

http://webfonts.fonts.com/

THE AMAZON OF the type industry, with over 7,000 typefaces available, Fonts. com’s WebFonts has quickly established itself as the place to go for a wide selection of popular fonts for use on the web. Favoured by type legend Erik Spiekermann – which certainly doesn’t do the site any harm whatsoever – Fonts. com’s WebFonts service has a wide variety of licensed fonts available for the professional web designer. Amateurs can probably find a cheaper solution elsewhere, but for those who are serious about good typography, this should prove one of your most popular of bookmarked sites. As well as a selection of web versions of popular print fonts, WebFonts offers everything that print type-fiends have long enjoyed in their creative arsenals. In addition to the variety of faces, many fonts enjoy the benefit of various weights and subsets, and a full range of special characters and ligatures. There is also a range of free fonts available too.

01. Use an Administration Theme

As you develop your site, you’ll be modifying the theme. It’s possible that you may break something as you test it. This is why you should always set the administration theme to something stable, for example the Garland theme. Then, when things go wrong and your navigation links vanish, you’ll always find your way around as the administrator.

02. Hide the login form

By default, the front page of your Drupal site displays a log in form. This is a great feature for some sites, but there are times when having a login doesn’t make sense, for example when you are using Drupal as an online store or a brochure site. You  don’t want a login to appear on any of your pages. You can remove the login form from the current and future nodes on your site. To do so:

1. Logged in as administrator, browse to Administer>Site building>Blocks.

2. Find the User log in block and select <none> to disable it or drag it down into theDisabled section.

3. Click Save blocks. The log in form is now safely removed from all current and future pages.

You, as the administrator, still need to be able to log in. You can always get to the login form by browsing to http://yoursiteurlgoeshere.com/user.

03. Track down theme elements

If you use Firefox, get Firebug. It’s an extension for Firefox and it lets you identify, among other things, where in your CSS code various styles are set. Read more about it at http://getfirebug.com. And then get the Drupal for Firebug extension from here: https://addons.mozilla.org/en-US/firefox/addon/8370.

04. Create clean URLs

Each time you add a new page or story to your site, Drupal creates a URL for it. These URLs containthe string “?q=” and look like this: http://drupalfordummies.com/?q=node/21.

Get rid of the extra characters with the Drupal administration option Clean URLs. With CleanURLs enabled, that same URL will look like this: http://drupalfordummies.com/node/21. To make sure your URLs are a little more user-friendly, follow these steps to turn on the Clean URLs option:

1. As administrator, Choose Administer>Site configuration>Clean URLs.

2. Select Enabled and choose Save configuration. All nodes on your site will be accessible using both the shortened URL and the longer format.

05. Take your site offline when you work on it

You want to download, install, and enable new modules on your Drupal site, or you want to modify your site’s theme. To keep site visitors from encountering errors while you work on the site, why not put your site into maintenance mode? The Site maintenance setting makes your site unavailable to anyone but you. It also displays a message letting visitors know what is going on so they won’t assume that the site is broken. To turn on Site maintenance:

1. As administrator, choose Administer>Site configuration>Site maintenance.

2. Set Site status to Off-line, customise the message if you wish, and click Save configuration.

3. Remember to returnto this page and put your  site back online when you finish your changes.

01. Customise the ‘site offline’ page

Joomla! has a default offline page which can be temporarily turned on while you tinker with your site layout. It can be accessed under Site>Global configuration in the Joomla! admin panel. But the default page is not particularly attractive and you may want to brand it in a different style. To change this go to the root directory and within the Joomla! file structure navigate to /templates/ system/. Copy the file offline.php from the system folder to the /templates/YourTemplate/ directory. You will need to do the same for a file called offline. css, which is located within your /templates/system/css/ folder. Copy offline.css and place it within your /templates/YourTemplate/css/ folder. You can now edit these two files by changing the background colours, layout, logos etc to suit the style of your site. You could also insert Google AdSense code or perhaps a mailto: link for people to contact you while the site is down.

02. Identify and change CSS

FireBug (http://getfirebug.com/),the add-on for Firefox, is a popular tool for web developers and it’s particularly handy for Joomla! users. It can do a lot, but we like it because it can quickly find the exact CSS code that styles any HTML element on a page. We also use it to quickly identify the HTML code for any element on a page and instantly see the effects of changes to HTML or CSS code on the appearance of the page. This is an essential addition to your Firefox browser.

03. Get two columns on front page

The Joomla! front page is different to other pages in so far as to make changes you need to find the Home (Menu>Main menu) and click on the Home link. Under basic parameters you can change details of the front page layout. Leading is the number of full width articles to display, columns is the number of columns on the page, intro is the number of articles with intro text displaying and links is the number of articles that appear as links.

04. Essential resources

If you want to have a play with Joomla! without having to host it yourself, try it for free at JHost. (www.jhost.co.uk). Just about all commercial web hosts offer Joomla! – Heart Internet (www.heartinternet.co.uk) and Go Daddy (www.godaddy.com) are just two providers that offer a ‘one-click’ install of Joomla!. Once you have Joomla! installed, you will need your own template – you can design your own one or grab one of the 3,000 or so free
templates listed at Joomla24 (www.joomla24.com).

05. Remove ‘Welcome to the frontpage’ title

How do you change or remove the ‘welcome to the frontpage’ title? It sounds pretty straightforward right? But confusion has arisen because the setting is hard to find in Joomla!. Go to Menu>Main menu>Home. If you can’t see Home, choose the link with an asterisk next to it. When you are in Home, to the right you will see the Parameters (System) tab. You can now change the title message to whatever you want or you can select ‘no’ next to show
page title and banish it from your homepage completely. Click apply and preview to check it has changed.

01. Add a new header image

Whatever theme is used for a WordPress blog it will come with a default header image. To personalise and customise a blog the header image needs to be changed. The first step is to discover the dimensions of the current header. Right-click on the header image and select Properties to reveal its dimensions. It is easier to replace the image with one of the same size. Also make a note of the image name. Head to Appearance>Editor, select style.css, if not selected, to reveal the CSS code. Locate the header image name, found in the header div tag. Change the header image name to coincide with the new header name. For example, the default Kubrick theme found in a WordPress installation is called kubrickheader.jpg. Change the name to the name of the image, ie newheader01.jpg. Before the new image appears in the blog it will need to be uploaded to the correct location. This will be similar to the following: www/blog/wp-content/themes/default/images.

02. Pretty permalinks

Permalinks are the permanent URL to an individual post and by default WordPress uses a combination of question marks and alphanumerics. The default option is known as Ugly and looks like the following: http://www.mysite.co.uk/blog/?p=463. Permalinks can be customised to become more relevant and offer better SEO. To modify the permalink structure first head to Settings>Permalinks. There are a number of common settings to choose from, simply select and press Save Changes. To create a custom structure, select the Custom Structure radio button. There are a number of tags that can be used including %post_id%, %postname%, %category%, %year%, %monthnum% and %day%.
Changing the structure to just %post-name% gives a permalink a more search-engine friendly URL. However, this is not the most efficient structure as WordPress first checks the URL to see if it’s a page before looking at the post. A more efficient option is to use %post_id%/%postname% as this recognises the URL as a page.

03. Add a new theme

Adding a new theme gives users the option to change the look and feel of a website/blog with just a couple of clicks. WordPress 2.7 users will have to install a theme manually via FTP. The theme folder will need to be uploaded into the wp-content/themes directory to become visible via Appearance>Themes. For users of WordPress 2.8 and above life is a little bit easier; simply start by heading to Appearance>Add New Themes. Use Search to find a theme via the WordPress theme directory. To install a previously downloaded theme select Upload, press Browse, locate the file, select and press Open to add. Now press Install Now; the theme will install, and press Preview to take a look and Activate to change.

04. Extend WordPress with plug-ins

Plug-ins take the standard installation of WordPress to new heights. There are thousands scattered around the web, some very good and some not so good. WordPress has it very own Plugin Directory found at http://wordpress.org/extend/plugins. By default, the directory searches via Relevance, switch the search to Highest Rated or Most Popular to get the better plug-ins. Select a plug-in, press Download and save the file. To add and activate go to Plugins>Add New and select Upload. Hit Browse, locate the downloaded zip file and press Install Now. To finish click Activate Plugin, then press Installed to view.

05. Remote publishing with desktop publishing clients

Desktop blogging clients allow users to publish to their WordPress blog without having to log in to their account. They integrate into a browser making posting just that little bit easier. Before a client can be used an admin user has to enable the remote publishing service in the WordPress installation. Head to Settings>Writing and locate Remote Publishing. Now click the XML-RPC check box and press Save Changes. A good example of a desktop blogging client for Firefox is ScribeFire. This can be downloaded from the website at www.scribefire.com. After installing ScribeFire an icon appears in the bottom right corner of the browser, click this to open the client. ScribeFire will need to be set up before it can interact with WordPress, click Launch Account Wizard to start. Enter the blog URL, select WordPress.com, press Next, select WordPress from the drop-down list, change the API URL to the blog address, ie http://www.mysite.co.uk/blog/xmlrpc.php and press Next. Now add Username and Password, press Next, confirm the blog name and address is correct by pressing Next and Finish. To add a post select the blog under Blogs, add content and press ‘Publish to…’.

1. CODASLIDER 2
http://www.ndoherty.biz/2007/09/introducing-coda-slider/
Coda-Slider 2, authored by Niall Doherty, provides a quick and easy multi-panel slider in the style of Panic Software’s Coda site (found at http://www.panic.com/coda/). This very popular effect allows multiple content areas to occupy one area, making maximum use of space on your pages and adding nice visual movement to designs. The Coda site also spawned a host of tutorials and plug-ins replicating the puff tooltip effect found on its pages.

2. PANEL GALLERY
http://www.catchmyfame.com/catchmyfame-jquery-plugins/
Panel Gallery is a simple plug and play gallery plug-in that effortlessly creates an animated slideshow from a group of images. The transitions are numerous and customisable, and no special image preparation is required making it ideal for clients who are managing the content of their websites after you’ve finished the design and development. As with many jQuery plug-ins installation is as simple as including the .js file and calling a single line of code.

3. MB. MENU
http://pupunzi.com/#mb.components/mb._menu/menu.html
mb.menu is a multi-level drop-down menu system that fixes all the common drop-down issues such as IE’s select box z-index problem. It also looks very clean and works well as a right-click context-sensitive menu. The plug-in supports templates, AJAX data and is fully customisable with options for timing, icons and more. Although dropdown menus have been around for a while, they used to require fully fledged desktop applications to install!

4. JQTOUCH
http://www.jqtouch.com/
jQTouch is a complete environment for developing applications on iPhone, iPod touch and numerous other smartphones. It replicates the native iPhone WebKit animations and GUI to enable web developers to rapidly
create iPhone web applications with the familiar Apple human interface controls. It also adds events for touch and swipes, extending the standard set of jQuery event triggers. jQTouch even supports its own extensions to add even further functionality.

5. JEDITABLE
www.appelsiini.net/projects/jeditable
Jeditable allows webpages to render per-item forms on demand. Developers can assign a class to any element of their choosing, and when the user clicks on that element it becomes editable. Changes made are posted using AJAX to a server side script and updated in real-time. User input can be masked, configured in various formats and limited to different input mechanisms. This is an excellent example of how jQuery has enabled richer user
interfaces to be employed.

6. LAVALAMP
http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/
LavaLamp was originally written for the MooTools library but was ported to jQuery in 2007. An excellent example of how jQuery can be used to improve the user experience transparently, LavaLamp is a simple effect that works as an alternative to the traditional mouseover. A bubble moves across your horizontal navigation bar to highlight the currently hovered item. Simple but very visual.

The latest issue of Web Designer boasts fifty of the best tips and techniques for leading blogging platforms, WordPress, Joomla, Drupal and Squarespace. For a taster of what can be expected here is a selection of exclusive online tips. If you love these we guranatee that the 50 Top blog tips feature in Web Designer 171 will not disappoint. Enjoy.

WordPress

Modify post date
By default, WordPress posts are assigned the current date and time. This means that if a post is time or date sensitive, eg the author forget to post on the correct date, it can look out of place at the top of the post pile. To change the date of a post first select the post by pressing Edit. In the Publish module click Edit next to Published on:. Change the date, click OK and press Update Post.

Schedule a post
Typically, posts are published the same time as they are created. However, if needed a post can be post dated to appear at a certain time in the future. First, create a new and head to the Publish module when complete. Click the Edit link after Publish immediately, add the desired date and time and press OK. Finally, click the Schedule button to finish.

Joomla

Essential free extensions
When you install Joomla you just get just he bare bones of a CMS. The next job is to ‘pimp’ your Joomla ‘ride’ by installing extensions. Here are a few ‘must haves’ which you really must download: JCE Editor (www.joomlacontenteditor.net/) is an essential content editor, JoomlaComment (http://joomlacode.org/gf/project/joomagecomment) puts comment boxes beneath all stories (don’t forget, unlike WordPress, Joomla does not include comment functionality by default), Foobla RSS Creator (http://foobla.com/) handles all your feed needs and JoomlaStats (http://www.joomlastats.org/) handles site traffic stats. These extensions are free and will really enhance your Joomla experience, so what are you waiting for?

Uninstall old extensions
Extensions can be a cause of security holes. Take a look at the vulnerable extensions list at http://docs.joomla.org/Vulnerable_Extensions_List for a rogues gallery of evil extensions. You may wish to patch  or even uninstall potential dodgy extensions. Before you do any of this back-up your database, so why not install Akeeba Backup (www.akeebabackup.com) a free component that allows you to restore your site easily. To properly remove an extension (rather than just disabling it) select Extensions – Install / Uninstall from the menu and then select the type of extension you wish to uninstall. You have the choice of removing any non-essential component, modules, plugin, languages or template.

Squarespace

URL Shortcuts
Squarespace includes URL Shortcuts to perform URL Rewrite, 301 Redirect, and 302 Redirect. This is an incredibly handy feature if you need to move a page in an SEO friendly way, but this feature has additional uses as well. Sites like Google, eBay, and Paypal often request that you point to a /root level ownership verification file within your site. Since all files within Squarespace exist at “/storage”, you’ll need to use the URL Shortcut feature to point “/file” to “/storage/file” within your site. You can access the URL Shortcut feature within the Website Manager under “Structure”.

Optimizing Squarespace sites for Search Engines
While Squarespace sites are setup automatically to use clean URL structure for modern SEO, there are a couple of additional tweaks you can make to ensure site visibility. Make sure that you’ve enabled search engines to index your site content. Go to Website Management>Website Settings>Search/Indexing. Add a “Description” for your site, and check the boxes to allow search engines to index and archive your site. If you’re using a Journal page within your site, open the Journal configuration menu and scroll to “XML-RPC Ping Options”. Click the listed sites to enable pings for new entries automatically.

Code Injection
Squarespace includes Code Injection Points within Website Management>Website Settings>Code Injection that you can use to add new regions of code at various points in the lower level markup. These points allow for the addition of Flash header code, Google ad banners, custom navigation, etc. However, a favourite trick is also to open a <div> tag within a top level injection point like “Pre Canvas” and close the </div> within a lower level injection point like “Post Canvas”. This way, you can add additional wrappers to your site as needed.

Total CSS Control
Deep within the underbelly of Squarespace lies a dark and powerful feature that only the most seasoned of developers dare to explore. Within Style Edit Mode > Advanced you’ll find a small check box for “Complete CSS Override”. This setting removes all Squarespace Core CSS and puts you in control. For advanced users, this setting is sure to be a CSS Edit, lights out, zen in the art, romp through a cavern of mystery – with only the markup to guide you. Novice users should expect to turn back fairly quickly.