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

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

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

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

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

1- ادخل الى مدونتك عن طريق الرابط التالي:

http://blogger.com/

2- اضغط على "قالب" بجانب مدونتك

3- ستفتح لك صفحة التصميم ، اضغط على "تحرير html"

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

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

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

]]></b:skin>

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

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

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

و أخيرا قم بالضغط على حفظ و مبروك عليك الاضافة.

0 التعليقات