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
  

HOW TO EDIT READ MORE LINK ON BLOGGER

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>
</div> 
==> 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>
</div>
==> 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>
</div>
==> If you customize USING DESIGN BACKGROUND, IMAGE OR TABLE should be replace in between highlighted yellow as show in sample above.
(i)
<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">
  <tr>
    <td width="97" class="style7">Read More...</td>
  </tr>
</table></a>
</div>
==> (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">
<tr>
<td width="136"><span class="style6 style1"><strong><em>Continue Reading...</em></strong></span></td>
</tr>
</table></a>
</div>

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


 OR
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









Comments

POPULAR POST

Getting Started With Oriflame Business

6 Tools for Publishing Content to Multiple Social Media

MTN Solar: Mobile Electricity Power Reliable For Home Use

7 Social Media Messenger Alternatives to WhatsApp and Facebook

7 Tools That Can Help Improve Your SEO Strategy

How to Back-Up SIM And Phone Contacts On MTN

Facebook Set to Monetized WhatsApp With Verified Business

How to Create an Effective Emotional Email Marketing That Get Result

Do You Want to Swap Your Old Phone to New Brand Phone? Visit Micro-Station

Making Money With Oriflame

Advertise with us

Follow Us

Ganepress App

Ganepress Mobile App

Add Me

Ganepress Live Traffic

Enter Your Email to Get Notify On New Post

Contact Form

Name

Email *

Message *