Add a "Read More" Icon/Image For Blogspot

In my old post i teach you How to create expandable post summaries. This hack is very handy if you have very long articles on your blog. In this version you can add "Read More" Icon/Image for your blog. And please note that this hack is only for Blogspot blogs.

Before you can add "Read More" Icon/Image in your blog, you need to create expandable post summaries first. To create, read this post on "How to create expandable post summaries"

Note that you'll need to have post pages enabled in order to make this feature work.

Examples:



After you have created expandable post summaries, please proceed to the next step.

Step 1:

Before you do anything to your template, please back it up first. To backup go to your blogger dashboard Layout -> Edit HTML -> Download Full Template

Step 2:

After you have backup your template,tick Expand Widget Templates in Edit HTML section. Find the code below in red:-

<p><data:post.body/></p>

Step 3:

After you have found the code above, scroll down until you find the code below in blue:-

<b:if cond='data:blog.pageType != "item"'><br />
<a expr:href='data:post.url'>Read more!</a>
</b:if>

Step 4:

Replace the text Read More! with the code below in green:-

<img src='YOUR IMAGE URL'/>

It will look something like this:-

<b:if cond='data:blog.pageType != "item"'><br />
<a expr:href='data:post.url'><img src='YOUR IMAGE URL'/></a>
</b:if>

Step 5:

Change YOUR IMAGE URL to your own image URL and Preview. After your have satisfied Save your template.

You can also use the Icon/Image below for your blogs.

- <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNhKAQqMR-3YBfT_gAshyZ8TUV9UFyGnkzh3PAULQXew0OWPZiZxPdvVkXaWndlPrwUXDG2_euFMusWImo-nlS3jCSS7cnk10ik5omsV-GKR7HaUXrAr2n5JFc22VYsQW1Yc0iJJjnST8/s320/more_icon.gif" alt="http://djyano.blogspot.com" />

- <img src="http://d.imagehost.org/0045/readmore.gif" border="0" alt="http://djyano.blogspot.com" />

- <img src="http://d.imagehost.org/0612/icon-read-more.gif" border="0" alt="http://djyano.blogspot.com" />

- <img src="http://d.imagehost.org/0664/icon_link.gif" border="0" alt="http://djyano.blogspot.com" />

- <img src="http://d.imagehost.org/0366/readMoreIcon.gif" border="0" alt="http://djyano.blogspot.com" />

- <img src="http://d.imagehost.org/0141/read.gif" border="0" alt="http://djyano.blogspot.com" />

- <img src="http://d.imagehost.org/0403/images_4.jpg" border="0" alt="http://djyano.blogspot.com" />