How to put a gadget into a post in Blogger

This article describes how to put a gadget into a blog post / page - or at least how to make it look like you have done so.

Gadgets and Blog-posts

Previously, I've explaiend how to add a gadget to your blog. In that post, I said that the only place where you could put a gadget was one of the areas defined by your template - basically the header, footer or sidebar.

For gadgets where you get the HTML or Javascript code from somewhere else, it's easy to add the code to a post - see adding code from external sources to your blog for more information.  But for gadgets from the Add a Gadget list, there is no way to do this.

But it's fairly easy to make it look like you have put a gadget into a post or page, provided you're willing to accept the risks of editing your template.

The way to do this is by putting the gadget below the blog-posts area, putting any further post-content into another HTML-gadget under this, and then setting both of these up to only show on the specific post or page that you want the gadget to be "in".

While this is tedious, I don't expect the restriction of putting gadgets inside posts to be changed anytime soon.   (Go on Blogger ... prove me wrong!)

Follow these steps to put a gadget into a post or page

1)   Make the post or page
Give it a title, and if there is any content that you want to put above the gadget, then add it now.

2)   Publish the post / page.
If you use a Post, remember that it will go out in your RSS feed - and it could look strange for your subscribers to see a half-written post - make sure that what you'd doing is worth any confusion that this may cause.
And if you use a Page, you may need to adjust the Pages gadget to not show it, depending on what how visitors will access the page.

Despite these side-effects you need to publish the post/page now, before the gadget is added, because you need its address later on.   So take note of the URL of your published post.

3) Add the gadget to your blog in the usual way.
Position it immediately underneath the Blog Posts gadget. Find out the gadget-ID, and keep a note of it.

4) If there is any content that you want displayed after the gadget, then

• Use the post-editor (or any other tool) to generate the HTML code for this content 
• Add an HTML/Javascript gadget:  Put the code you made into the Content field, and position the gadget immediately underneath the gadget you added in step 3.
• Note the ID of this gadget, too.

5)   Set up which page/post your gadget is shown on:

Edit your template.

For both of the gadget-IDs that you noted (the one that's going "inside" the post, and the one that contains the rest of the "post"),  change the template so that they are only displayed on the Page or Post that you created in the first step.

The way to do this is very similar to only showing a gadget on your home page, except that instead of

<b:if cond='data:blog.canonicalUrl == data:blog.homepageUrl'> 

the condition to use is

<b:if cond='data:blog.canonicalUrl == "URL-OF-THE-POST-YOU-MADE"'>>

(If you don't have a custom domain,then make sure that the URL-OF-THE-POST-YOU-MAKE ends with .blogspot.com, not with a country-specific form - unless you want the rule to only work in the specific country.)

How well does it work?

I'm still testing to see how well this approach works, and what gadgets it's most suitable for.  Some, eg the Labels and Followers gadget, are likely to expand to fill the space available.   So will Search - though if it doesn't then it might be as easy to just use a custom-search-engine, which will give you the code.   AdSense gadgets will take the space required for the type of gadget you choose, but again it's probably simpler to just get the code from AdSense and put it into your post directly.

One issue I've found is that the gadget is left-aligned, and there is no way to make the "post" text flow around it if it doesn't take the entire post-width.

It may be possible to centre the gadget within the post, by putting this code around in in the template:

<div style='text-align: center;'>
<b:widget id='XXXn' locked='false' title='YOUR-GADGET-TITLE' type='Text'/>
</div>

That said, I haven't tried this yet, and there may be some extra things to think about here.   Let me know if it doesn't work, and I'll try to find a way to solve any problems.

---

Related Articles

Adding a gadget to your blog

Finding the id for a gadget 

Using the post-editor or generate HTML

The Pages gadget:  a menu bar for Bloggers

Showing a gadget on your home-page and no other pages

Advantages and disadvantages of editing your template

Putting AdSense ads into posts