Blog Tools

Manually Moving a Page Element in Blogger Layout

Anton C asked for this tutorial after downloading my 3 column minima-based blogger template. If you look at the demo site there is a row of AdSense ads that run across all 3 columns just under the blog header and just above the 3 columns. There’s no box around this section.

The section was created using the Blogger layout editor. I generate my AdSense code from the AdSense website and then copy the javascript code into an HTML page element. You can see the HTML/Javascript Page Element in the picture below. It’s the one that stretches across all three columns right above the ‘Blog Posts’ Page Element.

It’s possible to create the Page Element, either in a sidebar or in the footer, and then drag it into position - but the Blogger interface can be stubborn - making it hard to get the element to span all three columns the way you want it to. There’s a trick to do it manually that isn’t very complicated.

First make the Page Element in a sidebar or in the footer. In this example I created the Page Element in the right sidebar. (The code snippets are from my Minibox blog template which is very close, but may look slightly different than the original Minima template. If you’re using an original Minima template and you can’t figure it out - leave me a comment.)

Now you need to Edit the HTML of the template. You don’t need to Expand Widget Templates.

Download a copy of your Full Template so you can restore your blog if anything goes wrong.

Scroll down until you find:

<!– start right-sidebar-wrapper –>

The number of <b:widget id=…./> tags that are in your template is probably different and their properties might be a little different. That’s okay. The widgets are in order and you should be able to figure out which widget corresponds to each of the sections in your right sidebar. If you didn’t move the Page Element that you created above - it will be at the top of the list. I’m going to pretend to use the widget with id=HTML1.

Select the entire line. I would select:

<b:widget id=’HTML1′ locked=’false’ title=” type=’HTML’/>

Use Ctrl-X (Win) Cmd-X (Mac) to Cut this line. You’re going to want to Paste it later.

Scroll up a bit to find:

<!– start crosscol-wrapper –>

If your crosscol section is empty it might look like this:

<!– start crosscol-wrapper –>
<div id=’crosscol-wrapper’ style=’crosscol’>
<b:section class=’crosscol’ id=’crosscol’ showaddelement=’no’ />
</div>
<!– end crosscol-wrapper –>

Change it to look like this:

<!– start crosscol-wrapper –>
<div id=’crosscol-wrapper’ style=’crosscol’>
<b:section class=’crosscol’ id=’crosscol’ showaddelement=’no’>
</b:section>
</div>
<!– end crosscol-wrapper –>

And then Paste the line of code that you cut in the middle. So my finished code looks like:

<!– start crosscol-wrapper –>
<div id=’crosscol-wrapper’ style=’crosscol’>
<b:section class=’crosscol’ id=’crosscol’ showaddelement=’no’>
<b:widget id=’HTML1′ locked=’false’ title=” type=’HTML’/>
</b:section>
</div>
<!– end crosscol-wrapper –>

If you already have widgets in your crosscol section and you want to add another one - just add the new widget above or below the existing widget tag - depending on the order you want your widgets to appear in.

Well, I think it’s clear to me, but that doesn’t mean it’s going to be clear to you. If you’re totally confused than post a question.

One more note. After you get one cross-column widget in place, the blogger layout editor is much better at letting you add more of them. It’s getting the first one in place that can leave you hairless.

© 2008 2600 Degrees.