مساحة إعلانية

الثلاثاء، 1 أبريل، 2014

الثلاثاء، 1 أبريل، 2014

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

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

هناك 18 تعليقًا:

  1. أحسنت أخى
    هل من وسيلة اتصال دائمة لك بعيدا عن المدونة ؟
    https://www.facebook.com/mahmoudsaeedelbohy

    ردحذف
    الردود
    1. حياك الله أخي محمود , للأسف انا سئ جداً في استخدام المواقع الإجتماعية فلا احسن التواصل عبرها خصوصاً فيما يخص التدوين بالكاد استخدمها للنشر , عموما يا طيب لو هناك اى شئ يحتاج خصوصية في الحديث فقط تواصل معي عبر صفحة المراسلة بالبريد , وشكراً لمرورك

      حذف
  2. اضافة جيدة بحثت عنها كثيرا ولم اجدها انت عبقر بلوجر مصرى

    ردحذف
    الردود
    1. شكراً لمرورك أخي الكريم وكلامك أكثر من قدري لا عبقري ولا شئ هو تيسير الله ويسعدني اني كنت سبباً في إيجاد ما تبحث عنه , تحياتي

      حذف
  3. جميل اخي عمرو =q دائما مبدع

    ردحذف
    الردود
    1. أشكرك أخي الغالي سعيد على مرورك الكريم =r

      حذف
  4. شكرا لك على الموضوع لقد أضفته لمدونتي:

    chatolk
    شتولك بدون تسجيل شات

    ردحذف
    الردود
    1. سررت بمرورك وبإذن الله تعود الإضافة بالنفع على مدونتك تحياتي

      حذف
  5. السلام عليكم ورحمة الله وبركاته
    الإضافة جدا رائعة ماشاء الله عليك اخي الغالي عمرو
    مبدع كما عودتنا بارك الله فيك وجزاك كل خير في امان الله

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      وخيراً جزاك الله يا طيب
      اسعدني مرورك أخي بدر =r

      حذف
  6. اضافه الى اكواد الالوان كود #F00 هو للون الاحمر و #000 هو للون الاسود
    انا مبرمج html

    ردحذف
    الردود
    1. أهلا يك اخي الكريم وشكراً على الإضافة

      حذف
  7. احسنت يا اخى موضوع جميل جدا
    وارجو منك لو توضح فى موضوع طريقة ترقيم الصفحات لان انا حاولت كتير ومش عارف اوصل لاى نتيجه

    ردحذف
    الردود
    1. هناك موضوع بالفعل في المدونة عن الترقيم
      http://cnmu.blogspot.com/2013/02/Page-Navigation-widget.html

      حذف
  8. الردود
    1. قد يرجع السبب لتواجد نسخ ترقيم او بواقي نسخة ترقيم
      او ان القالب لا يحتوي ازرار تنقل اساسية بل ادوات تنقل بعض القوالب المتجاوبه الحديثه بها هذا المشكل

      حذف
  9. لا أعلم لماذا لاتظهر الصور ؟؟

    ردحذف

نسعد ونتشرف بتعليقاتكم
لكن هناك شروط يجب اتباعها لضمان نشر التعليقات
1ان يكون التعليق يخص محتوى الموضوع
2ان لا يحتوي التعليق اى روابط دون داعي
3إن أردت إضافة كود حوله اولا بمحول الأكواد
4أن لا يحتوي التعليق اي الفاظ او اساءات لاى احد
5أى سؤال بعيد عن محتوى الموضوع يرجى استخدام ركن الأسئلة

جميع الحقوق محفوظة لــ كن مدون 2013-2015 ©