اضافة ترقيم الصفحات على البلوجر بعدة أشكال إحترافية

اضافة ترقيم الصفحات على البلوجر 2014

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

  • نتوجه الى المدونة   >>>  قالب  >>>  تحرير HTML .
  • نبحث عن باستعمال Ctrl+F  عن 
<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: "First",
lastText: "Last",
nextText: "»",
prevText: "«"
}
</script>
<script src='http://awesome-navigation.googlecode.com/files/onlinetrick.js' type='text/javascript'/>
<div class='clear'/>
</div>
</b:includable>

  •  الآن نبحث من جديد عن الكود 
<b:include name='nextprev'/>
  •  ثم نستبدله بالكود التالي 
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:include name='page-navi'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<b:include name='page-navi'/>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>
</b:if>
  •  آخر مرحلة : نبحث عن الوسم  ]]></b:skin>
  •  نختار الشكل الدي نريده  ثم نضيف الكود الخاص به فوق ]]></b:skin>
  •  الشكل الأول 
اضافة ترقيم الصفحات على البلوجر بعدة أشكال إحترافية

#blog-pager, .pagenavi {
     clear: both;
     text-align: center;
     margin: 30px auto 10px;
}
#blog-pager a, .pagenavi span, .pagenavi a {
text-decoration: none;
color: #333;
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
background-color: #F8F8F8;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fffcfcfc,EndColorStr=#fff8f8f8);
background-image: -moz-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%);
background-image: -ms-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%);
background-image: -o-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FCFCFC),color-stop(100%,#F8F8F8));
background-image: -webkit-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%);
background-image: linear-gradient(to bottom,#FCFCFC 0,#F8F8F8 100%);
padding: 5px 10px;
border: 1px solid lightGrey;
font-weight: bold;
font-size: 12px;
vertical-align: middle;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
margin: 2px 2px;
-webkit-transition: .0s ease-in!important;
-moz-transition: .0s ease-in!important;
-ms-transition: .0s ease-in!important;
-o-transition: .0s ease-in!important;
transition: .0s ease-in!important;
}
#blog-pager a:hover, .pagenavi a:hover {
border-color: #C6C6C6;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fff8f8f8,EndColorStr=#ffeeeeee);
background-image: -moz-linear-gradient(top,#F8F8F8 0,#EEE 100%);
background-image: -ms-linear-gradient(top,#F8F8F8 0,#EEE 100%);
background-image: -o-linear-gradient(top,#F8F8F8 0,#EEE 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#F8F8F8),color-stop(100%,#EEE));
background-image: -webkit-linear-gradient(top,#F8F8F8 0,#EEE 100%);
background-image: linear-gradient(to bottom,#F8F8F8 0,#EEE 100%);
}
#blog-pager-older-link, #blog-pager-newer-link {
     float: none;
}
.pagenavi .current {
border-color: #C6C6C6;
background-color: #E9E9E9;
background-image: none;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
}
.pagenavi a:active {
border-color: #C6C6C6;
background-color: #E9E9E9;
background-image: none;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
}


  •  الشكل الثاني 
اضافة ترقيم الصفحات على البلوجر بعدة أشكال إحترافية
#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) );
}


  • الشكل الثالث 
اضافة ترقيم الصفحات على البلوجر بعدة أشكال إحترافية
#blog-pager, .pagenavi {
     clear: both;
     text-align: center;
     margin: 30px auto 10px;
}
#blog-pager a, .pagenavi span, .pagenavi a {
border: 1px solid #3d8bf2;               
padding: 5px 10px;                
text-decoration: none;                
font-family: arial;                
color:#fff;                
margin: 2px;                
background-image: url('http://onlinetrick-ot.googlecode.com/svn/image/menubg1.PNG');
background-position: left;           
-webkit-transition: all 0.7s ease-in-out;              
-moz-transition: all 0.7s ease-in-out;                
-o-transition: all 0.7s ease-in-out; 
}
#blog-pager a:hover, .pagenavi a:hover {
background-position:right;
}
#blog-pager-older-link, #blog-pager-newer-link {
     float: none;
}
.pagenavi .current {
background-position:right;
}


  • الشكل الرابع
اضافة ترقيم الصفحات على البلوجر بعدة أشكال إحترافية
#blog-pager, .pagenavi {
     clear: both;
     text-align: center;
     margin: 30px auto 15px;
}
#blog-pager a, .pagenavi span, .pagenavi a {
border: 1px solid #3d8bf2;               
padding: 5px 10px;                
text-decoration: none;                
font-family: arial;                
color:#fff;                
margin: 2px;                
background-image: url('http://onlinetrick-ot.googlecode.com/svn/image/menubg2.PNG');
background-position: bottom;        
-webkit-transition: all 0.7s ease-in-out;              
-moz-transition: all 0.7s ease-in-out;                
-o-transition: all 0.7s ease-in-out; 
}
#blog-pager a:hover, .pagenavi a:hover {
background-position:top;
}
#blog-pager-older-link, #blog-pager-newer-link {
     float: none;
}
.pagenavi .current {
background-position:top;
}


  • الشكل الخامس
اضافة ترقيم الصفحات على البلوجر بعدة أشكال إحترافية


#blog-pager, .pagenavi {
     clear: both;
     text-align: center;
     margin: 30px auto 15px;
}
.pagenavi .pages {
display: none;
}
#blog-pager a, .pagenavi span, .pagenavi a {
padding: 5px 10px;
text-decoration: none;
font-family: arial;
color: white;
margin: 2px;
background: black;
background-position: bottom;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
border-radius: 30px;
font-size: 20px;
}
#blog-pager a:hover, .pagenavi a:hover {
background: orange;
}
#blog-pager-older-link, #blog-pager-newer-link {
     float: none;
}
.pagenavi .current {
background: orange;
}


  • ثم نضغط على حفظ .
  • لا تنسوا المساهمة في نشر الموضوع .
الموضوع : اضافة ترقيم الصفحات على البلوجر بعدة أشكال إحترافية .

مقالات ذات صلة

Previous
Next Post »

15 التعليقات

التعليقات
4/21/2014 delete

مشكور أخي الطريقة جد فعاله
تحياتي

Reply
avatar
10/07/2014 delete

ممكن اخي من فضلك يعني من غير غلاسة تقولي كي اضيف مواضيع مهمة أيضا : زي اللي عندك

Reply
avatar
10/07/2014 delete

لقد أضفت موضوع في مدونتة لكيفية اضافة مواضيع ذات صلة كاالتي في المدونة

Reply
avatar
9/30/2015 delete

كيفية زيادة عدد المواضيع أي عدد مواضيع في الصفحة الوادة

Reply
avatar
1/07/2016 delete

واللة العظيم انت انسان محترم ربنا يجزيك خير عنا

Reply
avatar
1/15/2016 delete

مشكووووو أخي على مجهودك أنا جربت كل اكواد المدونات الأخرا فلم تنجه إلا هذا الكون نجح معي وبالتوفيق أخي العزييز

Reply
avatar
غير معرف
1/26/2016 delete

شرح وافي لكن فقط ينقصك التحديد فهناك كودين عندي بنفس الإسم واضطررت لأن اجرب الإثنين ومشكور

Reply
avatar
غير معرف
2/01/2016 delete

الشرح ما شاء الله من محترف أكثر من يومين ابحث عن طريقة لوضع كود مثل هذا ولم تنجح إلا من خلال اتباع الشرح الخاص بك ، جزاك الله كل خير وبارك فيك وهذا رابط مدونتي للتأكد وقول رأيك فيها http://almaelamonline.blogspot.com/

Reply
avatar
غير معرف
3/25/2016 delete

أخي الكود لم ينجح معي و استعمل قالب invert grid

Reply
avatar
4/06/2016 delete

شكر جزبلا اخي العزيز

طريقة فعالة

Reply
avatar
4/23/2016 delete

اخي عبد السلام احتاجك خاص من فضلك هاد حسابي على فيس https://www.facebook.com/LaColombOfficiell?ref=ts&fref=ts

Reply
avatar
4/24/2016 delete

سلام , فيما ما استطيع مساعدتك اخي العزيز

Reply
avatar
5/08/2016 delete

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

Reply
avatar
8/13/2016 delete

شكرا لك اخي الكريم
لكن لا تظهر جميع الصفحات
تظهر في حدود عشر صفحات

Reply
avatar

المروجوا احترام سياسة المدونة و عمل بها و شكرا ااا