May 03, 2008

Author below Post Title

After reading SBoentaran first posting in TAP (The Aroengbinang Project) and the comments posted, I saw the need to move author's name from the bottom of the article to the top of the post, right below the post title, as this will provide clearer information to the readers.

It took me sometime to find the information I need from the web, and as usual I relied on Google's search engine to get it done. Google can help us better when we use the right keywords to get what we want. The selection as well as the sequence of the words may produce a big difference in the search results.

Based on that information, here are the steps I took to move author's name to row below The Post Title:
  1. Go to Dashboard, Layout.

  2. Click "Edit" link on bottom right of "Blog Posts" column

  3. On the "Arrange Items", press and drag "Posted by ...." and place it on the row below "Post Title".
    Move also the time stamp "at ....AM".

  4. Scroll down and click "Save Changes"


Next you will work on the html template

  1. Click "Edit HTML"

  2. Click "Download Full Template", save it in your computer to back up the template so you can upload it if things went wrong. It's a must step to do.

  3. Check mark "Expand Widget Templates"

  4. Press Alt-e-f, type 'post-author' and hit enter to find below tags:

    <span class='post-author'>
    <b:if cond='data:top.showAuthor'>
    <data:top.authorLabel/>
    <data:post.author/>
    </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' title='permanent link'>
    <data:post.timestamp/></a>
    </b:if>
    </b:if>
    </span>

    Highlight all of them, and cut.

  5. Press Ctrl-F, type 'post-title', and find below tags:
    <h3 class='post-title'>
    <b:if cond='data:post.link'>
    <a expr:href='data:post.link'>
    <data:post.title/></a>
    <b:else/>
    <b:if cond='data:post.url'>
    <a expr:href='data:post.url'>
    <data:post.title/></a>
    <b:else/>
    <data:post.title/>
    </b:if>
    </b:if>
    </h3>

    Right after </h3>, paste the tags from step no. 4.

  6. I put another tags to change font size, type and color. Here's my complete tags as a reference, I put them right after the </h3>:

    <font color='#777777'><i><b> <span class='post-author'>
    <b:if cond='data:top.showAuthor'>
    <data:top.authorLabel/>
    <data:post.author/>
    </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' title='permanent link'>
    <data:post.timestamp/></a>
    </b:if>
    </b:if>
    </span></b></i></font>
    </b:if>
    <p/>

    The <p/> is needed to give a space between the author's name and the first row of the articles.

  7. Click "Preview", and if it works well, click "Save Templates" and you are done.

Label: Blog, Blogging
Bagikan ke: WhatsApp, Email. Print!.

aroengbinang, seorang penyusur jalan.
Traktir BA secangkir kopi? Scan via 'Bayar' GoPay.