Editing blog post layout

Hi, I'm currently creating a blog based on the "Graffiti Art" template (http://bloggertricks.com/2008/07/another-3d-blogger-template-graffiti.html). I've tweaked quite a bit of it myself to customize it towards what I need, but I'm completely stuck on how to edit the layout of each blog post. This is what my blog currently looks like: http://djteridactyl.blogspot.com/, but this is how I would like each post to appear:

.

So I'm hoping to add the full calendar date to the top, bring the "Posted By" below the entry, rename "Posted In" to "Labels:", and remove the small calendar and hard disk icons.

I tried editing the Post layout under page elements, but I think there is something in the code that is overriding anything I do in there (?). And I've tried playing around with the HTML code myself, but I don't seem to be getting anywhere on this one.

Any suggestions??

~Teri

NOTE:
Make sure you backup your current template before doing edits.

I always use another blog for testing templates, Blogger will let you create all the blogs you want, so create a test template, get your template right, then upload the new template to the actual blog you really want it on, when everything is good.

************************************************************************************************************





First the easy part

To change the calendar date (example: Saturday, May 16, 2009), go to Settings --> Formatting --> Date Header Format & change to the correct date format, that you want in the dropdown menu.

NOTE:
(The template is overiding the settings, I'll show you how to fix that in the next few post, just make sure your settings are like the image below, for now)

Blogger Date Format.JPG (47.02 KiB) Viewed 749 times

To remove the find & remove the CSS code below:

Old CSS Code:

  Code:

.date {
   float:left;
   padding-left:20px;
   color:#3f6067;
   background: url(http://i39.tinypic.com/rstxn8.jpg) left center no-repeat;
   }

*************************************************************************************************

Old Body Code:

  Code:

<small class='date'>

Also remove the next:

  Code:

</small>

To remove the find & remove the CSS code below:


Old CSS Code

  Code:

.category-icon {
    background: url(http://i40.tinypic.com/2uzrvc5.jpg) left center no-repeat;
    width:14px;
    height:14px;
    padding:5px 5px 5px 20px;
    }

*************************************************************************************************
Old Body Code:
Also remove the Span code:

  Code:

<span class='category-icon'>

And a few lines down from the above code remove the next:

  Code:

</span>

*************************************************************************************************

Also just before the:

  Code:

<span class='category-icon'>

You will find the text Posted in, change that text to Labels:

To move the Author name to the bottom of the Blog Post, paste this code:

  Code:

<div>        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/> <data:post.author/>
        </b:if>  <small class='comment'><span class='comment-icon'>         <b:if cond='data:blog.pageType != &quot;item&quot;'>

          <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'><data:top.commentLabel/> (1)<b:else/><data:top.commentLabelPlural/> (<data:post.numComments/>)</b:if></a>
          </b:if>
        </b:if></span></small></div>

Paste the above code, one line above this code:

  Code:

<div class='postmetadata'>

*****************************************************************************************************

NOTE:
Also make sure you backup your current template before doing edits.

I always use another blog for testing templates, Blogger will let you create all the blogs you want, so create a test template, get your template right, then upload the new template to the actual blog you really want it on, when everything is good.

Upload the new template, & double check it's in the correct location. If you did the steps above it should be good.

To add the Date above the Title, paste this code:

  Code:

<data:post.dateHeader/>

Paste the above code one line above this code:

  Code:

<b:if cond='data:post.title'>

********************************************************************************************

NOTE:
The template code was over riding the control panel Date/Time settings with the code below (I removed this code below, from the steps from any of my last post)

  Code:

<data:post.timestamp/>

You can see all the changes I've made to this template here http://switchertestblog2.blogspot.com/ This is one of my Blogs I use for testing, I'll leave it public for a few days so you can have a look If you want?

Here is the tweaked template xml file

graffitiart UPDATED.zip

(7.1 KiB) Downloaded 47 times

Thanks so much for all your help! Everything worked out

I definitely couldn't have figured any of that on my own.

Thanks again!

swedrock,

I'm glad everything worked out for you.

Welcome to the blogger forums.

Switcher

Great work Switcher...

100+ Rep points added to your account