10 Cool Images To Use In Place Of Read More Text On Your Blog




| 20 comments

In this post we will look at the blogger 'Read More' feature and a trick to edit it's apperance on your blog by using a stylish image instead of the standerd text.The image will be clickable and will lead to the full post as the Read More text used to.If your thinking "Whats he talking about" dont worry i will explane fully and i have a link to the official blogger post on the subject.

I will provide you with 20 differant images to choose from and help you how to add them to your blog.This tip will really help the appearance of your blog.The read more is basically an option to show just the post title and the first few lines of your post on the home page, then viewer has the option to click Read More to see the full post,im sure you have seen it on a lot of blogs.Untill recently if you wanted to add the read more funtion to your blog you had to do a lot of code changes but now blogger have made it easy by having the feature built into all blogs.

More Info.

For more information on what it is and how it works see the offical Blogger Buzz post on the subject.

Using the read more funtion on your blog allows you to have more posts on your home page without slowing down the loading time and helps you blogs Google search rank as your blog is reciving more clicks.

So now you know what it is and how it works, heres how to spice it up with an image and also below the images i will show you how to use both an image and the text.

How to add it to your blog

The read more could be built into your template in a few ways lets find it.

1.Click 'Design' > 'Edit html' for your blog.
(Tick the 'Expand widget templates' box)


2.We will try to find it this way first :

In your blogs html find the following text :
(Click 'CTRL and F' for a search bar to help find the code)

Read More

(If you have previously changed 'read more' to different text look for that text)

If you dont find 'Read More' text in your template look for this code :

<data:post.jumpText/>

3.Now just choose the image you want to use below and Replace 'Read More' or ' <data:post.jumpText/> ' with the code provided for the image.

Images you can use for your read more.

Image Preview :

Read Full Post

Image Code:



Image Preview :

Read Full Post

Image Code:



Image Preview :

Read Full Post

Image Code:



Image Preview :

Read Full Post

Image Code:



Image Preview :

Read Full Post

Image Code:



Image Preview :

Read Full Post

Image Code:



Image Preview :

Read Full Post

Image Code:



Image Preview :

Read Full Post

Image Code:



Image Preview :

Read Full Post

Image Code:



Image Preview :

Read Full Post

Image Code:




More help?
Look at the samples below ...

With the 'Read More' text your code looks like this :


<span id='showlink'>
<a expr:href='data:post.url'>Read more...</a>
</span>

Once you add the image it should look like this :


<span id='showlink'>
<a expr:href='data:post.url'><img src="http://i941.photobucket.com/albums/ad259/spiceupyourblog/more_thumb1.png" border="0" alt="Read Full Post" /></a>
</span>


OK that's it as far as adding the image is concerned if your happy with that click save and your done.

However if you want to use text and an image as i done on my home page here's how :


We Are Nearly Finished If you need more help or have an opinion or suggestion Please leave a comment Below.

Simply change the text 'Read More' to the text you want to show.
(I used 'Click here to view full post')

Now add <br> and then add the image see the sample below :



<span id='showlink'>
<a expr:href='data:post.url'>Click Here To View Full Post<br><img src="http://i941.photobucket.com/albums/ad259/spiceupyourblog/more_thumb1.png" border="0" alt="Read Full Post" /></a>
</span>

Now save and check out your new style homepage.

Do you use the read more feature ? Let us know if you added an image..


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

20 comments:

  1. Hey I am still having trouble with this. I used a personal Template that I downloaded and the only two places that "Read More" is mentioned looks nothing like what you posted.

    I am posting the code below...
    My email is richard.borean@gmail.com - feel free to email if that is easiest to reply. Thanks!
    ------------------------------------
    This was the first one:
    .more-link {
    font-size:11px;
    font-weight:700;
    background: url(http://www.templatesimages.com/images/SoulVision/read-more-icon.gif) no-repeat left center;
    padding-left: 20px;
    height: 16px;
    width: 200px;
    display: block;

    -----
    and this is the second one:
    .rel-posts li {
    list-style-type:none;
    font-size:11px;
    background-image:url(http://www.templatesimages.com/images/SoulVision/read-more-icon.gif);
    background-repeat:no-repeat;
    background-position:left top;
    margin:0;
    padding:2px 0 2px 18px;

    ReplyDelete
  2. Hi Richard,

    What has happened here is the template your using has an old 'read more' hack built in, this is quite common as Blogger only recently built in the read more feature so if you wanted to use it before you had to add all the code yourself.

    Anyway the easiest thing to do here is as follows :

    Go to your blogs layout.
    Here You have the add a gadget and edit header and so on but you want to click 'edit' in the bottom right of the 'blog posts' area.

    You will get a pop up window with differant options to edit.

    At the top you will see 'Post page link text:' change this text to 12345abcde and save.

    Now follow the steps in the tutorial above again but this time dont search for 'read more' search for '12345abcde' and replace that with the image code.

    If you have trouble with this let me know and i will mail you the steps with images to help.

    Paul.

    ReplyDelete
  3. Still didn't work... I searched for 12345abcde but it did not find it in the code.

    Here is a mediafire link for my template xml (i figured that would help make things easier on you)

    http://www.mediafire.com/?mrzyn4xdidm

    Let me know! I really appreciate it! Thanks!

    ReplyDelete
  4. Hi again,

    When i looked at your blog yesterday did it have a small arrow image for the read more ?

    I dont remember this :

    << READ MORE >>

    Anyway i may have located what we are looking for..with all the custom templates being made with differant styles of code this aint easy anymore :D

    Follow the steps again this time Find this code in your template :



    Replace it with the image code you choose and save.

    Let me know..

    Paul.

    ReplyDelete
  5. Sorry the code to find is :

    <data:post.jumpText/>

    ReplyDelete
  6. theweeklynice.blogspot.com

    Well that is what I ended up doing... and there are 3 instances of that code

    So I tried putting it in front or behind each one individually, and then I tried substituting the code for the new button in place of ""

    and every time, no matter what I did, it always put the read more at the top of the post - which looks completely wrong... I want it to be under the pictures and text, where the reader will expect it to be.

    also the "<>" is just the title i gave to it for the time beind so I can make it more noticeable... I posted the site at the top so maybe seeing it yourself will help.

    Thanks again! (sorry this is such a pain)

    ReplyDelete
  7. Hi again,

    Ok what i told you in the last comment is the correct way to do it.I downloaded you template to a test blog and added the read more image look here :

    Click here to see it

    This is the easiest way to sort it out:

    Leave a comment here with the image you want to use then go to your blogs html - make sure to tick the expand widget tenplates box.

    Copy all the code in your template and send it to me in an email :

    spiceyourblog@gmail.com

    I will send you back the code to use.

    Try to do this as soon as possable i will be here for about 30 minutes..

    Paul.

    ReplyDelete
  8. I just sent you the email... this comment box wont let me post the html of the code i want, so it is the first thing in the email...
    Thank you again! I really appreciate it! Hopefully I catched you before you left, but if not, just whenever you can get back to me is fine! Thanks:)

    ReplyDelete
  9. Awesome post, One Q though, can i add a hover effect to read me image. How?

    ReplyDelete
  10. I presume you could set up a hover effct image.What type of hover image are you thinking of using ?

    Paul

    ReplyDelete
  11. Well i want to add hover effect to one of the Read ME pics http://i941.photobucket.com/albums/ad259/spiceupyourblog/light-blue.png

    I don't want a hover effect image, i want it to hover, highlight or somethin when mouse is pointed on the Read me image.

    ReplyDelete
  12. Hi John,

    A very cool and very easy hover effect is using the rollover effect.

    I have a tutorial on how to make a rollover image and it's very easy, However i have not tried it in the read more posttion.

    You can see the tutorial here :

    http://www.spiceupyourblog.com/2009/10/how-to-make-rollover-mouse-over-image.html

    Just choose 2 of the readmore images and use them, one will be displayed and once you put your cursor over it - it will change to the other one.

    If you need help with it let me know.

    Paul.

    ReplyDelete
  13. This post really helpful for new blogger.

    ReplyDelete
  14. I'm trying to do this, but I'm getting this error:
    Error parsing XML, line 1258, column 9: The element type "a:" must be terminated by the matching end-tag "".

    I tried to paste the HTML code I have in the comment box but it won't let me.

    Any ideas what's wrong?

    ReplyDelete
  15. Works like a charm! Thanks for a great graphic enhancement!

    ReplyDelete
  16. hey it works.I installed it on my blog hacksofworld.blogspot.in and its working like charm,thank you for your great work.

    ReplyDelete
  17. Hey Paul, I have just installed this button on my new blog....It works fine....I loved the button....But I want to use it on the right side of my blog.....How can I do that? Please Reply....

    Regards,

    Aditya Dey
    Blog- TechStake-Technology News Blog

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us