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.

Tip - The Small Things

Even BIG professional web designers miss some basic things in Google site powered professional  website.
Some of them are:

1. Favicon:   Making a favicon and upload in Google sites is very simple. That gives you the personalised look.  That’s not very tough, right?... Go to favicon.cc and just make one favicon and upload it in Google site's attachments. (Ha ha, I know, most of them are aware of it, but even they are not doing it.).
2. Site header/ Background/ Wrapper images:   Some plain Background images are always not necessary too BIG, like this.

 

           You can make a header like this, instead of above.

    

  and make it repeat horizontally.   So we can reduce the size, and web page will load faster.

3. Logo:   It’s always nice to put a logo in separately uploaded as logo ( Site layout> Height: Use theme default (change logo)). So that, It’ll clickable to homepage. You can make a .png image with background as transparent.

 
See the sample site.

New Google Sites Updates - More Button & Pop-up

More Button
Just a simple change of user experience. The More Button, as we all called it, is now a more commonly seen gear or cog icon. Therefore it gives the impression of Global Settings.

Pop-up Disclaimer
You've probably seen this initial website load-up shadow boxes. Well now Google Sites has one. Right now it is text only and is optional.

There you go, just two quick updates that I've seen come through. Is this a weekly thing now? Thanks Google Sites team.

Google Sites Survey Available!

Google is now accepting surveys for Google Sites. If you log in to http://sites.google.com, in bold red font in the upper right of the browser it says "New - Take our Survey." This survey is specifically for Google Sites and contains some wonderful response fields for feedback related to most aspects of using Google Sites, including appearance.

Take the Survey - Grade Google Sites

Google Sites designers, please take your time to submit this quick survey - it even contains paragraph fields for what you like and don't like about Google Sites (I wrote a lot, believe me). I suggested Javascript support, mouse-over image support, Slider/Slide Deck support, Column Width customization, and more.

What will you write? What do you love/hate about Google Sites. Comments encouraged! Thanks folks.

Google Sites Server Issues

I don't want this to sound like a really serious issue, but this is the best way I could word it. So, what's the scoop?

The Issue
Google Sites have been acting unreliable since 3/21 when images weren't loading from Google's servers. This affects everything from slideshows to the picture of your cat on your family website. Images are randomly showing up and disappearing with every refresh. It kind of a here and there bug, but it's annoying.

The Solution
Hope that this is some sort of internal update and will go away soon. =)

Conclusion
Just want to keep all you Google Sites fanboys updated.  Here's the Google Sites Help Forum thread: http://productforums.google.com/forum/#!category-topic/sites/E39Hd9YbkDI

Survey Available Now

Google Sites is taking user feedback via a survey right now. If you are logged into a Google Site you will see it in the tool bar next to edit page, create page, and more. I've seen it both on standard Google accounts and Google Apps for Business accounts.

Take your time and let the Google Docs, that is the Sites team as well, let them know your thoughts.

Thanks. It's always great to see Google Sites steered in a good direction from user input.

New Template and Navigation Tip

 Apple has released their Ipad 2, it is a beautiful tablet with power and intuitive design. So I spent a lot of time of Apple's website. Beautifully simple, that's how I would describe it. Something attainable with Google Sites. Many GS websites are simple too, but not so polished.

The Template
I made this website from scratch. Nothing, including the nice tablet graphic is stolen, merely modeled. And I do not want to get in trouble so it is a software company draft.

Please visit and enjoy. Google Sites, beautifully clean design.

The "tablet" graphic is custom made with inkscape. I plan on making a video tutorial for this as it is easy enough for beginners and looks quite nice. I have already used it on my homepage for Kirksville Web Design.

I tried my best to create a sophisticated, not cheesy-looking, glassy navigation bar graphic.  The graphic is part of the "wrapper background," nothing special. One thing I am particular sad about is the inability to insert an image and set that image to the background. So, graphics with text, as featured in the software company template, are really just graphics - you can't highlight and copy it (which would be nice for SEO). This is on my Google Sites wish list, which is way past-due.

Space Out Your Horizontal Navigation Links
I most often use links, as featured in this template, for my style of the horizontal navigation. Links, as opposed to boxes and tabs, do no have a pre-determined image - just text - so you can easily create the look yourself.

Anyways, the tip, create a url ink while in Manage Site>Site Layout>Horizontal Navigation. Instead of giving text in the field for a title, insert any amount of spaces. Now, it will not allow you to create the "link" without inserting a email or web address, so put something in there (it doesn't matter what it is). Now you have spaced out navigation (I put five spaces in between each of the links of this template).  

upload user profile image and save to data base -PHP MYSQLI

   If you are working on customized CMS or Social networking website then user profile image may be or may not be a head ache I have developed my own where we can upload and rename the image username.jpg/png/gif with size restriction to 200KB.

First design a table where database name is Sanjay.
Create a table userImage  fileds
user - username will be stored
url - url of img stored
lastUpload- when the upload was done.
create a folder upload/   where  all images will stored.

<?php
$user=$_SESSION['user'];
$db=new mysqli('localhost','root','','Sanjay');
if($db->connect_errno){
echo $db->connect_error;}
$pull="select * from userImage  where user='$user'";

$allowedExts = array("jpg", "jpeg", "gif", "png","JPG");
$extension = @end(explode(".", $_FILES["file"]["name"]));
if(isset($_POST['pupload'])){
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/JPG")
|| ($_FILES["file"]["type"] == "image/png")
|| ($_FILES["file"]["type"] == "image/pjpeg"))
&& ($_FILES["file"]["size"] < 200000)
&& in_array($extension, $allowedExts))
  {
  if ($_FILES["file"]["error"] > 0)
    {
    echo "Return Code: " . $_FILES["file"]["error"] . "<br>";
    }
  else
    {
    echo '<div class="plus">';
    echo "Uploaded Successully";
    echo '</div>';
     
    echo"<br/><b><u>Image Details</u></b><br/>";
   
    echo "Name: " . $_FILES["file"]["name"] . "<br/>";
    echo "Type: " . $_FILES["file"]["type"] . "<br/>";
    echo "Size: " . ceil(($_FILES["file"]["size"] / 1024)) . " KB";

    if (file_exists("upload/" . $_FILES["file"]["name"]))
      {
      unlink("upload/" . $_FILES["file"]["name"]);
      }
    else
      {
          $pic=$_FILES["file"]["name"];
            $conv=explode(".",$pic);
            $ext=$conv['1'];

      move_uploaded_file($_FILES["file"]["tmp_name"],
      "upload/". $user.".".$ext);
      echo "Stored in as: " . "upload/" . $user.".".$ext;
      $url=$user.".".$ext;
   
      $query="update userImage set url='$url', lastUpload=now() where user='$user'";
      if($upl=$db->query($query)){
          echo "<br/>Saved to Database successfully";
              }
      }
    }
  }
else
  }
  echo "File Size Limit Crossed 200 KB Use Picture Size less than 200 KB";

  }
}
?>

<form action="" method="post" enctype="multipart/form-data">   
  <?php
    $res=$db->query($pull);
    $pics=$res->fetch_assoc();
    echo '<div class="imgLow">';
    echo "<img src='upload/$pics[url]' alt='profile picture' width='80' height='64'   class='doubleborder'/></div>";
   
    ?>
   
    <input type="file" name="file" />
    <input type="submit" name="pupload" class="button" value="Upload"/>
  
</form>

Hope You will understand this simple script.

if you want complete script with foundation framework, profile mangement, password change, user profile picture management then download my open -source project Adminplus at githhub
download Zip file extract and save it to htdocs folder , if using Linux set permission . open phpmyadmin and create a database sanjay_plus now import  sql . Now we can login using username sanjay password openplus.in.
 

USSD base balance check on Linux using datacard

+Sanjay Prasad 

If you are Indian Data card user, having data card of micromax, beetal,huwai,zte we have always option to check your balance on windows OS as they provide software for that but what about Linux. I accept the pleasure of using that software is quite awesome but still we can check our data card balance on linux using a free app called Prepaid Manager.

First Install Prepaid Manager. Installing will not let you to use these app. You have also install a configuration file in which all settings are there called serviceproviders.xml

First Install libxml2-utils
sudo apt-get install libxml2-utils
if faile use command su instead of sudo.

open file manager in admin mode
 sudo nautilus
or sudo namo .....

whatever your file manager is
and search for serviceproviders.xml open in text editor
look for your service provider.
where to search this file
/user/share/mobile-broadband-provider-info/


First Look for your operator like Aircel, Vodafone, Relaince .....

Example of Aircel
and add before <apn></apn> tag

<balance-check>
<ussd>*125#</ussd>
</balance-check>

<balance-top-up>
     <ussd replacement="CODE">*130*CODE#</ussd>
 </balance-top-up>

Save the file and use Prepaid manager software.

Google Sites Updates - New Organization, SEO & Social Features

Intro
We love to see Google Sites updates come along, don't we? I am happy to report of three updates to Google Sites:

1. File Cabinet Sorting & Collapse Folders Ability
2. Canonical Web Addresses
3. Embed a Google Plus post

These have each rolled out individually over the past month or two (sorry for not updating you sooner!) Let's discuss each update, how it impacts Google Sites and why you should care.

File Cabinet Sorting & Collapse Folders Ability
This feature is the newest and can be useful for those of you still using the File Cabinet page template, as opposed to embedding multiple Google Drive Folders. Essentially here's what you do:

Go to More
Page Settings

There you will see:

• Collapse folders by default
• Show column headers

This is only available on File Cabinet type pages. To setup as a File Cabinet (webpage template is the default). Do this:

• More
• Change Page Template
• Choose File Cabinet

This is a nice feature, but I question as to the degree to which it was needed. Don't get me wrong, it's nice. If you have a lot of files and want to organize them better, this is an excellent option for you, take advantage of it.

Canonical Web Address

I don't expect everyone to know what this means, so I will spell it out. The canonical web address is the preferred web address for Google or other search engines to rank. Think about it, your Google Site really has two locations:

• http://sites.google.com/a/example.com/website-title
• www.example.com

In most cases, you want www.example.com to be the better ranking location and not the long Google Sites URL. Also, this tells search engines not to demerit your website for having duplicate information on the web. This is assigned, by default, to the www.example.com as canonical if you add it as a Web Address. This is beneficial for having Google Sites be on equal SEO playing field with other Web Building platforms.

Embed Google Plus Post

It makes sense that Google Sites should have a relationship for using Google Plus. First was the commenting system in Sites (still in need of public comments!) and then came the embed a Google Plus post ability. Basically, grab the link to your post and plug it into Google's homegrown gadget. Voila. A novel widget.

Conclusion

It's nice that the Google Sites team is pumping out steady updates to the Platform. It seems that public-facing and private-facing are both favorably updated. I can't wait to see what's next.

Working with the HTML Box

Now that the Google Sites HTML box has been out for a while for those without Google Apps, I've had some time to fool around with it.

Experiments
The HTML box is not the answer to free-reign scripting. You can use more HTML, CSS, Javascript, and jQuery, but you cannot use all of it.


I couldn't embed the Google + gadget (strange errors I couldn't fix kept flagging my code to my unpublishable). I couldn't use my usual slideshow code, which uses jQuery. So I started assuming that nothing would work with the HTML that I really wanted.


Free Google Sites Slideshow Code
The only thing I've effectively used it for is the sample slideshow from: http://support.google.com/sites/bin/answer.py?hl=en&answer=2500646 . I nicely customized this slideshow and placed it on this page with its code for all to use. Just copy + paste and insert the image URLs.
https://sites.google.com/site/htmlboxtesting/

Click here to go to the HTML box testing page. With a customize slideshow.

Conclusion
I'm going to stick with making custom gadgets, because even though it's more arduous, I can make the plugins I want to make. I did notice that the HTML box isn't an iframe like gadgets, so I think that creates room for interesting use of embedding code on your pages. I've had quite an interest in Google Analytics with Google Sites for event tracking.

Google Sites and Google Apps Scripts

Released on 3/15/2011

More integration between Google Sites and Google Apps Scripts is now available with a new Apps Scripts gadget. This allows more complex workflows and custom applications to be built into your Google Site.

Release track:
Rapid*

Editions included:
Google Apps, Google Apps for Business, Government and Education

Languages included:
All languages supported by Google Sites

How to access what's new:
- When editing a site, select ‘Insert’ then ‘Apps Script gadget’ to add an existing script to the page.

For more information:
http://googleenterprise.blogspot.com/2011/03/build-applications-in-sites-using-apps.html

*Rapid Release track: Domains with ‘Enable scheduled releases’ checkbox disabled in the administrator control panel. Learn more

Favorite Free Font - INTRO by Font Fabric

Bold is Beautiful

Intro by Font Fabric. Available Here.

Google Sites HTML Box - CSS / Javascript / HTML

Instructions Coming Soon...

The newest Google Sites update was a big one because they released the HTML box. Think of this as a haven module for more HTML concepts, CSS, and Javascript, which includes jQuery.

We're working on some samples to share soon. Stay tuned. For now, check out this support page from the Google Sites team - http://support.google.com/sites/bin/answer.py?hl=en&answer=2500646

Google Sites New Feature - Mass Upload

Add as many files as you want in one easy step. Free hosting on Google Sites just got better.

You can add multiple files at once in the File Cabinet page, in the Add Files at the bottom of pages, in the Attachments.

Remember these rules.

• Click image number 1, hold shift, click image number 20. You've selected images one through twenty.
• Click image number 1, hold control, click any individual images to add to your selection.

Conclusion
Google Sites is becoming a popular hub for files and I think we complained enough about having to upload files one-by-one so painstakingly.

Magic Tables! Get Lined Up And Look Pro!

Happy Saturday Everyone!

Well I have lots of memories of help needed on how to line up text and pictures and sometimes clicking on an image and selecting "wrap on" is not good enough when designing your google site.

Perhaps you want to add some thumb nails of pictures with a description underneath, or,  maybe you want to create a four column look like Perfect Square Solutions' site which will brilliantly advertise your services.

To create the effect choose a one column area within your pages.

Now, click on Insert > Table - then select the size you require, in this instance select two rows and four columns like this:

Click in each cell columns and add text and pictures. I would recommend your pictures should be around the same size, your pictures should also be centralised. How you have them is up to you, have a play!

Text looks good lined up to the left as http://www.perfectquaresolutions.com/ have done and so has my example which is looking something like this now, is yours?

Albeit a little tricky keep clicking around the bottom right hand corner of each cell at the top of your table until you select each cell, then stretch it by dragging it a little to the right to fill out the space, do this for each cell until the whole of the one column width is filled out and all the cells are equal in size.

Make sure you are 100% happy with the look of your table and position of your pictures and text. Get out your magic wand as we are going to erase those harsh black borders of the table!

With a sprinkle of fairy dust on your computer > Click on HTML in your page editor.

Delete ONLY the <TABLE> line of the table html. Remember your text may be a little different to mine but it will always begin with <TABLE

Click update, then watch as you admire those ugly lines disappear ans your site tranforms to the fairest of them all!

Now remember to save your page, tweek if required then sit back and admire your handy work. I promise you the next time you do this you will be a pro magician!

Here are a two more examples where those abracadabra tables have been used:



This Uses Two Tables, Each Consisting Of Two Rows And Three Columns



The Original Inspiration - Perfect Square Solutions Four Column Style Home Page


I look forward to hearing your comments.

Need some help? Visit  www.webprincess.co.uk/google-sites-help

Speak soon!

New! Add Google Drive Folder to Google Sites

Intro
Hey everybody! +Kyle Horst here with the information on this brand new feature!

This is a feature we've all been wanting and it has been described on the Google Sites Help forum many times - a link between Google Drive and Google Sites. Google Sites, while it has those file cabinet pages, isn't the best document management system available, especially next to the incredible set of features in Google Drive.

There was a nice solution developed by Google Apps Script guru +Romain Vialard , which worked perfectly using the List type page to show documents. It synced and everything, but it wasn't too convenient to setup. It's a bit ironic that not until we've developed some solution ourselves that the Google Sites team swoops in and mimics the same idea.

Anyways, let's learn about the new feature - Add Google Drive Folder to Google Sites.



How to Add a Google Drive Folder to Google Sites
To find the feature go to:

1. Edit Page Mode
2. Insert from Toolbar
3. Folder (it's in the second column in the middle area)
4. Select one Folder from your Google Drive Account
5. Change gadget dimensions and save to the page.

What does it do?

• You can embed one Google Drive folder
• The Folder has the same permissions as granted in Google Drive, so make sure and check your Share settings at the folder level
• Visitors who don't have permission to the folder will be prompted to Request Access.
• You can add descriptions to your documents from Google Drive so that people have a better idea of what a document is about. Select document and click More > Details > Add your Description.

What doesn't it have?

• Capability to embed multiple folders or create a directory of folders to sort through
• No search function

What are the benefits?

This feature is a big win for intranets. Companies don't want to have to choose between hosting their documents on Google Sites File Cabinets or Google Drive Folders. I think we'll see a lot more usage of Google Drive folders now, especially because of the permissions options.

Just think, you could embed several folders on one page and setup your permissions for each folder so that Team Members only see what applies to them.

Embedded in the Page

The Selection Screen

Close up. It shows other folders, which will open in Drive when clicked.

Thanks to +Phil Ridout for picking up on this completely unannounced feature! I totally missed it in all the other Insert gadgets.

Gadgets for Galleries

Trying to get a good gallery in Google Sites isn't the best. But to all those who would like something cool, do a gadget search for COOLIRIS. This gadget works hand in hand with your Picasa Web Album. Adding your user name (gmail name) and the name of your album (http://picasaweb.google.com/(user)/(album)) makes it real simple and easy to add.

For some help on adding gadgets, be sure to check out the post Useful Gadgets to learn how to add them to your site. For an example of the Cooliris Gallery you can view my site 3sgraphics.com to see how they work.

It's really neat and can add a nice flare to your portfolio or just a nice gallery! With the option to expand your gallery full screen, allow you to keep your dimensions small but still allow others to view the full image with no lost of DPI.

Hope this is a good useful tips Be sure to post some of your work on our site to show case your proud work!