Friday, 4 March 2005

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






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: , , , , , , , ,

22 comments:

sateentuoksu said...

Thanks for info.

Improbulus said...

You're welcome sateentuoksu, thanks for the comment.

Tom Maddox said...

This is a very interesting dissection of the Blogger template, and I thank you for it. I'd like to ask ou what I think is a very simple question -- at least it's one that makes me feel like a dope because I can't answer it -- which is, how does one insert a graphic into the blog title? Thanks.

Improbulus said...

Tom, glad you find it useful.

To insert a graphic, look for the bit in your template (I'm assuming you're on Blogger) where it says:

<div id="kheader">
<div id="headerimg">
<h1><a href="<$BlogURL$>" title="<$BlogTitle$>"><$BlogTitle$></a></h1>
<div class="description"><$BlogDescription$></div>
</div>

Where it says "<$BlogTitle$>" in that block, just replace that with the usual tag for a graphic e.g.
<img src="http://LinkToYourGraphic" title="Your blog title">

That should do it.

Imp.

Dr.Coghlan said...

Where does one go to find out if autodiscovery is working correctly?

TIA,

James

Improbulus said...

James, if you post in the Feedburner forums some kind soul will usually check for you - that's what I did anyway!

Sideshow said...

I am only missing the Quick Edit icon.

I attempted to fix the problem via the suggestions in this thread which is what you have on your site.

Nothing. In fact, it made the email icon disappear.

Then I created a test blog and didn't touch the default Blogger template. Then I added several test posts, still no Quick Edit Icon. This indicates that it is not a coding issue.

So, do you if this might be caused by a browser setting?

Improbulus said...

Just a thought, Sideshow. 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". (I've edited my post to make that clear). Does that help at all?

Sideshow said...

Yes, I have it set properly in the dashboard. I also neglected to include in my previous post that it works at my work computer (using FF or IE) but NOT on my laptop (using FF or IE). So, it isn't a Blogger setting issue or a code issue. Whether or not the icon shows seems to be related to which computer I use.

Ozyman said...

I'm in the same boat as Sideshow (above), and have done exactly as he has. No "Quick Edit" on my own machine. Any suggestions for us? Thanks.

Joe Weaks said...

You aren't seeing the quick edit icon on that other machine cause you're not logged into Blogger on that machine.

Improbulus said...

Joe, thanks for the comments. I suspect Sideshow and Adrian wouldn't have neglected such a basic step as logging in to Blogger on the other machine, but it's worth spelling things out just in case...

Pieces said...

Thank you so much for such a clearly explained solution to my missing envelope and pencil. Your instructions were easy to follow--even for a novice like me!

Improbulus said...

Thanks for your comment Pieces, glad to have been of help.

Mark said...

fwiw, I am in the same boat as a couple other people above. That is, I can't seem to make the pencil icon appear, no matter how I tweak my template, or adjust my Blogger settings. I must be missing something... either that, or my computer is insane.

anyway, thanks for the detailed info. I appreciate it.

Improbulus said...

Mark, have you put in the code in your template EXACLTY in the format I gave above? I know that works for me. I notice that in your blog where my code says "pyra" yours says "g" instead. I've no idea if that makes a difference but have you tried it exactly as I've suggested, wtih changes only for your blog ID number? And Show Quick Editing on your Blog is definitely set to Yes?

Kernunrex said...

I'm having the same "lost quick edit icon" issue. A google search turned up this post.

Strange thing is, my desktop is perfectly fine. It's only my laptop that is missing the Quick Edit icon. Both IE and Firefox refuse to display it (Yes, I'm properly logged in). I even compared the source code of a blog post loaded on my (working) desktop and one loaded on my (broken) laptop - both were identical.

This just suddenly happened a couple days ago. I tried re-installing Firefox, clearing my cookies and re-logging in, clearing my cache... I'm at a loss. Weird that both Firefox and IE would be affected, though...

Improbulus said...

Kernunrex, I'm stumped. You've tried everything I would have. Sorry I can't suggest anything further especially as the source is the same and you're properly logged in. If you manage to fix it let me know! Good luck.

Rasheed said...

I was in the same boat as the bloggers above, but managed to get back my quickedit pencil after a few days of trying. Symptoms were: quickedit pencil visible at work but not at my laptop.
It turned out that Norton antivirus (I am using NAV 2006) was the culprit, so the following steps restored my pencil!

1- Open Norton Antivirus
2- Goto Norton Internet Security Tab
3- Click "Privacy Control" then click "configure"
4- Click "Advanced", then "Add site"
5- insert"www2.blogger.com" as a new site and change its default setting as in step 6 below
6- in the box "Information about visited sites" unclick "use defaulf stting" and change it to "permit"
7- Save your new settings. That was All. Try it and may be it will work for you too

Improbulus said...

Thanks Editor for your helpful suggestion. I don't have Norton internet software myself so had no idea why that was happening.

(I'll delete your same comment on the widgets post though, as it's not relevant to that post.)

Jon said...

Rasheed: Thanks for the Norton Antivirus tip. I had to turn Privacy Control off completely--it wouldn't save my entry for Blogger's site--and delete my blogger cookie, for good measure. Works now.

Kavs said...

Nice info..
Still can i get the atom feed to my imported blog.I cant see the atom post button in my url,and when i am trying to post with dektop blogger,it says the error atom rss feed not available.