Wednesday, 2 May 2007

New Blogger (Beta): customise page elements headings






This post is a non-coders' guide on how to make a New Blogger widget / page element heading (e.g. link roll in your sidebar) into:
  • a simple link, or
  • the clickable heading for an expand/collapse view (a.ka. show / hide) of the widget's contents (e.g. an archive list or list of labels, etc).
The now feature complete fancy New Blogger, formerly known as Blogger Beta (and probably now just Blogger!) has a Layouts view with drag 'n drop functionality, intended to make life easier for non-programmers. But the available page elements are relatively limited at present, in both range and sophistication. I'm sure that'll change in time.

For now, to do a little more with your blog you'll have to delve into the dreaded HTML of your template. If you want to twiddle with your page element headings without having to get really down and dirty with the code, the tutorial below, while specifically on the two points I've mentioned, may be of some help.

The steps involved are:
  • getting into the HTML of your template
  • finding the right widget and its heading, and
  • tweaking it!

How to go into Edit HTML view

From your Dashboard click Layouts, then the Edit HTML tab.

Under the Edit Template heading, tick Expand Widget Templates on the right.

The Edit Template box contains the HTML of your template. You'll need to click in the box, then scroll down to find the bits to tweak.

First, make sure you backup your template! (In the Backup/Restore Template section click Download Full Template to download it to your computer. If you need to restore it, you can click the Browse button in the following line, find the file you downloaded, then click Upload to get it back.)

How to find your widget and its heading

How do you find the widget you want to fiddle with? My widget code reference post shows what the code for the standard widget types looks like, so you can scan the template looking for similar code e.g. for the archive widget, the labels widget etc. Now the start of an Archive widget will look something like this:
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
and the start of a Labels widget, like this:
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
As you can see, you can tell from a widget's id and the type, which are helpfully descriptive, what kind of widget it is. In some cases you can have more than one widget of the same type (typically HTML or Javascript widgets), so you do need to be careful that you've found the right one that you want to tweak. The ids will however be unique - e.g. HTML1 for the first HTML widget you add, HTML2 for the second one etc. So you could search for e.g. id='BlogArchive to find your archive widget. The widget code in the template should also hopefully be in the same order as the widgets are shown on your blog, for the page elements widgets at least.

Now, look down a few lines from the start of the widget and you'll see the placeholder for that page element's heading or title, i.e. the title tag for that widget. It'll look something like this:
<data:title/>

In fact it'll probably have h2 tags around it, so it'll most likely look like this:
<h2><data:title/></h2>

This is the line to tweak if you want to make the page element heading into a link, or click it to expand/collapse the contents of the widget (e.g. a list of links or a feedroll, etc).

Turning a heading into a link

Now that you've found the right heading, to make the heading title into a clickable link just change it like this, adding in the bits I've put in bold red (but changing http://YOURLINKHERE to the link you want to add, of course):
<h2><a href='http://YOURLINKHERE'><data:title/></a></h2>
Click the Save template button, and you're there.

Making a page element show / hide

The principles from my earlier post apply here. The only difference is that in New Blogger templates they use single quotes (') for the "outer" bits and double quotes (") for the "inner" bits so make sure to reverse them.

To recap:

1. In the template, in the head section e.g. in the line before the </head> tag, copy and paste the following Javascript code, which is what does the collapse/expand or show/hide thang:
<style type='text/css'>
.texthidden {display:inline}
.shown {display:block}
</style>

<script type='text/javascript'>
document.write('<style>.texthidden {display:none} </style>');
</script>

<script type='text/Javascript'>
function expandcollapse (postid) {
whichpost = document.getElementById(postid);
if (whichpost.className=='shown') {
whichpost.className='texthidden';
}
else {
whichpost.className='shown';
}
}
</script>
2. Now, decide which bit you want to make into the "switch" for the show/hide, i.e.which bit should be clicked to show and then again to hide the content which you want to expand to show and collapse to hide. You have to tweak this bit as I'll explain below.

In this case, it's the page element heading you want to make clickable, of course. To do that, you need to change:
<h2><data:title/></h2>
by adding the bits I've shown in bold red below, to turn it into:
<h2><a href='javascript:void(0);' onclick='expandcollapse("UNIQUENAME1")'>[+/-] <data:title/></a></h2>
- you need to change UNIQUENAME1 to something, well, unique, a unique series of letters or numbers you can make up which isn't already used for any other id (as in, id='UNIQUENAME1') elsewhere in the same template. And that includes widgets that are already in the template, which you aren't going to edit, so be careful - you could search to check the UNIQUENAME you want to use isn't already in use. For example it's probably safe to use e.g. MYARCHIVE1, obviously it helps if you pick a descriptive name. (I've also added [+/-] with a space after that, just to indicate to people that the heading is a "toggle", but you don't need to; you could use something else, or nothing at all, if you prefer.)

3. Next, decide which bit gets shown/hidden. You need to add markers to mark out the start and end of the section that gets expanded and collapsed when you toggle the "switch" i.e. highlight which bit is to be the lightbulb, to carry on with the switch analogy. In this case, the section is the whole of the widget contents (like the all items in a text list, or the list of posts in a feed widget).

You need to insert something like <div class='texthidden' id='UNIQUENAME1'> to mark the start of the section to be shown or hidden. Here, the easiest way to mark the start is to do this - in the line just after:
<div class='widget-content'>
just insert the line:
<div class='texthidden' id='UNIQUENAME1'>
- make sure you change 'UNIQUENAME1' to exactly match what you used for the ID in the heading e.g. if you used MYARCHIVE1 for the archive heading bit, then you should use id='MYARCHIVE1' in this bit. This is vital. If the two aren't identical (and make sure to match upper or lowercase exactly as in the onclick bit too), it won't work. And yes, you are allowed to use id='UNIQUENAME1' here, just check that id doesn't appear elsewhere in your template.

Next, you need to mark the end of the section with a </div> tag. It needs to be inserted in the right place. It can be confusing as there are often other </div> bits already there. Don't touch 'em. Just add this extra one - divs nest like Russian dolls, so if need be you can check the beginnings and ends and make sure that you put the new one in the right place.

As a rule of thumb, in this case generally you should just be able to insert the </div> as a new line just before the line in the same widget that reads:
<b:include name='quickedit'/>

You need to make sure you don't scroll down too far and that you're inserting both div lines in the correct widget - it should only be a few lines down from the title tag. If you've gone past the first <b:include name='quickedit'/> or </b:includable> after the title tag for that page element, then you've gone too far.

And finally, of course, don't forget to save your template.

Examples

For a working example of a page element heading you can click to toggle show and hide to your heart's content, take a look at the archive widget towards the bottom of the sidebar in this test blog.

And here's an actual example of the code to make a label list expand and collapse. I'd first insert the Javascript code mentioned above in the head section of my template, then amend this widget code (note the bits I've put in bold, highlighted to make it easier for you to see where and what the changes are):
<b:widget id='Label1' locked='false' title='YOURTITLE' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
by adding the bits shown in bold red below:
<b:widget id='Label1' locked='false' title='YOURTITLE' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><a href='javascript:void(0);' onclick='expandcollapse("MYLABELS1")'>[+/-] <data:title/></a></h2>
</b:if>
<div class='widget-content'>
<div class='texthidden' id='MYLABELS1'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</div>
<b:include name='quickedit'/>

</div>
</b:includable>
</b:widget>
And that's it: add the special script in the head section, make one bit your "switch" the way I've described, insert a special div to mark the start and end of the bit to be expanded or collapsed, and you're there.

You can have more than one show / hide widget on the same webpage, but you have to make sure each one has a unique ID.

By the way I didn't post about it at the time but I updated my widget code reference post a few days ago to include the code for the standard (i.e. non-optional) Blogger widgets too, just for completeness and ease of reference: archive, profile and page header.

(Hope this answers your questions, S and Maeven.)

10 comments:

Gdog said...

I've been wanting to try this on my blog for the longest time--thanks for making it so simple and easy! :)

Improbulus said...

Thanks for your comment Gdog, great to know this has been of help!

Hilda said...

this is probably a stupid question, but if you want the name of the category to be multiple words like "blog archive", is something required in between those words like an underscore in the code?

Improbulus said...

Hilda, that's not a stupid question at all.

My post is aimed at how to make a title into a link or "switch", and I refer to <data:title> as that is the code that Blogger uses to represent what you entered into the Title box for the widget.

When you add a page element (see my widget code reference post) it'll normally let you fill in what you want as the title for that page element (e.g. see the News Bar pic in that code reference post which has Title against the top box).

And what you put in the Title box, like "blog archive", need not have an underscore - you can just type it as normal.

caricature said...

This is such an excellent post! Best post on this topic on the web! I searched high and low for how to make expandable blogrolls ~ and only you explained it so thoroughly and nicely ~ well done and thanks!

Improbulus said...

Caricature, thanks for your kind comment, I don't get much feedback (as opposed to questions) so it's good to know that my post has helped someone - glad you found it useful (and of course feel free to link to it if you would like to!)

Curt Purcell said...

Wow--for years now, I've hated my sidebar, because I never could figure out how to include everything I wanted without it looking sloppy. This does the trick! And you explain it so well. Thank you, thank you, thank you!!!

Lauren Wellborn said...

Thanks for the fantastic tutorial!

Here's an extra challenge:
I'm working on a blog that someone else will be updating in the future, so I'm using the new Layout templates in blogger. There are some issues running javascript in the main html of those blogs, it's like the code isn't even running. You can add javascript to widgets but it doesn't seem to work, even there.

Any ideas?
Thanks!
Lauren

Amy said...

After ages swimming through complicated codes on other sites, this one gave me such little trouble to implement that it was scary!

One question, when I click on a label in my expand/collapse list, the menu goes back to being hidden. Is there a way that I can control this: ie, if they've expanded the menu it stays expanded, and if collapsed it stays that way even if they move on to a different entry in the blog?

If you want to have a look, the blog is at http://reviewink.blogspot.com

Thanks

pingmouse said...

hi there, im cracking my head trying your method. im really a dummy in html. I tried many times but failed. I want to show/hide my blogroll listing. Hope you can help me. Thank you.