The font will adopt the font in your template setting. The color of the link will be the same as the link you use. The display of the “Read More” is actually customizable. You can create your own text or image to replace the default text as above so that your blog can be more beautiful overall.
As the basic knowledge for you, below is the code of Blogger read more:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if>
By knowing the basic code, we can create our own “Read More” variations.
- To make Read More appear on the right
By default, “Read more” will appear on the left, but if you want to display it on the right, you can add the code like this:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<div style='float:right;padding:10px 0px 5px 0px'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</div>
</b:if>
Or if you like installing at CSS, you can add like this:
Place above the code ]]></b:skin>
.readmore { float:right;padding: 10px 0px 5px 0px; }
and place this in the body:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<div class='readmore'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</div>
</b:if>
- To make “Read More” printed in Bold
To make “Read More” printed in Bold, you only add the code <strong> … </strong> or <b> … </b>. e.g. :
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<strong><a expr:href='data:post.url + "#more"'><data:post.jumpText/></a> </strong>
</div>
</b:if>
- To make “Read More” with post title
Your “Read more” can be displayed with post title, and the code would be:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/> → 
<data:post.title/></a>
</div>
</b:if>
- To make/replace “Read More” with banner
If you think your text of “Read more” is not so interesting, you can replace it with the button or banner, e.g.:
The code format would be:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><img src='YourImageURL' alt='read more'/></a>
</div>
</b:if>
The real example as below:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjecSIk2yiMb0ysEoYOKmVQEIqZ4XtRsCDlWQ9-jAO_u5J2pf0d40OXmHxhsOXUvh22PQDfrGaibJSkEQicZfzaQy01a9hZrOgyArpc1Sl_tVpL8i24ILFu8uF7XEWw_46a1GCstSlnGzQ/[1].png' alt='read more'/></a>
</div>
</b:if>
And you can create tens or thousands of Read More variations to beautify your blog. Now if you are still upset with that, the following are the steps:
- Please login to blogger with your ID
- Click Layout
- Click Edit HTML tab
- Check the small box next to “Expand Template Widget”
-
Find the code similar to:
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
- Please replace the above code with your creations as Kang Rohman explain above.
- Click SAVE TEMPLATE button
- Done
Happy creating!
