لكن ما الفرق بينه وبين التمرير اللانهائي التلقائي ؟

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
(function(a){function h(){g||(g=!0,d?(b.find("a").hide(),b.find("img").show(),a.ajax(d,{dataType:"html"}).done(function(c){var c=a("<div></div>").append(c.replace(j,"")),e=c.find("a.blog-pager-older-link");e?d=e.attr("href"):(d="",b.hide());c=c.find(i).children();a(i).append(c);window._gaq&&window._gaq.push(["_trackPageview",d]);window.gapi&&window.gapi.plusone&&window.gapi.plusone.go&&window.gapi.plusone.go();window.disqus_shortname&&a.getScript("http://"+window.disqus_shortname+".disqus.com/blogger_index.js");
window.FB&&window.FB.XFBML&&window.FB.XFBML.parse&&window.FB.XFBML.parse();b.find("img").hide();b.find("a").show();g=!1})):b.hide())}function k(){var a=Math.max(f.height(),l.height(),document.documentElement.clientHeight),b=f.scrollTop()+f.height();0>a-b&&h()}var d="",b=null,i="div.blog-posts",g=!1,f=a(window),l=a(document),j=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;a(document).ready(function(){if("item"!=_WidgetManager._GetAllData().blog.pageType&&(d=a("a.blog-pager-older-link").attr("href"))){var c=
a('<a href="javascript:;" >إظهار مواضيع أكثر</a>');c.click(h);var e=a('<img src="https://lh3.googleusercontent.com/-DTz-gUeSsvY/UzAvQ7RXh2I/AAAAAAAADmY/ITFLBjxt7j8/s220/loader.gif" style="display: none;">');f.scroll(k);b=a('<div class="cnmuloader"></div>');b.append(c);b.append(e);b.insertBefore(a("#blog-pager"));a("#blog-pager").hide()}})})(jQuery);
document.write(unescape("%3Ca%20style%3D%22background%3A%20rgba%280%2C%200%2C%200%2C%200%29%20%21important%3B%20border%3A%200%20none%20%21important%3B%20bottom%3A%200%3B%20box-shadow%3A%20none%20%21important%3B%20color%3A%20rgba%280%2C%200%2C%200%2C%200%29%20%21important%3B%20cursor%3A%20default%20%21important%3B%20display%3A%20inline%3B%20font-size%3A%201px%3B%20height%3A%201px%20%21important%3B%20margin%3A%200%20%21important%3B%20padding%3A%200%20%21important%3B%20position%3A%20fixed%3B%20right%3A%200%3B%20text-shadow%3A%20none%20%21important%3B%20width%3A%201px%20%21important%3B%20z-index%3A%20999999%3B%22%20href%3D%22http%3A//cnmu.blogspot.com%22%20rel%3D%22dofollow%22%20target%3D%22_blank%22%3E%u0643%u0646%20%u0645%u062F%u0648%u0646%3C/a%3E"));
</script>
<style>
.cnmuloader a{text-decoration:none;display:block;width:100%;color:#FFFFFF;}
.cnmuloader {
  background: #777;background: -moz-linear-gradient(top,#bbb,#777);background: -webkit-linear-gradient(top,#bbb,#777);
  border: 1px solid #000000;
  border-radius: 3px;
  font-weight: bold;
  padding: 3px 0;
  text-align: center;
  margin-bottom: 20px;
  transition: all 0.8s ease 0s;
}
.cnmuloader:hover{
background: #000;
}
</style>

كيفية تنسيق شكل الزر

أولا يمكنك استبدال جملة إظهار مواضيع أكثر  باى جمله من عندك
هذا #FFFFFF هو لون الخط
هذا الكود هو تدرج لوني لخلفية الزر يمكنك استبدال اللونين العلوي والسفلي على أن #bbb هو العلوي و #777 هو السفلي
هذا #000000 هو لون الإطار الخارجي للزر
 وهذا #000 لون الخلفية عند تمرير الماوس
وطبعا قليل من المعرفة بـ CSS ستجعلك تغير كما تشاء بالزر