Blogger's <$BlogMetaData$> template tag deconstructed (a.k.a. where the *&^% have my envelope and pencil icons gone??!)

Deutsch | Español | Français | Italiano | Português | 日本語 | 한국어 | 简体中文

So that I don't forget this info and can find it again - this post describes some undocumented aspects of the special Blogger-specific <$BlogMetaData$> template tag found between the "head" tags of Blogger.com's standard templates (which affects, amongst other things, the display on your blog pages of the envelope email icon and the pencil “quick edit” icon inserted by the <$BlogItemControl$> template tag - so if those icons are missing from your blog, read on). With many thanks to the good folk who contributed to the discussion whose findings are summarised below (particularly that generous gorgeous genius redryder52, and also invadesoda and G-BOAC) - the original thread is here. I nicked the "deconstructed" for the title from G-BOAC!

The short version

If you tinker with the Blogger standard template and decide to delete the <$BlogMetaData$> tag (or you use your own template entirely), be careful - that deletion can get your blog into doodoo that's, while not exactly the deepest you could be in, annoying enough to make you irritably scrape at your shoe a lot.

So if you delete the <$BlogMetaData$> tag from your Blogger template, to avoid problems be sure to manually insert in your template, at the location where that the tag was, the code below (changing (1) YourBlogName to your own blog's name (e.g. in my case “A Consuming Experience”), (2) YourBlogIDNumber to your blog’s ID, and (3) “atom.xml” to your feed's full URL if it's not a Blogger feed).

The tag <$BlogMetaData$> is found between the "head" tags, usually just after the "title” tags, and it's shorthand for all this [UPDATE: if you're on New Blogger it will be different - check your own blog's view source and copy/paste/edit that instead; notably it will read "www2.blogger.com" instead of "www.blogger.com" but the rest of the code below seems to work]:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="generator" content="Blogger" />
<link rel="alternate" type="application/atom+xml" title="YourBlogName" href="atom.xml" />
<link rel="service.post" type="application/atom+xml" title="blogname " href="http://www.blogger.com/atom/YourBlogIDNumber" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.blogger.com/rsd.pyra?blogID=YourBlogIDNumber" />
<style type="text/css">
@import url("http://www.blogger.com/css/blog_controls.css");
@import url("http://www.blogger.com/dyn-css/authorization.css?blogID=YourBlogIDNumber");
</style>

<!-- --><style type="text/css">@import url(http://www.blogger.com/css/navbar/main.css);
@import url(http://www.blogger.com/css/navbar/1.css);
</style>

YourBlogIDNumber is an 8-figure number, e.g. 12345678. To find out your unique blogID number, go to your blog, view the source, and note down (copy/paste is best) the number against the "blogID=" it will be near the top of the page. Or go to your Blogger Dashboard, click on the blog name, and check out the URL in the address bar - it will end with that blog's ID number (helpfully labelled "blogID=").

Warning: do not be tempted to just insert the “@import url” lines between where you may have existing style tags – for me, anyway, it didn’t work. Those lines seem to prefer being together by themselves (awwwww isn't that sweet), between their own dedicated style tags.

Note: the last few lines in the code above (referring to "navbar") don’t seem to be necessary – at least, my own blog has had no problems without them. But they are also inserted by the <$BlogMetaData$> tag, so I figure it does no harm to put them back into the template.

Also note: sometimes those envelope and pencil icons just vanish even when you've not done anything to your <$BlogMetaData$> tag. In that case, try doing a blank post (which you can delete later) and republishing the whole blog. (Republishing was the solution originally suggested to me by Blogger support - which didn't help as the missing @import url lines were still missing. But in other cases, it might.) Another note: you won't see the pencil icon in the first place if you didn't turn it on in your Settings. Dashboard, Settings, on the Basic tab set "Show Quick Editing on your Blog" to "Yes".

Now here’s the long version – everything you never wanted to know about the <$BlogMetaData$> tag…

What does the <$BlogMetaData$> tag do anyway?

As you can see, that tag is just shorthand for the above code (as of today, anyway - Blogger.com could tweak exactly what code is included, anytime they like!). That code gets automatically inserted into the HTML of your blog page wherever that tag appears in your template.

Why would you want to delete the <$BlogMetaData$> tag?

One common reason is if you decide to "burn" the standard Atom feed which comes with Blogger, in order to get yourself a Feedburner or other RSS newsfeed.

To enable autodiscovery of your Feedburner (or other non-Blogger) feed, you need to replace one of the standard tags imported by the <$BlogMetaData$> tag (the one with “rel="alternate"”) with one that references your non-Blogger feed. But the only way to do that is to delete the <$BlogMetaData$> tag and then insert the appropriate autodiscovery tag manually.

The problem with deleting the <$BlogMetaData$> tag is that all the other (non-autodiscovery) tags imported by the <$BlogMetaData$> tag will no longer automatically be inserted into your blog pages' HTML. And Blogger needs those tags to be there for your blog to work properly. So you have to put them back manually into your template too.

What do those odd tags do anyway? What could go wrong without them?

I've no clue about what some of them do. But after deleting their <$BlogMetaData$> tag many people have had one or more of these problems:

• the envelope email icon, which people can click to email a post to a friend, disappears (the link is still there, just invisible)
  
• the pencil “quick edit” icon (if you've turned on quick edit in your settings), ditto
• any custom text or icon for creating a new post from your blog pages (see Conditional “new post” links in the Blogger help) appears for the world and her husband to see, whereas it should only be visible to you while you're logged on to Blogger (at least it won't let anyone post to your blog without logging in, but it's annoying that what shouldn't be visible, is).

What's the fix?

Make sure that in your template, in the same location as the old <$BlogMetaData$> tag, you include not only the autodiscovery tag, but also the other tags shown above.

It's the two "@import url" lines which control the display (or not) of those coy icons. If those lines are missing from your template, that's when the trouble starts. You can fiddle with the <$BlogItemControl$> tag all you like (the tag which is supposed to make the envelope icon and pencil icon appear in your tag wherever the tag is located), but it won’t do any good at all without those @import lines between your “head” tags. Sadly, Blogger’s help pages don’t tell you that (not even on their page on changing the email icon; indeed, their help page on template tags generally only mentions the tag in the quick edit context, not emailing posts).

The <$BlogItemControl$> template tag - an aside:

As pointed out by invadesoda, the <$BlogItemControl$> tag in fact inserts the following into your blog pages -

<span class="item-control admin-XXXXXXXX pid-XXXXXX"><a href="http://www.blogger.com/email-post.g?blogID=XXXXXX&postID=<$BlogItemNumber$>">EmailThis!</a></span>

amp;gt;">EmailThis!</a></span>To figure out what XXXXXXXX and YYYYYY are for your own blog, read this. [UPDATE: you no longer seeem to need admin-XXXXXXXX, at least if you're on New Blogger, and in fact including admin-XXXXXXXX seems to stop it working. You should change "admin-XXXXXXXX" to "blog-admin" (no numbers necessary) if you're on New Blogger, or else it won't work.]

For completists only

As of today (again, unless Blogger.com decide to change it all), this is what's in the CSS stylesheet referenced in the first @import line:

/*
-----------------------------------------------
Quick Edit and Delete Comment Icons
----------------------------------------------- */

/* Hide it now, show it later with dynamically-generated CSS */
.item-control {
display:none;
}

.item-control a, .item-action a {
text-decoration:none !important;
}

.quick-edit-icon {
background: url("/img/icon18_edit_allbkg.gif") no-repeat left;

/* makes an 18x18 box */
padding:9px;

margin:0 0 0 .5em;
}

.delete-comment-icon {
background: url("/img/icon_delete13.gif") no-repeat left;

/* makes a 14x14 box */
padding:7px;
}

.email-post-icon {
background: url("/img/icon18_email.gif") no-repeat left;

/* makes an 18x18 box */
padding:9px;

margin:0 0 0 .5em;
}

I assume it's the item-control stuff is what shows/hides the Edit icon and New post link

And if you really really really want to know what’s in the navbar stylesheets referenced above, here’s the contents of main.css:

/*
Adjusts existing templates to accomodate bar.
--------------------------------------------*/
html body
{
margin:0;
padding-top:0;
padding-left:0;
padding-right:0;
}

body #header {margin-top:50px;}
#wrap2 {margin-top:30px;}
#wrapper {padding-top:30px !important;}
#wrap {padding-top:30px;}
#main-top {margin-top:10px;}

html>body #wrap {padding-top:30;}
html>body #wrap2 {margin-top:0px;}
#wrap4 {margin-top:60px !important;}

#space-for-ie {
display:none;
_border:0 !important;
_display:block;
}

#wrap #wrap2 #wrap3
{
margin-top:-30px;
}

body #wrap #wrap2 #header
{
margin-top:0;
}

/* for Tekka */
#rightcontent {margin-top:30px !important;}
#leftcontent {_margin-top:30px !important;}

#Main #Title {margin-top:30px !important;}

/*
The bar.
--------------------------------------------*/

#b-navbar
{
width:100%;
padding-bottom:5px;
border-bottom:1px solid #024;
min-height:24px;
font:x-small "Trebuchet MS",Verdana,Arial,Sans-serif !important;
color:#47a;
font-size/* */:/**/small !important;
font-size: /**/small !important;
margin-bottom:10px;
position:absolute !important;
top:0;
left:0;
z-index:1;
display:block !important;
}

#b-navbar a img
{
border:none;
display:inline !important;
}

#b-navbar #b-logo
{
position:absolute !important;
top:3px;
left:5px;
width:80px;
height:24px;
border-width:0;
}

#b-logo img
{
display:inline !important;
}

#b-search
{
background:#147 url("../../img/navbar/corner.gif") no-repeat left bottom;
margin:0 0 0 100px;
padding:4px 7px;
line-height:1em;
font-size:85%;
text-align:left;
}

#b-more
{
float:right;
padding-top:2px;
display:block !important;
}

#b-more a
{
margin-left:4px;
}

#b-query
{
margin-right:.25em;
width:12em;
}

/* hide from IE5-Mac \*/
#b-query
{
font-size:x-small !important;
}
/* end hide */

#b-searchbtn
{
position:relative;
top:-1px;
margin-right:.5em;
vertical-align:middle;
}

#b-this
{
display:block !important;
}

#b-this a
{
margin-right:.5em;
white-space:nowrap;
text-decoration:none;
line-height:1em;
}

#b-this a:hover
{
color:#fff;
text-decoration:underline;
}

And 1.css:
#b-navbar
{
background:#036;
border-bottom:1px solid #024;
color:#47a;
}

#b-search
{
background:#147 url("../img/navbar/1/corner.gif") no-repeat left bottom;
}

#b-query
{
border:1px solid #47a;
}

#b-this a
{
color:#9cf;
}

#b-this a:hover
{
color:#fff;
}

Technorati Tags: Blogger, Blogger.com, Blogger Template Tags, Template Tags, Tags, Fix, Fixes Improbulus, A Consuming Experience, Consuming Experience