Sunday, August 25, 2013

Fully Customize Jump Break in Blogger

The people using jump break Should know these hacks/Customization to enhance their blog beauty and performance. I will show you how to Display blogger Jump Break Post Page Link Text, Display it on Right/Left, Hide Jump break, Increase Text size, Change font...... You Should backup your template first. To do customizations Read the Post Carefully.
Also check: How to add Auto-Read More Hack/Option in Blogger

Customizing Blogger Jump break:

Change Post Page Link Text:

By Default Post page link text is Read More. You can change it by doing as follows..

1. Go to Blogger>Layout.
2. In the Blog Posts section, Click on Edit. [see screenshot of this step]
3.  It will pop-up a new Window Replace Read More with Your Desired text (e.g Continue Reading, Read full etc) [see screen shot of this step]
4.Save and exit.

Display Jump break Link On Right/Left:

By default Post page link is Displaying on Left which may annoy a blogger user. To Display it on Right add the following CSS code.

1.Go to Blogger>Template.
2.Click on Edit Template.
3.Press Ctrl+F to find the Following Code:
]]></b:skin>
4.Now, add the following code before/above it: [see screenshot of this step]

.jump-link { float: right; }


5. Save Your Template.

Hide Jump Break Link:

Hiding a jump link may be helpful. Because The full post page can also be viewed by clicking on Post title link which is displayed at the starting point of a post. To hide it do the following.
1.Go to Blogger>Template.
2.Click on Edit Template.
3.Press Ctrl+F to find the Following Code:
]]></b:skin>
4.Now, add the following code before/above it: [see screenshot of this step]
.jump-link { display:none; }

5.Save your template.

Change font size and Style:

1.Go to Blogger>Template.
2.Click on Edit Template.
3.Press Ctrl+F to find the Following Code:
]]></b:skin>
4.To increase font size and style, add the following code before/above it:  [see screenshot of this step]
.jump-link a, .jump-link a:visited {
font-size:15px;
font-family: "Georgia";
font-wei.pagenavi{
clear:both;margin:10px auto;text-align:center
}
5. Save Your Template and Enjoy. :)

Like the Post? Please share it with your Friends.

No comments:

Post a Comment

Warning !

Search This Blog