Making a Gadget that looks like a Post

This article is about how to make a gadget display (almost) all the things you can put into a post in Blogger.

Summary:

Previously, I've described how a gadget that only appears on the first screen is one option for giving your blog a home page.

One apparent weaknesses with a gadget is that it can only contain one type of "thing" - text, or a picture, or a poll or - or whatever other type of gadget you choose.

But - an HTML/Javascript gadget can contain almost any valid HTML.   And each post is really just made up of HTML.   So:

You can make a gadget look like the body of a post by 

copying the HTML from a post, and pasting it into the gadget!
 

The picture below is an example of what such a gadget looks like.  I've given it a title ("Test Gadget"), though for a real blog, I probably wouldn't bother.   Notice that unlike the Post after it, the gadget doesn't have an author, date, comments or an edit-this link

See further down in the article for detailed instructions, and also for notes about which features from Posts will not show up within your gadget.

Follow these steps to make a gadget look like a Post

1  Create a new post  (you won't be saving this,  you are simply using it to get the HTML)


2  Edit it in the usual way, until it is complete and ready to publish - but don't publish it.

• Write and format text.  
• Put in quotes, make them easily-tweetable.  
• Colour the font, or the background text.   
• Include pictures and videos and links.
• Put in tables, maps, calendars - even AdSense ads or Amazon product links
• Align things side-by-side
• Etc, etc:   basically do anything you would do in a normal post.

3  Click on the Edit HTML tab at the top-right-side of the Post-editor (old interface) or the HTML tab at the top-left-side (new interface)


4  Put your cursor into the editing window, and select ALL the code that is shown.   (Ctrl / A does this in many systems)


5  Copy the HTML


6  Press Save Draft or Save Now   (not Publish Post)


7  Add an HTML gadget to your blog in the usual way


8  Paste the the HTML that you just copied into the Content field.


9  Save the gadget, and drag it to wherever you want it.


10  Once you're happy with the gadget, go back to Posting > Edit Posts, and delete the post that you used to make the gadget.   (This step is options, but it will stop you accidentally publishing the post later on.)


Post features that don't work in Gadgets:

Of course there are some features of Posts that don't work in gadgets:

Don't put anything into the title field - it's not part of the HTML for the post, so won't be displayed.   Instead, type in any title you want, and format it yourself.   (Search engines won't index contents from your welcome gadget very because of this - so make sure that the content is elsewhere in your blog too.)

Jump-breaks don't work:  you can put them into the post, but they have little or no effect on how the gadget looks.

Labels.  Gadgets don't have them, so don't bother.   (except if you want to keep the "construction" page around as a draft:  I often label things like with as "Site Admin" or similar)

Backing up.  Gadgets aren't included when you export a copy of your blog.   Gadget contents may not always be backed up when you export your template (I haven't tested recently) - actually, this is a good reason to keep the "construction post" around as a draft.

---

Related Articles: 



A gadget that only appears on the first screen is one option for giving your blog a home page.

Giving your Blog a Home Page