طريقة ترقيم صفحات مدونة بلوجر بخمس الوان بطريقه سهله وانيقه

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

 كود رقم 1

<!-- Stylish colored Navigation Widget For Blogger By tqarob @ http://www.tqarob.blogspot.com -->
<style type="text/css">
#blog-pager{padding:5px 0 !important;}
.showpageArea {font-weight: bold;margin:5px;}/* www.way2blogging.org */
.showpageArea a {text-decoration:underline;color: #fff;}/* www.tqarob.blogspot.com */
.showpageNum a, .showpage a {color: #fff;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;margin:0 3px;padding:3px 5px; background: #9dd53a; background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); }/* www.tqarob.blogspot.com */
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc; background: #6db3f2; background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); } /* www.tqarob.blogspot.com */
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); }/* www.tqarob.blogspot.com */
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}/* www.tqarob.blogspot.com */
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}/* www.tqarob.blogspot.com */
</style>

<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=5;
var numshowpage=3;
var upPageWord ='السابق';
var downPageWord ='التالي';
</script>
<script src='http://tqarob.googlecode.com/files/tqarob_bloggerpagenavi.js' type='text/javascript'></script>
<!-- Stylish colored Numbered Page Navigation Widget For Blogger By tqarob @ http://www.tqarob.blogspot.com -->



كود رقم 2

<!-- Stylish colored Navigation Widget For Blogger By tqarob @ http://www.tqarob.blogspot.com -->
<style type="text/css">
#blog-pager{padding:5px 0 !important;}
.showpageArea {font-weight: bold;margin:5px;}/* www.tqarob.blogspot.com */
.showpageArea a {text-decoration:underline;color: #fff;}/* www.tqarob.blogspot.com */
.showpageNum a, .showpage a {color: #fff;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;margin:0 3px;padding:3px 5px; background: #9dd53a; background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); }/* www.tqarob.blogspot.com */
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc; background: #6db3f2; background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); } /* www.tqarob.blogspot.com */
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); }/* www.tqarob.blogspot.com */
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}/* www.tqarob.blogspot.com */
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}/* www.tqarob.blogspot.com */
</style>

<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=5;
var numshowpage=3;
var upPageWord ='السابق';
var downPageWord ='التالي';
</script>
<script src='http://tqarob.googlecode.com/files/tqarob_bloggerpagenavi.js' type='text/javascript'></script>
<!-- Stylish colored Numbered Page Navigation Widget For Blogger By tqarob @ http://www.tqarob.blogspot.com -->



كود رقم 3

<!-- Stylish colored Navigation Widget For Blogger By tqarob @ http://www.tqarob.blogspot.com -->
<style type="text/css">
#blog-pager{padding:5px 0 !important;}
.showpageArea {font-weight: bold;margin:5px;}/* www.tqarob.blogspot.com */
.showpageArea a {text-decoration:underline;color: #fff;}/* www.tqarob.blogspot.com */
.showpageNum a, .showpage a {color: #fff;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #ffb76b; background: -moz-linear-gradient(top, #ffb76b 0%, #ffa73d 50%, #ff7c00 51%, #ff7f04 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb76b), color-stop(50%,#ffa73d), color-stop(51%,#ff7c00), color-stop(100%,#ff7f04)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b', endColorstr='#ff7f04',GradientType=0 ); }/* www.tqarob.blogspot.com */
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc; background: #9dd53a; background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); }/* www.tqarob.blogspot.com */
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); }/* www.tqarob.blogspot.com */
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}/* www.tqarob.blogspot.com */
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}/* www.tqarob.blogspot.com */
</style>
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=5;
var numshowpage=3;
var upPageWord ='السابق';
var downPageWord ='التالي';
</script>
<script src='http://tqarob.googlecode.com/files/tqarob_bloggerpagenavi.js' type='text/javascript'></script>
<!-- Stylish colored Numbered Page Navigation Widget For Blogger By tqarob@ http://www.tqarob.blogspot.com -->

كود رقم 4

<!-- Stylish colored Navigation Widget For Blogger By tqarob @ http://www.tqarob.blogspot.com -->
<style type="text/css">
#blog-pager{padding:5px 0 !important;}
.showpageArea {font-weight: bold;margin:5px;}/* www.tqarob.blogspot.com */
.showpageArea a {text-decoration:underline;color: #fff;}/* www.tqarob.blogspot.com */
.showpageNum a, .showpage a {color: #fff;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #3b679e; background: -moz-linear-gradient(top, #3b679e 0%, #2b88d9 50%, #207cca 51%, #7db9e8 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3b679e), color-stop(50%,#2b88d9), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e', endColorstr='#7db9e8',GradientType=0 ); }/* www.tqarob.blogspot.com */
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc; background: #aebcbf; background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 ); }/* www.tqarob.blogspot.com */
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); }/* www.tqarob.blogspot.com */
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}/* www.tqarob.blogspot.com */
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}/* www.tqarob.blogspot.com */
</style>
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=5;
var numshowpage=3;
var upPageWord ='السابق';
var downPageWord ='التالي';
</script>
<script src='http://tqarob.googlecode.com/files/tqarob_bloggerpagenavi.js' type='text/javascript'></script>
<!-- Stylish colored Numbered Page Navigation Widget For Blogger By tqarob @ http://www.tqarob.blogspot.com -->


كود رقم 5 والاخير

<!-- Stylish colored Navigation Widget For Blogger By tqarob @ http://www.tqarob.blogspot.com -->
<style type="text/css">
#blog-pager{padding:5px 0 !important;}
.showpageArea {font-weight: bold;margin:5px;}/* www.tqarob.blogspot.com */
.showpageArea a {text-decoration:underline;color: #fff;}/* www.tqarob.blogspot.com */
.showpageNum a, .showpage a {color: #fff;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #789EB1; background: -moz-linear-gradient(top, #789EB1 0%, #618FA7 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#789EB1), color-stop(100%,#618FA7)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#789EB1', endColorstr='#618FA7',GradientType=0 ); }/* www.tqarob.blogspot.com */
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc;background: #7d7e7d; background: -moz-linear-gradient(top, #7d7e7d 0%, #6B6B6B 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#6B6B6B)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#6B6B6B',GradientType=0 ); }/* www.tqarob.blogspot.com */
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); }/* www.tqarob.blogspot.com */
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}/* www.tqarob.blogspot.com */
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}/* www.tqarob.blogspot.com */
</style>

<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=5;
var numshowpage=3;
var upPageWord ='السابق';
var downPageWord ='التالي';
</script>
<script src='http://tqarob.googlecode.com/files/tqarob_bloggerpagenavi.js' type='text/javascript'></script>
<!-- Stylish colored Numbered Page Navigation Widget For Blogger By tqarob @ http://www.tqarob.blogspot.com -->

الي هنا نكون قد انتهينا من موضوع ترقيم صفحات مدونة بلوجر بحمد الله وتوفيقه واي استفسارات يمكنك ترك تعليق بالاسفل.
أصدقاء(تطوير ويب)
تعليقات Facebook
18تعليقات Blogger

18 عدد التعليقات على موضوع طريقة ترقيم صفحات مدونة بلوجر بخمس الوان بطريقه سهله وانيقه

غير معرف يقول...

هل يمكن اضافة اداة تقيم التعليقات ( مؤيد او غير مؤيد لتعليق )

لمدونة بلوجر ؟

شكرا لك

محمد

غير معرف يقول...

لا اخى يمكن اضافة تلك الاداه فقط للمواضيع وليست متاحه لبلوجر حتى يومنا هذا

غير معرف يقول...

رائع جدا بس لو كانت الارقام عربية
شكرا ليك يا استاذ تقارب اخوك محمد الاسمرانى الاسكندرية

غير معرف يقول...

@غير معرف
ماتقلقش حبيبي الارقام معربه بالكامل
منور يامحمد باشا

amly يقول...

السلام عليكم اخى
شكرا على الكود
قمت باضافته عندى مع تغيير اسم المدونة بمدونتى واضفته ولكنه لا يظهر
وهذا رابط المدونة

http://arab-uprising.blogspot.com

غير معرف يقول...

@amly
لا تقم باي تغيير في الكود وسوف يعمل بطريقه سلميه فقط ضعه كما هو بدون تعديل منك في اداه من نوع جافا سكربت ولا تضع اسما للاداه
ملحوظه: هذه الاضافه بالذات تعمل جيدا ومجربة مني شخصيا وملف الجافا سكربت مرفوع علي حسابي في جوجل كود!!

amly يقول...

شكرا اخى الفاضل لقد جربتها كما قلت لى وهى تعمل الان
جزاك الله خيرا
الف الف شكر

غير معرف يقول...

@amly
الحمد لله ان العمليه تمت بنجاح
بالتوفيق اخى لا شكر على واجب
تقبل مودتى وتقديري

youness يقول...

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


http://arabe-blogg.blogspot.com/

غير معرف يقول...

@youness
الحقيقه لا ادري ما السبب
من المفترض ان يظهر بدون مشاكل وها انت ترى صاحب التعليق الذي قبلك قد ظهرت عنده بدون مشاكل
قد تكون المشكله تضارب بين اكواد الجافا سكربت في قالب مدونتك نظرا لكثرتها
على كل حال جرب الاضافه على اي مدونه تجريبيه اخرى واعطيني خبر!!

Unknown يقول...

جزاك الله خيرا
لكن الاضافة لا تظهر الا فى الصفحة الرئيسية
عندما ادخل على الاقسام ( التسميات ) لا تظهر

Unknown يقول...

تظهر بهذا الشكل عند الدخول للتسميات

http://img853.imageshack.us/img853/5998/17862270.png

غير معرف يقول...

@علي
العفو حبيبي بالتوفيق دايما

غير معرف يقول...

@محمد زيداني
اخي محمد تلك الاضافه بالذات اثق فيها تمام الثقه وقد جربتها على اكثر من مدونه.. ارسل لي قالب مدونتك علي بريدي هذا وساقوم بتطبيقها على قالبك
tqarob@gmail.com

zoma90 يقول...

شكراً، تعمل جيداً وسهلة التعديل أيضاً.

إرسال تعليق

التعليقات متاحه لمستخدمي حساب جوجل فقط.ولاضافة كود: أستعن بهذه الأداة السريعة Encode/HTML .