تحميل KMSAuto Net أخر أصدار لتنشيط الويندوز والاوفيس مجاناً وأمن 2020

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

كيفية إنشاء أزرار التنقل التالي والسابق في مدونة بالوجر إضافة رائعة جداً حصري

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

أذن كيف يمكنك إنشاء أزرار التنقل التالي والسابق في الصفحة الأولى من المدونة هي طريقة سهلة للغاية تابع الشرح أدناه ؟

• الخطوة الأولى يجب حفظ نسخة احتياطية من قالب المدونة  قبل تثبيت زر التنقل على المدونة ، بحيث إذا كان هناك خطأ فيمكنك استعادة النسخة الاحتياطية القديمة .
• الخطوة الثانية إذا كان قالب مدونتك يحتوي على أزرار التنقل التالي والسابق فيرجى حذفها أولاً حتى لا يتعارض مع القالب الجديد .
• الخطوة الثالثة طريقة تثبيت الإضافة على المدونة تابع الشرح بدقة أي خطأ لن تعمل معك الإضافة بشكل صحيح 
• الخطوة الرابعة قم بتسجيل الدخول إلى حسابك في بلوجر ثم أنتقل مظهر المدونة ثم تحرير 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 */
#blog-pager a.home-link,#blog-pager a.blog-pager-newer-link,#blog-pager a.blog-pager-older-link,#blog-pager .blog-pager-newer-link,#blog-pager .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)
}
#blog-pager .icons{
    width:22px;
    padding:11px 0
}
#blog-pager a .icons{
    fill:#fff!important
}
#blog-pager a.home-link{
    text-align:center;
    display:inline-block;
    float:none;
    margin:0 20px 7px 20px!important
}
#blog-pager .blog-pager-older-link, #blog-pager .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)
}
#blog-pager a:hover .icons{
    fill:#fff!important
}
#blog-pager a:hover.home-link,#blog-pager a:hover.blog-pager-newer-link,#blog-pager a:hover.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)
}
#blog-pager,.blog-pager{
    position:relative;
    margin: 15px 0 0 40%;
}
@media screen and (max-width:880px){
    #blog-pager,.blog-pager {
        position: relative;
        bottom: 0;
        margin:15px 0 0 40%;
    }
}
@media screen and (max-width:768px){
    #blog-pager,.blog-pager {
        position: relative;
        bottom: 0;
        margin:15px 0 0 36%;
    }
}
@media screen and (max-width:667px){
    #blog-pager,.blog-pager {
        position: relative;
        bottom: 0;
        margin:15px 0 0 33%;
    }
}
@media screen and (max-width:480px){
    #blog-pager,.blog-pager {
        position: relative;
        bottom: 0;
        margin:15px 0 0 25%;
    }
    #blog-pager a.home-link, #blog-pager a.blog-pager-newer-link, #blog-pager a.blog-pager-older-link, #blog-pager .blog-pager-newer-link, #blog-pager .blog-pager-older-link{
        height:38px;
        width: 38px;
    }
    #blog-pager .icons{
        width:20px;
        padding:9px 0
    }
}
@media screen and (max-width:320px){
    #blog-pager,.blog-pager {
        position: relative;
        bottom: 0;
        margin:15px 0 0 20%;
    }
}
@media screen and (max-width:300px){
    #blog-pager,.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='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_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='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='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_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='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>

والأن مع أخر كود يرجى نسخ الكود التالي والصق أسفل هذا الوسم </article>

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

الأن قم بحفظ القالب ومبروك عليك الإضافة الجديدة

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