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

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

<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'/>

<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>

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

/*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;;}

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

<b:if cond='data:blog.pageType != &quot;item&quot;'>

</b:if>