February 27, 2009
In this tutorial we're going to identify the code of each element in default Blogger XML templates (new Blogger Beta). The reason we do this:
► because we'd like to rearrange the elements in post footer (divide them, change positions)
► move one (or more) of the elements somewhere else (like: under the Post Title)
REARRANGING ELEMENTS
You can rearrange Post footer elements without tweaking the code:
DASHBOARD ► LAYOUT ► PAGE ELEMENTS click on Edit in BLOG POSTS box:
If this works for you, great!But, lots of times, you CAN rearrange the elements by "dragging" them around, and they will seem to be rearranged, and when you go check your Blog - NOTHING has changed!
You can solve this with:
► with clearing your cache (if you're lucky)
► by manually rearranging the elements in HTML code
If you're ready, let's go visit the HTML of our template....
Before making any changes to your code, I suggest to back up the current Blogger layout. Then go to:
LAYOUT ► EDIT HTML ► click on Expand Widget Templates

Use the [CTRL] + F (or (Edit ► Find from your browser's menu) and search for this line:
<div class='post-footer'>
Post-footer is divided in 3 lines, and each line has some elements in it(Labels, Comment Link, Posted by, Timestamp...) wrapped in a span.<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 comment<b:else/><data:post.numComments/> comments</b:if></a>
</b:if>
</b:if>
</span>
</div>
...in orange, you can see how to identify the Post-footer line (in this example, 1st line)<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 comment<b:else/><data:post.numComments/> comments</b:if></a>
</b:if>
</b:if>
</span>
</div>
...in pink you can see the code of Posted by, in green of Timestamp, and in blue of Comment Link
Notice how each element is wrapped in a span:
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
...in orange, you can see the opening span and closing span<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
Span class identifies the element:
| span class='post-author vcard' ► Posted By |
| span class='post-timestamp' ► Timestamp |
| span class='post-labels' ► Labels |
| span class='post-comment-link' ► Comment link |
| span class='post-backlinks ► Links to this post |
| span class='post-icons' ► Email this post icon and Quickedit icon |
| span class='reaction-buttons' ► Reactions |
| span class='star-ratings' ► Star ratings |
| span class='post-location' ► Post location |
The whole idea of rearranging elements manually is a simple CUT and PASTE:
► CUT the code of the element you'd like to move
► PASTE it in the line you prefer
You need to cut the entire code of the element, meaning the whole Span. For example, if I want to move the Labels in the first line, I'll CUT the code representing Labels:
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
...and PASTE in somewhere under the 1st Post footer line:<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
<div class='post-footer-line post-footer-line-1'>
...apply the same rule for other elements.MOVE THE ELEMENT FROM POST FOOTER UNDER THE POST TITLE
Same way you rearranged the elements in Blogger post footer, you'll move them under your Post Title.
For this example, I've chosen to place my Blog Labels under the Post title.1. First thing is to CUT the code of the element we'd like to move (Labels in my example):
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
..the code you CUT needs to be wrapped in a Span (in orange) (DO NOT cut anything extra!)<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
2. PASTE your code into Notepad (Texedit)
3. Locate this line in your code:
<div class='post-header-line-1'/>
...and place your Labels code UNDER this line.You will notice that the Labels are now in place, but without the default style. The reason this happened is because we've "ripped" the Labels from Post Footer, which has a defined style.
4. We have to create a style for the Labels element, and adjust it to fit. Add the code in orange around the Labels code:
<div class='under-title'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if></span>
</div>
...we've just wrapped the Labels code in a "div" so we can manipulate with it better.<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if></span>
</div>
Next, copy this:
.under-title {
margin: 0 0 10px 0;
color:#000000;
text-transform:uppercase;
letter-spacing:0px;
font-family:arial;
font-size:10px;
}
margin: 0 0 10px 0;
color:#000000;
text-transform:uppercase;
letter-spacing:0px;
font-family:arial;
font-size:10px;
}
And place in anywhere ABOVE this part:
]]></b:skin>
</head>
...in pink, you can adjust the margin of the element</head>
...change the style (color, line-height, font) to whatever suits you..
MOVING MORE ELEMENTS UNDER POST TITLE
Now, this will be much easier. You just have to CUT the the code of the element (the entire span!), and place it in the "div", like so:
<div class='post-header-line-1'/>
<div class='under-title'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if></span>
</div>
..in orange, you can see the main div that defines the style for the whole container, and everything you place there, will automatically "pick up" the style...<div class='under-title'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if></span>
</div>
..now, this will place everything in the same line. Hm. If this is to messy for you, you can place each element in it's own row.
All you have to do is change the word:
span into div
For example, the Labels code will look like this after the change:<div class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if></div>
..in orange, you can see we changed span into div...<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if></div>
That's it. You can stylize, play, add icons, background.....anything.
Smile!

















53 comments:
Yeah! This worked. Thanks so much. You're awesome.
Thanks =)
good..but i still haven't try it yet..waiting for the free time bcoz im a bit bz right now..
Great article, and even greater blog. I just love the look of this blog.
http://savefewbucks.blogspot.com/
How about that,
I don't have 'reactions buttons' =)
Eventhough I've tried the quicker way, did not accept it (quick edit in fonts&colurs) then I search in html codes, I just couldn't find it.
Now, what can I do?
is there good cute code for me =)
cheers!
muna
Muna,
you said you've tried in LAYOUT ► PAGE ELEMENTS ► Edit BLOG POSTS ► check the box beside Reactions? Nothing happened?
Well, this is possible.
You'll have to place the code manually. Just like in the tutorial above: choose where do you want them to appear, and place this code:
<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'><span class='reactions-label'><data:top.reactionsLabel/></span> </td>
<td>
<iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/>
</td>
</tr>
</table>
</b:if>
</span>
Yes Pocket,
was talking about that. And it didn't work.
And this code you gave me to, not work either.
Can not open my page.
sorry =)
Muna,
it really should work....I don't know what else can I do...Sorry.
:[
No problem =)
I tried this code,
and the footer code (to make it 3 column)not worked in my blogger maybe.
Maybe I'm too tired.
Maybe my eyes getting canonzed(is there a word like this- I meant my eyes turned into a machine, taking snapshots of the posts as if they are Canon =))...
I need a good sunday.
Sunday smile pOcket =)
Oh Muna....
Bad luck. I have a proposition though. You can download your template design in LAYOUT ► EDIT HTML, email me the file, write me what do you want to change/remove/add.
Then, I can tell you exactly what to do...Ok?
Enjoy your Sunday, listen to the birds, feel the sun and get some chocolate...
Smile!
After I run the days =)
Here I am,
and I like your proposition pocket,
though I thought of drawing and sending as a photo...
Tomorrow, it will be in your hand.
what was ur mail,
and is it just Pocket?
good night there,
muna
pocket.ideas AT gmail DOT com
...Good night Muna...
hi Pocket,
I did not what did I do,
but now, when they want to post a comment,
it just repeated the page opening again, that's it,
what did I do? what else did I remove?
no place to write down?
=(
muna
Hey Muna....I've just sent you email...
just a perfect timing =)
I cant find this code anywhere in my html coding. Please advise???
nl101,
...it depends what kind of template you're using...You'll have to show me your Blog, so I can tell precisely...
:|
hi Pocket,
First of all, congrats on having this great blog. It already helped me a lot.
But I still have a question;
I would like to insert the same post footer elements (or similar ones) that you use. I mean the facebook, twitter, digg,.. icons on the end of every post. It looks so atractive and that's the purpose!
Can you tell me how to do this or where to find them?
Thank you so much,
Emma
Thanks.
EMMA,
..here's the collection of the icons:
Social icons
...and to implement them in Blogger Blog, well, I'll make a tut soon...
:]
Pocket, you're the best.. Thanks!
Tutorial would be great (and useful)! Can't wait..
:-))
thanks for your tip, i will try in my blog,
good luck for your.
i love you, even though i don't know you.
this allowed me to move the 'posted by' line to under the title for a friend.
thanks!
Hey Pockets - Thank you for your blog and tips. You have some very nice templates (I absolutely love your current blog's theme - Gives me some inspiration to perhaps try my hand at making one myself - if I can solve some of my basic coding issues.
)
While I'm here, I was wondering if you could help me solve a problem...
My eyes are going crossed looking through all the code right now, and contending with a customized XML template code (ported from wordPress) is also frustrating especially when the authors leave things out that should be there. Like for instance: The first part of the code you say to look for in this tutorial, is actually non-existent in my code.
Re: div class='post-footer and so are the other I look for...
(And yes, the widget in the HTML layout is expanded)
Lookinga little harder... I seem to be missing ...let's see...
labels, reactions, ratings and... (Actually I have kind of given up for a bit - I have a headache, but others are probably missing as well)
I "was" missing the edit pencil and its code, but have since fixed that issue with help from elsewhere, (It's posted on my blog) but have been unable to find the solution for all these other elements that make a blog a tab bit "prettier" to look at, even if they are not necessarily needed.
My template is a customized "3 column Summer fruit" template by Jackbook.com
Link: http://www.jackbook.com/blogger-templates-gallery/the-3-columns-versi...
Seems many others are having issues with his/her templates....but anyway...
Can you have a look at my blog and tell me where I should add your code for these missing elements please?
I can email you the code or XML file if you need.
Would really appreciate the help.
Thanks,
"Jots" - aka - Sela
http://jottsntittles.blogspot.com/
Thanks for the guide.
Just need a little help....how about photos? how do we edit or manipulate photos that comes along with each post?
Can we manipulate that too?
thanks again.
Hi Pocket, I´ve been trying to change the position of the "comment lable" in my rounders 2 blogger template but it is not working. Do you know if this requiers a different procedure?
If you check my blog, you´ll see that no matter what I do, "comments" appear above the post and I am trying to place them below them.
http://leerlenguajecorporal.blogspot.com/
Thank you. I love your site!
I think you done a good job to post such a nice article. And the main thing which i like the most that is your blog. It looks really nice and also informative for visitors.
Thanks for this article. It was too useful and i succeeded in trying it in my blog. But i am not able to change fonts to uppercase nor its colour is changing. Please help me out. Also i want to change the colour of post title and place a bottom border under it. Please suggest.
Thank you again.
http://shirdisaibababhajan.blogspot.com/
Hello Pocket,
Awesome site. Thanks for so many wonderful tips! I tried this on a test blog and I get the general ideal; but I can't seem to move all of the elements. My template has a border around the elements and I can't locate it to move it. If you have a moment can you take a look at my blog to see if it's my template that's prohibiting me.
www.touchinglivespositively.com
Thanks.
LOVE your site and your templates. Is there anyway you know of to place the date BESIDE (to the left of) the post title, instead of under it?
thanks a bunch!
Please help!! I am using the minima template, and cannot find this code in my html code, and my widgets are expanded. But my date doesn't show up in my published posts. The time shows, but not the date. Any idea how to fix this?
i've been working on my blog all night, and this blog has been SO MUCH help. best one out there.
my question is: how can I put the comments link and the line that says "posted by *lindsey at 12:00" at the BOTTOM of my posts instead of at the top?
my blog is at http://www.allenavenue.blogspot.com
hello. can i ask, im using free template which downloaded from s\certain website so that actually most of the layout and html are actually given by the template. And i found that the time is not appear under the post after i blog a post. i try to follow ur guide but couldnt solve because cant get those html u give.. can u help me pls by giving me some guide to solve it to place time under every post? Thank you.. http://ngchocolate.blogspot.com/ this is my blog tqtq!!
This tutorial helped me solve a very annoying problem in a very simple way! Thanks! :D
fantastic! was using the tools in blogger but it didn't move. had to do the actual HTML modification. thanks!! http://fildude.blogspot.com
Hi
I´m a beginner in this...
How do I make the elements change back to the footer??
I liked it så much better then :(
please, can you help me?
Thanks so much!
I cannot thank you enough for this tutorial. So clear and easy to follow. You're amazing!
Thanks Kylie!
:]
Hello Pocket ! ^^
I've tried , like i want , the date & comment link was on the top ( uder the post tittle ) and the comment beside the date but what happened , the comment link was under the date . How ah i want to make the comment link 'beside' the date ?
I like this text: "If you check my blog, you´ll see that no matter what I do, "comments" appear above the post and I am trying to place them below them..." is very interesting, thanks for sharing!!
nur,
read the tut carefully. There's an answer....
Smile!
thank you very much
Hey, when I post on my blog this works perfectly, it shows the post author, date and comment link (which is what I want) but when I make a new post it only shows the author and the comment link, please can you fix this for me!
do you know how to hide the label manually, but it still show up on google? i mean when search the label word + my blog name in google it's still show up but it's actually hidden in the blog...
ent,
Honestly, I doubt that Google crawls Blogger Labels. I wouldn't worry about that...
:]
Hi Pocket!
Thanks this is really helpful! I've been working a lot with CSS / HTML lately, whew..I just can't seem to get contented with my new blog..Kindly Check this my blog! :)
Very helpful. Thanks a tonne. I used it in my blog Mindless Mumbai.
this is what i want... you are so clever... hehe... my next great tutor... i want a template like you.. can?
There are also some new buttons,for sharing in facebook etc.
How can I add those? I think I've edited this part of the code a lot and now I can hardly change anything...!
thanx pocket for your help ..
i am using your tips in my first blog :
http://my2-i.blogspot.com
Say it...