If we use the Blogger templates provided by Blogger, you might have observed that the "read more" text is quite small and not prominent. The read more link appears if you have split a post for readers to continue reading the full post. We can edit the read more text to anything we like and even change the text size etc.
If you would like to change or edit the "Read More" link do the following:
If you would like to change or edit the "Read More" link do the following:
A) Without editing the template code
By default, the jump break text in Blogger displays “Read More>>”. If you would like to change it to something else, you can do so without messing with the template code at all.
That’s it.
The above steps lets you change only the default read more text. However, if you would also like to change the text as well as apply come CSS then, we could inspect the element using web browser Inspect Element tool and apply some CSS styles.
B) Changing Read More text from template code
By default, the jump break text in Blogger displays “Read More>>”. If you would like to change it to something else, you can do so without messing with the template code at all.
- Login to Blogger
- Go to LAYOUT
- Click on the EDIT link in the main BLOG POST widget
- On the “Configure Blog Posts” page, second option “Post page link text:”, change the text to any thing you prefer
- SAVE
That’s it.
The above steps lets you change only the default read more text. However, if you would also like to change the text as well as apply come CSS then, we could inspect the element using web browser Inspect Element tool and apply some CSS styles.
B) Changing Read More text from template code
1. Login to Blogger > Edit HTML
2. Click anywhere inside the code area and press CTRL FIND and search for "jump-link"
The code looks like:
<div class='jump-link'>
<a expr:href='data:post.url "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
Remove the following code
<data:post.jumpText/>
and in its place, add any text you desire.
<a expr:href='data:post.url "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
Remove the following code
<data:post.jumpText/>
and in its place, add any text you desire.
You can also add HTML code here to change the color of the text, text decoration, increase the font etc.
Example:
<div class='jump-link'>
<br/>
<a expr:href='data:post.url "#more"' expr:title='data:post.title'><b><em><font color='#0bc656'>Continue Reading ... </font></em></b></a>
<hr style="border-top: 1px dashed #b4b4b4;" />
</div>
<div class='jump-link'>
<br/>
<a expr:href='data:post.url "#more"' expr:title='data:post.title'><b><em><font color='#0bc656'>Continue Reading ... </font></em></b></a>
<hr style="border-top: 1px dashed #b4b4b4;" />
</div>
In the above example, we had changed the "read more" text to "Continue Reading... ",and we added HTML code to bold, italics, changes the color, and added a dashed line below the "Continue Reading... " link.
Hope this helps.
No comments:
Post a Comment