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

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

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

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

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

http://blogger.com

2- اضغط على رابط "تصميم" أو "design" بجانب مدونتك

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

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

(اضغط على الصورة لتكبيرها)

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

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

]]>

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

.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- ابحث عن السطر التالي:

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

;

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

'data:label.url'

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

'data:label.url + "?&max-results=7"'

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

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

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

]]>

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

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

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

التسميات:

فيسبوك تويتر جوجل + لينكدن واتساب

احمد فيكتور

مدونة ابداع مهوس : مدونة تقنية تحتوى على مجموعة دروس ودورات فى مجالات تقنية مختلفة مثل دروس انظمة التشغيل والبرامج والالعاب وبلوجر وفوتوشوب وتطبيقات اندوريد والربح من الانترنت وغيره من الشروحات المميزة تاست مدونة ابداع مهوس عام 2013 وبفضل الله نالت اعجاب الكثير مؤسس المدونة ابداع مهوس مدون عراقي توصل بجديد المواضع