Last night, I planned to change the template of this blog and made some small changes. One new thing which I did with my blog is that I added the READ MORE link. So, if you will open the Homepage of the SHAAN HAIDER Dot COM then you will only get the summry of the post and when you will click on the READ MORE link then the full article will appear. Well, this READ MORE link is a very common thing in Wordpress blogs but its not available on Blogger blogs. But you can add READ MORE link in Blogspot by applying some tricks. And thats what I did :) And I am going to share it with you too.
There is a very complicated method to edit the HTML code of the template to get the READ MORE link in the Blogger blog but I am going to tell you simple method which I applied on my blog too. Just follow these simple steps and you will get the nice READ MORE link in your Blogger blog.
1. First, decide where in the post you want to create the jump break, and place your cursor in that position. Once set the mouse cursor, from the editor toolbar find the option "Insert Jump Break" as shown below, this option will be visible in new blogger template editors and in editor Compose mode only.
2. Now,clicking the icon will insert a grey bar at the cursor point, illustrating where in the post your break will appear. The bar can be dragged though, so you can always re-position it after insertion. [see below image how it looks like]. This can be dragged to the place wherever you need it.
3. Now, publish the post and go to Edit HTML option from the blog navigation links Layout or Design Take the backup of the full template before do any changes. It really helps if you are not familiar with HTML and if you make any mistake while editing.
4. Now, check the option "Expand Widget Templates". Search for the tag in your HTML <data:post.body></data:post.body> .
5. Add this simple HTML text, just below the tag mentioned above.
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >
6. Now, save your template and just go to your home page for testing that its working properly or not? If you did everything correctly then it must work as its working on my blog.
Important : Those people who aint using the New Editor or prefer only HTML mode of writing, can use the text <!--more--> in the Edit HTML mode of the editor wherever you want. It works as the Jump Break as shown in the pic below.
If you liked this post then feel free to be a fan on Facebook or subscribe it by Email to get updates in your inbox.
Thanks
There is a very complicated method to edit the HTML code of the template to get the READ MORE link in the Blogger blog but I am going to tell you simple method which I applied on my blog too. Just follow these simple steps and you will get the nice READ MORE link in your Blogger blog.
1. First, decide where in the post you want to create the jump break, and place your cursor in that position. Once set the mouse cursor, from the editor toolbar find the option "Insert Jump Break" as shown below, this option will be visible in new blogger template editors and in editor Compose mode only.
2. Now,clicking the icon will insert a grey bar at the cursor point, illustrating where in the post your break will appear. The bar can be dragged though, so you can always re-position it after insertion. [see below image how it looks like]. This can be dragged to the place wherever you need it.
3. Now, publish the post and go to Edit HTML option from the blog navigation links Layout or Design Take the backup of the full template before do any changes. It really helps if you are not familiar with HTML and if you make any mistake while editing.
4. Now, check the option "Expand Widget Templates". Search for the tag in your HTML <data:post.body></data:post.body> .
5. Add this simple HTML text, just below the tag mentioned above.
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >
6. Now, save your template and just go to your home page for testing that its working properly or not? If you did everything correctly then it must work as its working on my blog.
Important : Those people who aint using the New Editor or prefer only HTML mode of writing, can use the text <!--more--> in the Edit HTML mode of the editor wherever you want. It works as the Jump Break as shown in the pic below.
If you liked this post then feel free to be a fan on Facebook or subscribe it by Email to get updates in your inbox.
Thanks