اضافة ازرار التنقل بين الصفحات بلوجر

اضافة ازرار التنقل بين الصفحات بلوجر

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

فى هذا الموضوع ساشرح لكم كيفية اضافة ازرار التنقل بين الصفحات باكثر من شكل وباكثر من لون لتناسب جميع الاذواق
اضافة ازرار التنقل بين الصفحات بلوجر بسبع اشكال مقدمه من مدونة  المايسترو

الشرح ينقسم الى قسمين

اولا اضافة css لاظهار اضافة ازرار التنقل بين الصفحات بلوجر بالشكل الذى يتناسب مع القالب الخاص بك
ثانيا اضافة كود التشغيل لكى تعمل اضافة ازرار التنقل بين الصفحات بلوجر

نبدا الشرح

 اولا اضافة css لاظهار اضافة ازرار التنقل بين الصفحات بلوجر

1- ادخل الى لوحة ادارة مدونتك
2- اختر قالب
3- اختر تحرير  Html

بواسطه لوحة المفاتيح ابحث عن هذا الكود

]]></b:skin>

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

ملحوظه هامه:

 صور الاشكال تلاحظ فيها الكتابه باللغه الانجليزيه ولكن لا تقلق فهى للمثال على الشكل فقط الاضافه ستظهر فى مدونتك باللغه العربيه

الشكل الاول

الشكل الاول

كود الشكل الاول

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: #000;}
 .showpageOf{display:none!important}
#blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color: #888;}
 #blog-pager .pages{border:none;}

الشكل الثانى

الشكل الثانى

كود الشكل الثانى

 #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;}
#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

الشكل الثالث

الشكل الثالث

كود الشكل الثالث

 #blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;}
a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;}
#blog-pager .pages{border:none;background: none;}

الشكل الرابع

الشكل الرابع

كود الشكل الرابع

 #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}

الشكل الخامس

الشكل الخامس

كود الشكل الخامس

 #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #3E5801; background-color:#E0EDC1;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;}
#blog-pager .pagecurrent{font-weight:bold;color: #D25E71;background:#FFDEDF;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}

الشكل السادس

الشكل السادس

كود الشكل السادس

 #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #AD0B00; background-color:#FAB001;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}

الشكل السابع  هذا الشكل مركب فى هذه المدونه

الشكل السابع

كود الشكل السابع

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 12px;padding: 5px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#E5E5E5;text-decoration:none;color: #222;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}

ثانيا اضافة كود التشغيل لكى تعمل اضافة ازرار التنقل بين الصفحات بلوجر

بعد اختيارك للشكل المناسب لاضافة  ازرار التنقل بين الصفحات

ابحث عن هذا الكود

</body>

ضع فوقه مباشرتا الكود التالى

 <b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
  /*<![CDATA[*/
    var perPage=7;
    var numPages=6;
    var firstText ='الصفحة الاولى';
    var lastText ='الصفحة الاخيره';
    var prevText ='« السابق';
    var nextText ='التالى »';
    var urlactivepage=location.href;
    var home_page="/";
  /*]]>*/
</script>
  <script src="https://th3maestro.googlecode.com/svn/trunk/js/page-navigation2.js"/>
</b:if>
</b:if>

التعديل على الكود السابق

perPage: 7, عدد المشاركات التى ستعرض فى الصفحه
numPages: 6, عدد الصفحات

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

للاستفسارات والمشاكل حول اضافة ازرار التنقل بين الصفحات بلوجر فقط اترك رد او تعليق

HashtagsTech

هاشتاج التقنيه قوالب واضافات بلوجر وجديد الاخبار التقنيه

Facebook

Twitter

Instagram

شارك هذا الموضوع