You are only in a hurry till you get to the front of the queue

Wednesday, 14 March 2012

Kel-Logs: Read More Tag for Blogger

Kel-Logs: Read More Tag for Blogger:

'via Blog this'




Read More Tag for Blogger

MONDAY, APRIL 4, 2011

 Share1 0digg 
 Print Friendly and PDF


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  


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


Just after this code, paste the below code,
<b:if cond='data:post.hasJumpLink'>  
<div class='jump-link'>  
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>
<data:post.jumpText/>
</a>  
</div>  
</b:if>

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.




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.




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
</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, 
then replace <data:post.jumpText/>  with


<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more'>
<img src="url_of_image" alt="Read more" />
</a>  
</div>  
</b:if>

Thats just about it. Save the template and continue posting :)

If any queries you could always post it as a comment :)

0 comments :

Post a Comment

Thank you for taking the time to comment. Your opinion is important and of value and we appreciate the positive feedback! If you are "Negative Nancy" then please do us, and humanity, a favor and piss off.

Total Pageviews

Google+ Followers

Interesting pages

Blog Archive

Popular Posts

Recent Comments

Rays Twitter feed

Ads

Web sites come and go and information is lost and therefore some pages are archived. @rayd123 . Powered by Blogger.