Edit The Read More And User ID In Blogger

Editing the read more and user ID appearance in posts is a small change but can help make your blog look more like how you want it. Changing the user ID in particular makes your name stand out, which is always good!

1. First, in Blogger go to the Design View and click on Edit HTML. As always, download the full template to keep a backup before you make any changes.
To edit the Read More you need to find the jump link section in the HTML code. In order to do this you need to click on Expand Widget Templates and find the following code:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url +
 &quot;#more&quot;' expr:title='data:post.title'>
<data:post.jumpText/></a></div>
</b:if>

The section of this that needs to be controlled is data:post.jumpText. This is the part that draws in the text from the built in editor when you edit the jump text in the Page Elements. There are two things you can do here. You can delete the entire part and replace the text manually, or you can just edit the appearance with HTML tags. I just added HTML tags as I had already made my changes to the text in the Page Elements section. The code I ended up using was as follows:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url +
 &quot;#more&quot;' expr:title='data:post.title'>
<center><span style='color:#ff9900'>
<small><data:post.jumpText/></small>
</span></center></a></div>
</b:if>

Here you can see that I first centered the text with a center tag. Then using span style=’color:#ff9900’ I changed the color to orange. I also added a small tag to remove emphasis from this part, as it is already orange!

Edit: The center tag is no longer recommended for use as it has been deprecated so use style="text-align:center" instead.

2. Editing the user ID adds emphasis to who is posting, you! Once again to edit this you need to click on Expand Widget Templates, then find the following code:

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

I found the easiest way to find this is to search for ‘vcard’ as there is only one instance of this, so you will jump straight to this section.

The part of this that wants formatting is the data:post.author. I made the following changes:

<span class='fn' style='color: #ff9900;
font-variant: small-caps;'>
<strong><data:post.author/></strong></span>

Within the span section I change the color to orange and added a font-variant to give the name small capitals and added a strong tag to make the name to appear in bold. Once again, feel free to experiment and use the preview button to see the effect of any changes you make.