New Blogger (Beta): customise page elements headings

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

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.)

Tags: Blogger, Blogger Beta, New Blogger, Blogger.com, blog, blogging, blogging tools, page elements, page element, layout, layouts, template, templates, hack, hacks, template hacks, widget, widgets, Javascript, includable, includables, sidebar, reference, guide, howto, howtos, tutorial, introduction, Improbulus, Consuming Experience, A Consuming Experience