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

الخميس، 13 فبراير، 2014

الخميس، 13 فبراير، 2014

اضافة خيارات التنقل مع أسماء المواضيع

Show Next and Previous Post Titles
احدى الإضافات المميزة لمدونات بلوجر وهي اضافة خيارات التنقل مع العناوين وهي تعطي لمحة للزائر عن الموضوع التالي او السابق بدلا من ان يضغط دون ان يعرف الى اين يتوجه وبإذن الله سنعرض ايضاً طريقة تنسيقها لتتماشى مع الوان مدونتك فقط تابع معي طريقة التركيب والتنسيق جيداً ولكن قد يتبادر سؤال مع بداية القراءة هل هذه الإضافة تستبدل اضافة بلوجر الأساسية للتنقل ام هي اضافة مستقلة ؟ والجواب هي اضافة مستقله لكن ايضاً سيكون بالموضوع طريقة ازالة الإضافة الأساسية من المواضيع لمن لا يرغب بوجود الإثنين معاً لكن اولاً يمكنك معاينة الإضافة عبر الرابط التالي

والآن مع طريقة التركيب

أول شئ أضف الكود التالي فوق الوسم </head>

والكود عبارة عن سطرين الأول يخص مكتبة jquery  فإن كنت اضفت المكتبة فلا تضيف السطر الأول

والثاني يخص خط  droid arabic kufi فإن كان لديك الخط لا تضيف السطر الثاني
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>

<link href='http://fonts.googleapis.com/earlyaccess/droidarabickufi.css' rel='stylesheet' type='text/css'/>
 وطبعا لو كان لديك الإثنين لا تضيف الكود


والآن اضف الكود التالي بعد <data:post.body/>
 مع ملاحظة ان <data:post.body/> يتكرر اكثر من مرة في القالب لذا يجب ان تجد المناسب منهم وذلك بالتجربة على كل واحد مرة حتى تجد المضبوط فلا تنسى أخذ نسخة احتياطية من قالبك
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <ul class='cnmu-pager'>

            <li class='next'>
    <b:if cond='data:newerPageUrl'>
    <i class='fa fa-chevron-right'/><a class='newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' rel='next'/>
    <b:else/>
    <i class='fa fa-chevron-right'/><a rel='next'><strong>أحدث موضوع</strong> <span>انت تشاهد آحدث موضوع</span></a>
    </b:if>
    </li>

          <li class='previous'>
    <b:if cond='data:olderPageUrl'>
    <i class='fa fa-chevron-left'/><a class='older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' rel='previous'/>
    <b:else/>
    <i class='fa fa-chevron-left'/><a rel='previous'><strong>أقدم موضوع</strong> <span>أنت تشاهد آخر موضوع</span></a>
    </b:if>
    </li>

        </ul>


    <script type='text/javascript'>
    //<![CDATA[
    (function($){  
        var newerLink = $('a.newer-link');
        var olderLink = $('a.older-link');
        $.get(newerLink.attr('href'), function (data) {
         newerLink.html('<strong>التالي</strong> <span>'+$(data).find('.post h3.post-title').text()+'</span>');  
        },"html");
        $.get(olderLink.attr('href'), function (data2) {
         olderLink.html('<strong>السابق</strong> <span>'+$(data2).find('.post h3.post-title').text()+'</span>');  
        },"html");
    })(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>
          </b:if>
يمكنك تغيير الكلمات العربية بالكود بما يتناسب معك

والان مرحلة التنسيق

أضف الكود التالي فوق الوسم ]]></b:skin>
/*Cnmu.blogspot.com-pager*/
.cnmu-pager {
  font: bold 14px droid arabic kufi;
  border-bottom: 2px dashed #777;
  border-top: 2px dashed #777;
  float: right;
  margin-bottom: 20px;
  padding: 0;
  width: 500px;
}
.cnmu-pager li {
  float: right;
  list-style: none outside none;
  text-align: center;
  transition: all 0.7s ease 0s;
  width: 33%;
}
.cnmu-pager li:hover {
  background:#5A5A5A;
}
.cnmu-pager li a {
  display: block;
  min-height: 90px;
  padding: 5px 0;
  position: relative;
  width: 100%;
 text-decoration: none;
}
.cnmu-pager li a:hover {
  color:#fff;
}
.cnmu-pager li.next {
  border-left:1px solid #777 !important;
  width:49%;
}
.cnmu-pager li.previous {
  width:49%;
}
.cnmu-pager strong {
  color: #ccc;
  display: block;
  font-size: 20px;
  margin-bottom: 8px;
}
.cnmu-pager span {
  font: bold 15px serif;
}

.cnmu-pager li.next i,.cnmu-pager li.previous i{
  color: #CCCCCC;
  font: 45px tahoma;
  margin-top: 25px;
  }
.cnmu-pager li.next i {float: right;}
.cnmu-pager li.previous i {float: left;}
.fa-chevron-right:before {content:&quot;\2039&quot;;}
.fa-chevron-left:before {content: &quot;\203A&quot;;}
هذا #777  هو لون الإطارات عدله باللون المناسب
قم بزيادة او انقاص الرقم 500 بحسب عرض الموضوع في قالبك
هذا #5A5A5A هو اللون عند تمرير الماوس
هذا #ccc هو لون كلمة السابق والتالي

وهذه هي الجزئية الأخيرة

 وهي ما تحدثنا عنه في البداية وهي اخفاء خيارات التنقل الأساسية في بلوجر من داخل المواضيع
ابحث عن هذا الكود <div class='blog-pager' id='blog-pager'>


وفوقه اضف
<b:if cond='data:blog.pageType != &quot;item&quot;'>
ثم ابحث بعده قليلاً <div class='clear'/>
وتحته اضف
</b:if>
وهذه صورة توضيحية للكود باكمله الذي سنضيف فوق وتحته الكودين السابقين


وبالتوفيق في عملية التركيب
دمتم في امان الله

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

  1. مشكوور على الاضافة الجميلة

    ردحذف
    الردود
    1. سعدت بمرورك اخي الحبيب محمد
      تحياتي لك يا طيب

      حذف
  2. السلام عليكم ورحمة الله وبركاته
    ماشاء الله عليك أخي الغالي عمرو
    إضافة جديدة وجميلة أشكرك على طرحها
    ولدي سؤال هل تسبب هذه الإضافة ثقل للصفحة ؟
    وجزاك الله كل خير دمت في رعاية الله وحفظه

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

      حذف
  3. السلام عليكم ورحمة الله وبركاتهُ
    ---------------------------------
    أخي كان ودي أسألك عن هذا الخط: droidarabicnaskh هل هو متوفر على الويب

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      نعم اخي محمد الخط متوفر وتم اضافته للخطوط في هذا الموضوع
      http://cnmu.blogspot.com/2013/03/blog-post_14.html

      حذف
  4. السلام عليكم ورحمة الله وبركاته
    كيفك أخي الغالي عمرو
    واجهتني مشكلتين بعد تركيب الإضافة أنظر الصورة للتوضيح

    http://im64.gulfup.com/SPPO5.jpg

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      هذه بسبب القالب يا طيب يبدو ان مطور القالب كان معطي مظهر معين للستايل عموما يمكنك عمل التالي
      ابحث عن كود كهذا
      .post-body ul li {
      list-style: disc outside url("http://4.bp.blogspot.com/_V-IXTBBt1Bg/S2ti9tpIaEI/AAAAAAAABek/VKA0f5f0GTU/s1600/bullet.png");
      }
      عليك بتحديه واستبداله بهذا
      .post-body ul li {
      list-style: none outside none;
      }

      اما بالنسبة للصفر لا أستطيع تحديد مكانه بالضبط ربما يكون خطأ في القالب او الكتابة جرب نسخ الكود مرة ثانية او ابحث في المنطقة التي تضيف بها الكود عن صفر

      حذف
    2. بارك الله فيك أخي العزيز
      تم حل مشكلة الأيقونة الحمد لله وبقيت مشكلة الصفر
      وبحثت في القالب كما أشرت لكن لم أجد
      يبدو أنه خطأ في القالب والله المستعان
      جزيل الشكر لك أخي الغالي عمرو وجزاك الله كل خير

      حذف
  5. بارك الله لك ومدونة رائعة جدا

    ردحذف
    الردود
    1. وفيك بارك الله
      وشاكر لمرورك العطر

      حذف
  6. السلام عليكم

    دائما رائع فى عرضك للموضوعات

    حضرتك ذكرت

    اخفاء خيارات التنقل الأساسية في بلوجر من داخل المواضيع

    هل حضرتك تقصد

    رسائل احدث الرئيسية رسائل اقدم


    لاني عاوزه اشلها من المدونه سواء فى الصفحة الرئيسة او المشاركات

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      أشكرك اختي الفاضله هذا من ذوقك الكريم
      نعم هذا ما اقصده تماما لكن ملحوظة ان ازلتيها ولم تضيفي بديل لها سيكون صعب على الزوار التنقل من موضوع لآخر
      وفي هذا الموضوع البديل هي الخيارات بعناوين المواضيع

      حذف
    2. طب لو حضرتك طبفت الاكواد المشروحة جزئية













      سوف تزال ......رسائل احدث......الرئيسية.....رسائل اقدم

      لانى طبقتها ولم تزال ....لاننى اريد ان احدد للزائر الموضوعات التى سوف يزورها

      ولو ممكن فى طريقة للتحكم فى نوعية وليس الكم المشاركات فى الصفحة الرئيسية

      مدونتى

      http://doxsonengland.blogspot.com/

      وشكراااا

      حذف
    3. لو اردتي ازالة رسائل اقدم رسائل احدث من المدونة الطريقة المتبعة تزيلها من المواضيع فقط
      لو اردتي ازالتها من كل اجزاء المدونة اسهل طريقة هي اضافة الكود التالي فوق الوسم ]]>
      #blog-pager {display:none;}
      اما نوعية المواضيع في الصفحة لارئيسية هذا يتطلب تعديل كامل على القالب او تغييره بقالب يحتوي امكانية جلب مواضيع من اقسام مختلفة لكن عموماً يمكنك استخدام سلايد شو ووضع المواضيع التي تريدنها به وسيظهر في الصفحة الرئيسية
      وهذه مواضيع تخص السلايد شو
      http://cnmu.blogspot.com/2013/04/Image-Slider-Blogger-Widget.html
      http://cnmu.blogspot.com/2013/04/cnmu-Slider.html

      حذف
    4. لقد قمت بتطبيقها ولم يتم ازالتها ربما عيب فى التطبيق

      http://testd12345.blogspot.com/2014/04/blog-post_10.html

      وهذه مدونتى

      http://doxsonengland.blogspot.com/

      حذف
    5. جربي هذا الكود مرة اخرى اختي الفاضلة فوق الوسم ]]></b:skin>
      #blog-pager {display: none !important;}
      ملحوظة لا تكتبيه ولكن انسخيه

      حذف
    6. بعتذر عن كثرت الاسئلة ولكن لم اجد الكود بالقالب

      حذف
    7. يجب ان يكون الكود بالقالب فهو من الأساسيات جربي البحث عنه ستجدينه في البداية بعد توسعة عناصر الستايل هذا هو
      ]]></b:skin>
      وانت اضفتي تحته اكواد سابقاً في اسئلتك حول القائمة بعد ايجاده ضيفي فوقه هذا الكود
      #blog-pager {display: none !important;}

      حذف
    8. انا جربت هذة الطريقة واشتغلت 100% جربي هذا الكود مرة اخرى اختي الفاضلة فوق الوسم ]]>
      #blog-pager {display: none !important;}
      ملحوظة لا تكتبيه ولكن انسخيه

      حذف
  7. السلام عليكم

    لقد قمت باضافة الكود ولم يحدث شئ للاسف

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

      حذف
    2. قمت بازالة الكود واضافته مره اخرى ولم يحدث شئ

      وحدث خطا بالمدونة ارجو مساعدتى فى حلها

      http://testd12345.blogspot.com/2014/04/blog-post_11.html

      وهذه مدونتى

      http://doxsonengland.blogspot.com/

      حذف
    3. اختي الفاضلة في مدونتك الآن لم تعد السابق والتالي ظاهرة ولا ارى خطأ ظاهري اظن ان المشكلة اتحلت اليس كذلك ؟

      حذف
    4. نعم لقد اتحلت الحمد لله ....شكرا لك

      حذف
  8. شكرا اخي لكن هناك مشكلة بزر التالي لا يعمل يعني عند الضغط على التالي لا يتحرك ابدا ممكن الحل

    ردحذف
    الردود
    1. زر التالي لا يعمل إن لم يكن هناك موضوع تالي وتكون تتصفح آخر المواضيع غير ذلك يعمل طبيعي

      حذف
    2. لا اخي يوجد مواضيع وليس موضوع فقط لكن للاسف لم يعمل يكتب عنوان الموضوع ولا يتحرك :) =r

      حذف
    3. ربما يكون هناك كود لديك او اضافة أخرى تتعارض مع هذه الإضافة وتسبب المشكلة عموما اضف رابط المدونة للإطلاع

      حذف
  9. اخى عمرو انا عندى بيظهر السابق والتالى ولاكن لايظهر تحتهم عنوان الموضوع

    ردحذف
    الردود
    1. جرب التالي أخي احمد في الكود رقم 2 استبدل هذا الجزء
      .post h3.post-title
      بهذا
      .post h1
      أو هذا
      .post h1.post-title
      أيهم يضبط معك ملحوظة ستجده متكرر فغيره في المرتين

      حذف
  10. الردود
    1. أهلا بك اخي تشرفت بمرورك

      حذف
  11. أخي أنا أضفتها ولكن تواجهني مشكلة وهي ظهور رسالة أقدم أسفل الإضافة للمعاينة
    http://ndb2.blogspot.com/2014/07/alexa.html

    ردحذف
    الردود
    1. أضف هذا الكود أخي فوق الوسم ]]></b:skin>
      #nav-above, #nav-below {
      display: none !important;
      }

      حذف
    2. شكرا جزيلا أخي الكريم
      ممكن طريقة إضإفة الرئيسية كما في مدونتك الرائعة

      حذف
    3. معذرة يا طيب غير ممكن شرح اضافة الرئيسية لانها تحتاج ستايل مختلف ولا يمكن طرح أكثر من شرح لنفس الموضوع

      حذف
  12. سلام علبكم اخي شكرا على مجهوداتك لاكن انا لدي مشكلة انا اغلب اكوادك لا تظهر لي عند البحث وهناك اكواد لا اعرف اين اضعها لاكن دروسك معظمعها نجحت معي شكرا لك و هده الدرس لم اجد هده الكود في html ارجوو رد g=

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      حياك الله اخي الكريم أى كود بالضبط لم تجده يا طيب يرجى التوضيح

      حذف
  13. ممكن حل لهذة المشكلة السابق والتالى بيجوا تحت بعض http://cdn.top4top.net/i_86b2e7bc6b1.png

    ردحذف
    الردود
    1. جرب التالي اخي احمد ابحث عن هذا الكود
      width:49%;
      ستجده مكرر قم بتخفيض 49 الى 40 ان لم ينجح أضف رابط المدونة التي عليها القالب للإطلاع

      حذف
    2. شكرا جزيلا تم الصلاح

      حذف

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

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