Tuesday, October 9, 2012

How to add more space above "read more" jump link in (blogspot)

If you insert a "jump break" in the blog, you will get a "read more" jump link by default on home page. I like the idea of using jump link, but in many templates, the "read more" jump link is too close to the line at above, and sometimes it's hard to see the link. Here's a screenshot on this blog, to give you an example:

Is there's a easy way to add more space above the "read more" jump link? Yes, we can do it by adding 20px margin at the top.

Here's how:

1. From your blog dashboard, click on Template->Customize->Advanced->Add CSS

2. Copy and paste following 3-line codes into the right side window in "Add CSS" screen:

.jump-link {
margin-top: 20px

Once it's done it should be looking like following:

3. Make sure to click on"apply to blog" button  at the top-right corner of the window, then click on "« Back to Blogger" to go back to your blog dashboard.

4. View your blog now, "read more" jump link gets more space above the top !

No comments

Post a Comment