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

كنا قد تعرضنا سابقاً لموضوع التمرير اللانهائي وقد طلب البعض ان يكون الامر اختياري ان يكون هناك زر عند الضغط عليه تظهر المواضيع وها نحن نلبي الطلب وذلك بعد ايجاد نسخة جيده تعمل بشكل مضبوط ولا تحتاج دمج في التصميم فهناك بعض الطريق تتطلب ان يتم دمج الزر في التصميم منذ البداية حتى يعمل اى يكون جزء من التصميم اما هذا الزر فيعمل تلقائياً ويمكنك اضافته وازالته بسهوله فهو يتم اضافته في آداة 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%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>

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

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

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

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

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

هذا #000000 هو لون الإطار الخارجي للزر
وهذا #000 لون الخلفية عند تمرير الماوس
وطبعا قليل من المعرفة بـ CSS ستجعلك تغير كما تشاء بالزر

Add Comment