Monday, 21 October 2013

How To Add Read More Button in Blogger

black[3].gif (602×294)
You have write an article about more than 1000 words after publishing it You have seen that your blogger page is completely full of your post so let we learn how
to break your post on main page. As you have already seen on blogs that after few line post there is button of read more so in this post I want to tell you how to Insert Read More Button In Blogger Post because once I was new blogger I was also not aware about it but now I have seen such template are designed and that’s are already designed like we don’t have to use Insert jump break.
custom read more button

Why we should use Read More Button in Blogger Post.

It is my own thinking, if you put read more button in your blogger post your visitors will stay more time on blog. Because for reading every post they have to use you read more button and they find you have write such a wonderful and useful article for your visitors they try to explore more your blog.

So now we learn how to insert Read More Button in Blogger

When you are making such article in the blogger post editor there are such tools for formatting your post. After writing few lines or wherever you want click on insert jump break as per image shown below.

It will make your article to Read More and also you can use your own image to at the place of read more button.

Insert Custom Image Button instead of Read More in Blogger Post

Here I will tell you how you can add custom image instead of Read More Text for making your blog more beautiful. Follow this
Go to Blogger Dashboard > Template > Edit HTML > check on Expand Widget Templates
find the following code
<a expr:href=’data:post.url + “#more”‘>Read More </a>
Leave it here and now you have to upload you an image which you will have to use for Read More Button, simply upload it on your blogger and copy link location
Use this code and replace red text with Image URL in below code
<img border=”0″ src=”Paste here the button Image URL“/>
Its will look like this
<img border=”0″ src=”http://your-image-url.com/your-image.jpg“/>
This is the last stage now code which you find in Blogger template
<a expr:href=’data:post.url + “#more”‘>Read More </a>
Replace the READ MORE with the image code like this
<a expr:href=’data:post.url + “#more”‘><img border=”0″ src=”http://your-image-url.com/your-image.jpg”/></a>
Save template and refresh your blog’s homepage

0 comments

Post a Comment