اضافه ارقام لترقيم صفحات مدونه بلوجر

 

الوسيلة الافتراضية للتنقل بين صفحات مدونات بلوجر ، هي عبر رابطين في نهاية الصفحة ، احدهما يؤدي للصفحة السابقة ، والآخر يؤدي للصفحة التالية ، هذا بالاضافة لرابط ثالث يؤدي للصفحة الرئيسية ، كما هو مبين في الصورة:

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

لفعل ذلك اتبع الخطوات التالية:

1- ادخل الى مدونتك عن طريق الرابط التالي:
http://blogger.com

2- اضغط على رابط "تصميم" أو "design" بجانب مدونتك
3- ستفتح لك صفحة التصميم ، اضغط على "تحرير html"

4- ابسط اكواد القالب عن طريق وضع علامة صح في المربع "توسيع عناصر قوالب واجهة المستخدم" كما بالصورة:

:: لوضع الأزرار الفاتحة ::

5-  ابحث عن الجزء التالي (اضغط crtl+F للبحث) :

]]></b:skin>

ثم الصق الكود التالي قبله مباشرة:

.blog-pager,#blog-pager{
font-size: 12px;font-family:tahoma;
padding: 0.2em 0.5em;
margin-right: 0.1em;
border:1px solid #FFF;
background: #FFF; text-decoration: none;
width:500px;
}
.showpageNum a,.showpage a {
color: #693;
text-decoration: underline;
border: 1px solid #E3E3E3;
text-decoration: none;
padding: 0.2em 0.5em;
}
.showpageNum a:hover,.showpage a:hover {
border: 1px solid #693;
}
.showpageOf{
margin:0 8px 0 0;
display:none;
}
.showpagePoint {
border: 1px solid #693;
padding: 0.2em 0.5em;
font-weight: bold;
background: #693; color: #FFF;
}

6- ابحث عن السطر التالي:

</body>

والصق قبله الكود التالي:

<script type='text/javascript'>;
var home_page='/';
var urlactivepage=location.href;

var postperpage=7;

var numshowpage=4;

var upPageWord ='السابق';

var downPageWord ='التالي';

</script>;
<script src='http://navigation-blogger-zoom.googlecode.com/files/numbnav4.js' type='text/javascript'></script>

7- ابحث عن السطر التالي (احتمال ان تجده في عدة مواضع):

'data:label.url'

واستبدله بالسطر التالي (في جميع المواضع):

'data:label.url + &quot;?&amp;max-results=7&quot;'

8-  قم بعمل حفظ للقالب

:: لوضع الأزرار الداكنة ::

5-   ابحث عن الجزء التالي (اضغط crtl+F للبحث) :

]]></b:skin>

ثم الصق الكود التالي قبله مباشرة:

.blog-pager,#blog-pager{
font-size: 12px;font-family:tahoma;
font-weight:normal;
width:500px;
padding: 0.6em 0.5em;
background: #3E3E3E;
}
.showpageNum a,.showpage a {
text-decoration: none;
padding: 0.3em 0.5em;
color: #055d90;
white-space: nowrap;
background: #3E3E3E;
color: #ffffff;
margin-right: 0.1em;
}
.showpageNum a:hover,.showpage a:hover {
background: #EC5210;
}
.showpageOf{
margin:0 8px 0 0;
display:none;
}
.showpagePoint {
text-decoration: none;
padding: 0.3em 0.5em;
color: #055d90;
white-space: nowrap;
background: #313131;
color: #868686;
margin-right: 0.1em;
}

 6- كرر نفس الخطوات 6 و7 و8 كما في المثال السابق الخاص بالازرار الفاتحة.

ملحوظة: لمزيد من الخيارات في هذه الاضافة تستطيع تغيير الجزء الملون في الكود وملاحظة ما سيحدث.

اذا تعزر معك اى شئ فقم بالسؤال فى التعليقات

اتمنى ان تنال اعجابكم

Widget for blogger by WidgetBlogs