Blogger Tips & Tricks

How to change number of posts displayed on Blogger home page.

If you have more than 20 post under each blog label then by default Blogger will display 20 posts per label page. I could not seem to figure out how to set a specific number of blog post to appear per page.

Part of the problem was that I was using a third party Blogger template and the normal or obvious route of going into your Layout and changing number of posts per page in Posts was not working.

Through "Number of posts on main page" setting in your blog, you are supposed configure how many posts should be displayed per page. But sometimes Blogger only showing very few posts per page, and ignored that setting.
Solution

If you go into your blog's template, then HTML and examine the HTML source, you'll find some interesting snippets of code. Find the highlighted below.

<script type='text/javascript'>

var home_page="/";

var urlactivepage=location.href;

var postperpage=4;

var numshowpage=4;

var upPageWord ='Previous';

var downPageWord ='Next';

</script>

Simply change the number with the number of posts you want to show.

Also reduce image sizes/ optimize images. You can use a software like Photoshop, GIMP or free online image optimization service.

Remove unnecessary widgets and do not use many widgets on your blog. It will cause to more proble

How to limit / change number of posts displayed on Blogger homepage

Your blog’s homepage is more important than any other pages because it is the one that gets more exposure. Each and every blog post vary according to topics and that may not be same in size. Displaying too many posts in your blogs home page especially long posts may reduce your page speed. Also showing too many posts will makes your homepage looks so complex. Here let’s see how to limit or change number of posts displayed on Blogger homepage.

You all know that Blogger works in reverse chronological order that is it displays your latest post first. People usually land on your blog’s homepage in order to find the content frequency and to pick the topic that they are interested on. Your homepage is the popular point of entry, so make sure you are reducing the page load speed and making your readers to scroll less.

How to limit / change number of posts displayed on Blogger homepage

In Blogger you have the option where you can edit the number of posts to be displayed in homepage. Let’s see how to change.

Login to your Blogger account and choose your blog.
Now go to settings >> posts and comments.
Enter the number of posts to be displayed in show at most on the main page field.
Save settings and check out your homepage.

Another method

In your Blogger dashboard navigate to Layout menu.
In Layouts you will see a segment called blog posts.
Click on edit and now you will see a popup window with several settings.
Enter the number of posts to be displayed on main page and save.

According to your blog posting frequency you can alter the setting to number of posts or number of days with posts. Based on site layout, niche and post frequency one can change or limit the number of posts in homepage. In Blogger the page size is restricted to 1mb so we suggest you to lower the number of posts in homepage.

Hope this helped you on how to change number of posts displayed on Blogger homepage. Share it and subscribe to our RSS feeds.

How do I remove 'Powered by Blogger' from my blog?

“removing powered by blogger” i will take my time to lay the process step by step. relax and enjoy!

Step-1:

Login to your blog Dashboard, click on Template Tab and open the HTML editor of your blog.

Step-2:

Search these two lines of html codes and change/ replace showaddelement=’no‘> with showaddelement=’yes‘> shown in the first line and locked=’true‘ with locked=’false‘ shown in the second line.

You may directly jump to Attribution1 Gadget from the template drop-down menu option called Jump to widget appeared on top of the HTML template editor.

Step-3:

Save template.

Step-4:

Go to the Layout option tab of your blog and click on Edit link of the Attribution Widget. Now, you will see the additional option to remove the widget.

Step-5:

Finally, click on the Save arrangement button shown at the top-right corner and enjoy!

Now, you can easily add your own text linked copyright messages and other information by adding new Text or HTML/JavaScript Gadget in your blog footer.

Note that this method only delete the blogger attribution from web version of Blogger template and therefore the mobile visitors will still see the Powered by Blogger at the footer of your blogger blog.

Hence, you have to change the Blogger mobile templates also so that the attribution link will be removed from mobile template.

Just go to Template Tab again and click on customize mobile template button. Now, select Custom from drop down options under Choose mobile template and save it. Custom adapts your template customizations to mobile.

Hope it Solves Your Problem?

HOW TO CUSTOMISE THE READ MORE JUMP LINK ON BLOGGER

Today’s tutorial is all about the “read more” jump link on Blogger. I’ll go through how to add it to your blog, change the text, add the post title, add an image and customise the look of it.

The default “read more” link doesn’t really stand out and let people know that there’s more to the post which is why most people like to change it. There’s so many ways to customise this so try out a couple and see what you prefer.

HOW TO MANUALLY INSERT JUMP LINK IN A POST

When writing a post in Blogger, click the little broken page to insert a “read more” jump link.

HOW TO CHANGE THE JUMP LINK TEXT

Go to Layout > Blog Post > Edit > Main Page Options and change the Post Page Link Text.

You can alter the text manually in your HTML too. To do this go to Template > Edit HTML > Search for jump-link and find the following 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>

Change <data:post.jumpText/> to whatever you want to appear like Read More or Continue Reading for example. Save your template.

HOW TO SHOW POST TITLE IN THE JUMP LINK TEXT

To add the title of the post after the read more text go to Template > Edit HTML > Format Template. Search for jump-link and find the following 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>

Add <data:post.title /> after <data:post.jumpText/> so it looks like

<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/> <data:post.title />

</a>

</div>

</b:if>

Save your template

REMOVE THE AUTO-JUMP TO AFTER JUMP-BREAK

After clicking “read more”, the page reloads and jumps to the line after the jump-break. If you want to remove this so it loads the post normally, go to Template > Edit HTML > Search for jump-link and find the following 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>

Remove + &quot;#more&quot; so you are left with the following code…

<b:if cond='data:post.hasJumpLink'>

<div class='jump-link'>

<a expr:href='data:post.url' expr:title='data:post.title'>

<data:post.jumpText/>

</a>

</div>

</b:if>

Save your template.

ADD IMAGE, ICON OR BUTTON INSTEAD OF READ MORE LINK

There’s quite a few ways to do this, but here is a really simply way. Go to Template > Edit HTML > Search for jump-link and find the following 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>

Replace <data:post.jumpText/> with <img src='DIRECT IMG URL' /> so that it looks like this

<b:if cond='data:post.hasJumpLink'>

<div class='jump-link'>

<a expr:href='data:post.url +& quot;#more&quot;' expr:title='data:post.title'>

<img src='DIRECT IMG URL' />

</a>

</div>

</b:if>

Now replace DIRECT IMG URL with the direct image source of the image you want to use and save your template.

HOW TO STYLE THE “READ MORE” LINK WITH CSS

To keep the link but make it suit your blog design go to Template > Edit HTML and find ]]></b:skin>, if you’re having trouble find the b:skin tag, check out this post.

Add the following above ]]></b:skin> and add your styling in between the brackets.

.jump-link {

/* Style Entire Jump Link */

}

.jump-link a {

/* Style Jump Link Text Link */

}

.jump-link a:hover {

/* Style Jump Link Text Link On Hover Over */

}

For example, you could use something like the following (or from our post on how to style a link to look like a button)

.jump-link {

text-align: right; /* align right of post - can also use left or center */

background: #333333; /* change background colour for full width of jump link */

}

.jump-link a {

background: #333333; /* change background colour for just the text part */

color: #eeeeee; /* change text colour */

padding: 5px; /* change spacing around text */

border-radius: 5px; /* change radius of background */

font-size: 12px; /* change font size */

}

.jump-link a:hover {

background: #eeeeee; /* change background colour on hover */

color: #333333; /* change text colour on hover */

text-decoration: none; /* no text underline on hover */

}

which will make it look similar to the following

TIP: Make sure you aren’t missing any colons, semi-colons or brackets in your CSS! Any errors will stop the browser from reading it correctly.

BLOGGER SHOWING ONLY ONE POST ON HOME PAGE

Are you one of those bloggers feeling troubled by the auto pagination happening on blogger?
You happily set the No. of posts that blogger should show on your home page to X number thinking that blogger will display X number of posts on home page. However, you noticed that instead of X No. of posts, blogger is showing either 1 or 2 posts or some other lesser number Y.
You must be wondering why this has happened and Googled to find a solution and reached here.
You may not be aware that even if you set the no. of posts to be shown as X, blogger may want to show only 2-3 posts or may be even 1 post due to the fact that your posts are long and may require usage of a lot more resources of Google Servers than what a single blog should be doing. Well you can read more information here.
Let me quickly get to the solution to this that I could find out. When you are writing a post in the blogger post composer you will see an option called "Insert Jump Break". Refer to the graphic below:

See the Red Marked areas for reference. Top button is for "Insert jump break"

You can use this option and give a jump break somewhere in the middle of the post. This is actually meant to ensure that not all the content of the post will be shown on the home page. This is in case if you want to display small snippets of 7-8 or more posts on home page with each snippet showing a bit of content and ending with "Read More". Similar to what is seen on my home page. 7 posts are shown but not the complete content is seen. Even if your blogger template is programmed to automatically display snippets, you must insert the jump break to make sure that the number of posts that you have entered in the settings and the actual number posts shown on the home page, tally.

I can't technically explain how this works with the blogger logic of auto-pagination but yes, this did work for me. When I completed adding jump breaks on first 20-30 posts, the problem was solved. Now I've set the number to 7 and you'll see that there are 7 posts showing on the home page.

So try this solution and leave a comment if this works.