Read More Tag for Blogger

It had been a long time back, when all the posts made on blogspot were posted in its full size on the front page, making all your readers to scroll down to find the next post, and by the time he/she would find it, they would be massaging their fingers by scrolling so much.

Good news is here for all bloggers, a new Read more tag has been introduced, so that you just have a small snippet or a first paragraph shown in the front page, and if the reader wants to read more he/she can just click on it, and read it the whole.

But its not gonna happen just by a click of a icon, you need to do little more than that. But just a childs play I can say.

Login to you Blogger
Go to Design->Edit HTML->Tick the Expand Widget Templates box.

Now using the Find or Search function of your browser, search for
%lt;data:post.body/>

Just after this code, paste the below code,


%lt;div class="jump-link">
%lt;a expr:href='data:post.url + "#more"' expr:title='data:post.title'>

%lt;/a>
%lt;/div>

Click on SAVE Template.

Now go to Posting->New Post
Write a test post with some two or three dummy paragraphs.
Just after the first para, insert a Jump Tag/Link.
jumptaglink

And Publish the Post.
View the blog on its main/home page, and see the changes.

Customize the Read more tag:


Now to just change the text from Read more to something like continue reading,
Go back to Design
On the Blog Posts box, click on the Edit option
Change the Post page link text: text to the one you desire.
postpagelink

Now if you want some more customization, then you might a little knowledge of CSS, but if its ok, coz i’ll guide you through.

Go back to Design->Edit HTML and now find
%lt;/b:skin>

Now Above this tag you will find all the CSS codes for your blog. Do not mess up with them.

Just paste this code above the tag
.jump-link a {
background: #ffff00;
padding: 3px;
color: #fff;
}

And you will get your Jump Link(Read more) in a red background, with white text and 3px padding. Now you can edit this by changing the color’s removing the padding, as you wish.

Also if you want some changes while you hover this tag, then add this code too,
.jump-link a:hover {
background: #000000;
padding: 3px;
color: #ccc;
}

This will change the color, only when you hover on the Jump Link.

Now after you have done this much, I know you want to go further. No problemo.
Want to Add an Image instead of Read More Tag,
ReadMore

then replace %lt;data:post.jumpText/> with


%lt;div class="jump-link">
%lt;a expr:href='data:post.url + "#more'>
%lt;img src="url_of_image" alt="Read more" />
%lt;/a>
%lt;/div>

Thats just about it. Save the template and continue posting πŸ™‚
If any queries you could always post it as a comment πŸ™‚

2 thoughts on “Read More Tag for Blogger”

Leave a Reply