X
Publisher: Sigit purnomo kangsigit.com@gmail.com

Automatic Load Posting via Scroll Down on Bloggers Without Boundaries

One trick is going to show how to display some of the posts are automatically in the main page / homepage and search page, scroll down on the label with the blogger. That is, it will execute for post pages or static page.

However, that does not mean it can not be used for posts and static pages, but would be recommended if given an exception. Unless you can remodel sedimikan script that it can be adapted to the look of your blog.

Before you read any further, please check out samples or demo here and please use the scroll or drag the board to look at the page below. After looking at the bottom content, will appear an animated image loading, and then again the next post list automatically.

It works according to how many lists / list on the home page of your blog. If your blog is featuring ten post, then when visitors scroll the page of your blog post to reach the ten, they'll see the loading and emerged ten of the list of your blog posts automatically.

It is very useful to display the list post very quickly and without consuming a lot of quota. This is because the browser will only load the parts of the content, while others including comments will not be updated. That's the reason why I recommend to you to grant exceptions from being shown at page posts and static.

Advertisement

For my friend who wanted to try, please follow the instructions below:

Step 1
  • Go to Template >> Edit HTML
  • Find this code: 
<b:includable id='post' var='post'>
...other code...
</b:includable>
  • Replace with:
<b:includable id='post' var='post'>
<div class="ksig_item">
...other code...
</div>
</b:includable>


Step 2
  • Find this code:
<b:includable id='main' var='top'>
...other code...
</b:includable>
  • Replace with:
<b:includable id='main' var='top'>
<div class="ksig_container">
...other code...
</div>
</b:includable>


Step 3
  • Find this code:
<b:includable id='nextprev'>
...other code...
</b:includable>
  • Replace with:
<b:includable id='nextprev'>
<div id='ksig_pagination'>
...other code...
</div>
</b:includable>


Step 4
  • Find this code:
<a expr:href='data:olderPageUrl'> ...other code... </a>
Sometimes, the code as above there are two. If correct, replace all of them.
  • Replace with:
<div id='ksig_page_next'>
<a expr:href='data:olderPageUrl'>...other code...</a>
</div>

Advertisement
Step 5
  • Find code </head>
  • Add the following code on it/ before </head>:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src='http://britha.com/Upload/MyFile/JQueryAjaxScrolling.js' type='text/javascript'></script>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type="text/javascript">
//Get tutorial: http://www.kangsigit.com/2016/03/load-posting-otomatis-via-scroll-down.html
jQuery.ksig({container : '.ksig_container',item: '.ksig_item',pagination: '#ksig_pagination',next: '#ksig_page_next a',loader: 'your-own-hosting/loading.gif'});
</script>
  </b:if>  </b:if>
Save Template and see the results..
no image
Add Comments
0 Comments
Click Here to Add Comments

No Comment