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

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

سيظهر العداد اسفل المدونة بهذا الشكل :

نأتى للشرح :


فى البداية نذهب الى ادارة المدونة ثم تخطيط المدونة :

ثم إضافة أداة :

بعد ذلك إضافة HTML :

 ثم ننسخ هذا الكود بالكامل ونضعه بداخله ونضغط بعدها حفظ :

رمز Code:

<!-- Stylish colored  Navigation Widget For Blogger By UinEgy @ http://www.uniegy.blogspot.com -->
<style type="text/css">
#blog-pager{padding:5px 0 !important;}
.showpageArea {font-weight: bold;margin:5px;}/* www.uniegy.blogspot.com */
.showpageArea a {text-decoration:underline;color: #fff;}/* www.uniegy.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: #2790d6; background:   -moz-linear-gradient(top, #3A8DD6 0%, #5389B8 50%, #91BDE3 51%, #215E94   100%); background: -webkit-gradient(linear, left top, left bottom,   color-stop(0%,#76B5ED), color-stop(50%,#90C9E8),   color-stop(51%,#5ca8db), color-stop(100%,#3786ba)); filter:   progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a',   endColorstr='#7cbc0a',GradientType=0 ); }/* www.uniegy.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.uniegy.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.uniegy.blogspot.com */
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}/* www.uniegy.blogspot.com */
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}/* www.uniegy.blogspot.com */
</style>

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

إذا لم يستجيب نسخ الكود معك حمله من ملف التكست هذا وانسخه اضغط هنا

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

لتغير الالوان حسب الوان مدونتك اكتب تعليق ورابط مدونتك ويسعدنى المساعدة 

تحياتى للجميع انتظرونا فى موضوع أخر