Useful Google Sites html/css/javascript code snippets for copy-paste and some other bugs and their workarounds.

1. To clear floating and add new line.

<div style="text-align:left;clear:both"><font size="3"><br></font></div>

2. Do not leave the "Text Box" gadget title blank.

Because if you leave it blank, Sites will render the URLs incorrectly with your custom domain. For example, if I create a text box without a title and put a link to one of my site's page inside it, such a link would look like this:

The link will be rendered just as above if you visit through native Sites address. But if you have a custom domain, the link will look like this:

which still works (!) but really should be,

This is probably a bug. The workaround I found was, if you do not want a title for your text box gadget, leave a single 'space' character there instead of blank. Remember that you have to do this every time you edit the text gadget because editing the it will revert the title to blank again !

3. To create direct and path independent links to images stored in Google Drive. 

In Google Drive, files and folders are stored and retrieved with the help of unique IDs or kind of check-sums. For example, this is a link to a public folder stored in my Drive,

The blue part is the ID of that folder. This is a clever technique that gives you the freedom to create a single link to share that folder, after which any further changes to the name or path of that folder will not affect the link you created; it won't break the link. This is also applicable to files including images. For example, following is a link to share an image stored in Drive,

Look how the ID is sent along with the query. This kind of link of an image will take you the Drive's own image browser where you can download, print and see other information. But this woudn't be what you looking for. What if you need an ID based link to directly view an image stored in Drive, in your browser like what for example, does ? There's a way to do that.

First copy the shareable link for your image. A sample would look like this,

Now replace the "open" command with "uc" and append the resulting link with "&export=view". The result will look like this,

This will directly open the image without the image viewer. Another way of doing this is by simply replacing the open command by uc,

This is a permanent link (called webContentLink) to that image and you can change the path (folder) and name of the file whenever you want and still use the same link. This a really helpful feature to avoid dead or broken links. Now what if you want to directly "download" the image instead of viewing it ? There's also a way to do that. Just change the export parameter to 'download', like this,

This will force your browser to download the image instead of showing it.

Though useful, keep in mind that these are not "direct links" to images but commands or queries given to Drive to fetch those files. So there're some problems associated with this techniques. The severe one is that Google Crawlers won't index such images even if you've shared them to the public. This is due to the limitation in Google Drive's robot.txt file. I haven't been able to find a solution to this problem yet. I wonder why Google put a feature to add images to Sites from Drive when their own crawlers won't index them !

4. To override the default link color.

Links on your Google Site will have a default link color, hover color and visited link color that are defined by your theme. But what if you want to have a link color other than offered by your theme ? Selecting the link text and changing the color using the color picker won't work ! The workaround to do this is to select and change the color of a part of your link text, like this:

5. Adding custom gadgets to Google Sites from Drive

Google will soon, 31st August 2016 exactly, disable the feature for using Drive to host HTML and other files and retrieving them using direct path links. Users could host simple websites and other XML gadgets on Drive with this feature. I was using Drive to host my custom gadget XML files. But I can no more use it like that. So I found a workaround today. Instead using direct links to XML files to insert custom gadgets in your Sites pages, you can use the id based link. For example, I've using the following link to insert my social icons on my about page.

But now I can use,

"0B_FuMGaqECLuTW1MSUpSRWFxTjg" is the ID of my custom XML gadget file.

6. To add simple border to image.

style="border: 1px solid #ddd;border-radius: 4px;padding: 5px;"


Date published : 8:28 PM 23-05-2016, Monday
Last updated : 11:38 PM 12-08-2016, Friday