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

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

ملاحظة:داخل كل صوره ستجد مؤشر للماوس يشير لشكل ازرار الاضافه عند وضع الماوس عليها..

والان هيا بنا نستعرض معا الاشكال الخمسه لاضافة ترقيم صفحات مدونة بلوجر.

 كود رقم 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 -->

الي هنا نكون قد انتهينا من موضوع ترقيم صفحات مدونة بلوجر بحمد الله وتوفيقه واي استفسارات يمكنك ترك تعليق بالاسفل.