Here's another quick little tweak to help make your Jump-link stand out a bit more while adding a bit of style. I recently decided mine needed to be more visable so I sat down to figure out how to do so. This is what I came up with and I wanted to share it with you because that's what this site is about!
What is a Jump-Link?
A jump-link is where you can break off your posts on your main page and continue reading it on the actual post's page. It's crucial
to use them in order to keep the main blog page clean and fast loading.
How do I use it?
It's actually incredibly easy, if you use the Compose just hit this button.
The HTML code for a Jump-Link:
Just place that where you want the break to be.
Then hit Expand Widget Templates:
Then make it look like this (New Code in Bold):
<a expr:href='data:post.url + "#more"'><span style='color:#ffffff;'><data:post.jumpText/></span> </a>
</span>
NOTES:
The second span code sets the TEXT color. Edit #ffffff to whatever color you want.
You're basically changing the color of just this ONE link on your page.
If you want to change what the link says this is how you do it.
Go to Design -> Page Elements -> Blog Posts click Edit.
Continue Reading or Read More are popular choices.
Please comment and let me know of success and failures.
5 comments:
I've seen it done on other blogs (not Blogger though, so I don't know if it's possible there).
Do you know if instead of just adding a color block around the "read more" text in the post box, if it's possible to use an image or a completely different font (one that's specific only to that)?
I've added background color in the post body behind text and I've seen tutorials on adding an image, but that's been in each post individually. I wasn't sure how or if it could be done as a style change here.
Thanks for any thoughts!
Hi Barbara,
Thanks for your comment.
You can for sure change the font to anything you would like just for that Jumplink using what's called a class my post Learn About Class and ID Selectors | CSS For Bloggers: Part 2. talks about it and how to implement it.
As for doing an image that is possible to I'm pretty sure, making it a container and making the image a clickable background which is much more trickier. But possible.
This does not work for me. For some reason blogger will not do the jump for me when I do this. Also, when I edit the html it is saying that it is a bad format, and won't work. I'm not sure what to do!
Kirstin Marie
http://www.kirstinmarie.com
When I go to find <a expr:href='data...using control F it's not showing up. Any tips?
Ok, I got it to work but the end result isn't very clean. I'm afraid it might get lost. There is too much below the jump link. How do I clean that up?
Post a Comment