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

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

لذلك سنرى في هذا الموضوع طريقة رائعة لإضافة خاصية ترقيم الصفحات مع إمكانية التعديل فيها.

المراحل المتبعة :

1- انتقل إلى لوح تحكم مدونتك الخاصة بحسابك على بلوجر

2- إختر تصميم  ثم  تحرير HTML   (تذكر أن تحتفظ بنسخة احتياطية من القالب)

3- ابحث عن :

</body>

4- ألصق هذا الكود مباشرة فوقه :

<!--PAGINATION-STARTS-->
< script type='text/javascript'>

var pageCount=10;
var displayPageNum=3;

var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
< /script>
< script src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/pagination1.js' type='text/javascript'/>
< script src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/pagination2.js' type='text/javascript'/>
< !--PAGINATION-STOPS-->

var pageCount هو عدد المواضيع التي سيتم عرضها في كل صفحة. بإمكانك تغيير الرقم "10" إلى أي عدد تريده.

var displayPageNum هو عدد الأزرار التي ستظهر على كل جانب ( يمين و يسار الزر الذي يشير إلى الصفحة المختارة ).

على سبيل المثال : إذا كان القارئ في الصفحة 5، فَفِي ترقيم الصفحات، سيتم عرض أرقام الصفحات هكذا :

Prev 2 3 4 5 6 7 8  Next

5- ابحث عن :

</head>

6- الصق هذا الكود مباشرة فوقه :

<!--PAGINATION-STARTS-->
< link href='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/pagination2.css' rel='stylesheet' type='text/css'/>
< style type='text/css'>
.showpage a:hover {
color: #FFFFFF;
background-color: #92416C;
}
// STYLE CODE FOR SELECTED PAGE STARTS
.showpagePoint {
color: #FFFFFF;
background: #92416C;
border: 1px solid #92416C;
}
// STYLE CODE FOR NUMBER BUTTONS STARTS
.showpageNum a:link,.showpage a:link {
color: #000000 !important;
background-color: #92416C;
border: 1px solid #92416C;
}

// HOVER CODE for NUMBER BUTTONS

.showpageNum a:hover {
color: #FFFFFF !important;
background: #92416C !important;
border: 1px solid #92416C;
}
// STYLE CODE FOR "PREV and NEXT" BUTTONS STARTS
.showpageArea a {
border: 1px solid #92416C;
}

// HOVER CODE for NEXT-PREV BUTTONS

.showpageArea a:hover {
border: 1px solid #92416C;
color: #FFFFFF !important;
background: #92416C !important;
}
< /style>
< !--PAGINATION-STOPS-http://afkarpro.blogspot.com-->

في الكود أعلاه ، 92416C # يشير إلى اللون الأرجواني. يمكنك استبداله بأي رمز حسب اللون المراد استعماله.