Wednesday, August 12, 2015

How to Edit And Customize "Read More" Link on Blogger.

The recent post, discussed how to create jump break which is “Read More” link to appear on your post on blogger. A “Read More” feature on blogger is to help condense your posts text and blend the text like a headline on your blog homepage. 

The important of “Read More” on you blog is to give your viewers and visitors’ reason to click the link and continue reading more of your post. It is also possible to change the text to your own choice of style like “Continue Reading” and add image or background to stylize the look to your convenient. 

Customizing Read More Link


To edit and customize your read more link on blogger is very easy if you follow the simple step below.

==> Firstly, type your text, background, add image and design if necessary to your own choice. You only need the HTML code.

==> On your Blogger dashboard, Click on Template

==> Click Edit HTML

==> Inside your Editor Box, Click your Cursor inside & press your (Ctrl + F) to bring out “Search Box” at your right corner.

==> Copy this code inside Search Box: <div class=’jump-link’> And Press enter on your KEYBOARD

==> Code found display like this below: 

<div class=’jump-link’>
  <a expr:href=’data:post.url+ &quote;#more&quote;’ expr:title=’data:post.title’><data:post.jumpText/></a>
==> Edit text highlighted in yellow below and replace with your new HTML code.
 <div class=’jump-link’>
  <a expr:href=’data:post.url+ &quote;#more&quote;’ expr:title=’data:post.title’><data:post.jumpText/></a>
==> And, if you replace with “Continue Reading” will be like this:
<div class=’jump-link’>
  <a expr:href=’data:post.url+ &quote;#more&quote;’ expr:title=’data:post.title’><Continue Reading…</a>
==> If you customize USING DESIGN BACKGROUND, IMAGE OR TABLE should be replace in between highlighted yellow as show in sample above.
<div class=’jump-link’>
  <a expr:href=’data:post.url+ &quote;#more&quote;’ expr:title=’data:post.title’><table width="107" border="1" bordercolor="#FF0000" bgcolor="#FF0000">
    <td width="97" class="style7">Read More...</td>
==> (ii) And if you use continue reading text with design;
<div class=’jump-link’>
<a expr:href=’data:post.url+ &quote;#more&quote;’ expr:title=’data:post.title’><table width="146" border="1" bordercolor="#FF0000" bgcolor="#FF0000">
<td width="136"><span class="style6 style1"><strong><em>Continue Reading...</em></strong></span></td>

The code above will make your READ MORE or CONTINUE READING link to show and display as see below;

You can modify and edit to suit your style that convenient for you provided you put your code in between the specify place.
Hope this help to know how to create and edit your Read More or Continue Reading link to your post on blogger.
Feel free to give feed back about this post via comment box and share this to your friends through social button below to learn what you're learning.

If you don’t know how to create “Read More” link, you can read one of my posts How to Create "Read More" Link to Your Post

No comments:

Post a comment

We Love Comment And We Want to Hear From You to Improve Us.

Kindly, Leave Your Comment in The Comment Box The Below.

Do You Want to Be Notified When We Reply Your comment?
Tick Notify Me Box

If You Have Any Information Different From This Post, Feel Free To Contact Through Contact Form.

Note: Posting of adverts in comment box will not be accepted, rather will be removed immediately.

Thank You!

Recent Post



Email *

Message *

Subscribe to Get Update with New Posts

Enter your email address:

Delivered by FeedBurner