السلام عليكم إخواني الكرام في هذا الدرس سوف نتطرق إلى الطريقة الأسهل في إدراج ترقيم الصفحات لمدونات بلوجر بدون اي تعقيدات تذكر،عليكم سوى تتبع المراحل التالية :


انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ثم إضافة أداة ثم اختر HTML/Javascriptولآن الصق الكود التالي :
و اخيرا و ليس آخرا قم بإزاحة الأداة تحت "رسائل المدونة الالكترونية" كما هو موضح في الصورة اسفله
في الكود أعلاه يمكنك تغيير الأرقام الحمراءحسب رغبتكم.
1 : var pageCount = 5;
هذه القيمة تمثل عدد المواضيع المراد عرضها في صفحة الواحدة
2 : var displayPageNum = 3;
هذه القيمة تمثل عدد الصفحات التي يتم إدراجها.
<style>
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #EF00BF; /* لون إطار الأرقام */
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #EFB700; /*لون إطار الأرقام عند لمسه بالماوس */
background-color:#00EFEF; /* لون مساحة الإطارعند لمسه بالماوس*/
}
.showpagePoint {
color::#EF2000; /* لون رقم الصفحة المفتوحة */
text-decoration:none;
border: 1px solid #FA2100; /* لون إطار رقم الصفحة المفتوحة */
background:#E9FA00; /*لون مساحة إطار رقم الصفحة المفتوحة */
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #A256C3; /* لون إطار "التالي, السابق" */
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#0AEA82; /*لون الأرقام */
}
</style>
<script type="text/javascript">
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
var pageCount=5; /* عدد المواضيع المراد عرضها في صفحة الواحدة*/
var displayPageNum=3; /* عدد الصفحات التي يتم إدراجها */
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='Prevous';
var downPageWord ='Next';
var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){
itemCount++;
}
}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += ' <span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){
if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}
html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}
if(postNum==1) postNum++;
html += '</div>';
if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
}
</script>
<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
<div style="text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;"> <a href="http://www.monte-escalier-prix.org">www.monte-escalier-prix.org</a></div>
و اخيرا و ليس آخرا قم بإزاحة الأداة تحت "رسائل المدونة الالكترونية" كما هو موضح في الصورة اسفله
في الكود أعلاه يمكنك تغيير الأرقام الحمراءحسب رغبتكم.
1 : var pageCount = 5;
هذه القيمة تمثل عدد المواضيع المراد عرضها في صفحة الواحدة
2 : var displayPageNum = 3;
هذه القيمة تمثل عدد الصفحات التي يتم إدراجها.
ثم قم بالحفظ
Chlamydia Trachomaty
| روابط هذه التدوينة قابلة للنسخ واللصق | |
| URL | |
| HTML | |
| BBCode | |




91 تعليقات :
أخي الفاضل ما الداعي الذي يجعلك تكتب رابط مدونتك بدون كتابة اي تعليق
بارك الله فيك اخي
اليوم اصول واجول في هذه المدونة القيمه والرائعة
مجهود تشكر عليه
عندي استفسار بسيط حابة اغير ألوان الأرقام ارجوا الإفادة
ولك كل الشكر
الف شكر لك اخي ابو إياد لتغيير الألوان وتوفير الجهد
بارك الله فيك
بعد إذنك راح اضيفك في القائمات الصديقة اذا تسمح
تحياتي
يشرفني أن أكون من بين اصدقاء مدونتك الجميلة،فانا رهن الاشارة .
سوف اضع مدونتك ايضا ضمن اصدقاء المدونة لتتبعك الدائم
دمت بخير
تمت اضافتك والف شكر لإضافتي
ممكن أخي الكريم تعطيني الوان من ذوقك لأني والله ذوقي في الألوان هابط لو تعملي لون الشريط مثل لون الشريط الثاني في الصورة جزاك الله خير
تشكر على جهدك الرائع يا ابو اياد
في خدمة المدونين
وفي الحقيقة اتبعت مافي الشرح ولكن للاسف
الطريقه ما ظبطتش عندى ..
لقيت الكود الى حطيته مخفي ولا ظهور لاى ترقيم
عموما تسلم ايدك
@ak3
ممكن رابط مدونتك للمعاية
@ak3
أخي الكريم حاول أن تضع 5 أو 6 مواضيع فقط تظهر على الصفحة الرئيسية ثم شوف هل سيظهر الترقيم أم لا ،ضع مثلا :عدد المواضيع في الرئيسية =6 وعدد إعلانات أدسنس التي تظهر عقب 5 مواضيع
للاسف عملت زى ماقولت بس ما ظبطتش معايا
مع العلم انى اخدت الكود زى ما هو بدون تغير او اضافة اى شيء..!
لكن لو لازم احط اكواد الالوان علشان تظبط معايا فانا للاسف مش هعرف لانى معنديش خبره..
فاياريت انت تظبطلى كود يتناسب مع الوان المدونة..
وجزا الله كل خير
@ak3
أخي الكريم ،من الممكن أن يكون المشكل في قالب مدونتك ،إبعت لي نسخة من قالب مدونتك للمعاينة على بريدي الالكتروني
camelion20051@hotmail.com
تم ارسال نسخة من القالب
عنوان الرسالة ..
قالب مدونة امير اكرم ak3
مع تحياتى
سيدي..
كان موضوعك بلسم على صفحاتي المتواضعه
فــ شكرااا لأبداعاتك هناااا 00 بلل أوردتي بالمعرفه 00 سعدت بــ مساعدتك في تسهيل ماهو صعب لنا..
اتمنى تشرفي وزيارتي في مدونتي ..فأنا محتاجه بأخذ رايك مايصعب علي..
لك مني الوان الورود 00 دمت نقي 00 ود لاينتهي
@مجنونة حُب
شكرا لك أختي الكريمة على كلامك الجميل والراقي والذي ما دل إلا على حسن أخلاقك وروحك المُحبة ،أنا ألقى سعادتي عند مساعدتي للناس فلا تشكريني على شيء آخذ مقابله
الف الف الف شكررررررررررر
حضرتك شرحك رائع
شكراً ممكن تشرح لنا كود ارقم فقط من دون التالى و السابق
سلام عليكم . و شكرا على هذا الشرح الجميل , و لكن هل من الممكن أن تشرح لنا كيفية ترقيم صفحات المحتوى ؟؟
أخ أبو إياد أرجوك أن تجيبني . فالأرقام لا تظهر عندي و لا بأي طريقة . لدرجة بأن لغيت كل شيئ و بدأت من جديد و عبث . أرجو المساعدة و شكرا
@غير معرف
السلام عليكم أخي الكريم ،وعذرا منك لعدم الرد عليك بسرعة ،ماذا تقصد بصفحات المحتوى ،هل تقصد بها الصفحات الثابتة أم صفحات الرسائل في الصفحة الرئيسية ،وأرجوا أن تضع رابط مدونتك للمعاينة
أنا أقصد صفحات الرسائل . فالرقام تظهر أحيانا لمدة لحظة و من ثم تختفي . و شكرا جزيلا noujoum-alsama.blogspot.com
@noujoum
السلام عليكم ،قم بتغيير القيمة التي تمثل عدد المواضيع المراد عرضها في صفحة الواحد وهي القيمة التي توجد في الكود باللون الأحمر ،قم بتبديل القيمة 5 بالقيمة 1
var pageCount=5
شكرا أخ أبو إياد و لكن المشكلة ما زالت موجودة
أخ أبو إياد شكرا جزيلا و لكن عندي مشكلة . فإذا أضفت موضوع في تاريخ 1/10 مثلا . عند إنتقالي إلى رقم 2 من الصفحات , أنتقل إلى موضوع بتاريخ 3/10 متجاهلا موضوع 2/10 . الذي لا يظهر . أرجو الحل و شكرا
هل من جواب ؟؟؟
@غير معرف
بالتأكيد أخي تأكد أولا من عدد المواضيع التي قمت بإختيارها من تحرير الرسائل الإلكترونية ،يجب أن يكون مطابق للعدد في الكود ما لون باللون الأحمر وهو العدد 5 في الكود أعلاه ،وهذا يعني أنك إذا إخترت على سبيل المثال عدد المواضيع التي سوف تظهر في الصفحة الرئيسية هو 7 ،فيجب عليك تبديل العدد 5 من الكود أعلاه ذي اللون الأحمر إلى العدد 7 .وهذا من جهة أما من جهة أخرى قم بحساب عدد مواضيع مدونتك ثم قم بقسمته على عدد المواضيع التي تريد أن تظهر على الصفحة الواحدة وهو العدد 7 كما في مثالنا السابق ،فمثلا إذا كان عدد مواضيع مدونتك هو 70 تدوينة إذا سوف تصبح المعادلة على هذا الشكل 7/70=10 والعدد 10 سوف تقوم بإدخاله بدل العدد 3 في الكود أعلاه ذا اللون الأحمر .
بالتوفيق
شكرا جزيلا أخ أبو إياد و لكن ليس هذا المقصود . فأنا محدد عدد المواضيع في الصفحة الواحدة هو واحد . و دائما الموضوع صاحب التاريخ ما قبل الأخير لا يظهر إلا في فهرس المدونة . للمعاية noujoum-alsama.blogspot.com و أنا أتأسف شديد الأسف على الإزعاج . فعلا أصبحنا نخجل من لطفك معنا و شكرا جزيلا
@غير معرف
أرسل لي نسخة من قالب مدونتك على البريد الإلكتروني للمعاينة
mohamed@abu-iyad.com
لقد أرسلت نسخة و أنتظر الإجابة . شكرا جزيلا جزيلا . تحياتي
رائع
.
جزاكم الله كل خير ورفع قدركم ..
والله انت جامد ومميز يا ابو اياد تسلم ايدك
كنت أدورها ألف شكر لك
جزاك الله خيراً
أبوأياد ،،
تحية طيبة ،، لا أعلم السبب في عدم تمني من تركيب هذه الإضافة ،،
هل بإمكانك أن تعطيني الكود جاهز بأي ألوان ،،
لكن أريد كود جاهز أقوم بتركيبه من دون تعديل ،،
ولك مني الشكر
وأيضاً مجموع المواضيع في جميع الصفحات يختلف عن عددهم الأصلي ..!
ولا أدري لماذا
واسف لازعاجك اخي
استازى ابو اياد ان وضعت الكود فى مدونتى بس ما ظهرت ارقام عدد الصفحات يعنى طلع عندى خط فاضى لا يوجد حاجة فى داخله ارجوا التوضيح
شكرا جزيلا على هالموضوع
مشكوررر ابو اياد
كنتابحث عن هذه الاضافات وقد ممللت البحث فالحمد لله وجدت ضالتي عندك
فلك جزيل الشكر على شرحك المبسط ومعلوماتك القيمه
مشكووووووووووووووووووووور ابواياد على عدم الرد على استفسارى
il n'as po fonctione vec moi :(
voila mon blog
www.youanachid.blogspot.com
طيب وين اضيف الكود فيه ؟ في نهايه المحرر ولا بمكان محدد ولا كيف ؟
حاولت ماضبط معاي !!
@Dr.Reema
يجب إضافة الكود في أداة جديدة كما في الصورة
"تصميم" ثم إضافة أداة ثم اختر HTML/Javascript
شكراااا جزيلاً أخي أبو إياد على ماتقدم
واتمنى منك ان تضع صوره توضيحيه للشروحات
اكيد ان تعرف مايحتاج عشاان المبتدئين يعرفو
مثلي<<<هع
طيب ازاى نغير لونها
شكرا بارك الله فيكم تمت اضافة الارقام بنجاح والحمدالله
اخي انا استعمل قالب مدونتك
عندما اضعها لا يشتغل
اخي هناك مشكلة عندما ادخل الكود تظهر الصفحة تمام لكن عندما اظغط على الصفحة2 يتكرر موضوعين من الصفحة الرئيسية ممن طريقة للتخلص منها الله يحفظك
لم تعمل الأداة معي !!
جزاكم الله خيراً وجعلها في ميزان حسناتكم
مشكور أخى ولكن ما الداعى لوضع رابط مدونتك فى السكريبت هل هو ترافيك أم نسيت تقولنا نغير رابط مدونتك برابط مدونتنا ؟
@A sea of ideas
وما الداعي للدخول على المدونة وتركيب هذه الاضافة من أصله ....!!!!
شكراااا جزيلااااا
شكرا على الاضافة
شكرا على الكود ولكن حدثت عندى مشكلة الترقيم لا يزيد عن 42 والمدونة بها تدوينات اكثر هل يمكن التعديل وهذا هو رابط المدونة للمشاهدة
http://arab-uprising.blogspot.com
أزال المؤلف هذا التعليق.
روعة يا ابو اياد
جدا روعة اشكرك
للأسف حاولت ولكن لم تضبط معي
ومشكور على الشرح
شكرا
شكرااا لك عىل الموضوع الرائع
لكن هناك مشكلة أنه عندما أضغط على الصفحة الثانية يقفز إلى الصفحة الثالثة
وشكرااا لك
هذه المدونة للمعاينة
http://everi-thing.blogspot.com/
شكرا لك اانا عملتها
شكرا جزيلا
لو ممكن توضيح اكثر الكلام العربى الى موجود فى الكود احذفه ازاى
شكرا جزيلاً ...
ولكن هل من الضروري أن نقوم بهذه الخطوة
و اخيرا و ليس آخرا قم بإزاحة الأداة تحت "رسائل المدونة الالكترونية" كما هو موضح في الصورة اسفله
لم أفهم لماذا نزيح الأداة وهل يعني أن أضعها بالفوتر تحت رسائل المودونة ؟؟
شكرا جدا على الموضوع الرائع
خوي جزاك الله خيرا
بس و الله انا ما عرفت كيف اعدل على الكود
من وين بدي اجيب الالوان؟؟؟
http://egyelbass.blogspot.com/
وضعت قالب به ترقسم لكنه غير جيد اريد حدفه و ادخال هدا الترقيم الدي وضعته
thank you very muck Abu ayad , you very very kind
((:
السلام عليكم ورحمة الله تعالى وبركاته والله أخي موضوعك رائع وفي القمة..
وقد استفدت منه شخصيا
أود أن أدعوك لزيارة مدونتي المبتدئة
زيارتك لشرف عظيم لي-- و اخبرني عن نقائصها فأنا ارجو منك النصح--
السلام عليكم
MARWA-1ST.BLOGSPOT.COM
السلام عليكم .. الشكر الجزيل لك
لكن الكود لم يعمل معي .. ظهر مرة واحدة فقط
و ايضا هل اقوم بحدف ما هو مكتوب بالغة العربية أم لا ؟؟
شكرا لك اخي محمد بوسلامة ,مدونتي قد استفادة كتيرا من نصائحك واصل و لا تفاصل جزاك الله كل خير
http://worodstar.blogspot.com
يا الهي كم هي سيئة تلك الازرار انها تبدو جميلة في صورة الموضوع
شكرا لك على المجهود
x:
شكرا لك على الافادة وجارى التطبيق :)
<3
مشكور أخي اياد
newsjabe.blogsopt.com
شكرا كثيرا على الموضوع الرائع http://moubarayat.blogspot.com
مشكور
مشكور أخى بارك الله فيك
معلومة طبية
شكرااا بزاف جزاك الله خيرااا
grazieeeeeeee
أزال المؤلف هذا التعليق.
اخى ابو اياد شكرا ولكن تم تقليل عدد المواضيع المنشورة فى كل صفحة عما كانت عليه سابقا واليك رابط المدونة
http://elnoba-elyoum.blogspot.com/
لو سمحت انا عملت الخطوات دى ومشتغلتش معايا جايبلى الشريط ابيض بدون ارقام والصفحه زى ما هى ارجو المساعده http://elhayq.blogspot.com/
nice :D
:-t شكراا لك اخي
شكرا اخي هاي مدونتي
http://animelandtv.blogspot.com/
جزاك الله خيرا
شكرا على الإفادة
http://almotaqqaf.blogspot.com/
شكرا لك اخي موضوع مميز
اهلا بك في موقعنا
http://www.mogtm3-msmmen.tk/