Google Sites Tutorial - Pages and Navigation

I am posting here for your enlightenment a walkthrough tutorial for creating pages and setting up a navigation bar. The video is pretty self-explanatory so I needn't provide much of an introduction.  However, I make reference to this post on designing a background with the 'blank slate' theme.

Please take note of the tips and tricks mentioned in the video, these may things even a Google Sites' users may have overlooked.

Google Sites Tutorial - Horizontal Navigation and Drop Down Boxes

Google Sites released the option for horizontal navigation not too long ago.  This new features greatly enhances the professional look of websites, and I have used it on all my new sites.  Please refer to my post on background layout for easy integration of horizontal navigation into your web design.

Horizontal Navigation is more appealing because we process information best that way.  It makes sense, we read from left to right.  Another benefit from this feature is that it eliminates the need for a sidebar.  While sidebars have their place in web design it is better to implement it on your terms, not because you have to for navigation purposes.

Also, horizontal navigation enables the use of dropdown boxes.  These are links that appear when the category is hovered over.  For instance, in my bakery website example.  I have a page called Baked Goods, the sub-pages of which will be scones, muffins, cupcakes, etc.  Those sub-pages, which you designate in Manage Site > Site Layout > Change Layout > Horizontal Navigation using the left and right arrows, are a nice option for less cluttered navigation.

For examples of horizontal navigation checkout: www.kirksvillehousingauthority.com, or www.pancakecitykirksville.com.

For a walkthrough watch this video below.

For more information Google has posted about this as well: http://googledocs.blogspot.com/2010/10/tips-tricks-making-most-of-your-sidebar.html

Google Sites Tutorials - Creating a Website

I have a youtube channel to which I am posting videos of how to use Google Sites to create your own professional looking free websites.  Here's a little introduction to my video.

First of all, I wanted to start from the beginning of using Google Sites to create a website.  Anyone can build a website with Google Sites with a little know how and some guidance.  I have been making websites for many months now, selling them and giving them away.  I use Google Apps all the time, and what makes Google Sites great is that it's free!  You can reap 100% profit here, well besides buying a lil' domain name for $10 a year. 

So, please join me on this tutorial for creating your site with tips and tricks from a web designer.

Please subscribe to my youtube channel: www.youtube.com/user/kirksvillewebdesign if you want to be notified of my next upload!  Have fun.

New Feature - Customise Your Google Sites SYSTEM Footer Links

Howdy Google Siters,

Google have added a new feature recently which allows you to hide 'Sign In, Recent Changes or the Print Page' links from the automated Google Sites System Footer.

Just log into your site > More Actions > Site Layout > Customise System Footer Links > decide which links to hide (unfortunately you can not remove them all just the ones I mentioned earlier but it's a start!) > click ok > click save changes

Let me know if you have any problems.

For More Articles Visit My Site www.webprincess.co.uk/

Beckystar aka Web Princess

Working With Templates - having a problem with a public Google Sites template and you can't locate that pesky rogue logo?

Change Your Sites Logo - are you having a problem with a public template and you can't locate that pesky rogue logo? 

ok.....

there are possibly a few ways the logo or image could be attached to the top of the page

click on more actions > manage site > colours and fonts > scroll down and click on Site header background image and see if that is where the logo is



if the logo is not there ..... click on more actions > manage site > site layout > change logo and see if it is there ......



And last but not least, the template logo could be part of the background image.



If this is the case you will need to click on view, save the image to your pc and then edit the image by placing your logo over the top for example in a program such as photoshop.

Let me know if this sorts out the situation for you.....

B x

Chat To Clients While They Browse Your Website - It Doesn't Get Much Better Than That!

Wouldn't it be great for potential new clients to be able to contact you immediately if you are online the same time as them?

Get a skype button, they can easily be used on your google site, blog or even in your email signature to let other people contact you easily.

1) Navigate to this website:
http://www.skype.com/intl/en-us/tell-a-friend/get-a-skype-button/

Enter your skype name > Select the button you would like to use. I am using a button which shows my skype status.

Click in the web html code box and copy the code that has been automatically generated.

Now navigate to the page on your website where you would like you skype status button to appear.

Click on edit page > Insert > More gadgets > Featured > Embed gadget > Paste in your html code

Customise the gadget in the following way:

Untick include border around gadget > Untick display title on gadget > Change the width to 150 and the height 60

Finally, click ok, save and enjoy your skype button!!

See mine working here! - http://www.webprincess.co.uk/

Also add your google site to the new google sites directory, or check out some of the sites for inspiration.

Take care and I'll blog again very soon. As always if you have any questions or would like a topic exploring let me know!
B x
http://www.webprincess.co.uk/
Latest project http://www.srkaccounting.co.uk/

Tip: Image Map in Google sites

Look at the site: https://sites.google.com/site/artistds9n/

See what's special about it? It is made using the ‘image map’ technique. You can take your Google site website into greater level using “Image map”.  It's very easy.

Here is the steps:

1. Go to the website, http://www.image-maps.com
2. Upload the image in above website
3. Define your links
4. Copy the HTML code
5. Paste the code in to Google site HTML column 
1.  upload the same image to your picasaweb album/ photobucket.
2.  copy the image url
6. Replace the image name into copied picasaweb album/ photobucket url
7. Save

That’s it! Enjoy.

Subscribe to Site/Page Changes

Google Apps Scripts is already showing some nice progress as programmers edge into Google Sites territory. Enjoy this nice tutorial from the folks at Revevol.

http://sites.google.com/site/subscribetochangesforviewers/

Go, Do This! How To - The 'Mouse Over Image Change'

Hey, Beckystar here again from web princess :)

One of my favourite effects is the 'Mouse Over Image Change', like the example I have made on my home page, my web princess logo is turquoise on white, move your mouse pointer over it, now it's turquoise on black! - click here to see it.

(I apologise now for the lengthy links used in my code example, no doubt yours will be the same too!)

This is so easy to do . . . .

Click Edit page ► Insert ► More gadgets ► Search: Code Wrapper ► Select ► embed the code below, customise it, and remember to change the width and heights to the size of the images you use.

TIP - It's best to use two images roughly the same size!
TIP -To get the url of your images click More Actions ► Manage Site ► Attachments ► Click View on the images you want to use ► Copy the URL from the address bar of the pop up window displaying the image ► Repeat for image 2!

This is the code:

<style type="text/css">
.outer {width:245px; height:60px; background-image:url(http://746368688081817836-a-1802744773732722657-s-sites.googlegroups.com/site/webprincessgbbo00/Website-Designer-In-Boston-Lincolnshire-testimonials/final%20logo.jpg?attachauth=ANoY7crNBp06DjiBmK8kaRXZ5I6v391tSkpDfULC8Q6sThQ9b5J1ie_Hv1sxYFx5VhZQlicPQi1f0LAaTCRNwdRDYhHmtMdZZHk3TA9uNzCbj5cQV3zPLBzUCpj_KRu4NiLkve0MVA7LzGVTn0XQrudpzWzJA-9CymQ9goKDi_itm05TovIqIrCRaxJSyUWsjDEtMMiGI7dF1C8vSjGJNAf1VNeEh_jPaWjanazfTUwl9IkG-kKXd_7RyxfO7atEEP4WY-RY_H-ILYlG9a_bvAzjl69HvN1UiA%3D%3D&attredirects=0)}
.outer {display:block}
.outer img {width:100%; height:100%; border:0}
html>body .outer img {display:block}
.outer a:hover {visibility:visible}
.outer a:hover img {visibility:hidden}
</style>
<div class="outer"><a href="http://webprincess.co.uk/" target="_blank" title="I Love This Mouse Over Effect."><img src="http://746368688081817836-a-1802744773732722657-s-sites.googlegroups.com/site/webprincessgbbo00/home/untitled2.jpg?attachauth=ANoY7cpHPsL-PdUgPwr1WbiJJeqjO00EbbI6jeoBLE4F16-OM_0zVhq49NFfBIzrmwItcDixPMB9PdUj4s2uadJ6epta_hpTnbNU9fRN7y5q1al_RQn7wQovydgwm4yBgWwmSLe7kRJz5Gueokrr2VpPjzRygFTB7K6gTDyejfTCanbWMFxTJJUd2uUmGMT_sdSBEqr8xI0H4fj79w12urIHYc8Oi-MUwg%3D%3D&attredirects=0" width="245" height="60"></a></div>

Then just customise the gadget Display ► OK ► Save!

Let me know what you think, enjoy! Need SOme Help? Visit www.webprincess.co.uk/google-sites-help

Beckystar

PS Massive thanks to mori79 for the code which allowed me to share this amazing effect with you.

Tutorial - Creating A Mobile Site with Google Sites

In a world of mobile devices, there is an easy (you can call it that) way to get your Google site to become a mobile web site. You'll have to re-design your site to fit a mobile device, which means your site will be shaved down a lot, but not so much as to steer customers away.

Ok, I use Photoshop CS5 to design, so we need to start by creating a new image.

Use the size of W400 H480. These sizes are your typical smart phone dimensions. The screen resolution will make your site fit correctly in the screen of the phone.

Now, using your layers, create a folder or set of folders to help organize your layers.

You can start to design a site the way you typically start. For this site, I am using a No header site. This way, your links will be at the very top and it will help viewers see your main pages at first glance.

Your site width for the actually viewing needs to be 320px. The left over will help create the border around your site. The height doesn't matter.

Here is a view of my overall Photoshop design for the site. It's simple and clean, not a lot of graphics, or photo effects. Remember having a site that has a heavy/large image file to load, will turn a customer away in a second.

Now its time for you to create a mobile Google Site. Start off by using the typical setup of your sites. Use the Blank Slate theme, its the best way to go for designing this type of site. When setting up your site layout, make the width 320px. Remember thats the area for your content. Use Horizontal Navigation Bar.

Once you play around with what works best in your colors and styles you should have a nice looking mobile site going on!

Here is a link to the site https://sites.google.com/site/3sgmobile/ you can type it in your mobile phone and see what a great way to get needed info to clients via mobile.

Hope this was a good tutorial for you. Any questions feel free to leave a comment.