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

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 :

3.Now just choose the image you want to use below and Replace 'Read More' or ' ' with the code provided for the image.

Images you can use for your read more.

Image Preview :



Image Code:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWXeZ7sc8gJ6ylOMYB8DDS2iurfuYglanqi41rk1b-bERFxTwJXbGDr-OWAbUYsA9jhPLCDTX2KuN5r7VwxOm5mzLpmshyphenhyphenoyjLIwxL4oGSwrKBb9_YHdQ8xzaozXzicwD7KSm5Nqmfpqb7/s1600/read-more-10.jpg" border="0" alt="Read Full Post" />

Image Preview :



Image Code:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSZXgDuEqVaaiKsjwOEvJfQFOyVELFHuVYBdGLF79iPPCSGCYwZqt6UoogQi1gTQgyJbL0ku2wqfDuct0Pwx10ztY6XjlUNJQzwFl0-Bkdg4rwnK538vGQgVW8v7GShkvCKDfh6KvyonIt/s1600/read-more-1.gif" border="0" alt="Read Full Post" />

Image Preview :



Image Code:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi31Z4ND7igGTjt5Vi6rHI46si79qqFcmwEAR03mgOz4nJTBQqA6K81dQLh77-B2YhFgsa7e9mcU8Bvs1f9U2XLl58V-Dyvfq4MlrI14utrev3XHSiSFwKSqrdFYxNZ-a5EpMUYJqmpt-fB/s1600/read-more-2.jpg" border="0" alt="Read Full Post" />

Image Preview :



Image Code:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB7s_jrnHMyzv8KWzn1DppBBjNRb0Vxhrix_hV2LZGCIfV3dp9mm0bobDvVTmKI44_nxIK-vcE40P5saMIA3FxN_7drzt84nLt8W8qOux9_zlqyFjx_OqXyfv3w7-YRh-G5d5a-oIpXarl/s1600/read-more-3.png" border="0" alt="Read Full Post" />

Image Preview :



Image Code:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyOeKzYag5ScJtgJYf1x2-48kdBPn8DsjAgoma1yNmGe6HBTmpxiImOypjgG8tTFo0OFQjcGEW6TFOWwS-bXa42sCY4f6YKkMGmwH5lSy2-Ce_ccMCxpKI5BmosC2Kx_GlPfcccwXyX4uQ/s1600/read-more-4.png" border="0" alt="Read Full Post" />

Image Preview :



Image Code:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMqUzd3BbHhgBcQkgztpo2nzeD1-0XysOdbRc5evnev1q21fASSYaSXhRXGXmPHm9mFSa4aW6xkz6nht5wh1enK4b9094z1aGs18OdJP1ZlQeZH9ePDEAt7ZWZPmYTQ4Ebgrsr-UbWxjuo/s1600/read-more-6.png" border="0" alt="Read Full Post" />

Image Preview :



Image Code:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfS-sXkMAvk3bhdU5BeuZUV2fgVnVoqwIgzOx8kRE-M9dbfNAuaUPYfjMyChbnxE5mXZNSqW2cOFVN_zZSw41TAwc5AN5Dve5VbgPae6042tB02t4cMlBg46tynebXHVQIQJSkQ8yI5H6W/s1600/read-more-7.png" border="0" alt="Read Full Post" />

Image Preview :



Image Code:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfwWD06roodPMxA3vJ3V9eY8E0dBi6AWQJ1hB6wG9XqPvs8BUiNHTusYk7Mm43TZPloK7EFfmd5xMgJpy6xht7e_yhWpv68kItv36Ndyyby8I3nKg_azSzaRt0BzBHz_AcQrbGC5ApcEJX/s1600/read-more-8.gif" border="0" alt="Read Full Post" />

Image Preview :



Image Code:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyrS5Q6vxjPoLtdeoYGV403l4pVFIx3tU1Z8ROfjKMCXAvFj4geIanEuQ4Hu3b54LXfEJvy8b8HfqJOvO-QYurEErjDjVBY1QgtaNSzP1yCX2217VIxgir8_58F1jAM8KBUaH42GXdigXH/s1600/read-more-9.gif" border="0" alt="Read Full Post" />

Image Preview :



Image Code:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgebPPk3ECPZmIRZmjiQMSViNs2eO9nA0uEIB_Sx2kjamLb_uYYLUZQJuhlF50fgD6T4Bp87HqNv6P4UmSqjKHytzqHvFtH-fPuUrWEnidXl2AZH-l3XZLPkWfb0iwAq1mLOL_H7ReHwlts/s1600/readmore-3.gif" border="0" alt="Read Full Post" />


More help?
Look at the samples below ...

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



Read more...



Once you add the image it should look like this :







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
and then add the image see the sample below :



Click Here To View Full Post




Now save and check out your new style homepage.

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