اضافة ترقيم لصفحات بلوجر

بسم الله الرحمن الرحيم

بعض الاستايلات او القوالب الخاصة بمدونات بلوجر

لا تحتوي على ترقيم للتدوينات

وتكتفي بكلمة السابق والتالي او الصفحة السابقة والصفحة التالية

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

مثال على الاضافة 

مدونة شوف صورة

ستلاحظ ارقام الصفحات في اسفل التدوينات

لاضافة الكود تابع الخطوات االتالية

1- من لوحة التحكم اختار layout او تخطيط

اسفل لوحة الرسائل اختار 

اضافة اداة او add gadget

2- اختر اضافة كود html/javascript

ثم اضف هذا الكود بداخله

==========================================================

<!-- 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: #000;}/* www.uniegy.blogspot.com */

.showpageNum a, .showpage a {color: #000;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.uniegy.blogspot.com */

.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc; background: #0000; 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:#000000;}/* 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 -->

========================================================================

يمكنك تغيير الالوان كي تناسب الوان مدونتك من خلال جزء ال css في بداية الكود