Replace Read more text to stylish

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 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 :



Image Code:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUFjNehDCMwSkvOeQweAsZIZs_65_8WBZNo5TVw5l34g3p1JUl0X-sHqzFq5LYZVanCAmlB-r0m8xa_GELSJ7UjhzOH9pN3Q-1BphFm39tX-n770LQQb-D3hPkM-dSYiZW3oE5WTZnioDb/s1600/read-more-10.jpg" border="0" alt="Read Full Post" />

Image Preview :



Image Code:

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

Image Preview :



Image Code:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEx498Oh7YdBLjv8e83kW-LkiALykxIC5pQtFONlk7qZ4Z_EzaQ9EAoZjUAQAXsJwGFvqHhxmXoetvuWUMWfzMHlEhsf6NmsOY07qzA3ylA5jUcuz6GoOA_M-P09ShMU8DlgV4N0VV2z9a/s1600/read-more-2.jpg" border="0" alt="Read Full Post" />

Image Preview :



Image Code:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDPfgYSQgwAN6lYbLVxAtIfHpDGib_IATOfw8Z8W7CuDFa-97K3Xc5rdNM0T-45VQW2OJU1ZGVR-2hMtYINWjrv8cchvvbP3NmWgZbgM3UbfPw0LCl9f_KyPIyvt1Rf6ttU2k09KZA7r_q/s1600/read-more-3.png" border="0" alt="Read Full Post" />

Image Preview :



Image Code:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzzelFoecmIkxGI9b0-2rC3nwiQwnhQQEmoZ_DVXdLbYoi8HTj6dn10RQM71PcPxzagw52hy665hhranWAv6MNzA9nePV3luOKfrBogY3X5JR3-yJiis7kED2LbwUTW_f7nOOL81HHyM87/s1600/read-more-4.png" border="0" alt="Read Full Post" />

Image Preview :


Image Code:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQtt5b7PRzWQsshWtWmNzagS_qr3Wun41IDSG42bSUhgkeb6CT6-uRfpRUl27J2DxmTvGzrJ205GP9TAFSitFGF_uhiEd38uwBuPgnGE29dVyRMymYXYlP_euCGbBB40FZmbYadkAuWylv/s1600/read-more-6.png" border="0" alt="Read Full Post" />
Image Preview :




Image Code:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiieu6Dle88niCu9LLxLdz8GYja98Wjj_iPCNnlcgO_LiMHGzMaF53M2Vp-67n9bcyPB2Z0TFkcN3rb-vxPbbajHMqRahonczzcAgkvh-w6xDiJtDlTTlXkQAmm7Lq1pnY-AS5dRNxLCnuN/s1600/read-more-7.png" border="0" alt="Read Full Post" />

Image Preview :


Image Code:

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

Image Preview :


Image Code:

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

Image Preview :




Image Code:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4apIaHKX8lDHMiVlzTVuK5dYSjMtEJLbgfZ_WipBIWgVv-tBgJFXCH23ECvuoCVJn6OHrXOvMu05iXCN2DGsmS6upQMi5gUNjC7-Dqpe74IjMcIV-hGcS3VvN4MuoHCx-dq0QxyQrZkXe/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 :



<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.



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.