Showing posts with label Gadgets. Show all posts
Showing posts with label Gadgets. Show all posts

Keep a backup copy of complicated gadget settings

This article explains why it's a good idea to keep a backup copy of settings for your gadget, in particular for HTML/Javascript gadgets that have complicated, hard-to-regenerate, code.



Blogger's backup tools let you take copies of:
  • your post-contents and (separately) 
  • your template. 

Some 3rd party backup tools (eg HTTRack) let you make backup copies of how your blog looks - including the consequences of displaying your gadgets.

But as far as i know, there is no way that you can back up the settings (ie parameters or configuration) that are stored inside the widgets on your blog.

This can be a problem if you accidentally remove a gadget, or if you have an HTML gadget and get the code wrong in it: Blogger is quite unforgiving sometimes, and the HTML/Javascript gadget editor simply removes any code that it doesn't understand.

In some cases, this isn't not a big problem  eg if you show a picture as a gadget, then it's generally easy enough to work out characteristics that you would need to enter to re-create the gadget.

But if you lose a complex gadget (eg your own customised set of subscription buttons), then re-creating it could be difficult and time-consuming.

So - for HTML/Javascript gadgets which have code which you think is complex, I recommend keeping a backup copy of the gadget code somewhere.

Personally I usually put it in a post in a private blog where I draft posts and keep the documentation for each blog - but you could use a range of other places, eg a text file on your computer or on Google Drive, or even any email message to yourself.


How to back up code from HTML/Javascript gadgets in a private blog post

Every time you edit a gadget that you want to keep a backup for, then just before you click Save:
  • Press Ctrl/a to select all the text in the gadget window.
  • Press ctrl/C to copy it
  • Switch to use Blogger in a different window
  • Open up the documentation blog, and navigate to the post where you keep the code for that gadget
  • Edit that post - or make a new one if you don't have one already.
  • Make sure that you're in Compose view, and the Options > Compose Mode setting is on "show HTML literally" (ie not on "interpret HTML")
  • Paste the gadget code into the post, and publish it.

Although this sounds tedious, it's really very quick to do. And losing complicated gadget code, even once, is a good incentive to remember to back it up every time.

Hint: Put a comment to remind yourself where to back this gadget at the top and/or bottom of the gadget code. This reduces the chance that you will forget. A comment is done in HTML like this:
<!-- DON'T FORGET TO BACK UP THIS GADGET CODE  -->


How to back up complicated non-code gadgets

If your gadget has complicated settings which aren't code, one option is to take a screen-shot and save it to your photo collection, or even just a text-file or documentation-blog post where you keep notes about what the settings are.

You won't be able to automatically restore your gadget settings from this, but it should be a good reminder of what you need to do (provided you can find the picture when you need it).

Unfortunately there's no easy way to pack up linked-list or blogroll gadgets at the moment. However making a copy of your site using HTTracker will show you the list, and what the items link to.

Or you could build your linked list code manually (using the same trick that that I recommend for getting picture code) and put it into a HTML/Javascript gadget, which is based up as described above. The code for a handcrafted linked-list gadget looks like this:
<ul>
<li>PUT THE TEXT HERE FOR YOUR FIRST LINK TEXT.</li>
<li>PUT THE TEXT HERE FOR YOUR SECOND LINK TEXT.</li>
<li>PUT THE TEXT HERE FOR YOUR THIRD LINK TEXT.</li>
<li>etc</li>
</ul>



Related Articles:

How to add a picture as a gadget in Blogger

Using the post-editor to build HTML code for gadgets

Prepare your blog-posts in private, using a documentation blog

Putting a picture on your blog as a Gadget

You can put a picture anywhere in your Blogger blog that you can insert a gadget - and you can make it link to a post in your blog or to any other website.

The Image gadget

Dry dock in Claddagh Basin
A very simple way to put a picture into your blog is to use an Image gadget (previously called a Picture gadget).

This is a tool that Blogger provides to make is easy to add a picture that shows up on all screen and is linked to somewhere.

Often gadgets (sometimes called widgets or page elements) are put on the sidebar - but in many blogger templates they can go in other places too (header, footer, etc).

Follow these steps to add a picture gadget in Blogger

1  Make sure you know where the original picture is and that you have copyright permission to use it.

2  Copy the location (URL or file system full path-name) of the picture - and remember whether it's on your computer, or on the internet.
(This article tells you how to find the URL of a picture that's already stored in Google Album Archive. )

3  In Blogger, follow the usual Add a Gadget procedure, and choose the Image gadget from the list of options (you may have to scroll down to find it in the list).

4  In the Configure-Image box, enter the options you want for your picture.   These include:
  • The title for the Gadget,
  • The caption for the picture
    (the small words that go underneath it, usually explaining it, or where it came from),
  • What should happen when a reader clicks the picture - put this into the Link field
  • Where to find the picture
    (ie the file-location that you copied in step 2)
  • Whether to re-size (ie shrink) the picture to fix the space in the sidebar in your current template.

5 Press Save.

6  If necessary, drag-and-drop the new gadget to the place where you want the picture to go, and press Save.


What your visitors see

People who visit your blog in a web-browser, will see the picture, in the place where you put the gadget.  However pictures are not supported gadgets for dynamic view templates, so it won't be see if you use one of these.

Also, people who see your blog through an RSS reader, or by receiving emailed updates don't see any gadgets, so they will not see the picture.  

If you entered a value for Link, your visitor's browser leaves your blog and goes to the Link location:  with the Picture gadget, then there is no way to make this open a new window.   If you want to do so, then use an HTML gadget instead, get the code for the picture, and put target = "_blank"   into it:, so the code looks something like: 
<a href="YOUR LINK" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target = "_blank"><img border="0" src="YOUR PICTURE LOCATION" /></a>



Related Articles

Options for putting pictures into your blog

Copyright, blogs and bloggers

Picasa and Blogger - an overview

Getting the HTML to add a picture to your blog

Finding a picture's URL in Google Album Archive

Finding the URL of a picture stored in Flickr

Showing a PowerPoint presentation in your blog

Why RSS / Subscribe to Posts is important for bloggers

Following a blog by email

New Google+ badges and follow buttons can be used in Blogger

This Quick-tip introduces the new Google+ plugins that Google released in late June 2013


quick-tips logo
Recently, Google+ Developers blog announced a vastly improved set of Google+ plugins for use with websites.

Most (all?) of them are not yet available as Blogger gadgets, so you have to get the code from the Google+ resources site, and add it to your blog like you would add any 3rd party code.

The new options include a more "industry-standard" follow on Google+ button, and new badges for Pages, Communities and Hangouts, as seen here. (I've previously explained why you might like to have a G+ community alongside your blog.)

They are configurable (size, dark/light, style, etc) - but  you need to work out how to apply the configuration settings to the code.   That said, I've added them to this site without any configuration (see the top of the sidebar), and the default options appear to work well. And it's not actually as hard as it looks: in general you just follow the pattern of:

  • Changing   https://plus.google.com/{pageId}     to link to the "thing" (Page, Community, Profile) that you are displaying in the badge.
  • Using the "<div class="g-page" data-href="https://plus.google.com/{pageId}"></div>" form of the code, ie the one that's completely inside a "div" statement.
  • Adding extra information to it using "data-"   for example,   "<div class="g-page" data-href="https://plus.google.com/{pageId}" data-layout="landscape" data-width="200">


There is one interesting sentence in the announcement:
"Existing badges will stick around for up to 90 days, giving you time to configure the new version for your website. After 90 days, we'll automatically upgrade any Google+ badges to the new design."
I wonder how that will relate to the Google + gadgets that are available in Blogger's Add-a-gadget function now - maybe they will be automatically be changed too.   (In 90 days ... yeah, right ...)