ازرار التنقل في صفحات عرض المواضيع لمدونات بلوجر

•  يجب حفظ نسخة احتياطية من قالب المدونة قبل تثبيت زر التنقل على المدونة، بحيث إذا كان هناك خطأ فيمكنك استعادة النسخة الاحتياطية القديمة. 
• إذا كان قالب مدونتك يحتوي على أزرار التنقل التالي والسابق فيرجى حذفها أولاً حتى لا يتعارض مع القالب الجديد وان لم تعرف اسأل في التعليقات.
• طريقة تثبيت الإضافة على المدونة تابع الشرح بدقة أي خطأ لن تعمل معك الإضافة بشكل صحيح وعند حدوث ذلك استشرنا. 
• أنتقل مظهر المدونة ثم تحرير HTML وقم بالبحث عن هذا الوسم </head> ثم الصق الكود التالي أعلاه  

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/* Blog Pager */
#technomee-blog-pager a.home-link,#technomee-blog-pager a.technomee-blog-pager-newer-link,#technomee-blog-pager a.technomee-blog-pager-older-link,#technomee-blog-pager .technomee-blog-pager-newer-link,#technomee-blog-pager .technomee-blog-pager-older-link{
    border-radius:25px;
    background:#009688;
    font-size:18px;
    margin:7px 0!important;
    padding:0;
    color:#252e39;
    font-weight:normal;
    text-transform:uppercase;
    float:none;
    display:inline-block;
    overflow:hidden;
    height:45px;
    width:45px;
    line-height:45px;
    text-align:center;
    list-style:none;
    box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)
}
#technomee-blog-pager .icons{
    width:22px;
    padding:11px 0
}
#technomee-blog-pager a .icons{
    fill:#fff!important
}
#technomee-blog-pager a.home-link{
    text-align:center;
    display:inline-block;
    float:none;
    margin:0 20px 7px 20px!important
}
#technomee-blog-pager .technomee-blog-pager-older-link, #technomee-blog-pager .technomee-blog-pager-newer-link{
    background:#009688;
    color:#fff;
    fill:#fff!important;
    box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)
}
#technomee-blog-pager a:hover .icons{
    fill:#fff!important
}
#technomee-blog-pager a:hover.home-link,#technomee-blog-pager a:hover.technomee-blog-pager-newer-link,#technomee-blog-pager a:hover.technomee-blog-pager-older-link{
    background:#00897b;
    color:#222;
    box-shadow:0 10px 21px rgba(0,0,0,0.15), 0 6px 6px rgba(0,0,0,0.12)
}
#technomee-blog-pager,.technomee-blog-pager{
    position:relative;
    margin: 15px 0 0 40%;
}
@media screen and (max-width:880px){
    #technomee-blog-pager,.technomee-blog-pager {
        position: relative;
        bottom: 0;
        margin:15px 0 0 40%;
    }
}
@media screen and (max-width:768px){
    #technomee-blog-pager,.technomee-blog-pager {
        position: relative;
        bottom: 0;
        margin:15px 0 0 36%;
    }
}
@media screen and (max-width:667px){
    #technomee-blog-pager,.technomee-blog-pager {
        position: relative;
        bottom: 0;
        margin:15px 0 0 33%;
    }
  }
@media screen and (max-width:480px){
    #technomee-blog-pager,.technomee-blog-pager {
        position: relative;
        bottom: 0;
        margin:15px 0 0 25%;
    }
    #technomee-blog-pager a.home-link, #technomee-blog-pager a.technomee-blog-pager-newer-link, #technomee-blog-pager a.technomee-blog-pager-older-link, #technomee-blog-pager .technomee-blog-pager-newer-link, #technomee-blog-pager .technomee-blog-pager-older-link{
        height:38px;
        width: 38px;
    }
    #technomee-blog-pager .icons{
        width:20px;
        padding:9px 0
    }
}
@media screen and (max-width:320px){
    #technomee-blog-pager,.technomee-blog-pager {
        position: relative;
        bottom: 0;
        margin:15px 0 0 20%;
    }
}
@media screen and (max-width:300px){
    #technomee-blog-pager,.technomee-blog-pager {
        position: relative;
        bottom: 0;
        margin:15px 0 0 22%;
    }
}
</style>
</b:if>
</b:if>

•  نسخ الكود التالي وضعه فوق هذا الوسم <b:includable id='post' var='post'>

<b:includable id='nextprev'>
  <div class='technomee-blog-pager' id='technomee-blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='technomee-blog-pager-newer-link'>
      <a class='technomee-blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_technomee-blog-pager-newer-link&quot;' title='Halaman Selanjutnya'><svg class='icons icon-LEFT' viewBox='0 0 24 24'><path d='M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z'/></svg></a>
      </span>
<b:else/>
      <span class='technomee-blog-pager-newer-link' title='Sudah di Halaman Terbaru'><svg class='icons icon-MAP' viewBox='0 0 24 24'><path d='M12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5M12,2A7,7 0 0,1 19,9C19,14.25 12,22 12,22C12,22 5,14.25 5,9A7,7 0 0,1 12,2M12,4A5,5 0 0,0 7,9C7,10 7,12 12,18.71C17,12 17,10 17,9A5,5 0 0,0 12,4Z'/></svg></span>
    </b:if>
   <a class='home-link' expr:href='data:blog.homepageUrl' title='Beranda'><svg class='icons icon-HOME' viewBox='0 0 24 24'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z'/></svg></a>
    <b:if cond='data:olderPageUrl'>
      <span id='technomee-blog-pager-older-link'>
      <a class='technomee-blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_technomee-blog-pager-older-link&quot;' title='Halaman Sebelumnya'><svg class='icons icon-RIGHT' viewBox='0 0 24 24'><path d='M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z'/></svg></a>
      </span>
<b:else/>
      <span class='technomee-blog-pager-older-link' title='Sudah di Halaman Terakhir'><svg class='icons icon-MAP' viewBox='0 0 24 24'><path d='M12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5M12,2A7,7 0 0,1 19,9C19,14.25 12,22 12,22C12,22 5,14.25 5,9A7,7 0 0,1 12,2M12,4A5,5 0 0,0 7,9C7,10 7,12 12,18.71C17,12 17,10 17,9A5,5 0 0,0 12,4Z'/></svg></span>
    </b:if>

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>

  </div>
   <div class='clear'/>
</b:includable>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:include name='nextprev'/>
</b:if></b:if>