إضافة خاصية ترقيم الصفحات حسب لون مدونتك Pagination

السلام عليكم و رحمته الله تعالى و بركاته

في هذه التدوينة إن شاء الله سنتطرق إلى كيفية عمل ترقيم الصفحات أسفل المواضيع التي تظهر في الصفحة الرئيسية و أيضا في باقي صفحات مدونتك على بلوجر..و هذا لجعل مدونتك أكثر جمالية و ايضا لجعل الزائر لا يغادر مدونتك عند رؤية عدد من المواضيع المحدودة التي تظهر في صفحة مدونتك الرئيسية ..

و الأغلبية الكبيرة من الزوار لا يعرفون معنى كلمة " رسائل أقدم " و رسائل أحدث " التي تكون أسفل التدوينات على بلوجر ..و وضع ترقيم الصفحات هو الأكثر شمولية و معرفة لدى جميع الزوار لقراءة جميع مواضيعك على مدونتك..

إذا رغبت في إضافة الهاك 

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

</body>

 ثم ضع قبله مباشرة هذا الكود:

<!-- PAGE NAVIGATION STAR-->
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=6;
var numshowpage=6;
var upPageWord =&#39;&#9668;&#39;;
var downPageWord =&#39;&#9658;&#39;;

</script>

الأن سنقوم بتخصيص الإضافة بعدد التدوينات المرغوب في ظهورها

ابحث داخل الكود الذي اضفناه عن

var postperpage=6; 

و قم بتغيير الرقم 6 لعدد المواضيع التي ترغب في ظهورها على الصفحة الرئيسية لمدونتك

ثم ابحث في الكود

var numshowpage=6;

قم بتغيير الرقم 6 إلى عدد المواضيع التي تريد ظهورها في باقي صفحات مدونتك

الأن نمر إلى الخطوة الثالثة و الأخيرة إن شاء الله و هي تخصيص الإضافة لتظهر باللون المتطابق للون مدونتك

قم بالبحث عن الكود التالي

]]></b:skin>

ثم قم بوضع إحدى هذه الأكواد قبله مباشرة **ملاحظة قم باختيار الكود المطابق للون مدونتك فقط لون واحد

๑۩۞۩๑๑۩۞๑۩۞۩๑๑۩۞۩๑۩۞۩۩۞۩۩๑۩۞۩۩۞۩๑

اللون الأخضر

/* -- NUMBER PAGE NAVIGATION -- */.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  border:1px solid #999;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  background: #3F8657;
  color:#fff;
  }

.showpageOf { 
margin:0 8px 0 0;
}
.showpageNum a:hover {
  border:1px solid #888;
  background: #ccc;
  }

.showpagePoint { 
  color:#fff;
  text-shadow:0 1px 2px #333;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  border:1px solid #999;
  background: #F1BA24;
  text-decoration: none;
  }

๑۩۞۩๑๑۩۞๑۩۞۩๑๑۩۞۩๑۩۞۩۩۞۩۩๑۩۞۩۩۞۩๑

اللون الأزرق

/* -- NUMBER PAGE NAVIGATION -- */.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  border:1px solid #999;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  background: #3B5998;
  color:#fff;
  }

.showpageOf {
margin:0 8px 0 0;
}
.showpageNum a:hover {
  border:1px solid #888;
  background: #ccc;
  }

.showpagePoint {
  color:#fff;
  text-shadow:0 1px 2px #333;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  border:1px solid #999;
  background: #F1BA24;
  text-decoration: none;
  } 

๑۩۞۩๑๑۩۞๑۩۞۩๑๑۩۞۩๑۩۞۩۩۞۩۩๑۩۞۩۩۞۩๑

اللون البرتقالي

/* -- NUMBER PAGE NAVIGATION -- */.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  border:1px solid #999;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  background: #7B3A11;
  color:#fff;
  }

.showpageOf { 
margin:0 8px 0 0;
}
.showpageNum a:hover {
  border:1px solid #888;
  background: #ccc;
  }

.showpagePoint { 
  color:#fff;
  text-shadow:0 1px 2px #333;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  border:1px solid #999;
  background: #F1BA24;
  text-decoration: none; 

  } 

๑۩۞۩๑๑۩۞๑۩۞۩๑๑۩۞۩๑۩۞۩۩۞۩۩๑۩۞۩۩۞۩๑ 

اللون الرمادي

/* -- NUMBER PAGE NAVIGATION -- */.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  border:1px solid #999;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  background: #52575C;
  color:#fff;
  }

.showpageOf { 
margin:0 8px 0 0;
}
.showpageNum a:hover {
  border:1px solid #888;
  background: #ccc;
  }

.showpagePoint { 
  color:#fff;
  text-shadow:0 1px 2px #333;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  border:1px solid #999;
  background: #F1BA24;
  text-decoration: none;
  }

๑۩۞۩๑๑۩۞๑۩۞۩๑๑۩۞۩๑۩۞۩۩۞۩۩๑۩۞۩۩۞۩๑

لون بنفسجي

 /* -- NUMBER PAGE NAVIGATION -- */.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  border:1px solid #999;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  background: #8B2F73;
  color:#fff;
  }

.showpageOf { 
margin:0 8px 0 0;
}
.showpageNum a:hover {
  border:1px solid #888;
  background: #ccc;
  }

.showpagePoint { 
  color:#fff;
  text-shadow:0 1px 2px #333;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  border:1px solid #999;
  background: #F1BA24;
  text-decoration: none;
  }

 إنتهى الدرس أتمنى أن تتوفقوا  في تطبيقه

و السلام عليكم ورحمة الله

إضافة خاصية أرقام أسفل المواضيع حسب لون مدونتك بألوان متعددة

في هذه التدوينة إن شاء الله سنتطرق إلى كيفية عمل ترقيم الصفحات أسفل المواضيع التي تظهر في الصفحة الرئيسية و أيضا في باقي صفحات مدونتك على بلوجر..و هذا لجعل مدونتك أكثر جمالية و ايضا لجعل الزائر لا يغادر مدونتك عند رؤية عدد من المواضيع المحدودة التي تظهر في صفحة مدونتك الرئيسية