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

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

معاينــة

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

أول شئ أضف الكود التالي فوق الوسم </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>

وهذه صورة توضيحية للكود باكمله الذي سنضيف فوق وتحته الكودين السابقين

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

دمتم في امان الله

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