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

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

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

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


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 كما في المثال السابق الخاص بالازرار الفاتحة.

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

شاركها !

الموضوع من طرف : Unknown

مدون مغربي, يعشق التدوين , يهتم بمتابعة أخبار التكنولوجيا الحديثة وتطوير المواقع ,هدفي مساعدة الاخرين على تطوير قدراتهم وتقديم لهم الدعم . يمكنك متابعته من خلال الفيسبوك. تويتر.جوجل بلس