الوسيلة الافتراضية للتنقل بين صفحات مدونات بلوجر ، هي عبر رابطين في نهاية الصفحة ، احدهما يؤدي للصفحة السابقة ، والآخر يؤدي للصفحة التالية ، هذا بالاضافة لرابط ثالث يؤدي للصفحة الرئيسية ، كما هو مبين في الصورة:
لكن ماذا لو أردت استبدال ذلك بارقام للصفحات ، وسيلة ذات شكل أجمل ، وأسهل لزوار مدونتك للتجول عبر الصفحات كمثل هذه:-
لفعل ذلك اتبع الخطوات التالية:
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 + "?&max-results=7"'
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 كما في المثال السابق الخاص بالازرار الفاتحة.
ملحوظة: لمزيد من الخيارات في هذه الاضافة تستطيع تغيير الجزء الملون في الكود وملاحظة ما سيحدث.
