How To Change The Number Of Homepage Posts In Blogger?

Are you looking for Whence To Change The Number Of Homepage Posts In Blogger?

Are By changing the number of the post in blogger homepage you can get a lot of benefits such as SEO optimizing, Fast loading and many more.

How To Change The Number Of Homepage Posts In Blogger?

When we are blogging, our blog’s homepage will be getting a more important role than other blog pages. That is the important one to gets more exposure to our blog. Also with the first implication of your homepage will help to attract readers for your blogger. It helps to make a  positive picture of your blog. The homepage is the most popular point of entry because people usually land on the blogger’s homepage in order to find the content and to pick the topic that they are most interested in. We add a different type of post and those not be the same size. 

What are the importance of change the number of posts displayed on blogger Homepage?

Change The Number Of Homepage Posts In Blogger will make a lot of advantages for bloggers.

Blogger works in reverse chronological order that is it displays your latest post first. So readers will be able to access your homepages easily and speedy within few seconds.

Both displaying too many posts as well as few posts on the homepage will because of too many issues. Displaying too many and long posts on the homepage may cause to reduce the homepage load speed and it takes a long time to load the page. Also showing too many posts will make your homepage look so complex and ugly. Displaying a few posts will because to make a negative picture of your blog.

In default, you can display 20 posts per label page but in third-party templates, it depends on your template or sometimes displaying a maximum of 2 posts per page. So we have to customized, limited or change the number of posts displaying. Changing the number of a blog post which displays on blogger home page will cause to Search Engine Optimization. So we must be careful when selecting the proper number of posts to display on the homepage. Upon a number of posts, you selected, will be caused to effect on your blog load time, speed and reader mind. So we have recommended you to display a few numbers of the post to display (5-7 posts).

With the minimum number of post that displaying will easily catch the eyes of search engines. Also, it gets only a few seconds to load and you can access speedy to your homepage. Then it will cause to gain more traffic to your blog.

How to change the number of posts displayed on the homepage in Blogger?

There are different methods to change or limit the number of posts displayed on your blogger homepage. Then let see,

Method 01

Change The Number Of Homepage Posts In Blogger; using blogger setting.

1.      Login to your blogger account and choose your blog.

2.     Go to Settings

3.      Then click on Posts and comments.

4.      Enter the number of posts that want to be displayed on the main page, in the box in front of Show at most?

5.      Then click on Save setting.

*Try to keep the minimum post from 5 to 7 on your blogger homepage.

Method 02

Change The Number Of Homepage Posts In Blogger; using setting layout

1.         Login to your blogger account and choose your blog.

2.        Click on the Layout menu.

3.        Click on edit and now you will see a popup window.

4.       Enter the number of posts that want to be displayed on the main page, in the box in front of the number of posts on the main page.

5.         Then click on Save.

Now check your homepage and see the above methods are work. If we are using default or custom blog template in sometimes changing the number of post page will be not working. If it’s not a success still displaying two or few posts, then try to follow the below methods.

Method 03

Change The Number Of Homepage Posts In Blogger; By editing Template

1.                  Login to your blogger account and choose your blog.

2.                  Click on the theme.

3.                  Click on Edit Template.

4.                  Then search if you can find below-highlighted code your blog template. (CTRL+F)

<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=4;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>

    Then replace the number with the number of posts you want to display.

If the above methods are not working for you just, try with below Other methods

Method 04

If the above method is not working, then follow the below method that has succeeded for me.
Put the jump Break for in each and every post.

 

Method 05

Reduce the image sizes or optimizes images by using software like Photoshop or free online image optimization service.

Method 06

Remove unnecessary widgets and do not use many widgets.

By using the above methods, you can easily Change The Number Of Homepage Posts In Blogger. Also, that number of posts on homepage blogger will help to increase your SEO. 

I hope the above methods help you to Change The Number Of Homepage Posts In Blogger. And if you have any problem or know more fixes on How to Change The Number Of Homepage Posts In Blogger? Please share with us in the comments section below. 

How to add a simple Breadcrumbs navigation in your blogger blog?

Breadcrumbs are one way that you can use to navigate your blogger blog easily. 

Breadcrumbs help readers to navigate your blog post and let them to easily surf through your blogger post pages. Breadcrumbs show navigation of your blogger from your homepage to the current blogger post page. Breadcrumbs navigation displays your blogger Homepage, post labels or categories as well as your blog post title. 

Not only navigate also Breadcrumbs with Markup will help to improve your blog site snippet in Google. So Breadcrumbs is a very useful widget for our blog like breaking news bar, related post widget, recent post widget and back to top button widgets those we discuss in previous posts.

What is Breadcrumbs?

Breadcrumbs are a navigation element used to show the location of the current page with respect to the blogger home page. Breadcrumbs allow your readers to keep track of the location of your current blog post on your blog site. It displays links from homepage, labels or categories to your blog post title. If your blogger has a lot of categories with subcategories Breadcrumbs will be very helpful. Its appear horizontally across the top of a blog post page above the post title.

Let take an example,

If you are publishing a post, your Breadcrumbs look like this;

Home page > Label/category of page > Sub Label/sub category of page > Sub Label/sub category of page > your post title

Benefits of adding Breadcrumbs in your blogger blog

·         Help to navigate your site

·         Help to easily identify your post page locations, its categories

·         Increase your blog page views

·         Improve your site’s internal links

·         Improve your site SEO

·         Improve your site snippet in google

·         Reduce your bounce rate

·         Easy to track back to related category or homepage

Most of the time Breadcrumbs not available in blogger template so we need to add it into our blog site. also if you interest to edit your current Breadcrumbs this article may be useful for you. Let see,

How to add simple looking Breadcrumbs navigation in your blogger?

Step 01: Sign in to Blogger blog

Step 02: Go to Dashboard >> Template>> click HTML button

Step 03: Now find <data:post.body/>  (if not find <div class='blog-posts hfeed'> )

Step 04: Copy below code and paste above the <data:post.body/> code (Or below <div class='blog-posts hfeed'> [if there are two code place below first code]).

*If you like to edit your current Breadcrumbs, then find <div class='breadcrumbs'> or <div class=' breadcrumb '> and replace your current breadcrumb code with below code. 

<div class='breadcrumbs'>

<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a class='homex' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span>

»

<b:loop values='data:posts' var='post'>

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

<b:loop values='data:post.labels' var='label'>

<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>

<a expr:href='data:label.url' itemprop='url' rel='tag'><span itemprop='title'><data:label.name/></span></a></span>

<b:if cond='data:label.isLast != "true"'> » </b:if>

</b:loop>

<b:else/>

»Unlabelled

</b:if>

</b:loop>

 </div>

*If above code not working or you want to add page title to Breadcrumbs, then replace above code with below code. 

<nav id='breadcrumb'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>

<div class='breadcrumbs'>

<a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'>

<span itemprop='title'>Home</span></a>&#187;

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

<b:loop values='data:post.labels' var='label'>

<span typeof='v:breadcrumb'>

<a expr:href='data:label.url' itemprop='url' property='v:title' rel='v:url' title='Categories'>

<span itemprop='title'><data:label.name/></span></a></span>

<b:if cond='data:label.isLast != &quot;true&quot;'>&gt;

</b:if></b:loop></b:if>

&#187;

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

<span itemprop='title'>

<data:post.title/>

</span></a></div></div></b:if></nav>

Step 05: Now find  ]]></b:skin>  and copy and paste below code before or above ]]></b:skin>  code.

. breadcrumbs {

padding:5px 5px 5px 0px;

margin: 0px 0px 15px 0px;

font-size:90%;

line-height: 1.4em;

border-bottom:3px double #e6e4e3;

font-weight:bold;

}

Step 06: Save your template

 OK. Now Breadcrumbs has enabled in your blogger blog. Check it and see the results.

That will help your readers to navigate your blog posts and its locations. Not that it will also help you to increase blogger SEO. 

I Hope the above 17 tips help you to add a simple Breadcrumbs navigation in your blogger blog. And if you have any problem or know more fixes on this simple Breadcrumbs navigation for blogger blog, Please share with us in the comments section below. Happy blogging!

How to add recent post widget with Thumbnails or without Thumbnails or stylish widget into your blogger blog?

Adding recent post widget with Thumbnails or without Thumbnails or with style into your blogger blog can be helpful for you in different ways.

By adding recent post widget into your blogger blog you can get a lot of benefits. If you are thinking it is not necessary to add related posts to your blogger blog, then you are wrong. By displaying related posts in your blogger blog You can easily keep your readers engaged with your blogger blog, also it helps them to easily navigate with your blogger related posts links those you have recently written. 

If your blogger blog homepage has a lot of labeled grids or its posts published as the label or category wise then readers cannot identify what are your recent posts, so if you add that recent post widget into your blogger blog it will help your readers to identify your recent post among the other posts in your homepage. So your readers can find what’s new on your blog.

Recent post widget is the very useful widget for our blog like breaking news bar, related post widget, Breadcrumbs navigation and back to top button widgets those we discuss in previous posts.

What are the recent posts?

Recent posts are latest or recent published posts those related to your current reading posts. It displays base on the latest date of the post published in your blogger blog. latest posts are in the top and old post going to down or below the latest posts. So readers can easily find your recent posts quickly among the previous articles in your blogger blog.  

That recent post widget helps you to display your latest posts on your blogger slide bar or footer. There is a different type of recent post widgets. Some will display only post titles, some will display recent post title with image thumbnails or some will display recent post title with image thumbnails with post summary, publish date and amount of post comments.

Below are some benefits of adding recent post widget to your blogger. 

·         Improve blog site performances

·         Improve blog traffic

·         Improve internal links

·         Decrease your blog bounce rate

·         Improve your page views

·         Improve user interaction

·         Improve user experience and improve blogger SEO

·         Readers can quickly identify your latest posts

How to add recent post widget with Thumbnails or without Thumbnails or with stylish into your blogger blog?

How to add recent post widget with Thumbnails into your blogger blog?

Step 01: Sign into your blogger blog

Step 02: Go to Dashboard >> Layout>> Add a widget >> HTML/JavaScript widget

Step 03: Copy and Paste below code into the widget

<style type='text/css'>

img.recent_thumb {padding:1px;width:55px;height:55px;border:0;

float:left;margin:10px;}

.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}

ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}

.recent_posts_with_thumbs a {text-decoration:none;}

.recent_posts_with_thumbs strong {font-size:10px;}</style>

<script style='text/javascript' src='http://recent-post-techkgp.googlecode.com/files/recent%20post_www.techkgp.com.js'></script>

<script style='text/javascript'>

var numposts = 5;

var showpostthumbnails = true;

var displaymore = false;

var displayseparator = true;

var showcommentnum = false;

var showpostdate = false;

var showpostsummary = true;

var numchars = 100;</script>

<script src='http://www.yourdomain.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

Customize – Replace http://www.yourdomain.com with your blogger URL.

                      Replace value var numposts = 2 with the number of maximum posts that you want to display.

                      Replace value var numchars = 100 with any number of characters that you want to show in summary of recent posts.

                      By changing true or false you can customize activate or deactivate of any feature of your recent post widget.

Step 04: Save your widget and replace where you want to display your recent post widget.

Step 05: Save the layout.

Now process to view your recent post widget.

How to add recent post widget without Thumbnails into your blogger blog?

Step 01: Sign into your blogger blog

Step 02: Go to Dashboard >> Layout>> Add a widget >> HTML/JavaScript widget

Step 03: Copy and Paste below code into the widget

<script type=”text/javascript”>

function recentpostslist(json) {

 document.write(‘<ol>’);

 for (var i = 0; i < json.feed.entry.length; i++)

 {

    for (var j = 0; j < json.feed.entry[i].link.length; j++) {

      if (json.feed.entry[i].link[j].rel == ‘alternate’) {

        break;

      }

    }

var entryUrl = “‘” + json.feed.entry[i].link[j].href + “‘”;//bs

var entryTitle = json.feed.entry[i].title.$t;

var item = “<li>” + “<a href=”+ entryUrl + ‘” target=”_blank”>’ + entryTitle + “</a> </li>”;

 document.write(item);

 }

 document.write(‘</ol>’);

 }

</script>

<script src=”http://www.yourdomain.com/feeds/posts/default?max-results=2&alt=json-in-script&callback=recentpostslist”></script>

Customize – Replace http://www.yourdomain.com with your blogger URL.

                           Replace 2 with the number of maximum posts that you want to display.

Step 04: Save your widget and replace where you want to display your recent post widget.

Step 05: Save layout.

Now process to view your recent post widget.

How to add Gallery style recent post widget into your blogger blog?

Step 01: Sign into your blogger blog

Step 02: Go to Dashboard >> Layout >> Add a widget >> HTML/JavaScript widget

Step 03: Copy and Paste below code into the widget

<style>

.recent-grid {padding:0;clear:both;}

.recent-grid:after {content:"";clear:both;display:table;}

.recent-grid .galleryview{position:relative;display:inline-block;margin:6px 0;overflow:hidden;}

.recent-grid .galleryview a{text-decoration:none;float:left;position:relative;margin:0 6px}

.recent-grid .galleryview .ptitle{display:block;background:rgba(0,0,0,.7);clear:left;position:absolute;font-size:10px;line-height:1.3em;text-align:left;bottom:3px;left:3px;right:3px;top:3px;color:#fff;overflow:hidden;padding:5px;word-wrap:break-word;visibility:hidden;opacity:0;backface-visibility:hidden;transition:all .2s}

.recent-grid .galleryview:hover .ptitle{visibility:visible;opacity:1}

.recent-grid a img{background:#fdfdfd;float:left;padding:2px;border:1px solid #e3e3e3;transition:all .3s}

.recent-grid a:hover img {border-color:#bbb;}

</style>

<script type='text/javascript'>

//<![CDATA[

// Recent Post Gallery

function gallerygrid(a){for(var t=a.feed.entry||[],e=['<div class="recent-grid">'],i=0;i<t.length;++i){for(var l=t[i],r=l.title.$t,n=l.media$thumbnail?l.media$thumbnail.url:"http://2.bp.blogspot.com/-4fCf53FqYKM/Vccsy7apoZI/AAAAAAAAK4o/XJkv3RkC0pw/s1600/default%2Bimage.png",s=n.replace("s72-c","s"+recentpost_thumbs+"-c"),h=l.link||[],c=0;c<h.length&&"alternate"!=h[c].rel;++c);var d=h[c].href,m='<img src="'+s+'" width="'+recentpost_thumbs+'" height="'+recentpost_thumbs+'"/>',p=recentpost_title?'<span class="ptitle">'+r+"</span>":"",g='<a href="'+d+'" target="_blank" title="'+r+'">'+m+p+"</a>";e.push('<div class="galleryview">',g,"</div>")}e.push("</div>"),document.write(e.join(""))}

//]]>

</script>

<script>

var recentpost_thumbs = 8;

var recentpost_title = true;

</script>

<script src="/feeds/posts/summary?max-results=9&amp;alt=json-in-script&amp;callback=gallerygrid"></script>

Customize - Replace value var recentpost_thumbs = 8; with the number of maximum posts that you want to display.

Step 04: Save your widget and replace where you want to display your recent post widget.

Step 05: Save the layout.

Now process to view your recent post widget.

How to add simple stylish recent post widget into your blogger blog?

Step 01: Sign into your blogger blog

Step 02: Go to Dashboard >> Layout>> Add a widget >> HTML/JavaScript widget

Step 03: Copy and Paste below code into the widget

<div class="recentpostarea">

<style type="text/css">

.recentpostarea {list-style-type: none;counter-reset: countposts;}

.recentpostarea a {text-decoration: none; color: #49A8D1;}

.recentpostarea a:hover {color: #000;}

.recentpostarea li:before {background: #69B7E2;float: left;counter-increment: countposts;content: counter(countposts,decimal);z-index: 2;position:relative;font-size: 20px;font-weight: bold;color: #fff; padding: 0px 10px; margin: 15px 5px 0px -6px; border-radius: 100%;}

li.r-p-title { padding: 5px 0px;}

.r-p-title { font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}

.r-p-title a {text-decoration: none;color: #444;font-weight: bold;font-size: 13px; padding: 2px;}

.recent-post-date {padding: 5px 2px 5px 30px; font-size: 11px; color: #999; margin-bottom: 5px;}

.r-p-summ { border-left: 1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 11px; font-family: Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif; font-size: 15px;}

</style>

<script type = "text/JavaScript">

function showrecentposts(json) {for (var i = 0; i < posts_number; i++) { var entry = json.feed.entry[i];var posttitle = entry.title.$t;var posturl;if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}} posttitle = posttitle.link(posturl);var readmorelink = "... read more";readmorelink = readmorelink.link(posturl); var postdate = entry.published.$t;var showyear = postdate.substring(0,4);var showmonth = postdate.substring(5,7);var showday = postdate.substring(8,10);var monthnames = new Array(); monthnames[1] = "Jan";monthnames[2] = "Feb";monthnames[3] = "Mar";monthnames[4] = "Apr";monthnames[5] = "May";monthnames[6] = "Jun";monthnames[7] = "Jul";monthnames[8] = "Aug";monthnames[9] = "Sep";monthnames[10] = "Oct";monthnames[11] = "Nov";monthnames[12] = "Dec"; if ("content" in entry) {var postcontent = entry.content.$t;}else if ("summary" in entry) { var postcontent = entry.summary.$t;} else var postcontent = ""; var re = /<\S[^>]*>/g; postcontent = postcontent.replace(re, ""); document.write('<li class="r-p-title">');document.write(posttitle);document.write('</li><div class="r-p-summ">');if (post_summary == true) {if (postcontent.length < summary_chars) {document.write(postcontent);} else { postcontent = postcontent.substring(0, summary_chars);var quoteEnd = postcontent.lastIndexOf(" ");postcontent = postcontent.substring(0,quoteEnd);document.write(postcontent + ' ' + readmorelink);}} document.write('</div>'); if (posts_date == true) document.write('<div class="recent-post-date">' + monthnames[parseInt(showmonth,10)] + ' ' + showday + ' ' + showyear + '</div>'); }}

 </script>

 <script>

 var posts_number = 5;

 var posts_date = true;

 var post_summary = true;

 var summary_chars = 80;

 </script>

 <script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts"></script>

 <noscript>Your browser does not support JavaScript!</noscript>

</div>

*Customize - Replace value var posts_number = 5; with the number of maximum posts that you want to display.

Step 04: Save your widget and replace where you want to display your recent post widget.

Step 05: Save the layout.

Now process to view your recent post widget.

OK, now your blogger blog has a recent post widget with Thumbnails or without Thumbnails or with Gallery style or with Simple Stylish. As I mentioned above you can get a lot of advantages for your blogger blog. With the above codes, you can customize your recent post widget as you prefer. 

I Hope the above methods help you to add recent post widget with Thumbnails or without Thumbnails or stylish widget into your blogger blog. And if you have any problem or know more fixes on this recent post widget with Thumbnails or without Thumbnails or stylish widget for to your blogger blog, Please share with us in the comments section below. Happy Blogging!