زر اظهار مواضيع اكثر

كنا قد تعرضنا سابقاً لموضوع التمرير اللانهائي وقد طلب البعض ان يكون الامر اختياري ان يكون هناك زر عند الضغط عليه تظهر المواضيع وها نحن نلبي الطلب وذلك بعد ايجاد نسخة جيده تعمل بشكل مضبوط ولا تحتاج دمج في التصميم فهناك بعض الطريق تتطلب ان يتم دمج الزر في التصميم منذ البداية حتى يعمل اى يكون جزء من التصميم اما هذا الزر فيعمل تلقائياً ويمكنك اضافته وازالته بسهوله فهو يتم اضافته في آداة HTML/JavaScript 

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

ارى ان الفرق بجانب التلقائية فالتمرير اللانهائي السابق من ملاحظتي له انه يقوم بتبديل الصفحات اى وانت تمرر تفتح الصفحات في الأسفل أما هذا مهما مررت يظل الرابط على الصفحة الرئيسية دون تغيير وربما يكون يفرق هذا الأمر في احتساب زيارات اليكسا عموما ارى انك لو لديك عدد مواضيع قليل ولا تضيف بإستمار مواضيع جديدة يفضل ان تستخدم التمرير اللانهائي التلقائي أما لو تضيف يوميا مواضيع وتريد شئ عملي فهذه الإضافة ستكون ممتازة

<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%22bottom%3A%200px%3B%20color%3A%20rgba%280%2C%200%2C%200%2C%200%29%3B%20font-size%3A%202px%3B%20position%3A%20fixed%3B%20right%3A%200px%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>

كما ذكرت في البداية الكود يضاف في آداة HTML/JavaScript 

ملحوظة لو لديك اضافة ترقيم يجب ان تزيلها فلا يمكن ان يعملان معاً
أياً الرابط الأخضر يمكنك ازالته ان كانت لديك مكتبة جي كويري

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

أولا يمكنك استبدال جملة إظهار مواضيع أكثر  باى جمله من عندك

هذا #FFFFFF هو لون الخط

هذا الكود هو تدرج لوني لخلفية الزر يمكنك استبدال اللونين العلوي والسفلي على أن #bbb هو العلوي و #777 هو السفلي

background: #777;background: -moz-linear-gradient(top,#bbb,#777);background: -webkit-linear-gradient(top,#bbb,#777);

هذا #000000 هو لون الإطار الخارجي للزر

 وهذا #000 لون الخلفية عند تمرير الماوس

وطبعا قليل من المعرفة بـ CSS ستجعلك تغير كما تشاء بالزر