اليوم وفى موضوع جديد من مدونة مدون أقدم لكم ترقيم صفحات المدونة الذى طلبه منى أحد متتبعى المدونة الكرام على حسابى على الفيس بوك ، ولأن زوار المدونة ومتتبعيها هم أفضل ما لديها فقررت عمل موضوع كامل على ترقيم صفحات المدونة كى ألبى رغبة المتتبع الكريم ولكى أثبت أن مدونة مدون تستحق التقدير والاحترام فى مجال البلوجر ولكى لا أطيل عليكم هيا بنا للشرح
شرح التركيــــــب
شرح التركيــــــب
اذهب للوحة التحكم >> القالب >> تحرير HTM:
ابحث عن
<b:includable id='mobile-index-post' var='post'>
اضف اسفله هذا الكود
<b:includable id='page-navi'><div class='pagenavi'><script type='text/javascript'>var pageNaviConf = {perPage: 7,numPages: 5,firstText: "الأولى",lastText: "الأخيرة",nextText: "»",prevText: "«"}</script><script src='http://awesome-navigation.googlecode.com/files/onlinetrick.js' type='text/javascript'/><div class='clear'/></div></b:includable>
ملاحظات
perPage: 7 >> عدد المواضيع التى ستظهر فى كل صفحة
numPages: 5 >> عدد الصفحات التى ستظهر
ثم ابحث عن
<b:include name='nextprev'/>
ثم استبدله بهذا الكود
<b:if cond='data:blog.pageType == "index"'><b:include name='page-navi'/><b:else/><b:if cond='data:blog.pageType == "archive"'><b:include name='page-navi'/></b:if><b:else/><b:if cond='data:blog.pageType == "item"'><b:include name='nextprev'/></b:if></b:if>
ثم ابحث عن وسم ]]></b:skin>
وضع قبلـــــــــــــــه كود السى اس اس التالى
#blog-pager, .pagenavi { clear: both; text-align: center; margin: 30px auto 10px;}#blog-pager a, .pagenavi span, .pagenavi a {background-color: #3BB3E0;padding: 5px 10px;position: relative;margin: 2px;font-size: 12px;text-decoration: none;color: white;border: solid 1px #186F8F;background-image: linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);background-image: -o-linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);background-image: -moz-linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);background-image: -webkit-linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);background-image: -ms-linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #2CA0CA), color-stop(1, #3EB8E5) );-webkit-box-shadow: inset 0px 1px 0px #7FD2F1, 0px 1px 0px white;-moz-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;box-shadow: inset 0px 1px 0px #7FD2F1, 0px 1px 0px white;-webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px;border-radius: 5px;}#blog-pager a:hover, .pagenavi a:hover {background-image: linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -o-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -moz-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -webkit-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -ms-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #3EB8E5), color-stop(1, #2CA0CA) );}#blog-pager-older-link, #blog-pager-newer-link { float: none;}.pagenavi .current {background-image: linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -o-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -moz-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -webkit-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -ms-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #3EB8E5), color-stop(1, #2CA0CA) );}
ثم قم بحفظ القالب ومبروك عليك الترقيم
6 تعليق على { ترقيم صفحات مدونة مدون الحالى }
27 مارس 2014 في 5:20 ص [حذف]
مش هاقولك غير تسلم ايدك
بس لو عاوز اغير لونها اغيره ازاى
2 أبريل 2014 في 12:22 م [حذف]
السلام عليكم موضوع جميل انا طبقته وكل شي تمام بس المشكله انو بيضهر عدد الصفحات الي بالمدونه 28 (او عدد الصفحات الي بدي اتنقل بيهم 28) مع العلم او مدونتي تحتوي على اكثير من 900 مشاركه هل من حل اخي
3 أبريل 2014 في 10:46 ص [حذف]
شكرا كتير اخى على هذا الدرس بشكرك
4 أبريل 2014 في 1:34 ص [حذف]
شكرا لمرورك صديقى
4 أبريل 2014 في 1:36 ص [حذف]
الترقيم بيظهر عدد معين من الصفحات عن طريق الجزء دا
numPages: 5 >> عدد الصفحات التى ستظهر
حدده باى عدد تريده
4 أبريل 2014 في 1:39 ص [حذف]
بالنسبة للون الصفحة المحددة هذا هو
-webkit-gradient( linear, left bottom, left top, color-stop(0, #3EB8E5), color-stop(1, #2CA0CA) )
بالنسبة للون الترقيم كله
#3BB3E0
شكرا للمرورك
هل تريد التعليق على التدوينة ؟