كود ترقيم صفحات بلوجر بالعربي ، فمعظم الأكواد الموجود هي أكواد باللغات الأجنبية وفي الكثير من الأحيان لا تتلائم والمدونات العربية، لذالك فترقيم مدونات بلوجر باللغة العربية يعطي طابع مميز للمدونات العربية ويجعلها تظهر أكثر احترافية.

نقوم بالبحث عن الرمز </body> ونقوم بإضافة الكود التالي قبله . ضع مكان xxx عدد التدوينات بالصفحة الواحدة.

<!--Page Navigation Starts-->

<b:if cond='data:blog.pageType != &quot;item&quot;'>

  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>

ageNum=3;
    var upPageWord =&#39; السابق &#
var pageCount=xxx7;    var display
P39; ;
    var downPageWord =&#39; التالي &#39; ;

t>
   <script src='http://aymangaber.we
var allpages =&#39; الصفحات &#39; ;
   </scri
pbs.com/HTML/blogger-page-nav.js' type='text/javascript'/>
  </b:if>
</b:if>

}
<!--Page Navigation Ends --
>

ثم نقوم بالبحث عن الكود ]]></b:skin> ، ونقوم بإضافة الكود التالي قبله ,

.showpageArea {font-family:verdana; color: #000; font-size:11px; margin:10px;}
.showpageArea a {color: #000; text-shadow:0 1px 2px #fff; font-weight: 700;}

showpageNum a:hover {border:1px solid #888; }
.showpageOf{margin:0 8px 0 0;
.showpageNum a {padding: 3px 8px; margin:0 4px; text-decoration: none;}    

.}  

pagePoint {color:#fff; text-shadow:0 1px 2px #333; padding: 3px 8px; margin: 2px;   font-weight: 700; text-decoration: none; }}
.sho
w

احفظ القالب.

...تابع القراءة

كود مميز لترقيم لترقيم مدونات بلوجر pagination blogger widget بدون ادخال أي تعديل على القالب الرئيسي، كود يتم اضافته مباشرة عن طريق أداة  HTML/Javascript.

<style>

.showpageArea a {

text-decoration:underline;
}
.showpageNum a {

e;
border: 1px solid 
text-decoration:no
n#EF00BF; /* لون إطار الأرقام */

wpageNum a:ho
margin:0 3px;
padding:3px;
}
.sh
over {

 1px solid #EFB700; /*لون إطار الأرقام عند لمسه بالماوس */
backgr
border
:ound-color:#00EFEF; /* لون مساحة الإطارعند لمسه بالماوس*/
}

/
text-decoratio
.showpagePoint {
color::#EF2000; /* لون رقم الصفحة المفتوحة 
*n:none;
border: 1px solid #FA2100; /* لون إطار رقم الصفحة المفتوحة */

x;
padding:3px;
}
.showpageOf {
text-decoration:none;
paddi
background:#E9FA00; /*لون مساحة إطار رقم الصفحة المفتوحة */
margin:0 3
png:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #A256C3; /* لون إطار "التالي, السابق" */

:#0AEA82; /*
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
colo
rلون الأرقام */
}

</style>

<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;

LablePage = thisUrl.indexO
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var i
sf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;

14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf(
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")
+"?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';


ageWord = 'Last';
var upPageWord ='Prevous';
var downPageWord =
var pageCount=5; /* عدد المواضيع المراد عرضها في صفحة الواحدة*/
var displayPageNum=3; /* عدد الصفحات التي يتم إدراجها */
var firstPageWord = 'First';
var end
P'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++) {

category[c]; c++) {
if(encodeURIComponent(post_
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.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;

{

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timesta
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category
)mp)!=-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++){

><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml =
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
" '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}

if(p==(thisNum-1)){
html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{

downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum
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]+'">'+
 -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 +' ';
}
}

"> '+endPageWord+'</a></span>';
}
if(postNum==1) postNum++;
html += '</div>';
if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.g
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]+
'etElementById("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
>

طريقة اضافة الكود سهلة وهي اضافة أداة ثم اختر HTML/Javascript احفظ الأداة وضعها اسفل جسم الرسائل.

...تابع القراءة

كود جميل لقائمة مسندلة لمدونات بلوجر

ابحث على الرمز ></b:skin> أضف قبله مباشرة الكود التالي

#jsddm {
margin: 0;
padding: 15px;
z-index:1000000000;
position:relative;
}

#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}

#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}

#jsddm li a:hover {
background: #C8C8C8;
}

#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}

#jsddm li ul li {
float: none;
display: inline;
}

#jsddm li ul li a {
width: auto;
background: #CAE8FA;
}

#jsddm li ul li a:hover {
background: #A3CEE5;
}

ثم ابحث عن الرمز التالي </head> اضف الكود التالي قبله مباشرة 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
  <script type='text/javascript'>
  //<![CDATA[

var timeout    = 500;
  var closetimer = 0;
  var ddmenuitem = 0;

function jsddm_open()
  {  jsddm_canceltimer();
  jsddm_close();
  ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function jsddm_close()
  {  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
  {  closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
  {  if(closetimer)
  {  window.clearTimeout(closetimer);
  closetimer = null;}}

$(document).ready(function()
  {  $('#jsddm > li').bind('mouseover', jsddm_open)
  $('#jsddm > li').bind('mouseout',  jsddm_timer)});

document.onclick = jsddm_close;
  //]]>
  </script>

احفظ القالب

من لوحة التحكم اختر التخطيط ثم اختر اضافة أداة ثم اختر عبارة HTML / JavaScript وقم بلصق الشفرة أو الكود التالي :

<ul id="jsddm">
  <li><a href="#">Home</a>
  <li><a href="#">Menu 1</a>
  <ul>
  <li><a href="#">Drop 1-1</a></li>
  <li><a href="#">Drop 1-2</a></li>
  <li><a href="#">Drop 1-3</a></li>
  </ul>
  </li>

 <li><a href="#">Menu 2</a>
  <ul>
  <li><a href="#">Drop 2-1</a></li>
  <li><a href="#">Drop 2-2</a></li>
  </ul>
  </li>

 <li><a href="#">Menu 3</a>
  <ul>
  <li><a href="#">Drop 3-1</a></li>
  <li><a href="#">Drop 3-2</a></li>
  <li><a href="#">Drop 3-3</a></li>
  <li><a href="#">Drop 3-4</a></li>
  </ul>
  </li>

 <li><a href="#">Menu 4</a></li>
  <li><a href="#">Menu 5</a></li>
  <li><a href="#">AllBlogTools</a></li>
  </li></ul>

...تابع القراءة

كود جميل جدا لترقيم مدونات بلوجر، يمكنك اضافة الكود مباشرة الى جسم المدونة عن طريق أداة 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: #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: #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: #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 -->

...تابع القراءة

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

قم بالبحث عن الرمز </body> وضع قبله مباشرة الكود التالي. 

<!-- PAGE NAVIGATION STAR-->

<script type='text/javascript'>
var home_page=&quot;/&quot;;

ef;
var postperpage=7;
var numsh
var urlactivepage=location.h
rowpage=4;
var upPageWord =&#39;&#9668;&#39;;

}
var downPageWord =&#39;&#9658;&#39;
;

ثم نقوم بالبحث عن الرمز التالي ]]></b:skin> ونضيف قبله مباشرة الكود التالي.

/* -- NUMBER PAGE NAVIGATION -- */.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;

x solid #999;
  -webkit-
text-decoration: none;
  border:1
pborder-radius:3px;-moz-border-radius:3px;

showpageOf {
margin:0 
background: #3B5998;
  color:#fff;
  }


.8px 0 0;
}
.showpageNum a:hover {
  border:1px solid #888;

xt-shadow:0 1px 2px
background: #ccc;
  }

.showpagePoint {
  color:#fff;
  t
e #333;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;

x solid #999;
  background: #F1BA24;
  text-decorat
-webkit-border-radius:3px;-moz-border-radius:3px;
  border:1
pion: none;

}
}

احفظ القالب وشارك الموضوع اذا أردت ذالك.

...تابع القراءة

كود أخر رائع لترقيم رسائل مدونات بلوجر pagination blogger post اتبع الخطوات الأتية فقط.

ابحث عن الرمز ></b:skin>  ثم ألصق الكود التالي قبله مباشرة.

.blog-pager,#blog-pager{font-family:"Times New Roman", Times, serif;font-weight:normal;font-size:12px;width:700px;padding:17px;}

.showpageNum a,.showpage a {background:#069; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;}

.showpageNum a:hover,.showpage a:hover {background:orange; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;}

.showpageOf{margin:0 8px 0 0;font-family:'Coming Soon', cursive;text-decoration:none;font-size:100%;}

.showpagePoint {background:orange; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;}

ثم ابحث عن الرمز التالي</body> اضف الكود التالي قبله مباشرة .

<script type='text/javascript'>;
var home_page=&#39;/&#39;;
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=4;
var upPageWord =&#39;Prev&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://stylifyyourblog1.googlecode.com/svn/trunk/pagination.js' type='text/javascript'/>

قم بحفظ القالب وأدخل التعديلات الآزمة.

...تابع القراءة

اضافة كود خاصية اقرأ المزيد مع عرض صورة مصغرة بجانب التدوينة وملخص قصير يمكنك التحكم فيه عن طريق تعديل الكود.

انتقل الى تحرير HTML وابحث عن الرمز </head> واضف قبله مباشرة الكود التالي.

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 300; /* طول الملخص للمواضيع بدون صورة */
summary_img = 250; /* طول الملخص للمواضيع ذات صورة*/
img_thumb_height = 128; /* عرض الصورة في الملخص*/
img_thumb_width = 128; /*طول الصورة في الملخص */
</script>
<script src='http://abuiyad.googlecode.com/svn/trunk/read-more-left.js' type='text/javascript'/><font size="0"><a href="http://www.monte-escalier-prix.org"></a></font>

ثم ابحث عن الرمز <data:post.body/> استبدله مباشرة بالكود التالي.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/><data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/></div><script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'>إقرأ المزيد...</a></span>
<a href='http://abu-iyad.blogspot.com/2010/07/read-more-for-blogger.html' style='display:none;'>Résumé</a><a href='http://abu-iyad.blogspot.com' style='display:none;'>abuiyad</a> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
</b:if><font size="0"><a href="http://www.monte-escalier-prix.org"></a></font>

احفظ القالب وغير ما يمكنك تغييره.

...تابع القراءة

كود جميل جدا لترقيم صفحات بلوجر blogger، كود بسيط وغير معقد اضافته سهلة فقط اتبع الخطوات البسيطة التالية.
قم بالبحث عن الرمز التالي. ]]></b:skin> قبله مباشرة أضف الكود التالي.

 .showpageArea { color: #666666; margin: 10px 5px 3px 5px; padding:  0px; float: left; display: inline; font-size:12px; } .showpageArea a {  background: #ffffff; padding: 4px 7px; margin: 0px 5px 0px 0px;  text-decoration: none; border: 1px solid #64CDE5; color: #666666;  -moz-border-radius: 5px; -webkit-border-radius: 5px; display: inline;  float: left; } .showpageNum a { background: #ffffff; padding: 4px 7px;  margin: 0px 5px 0px 0px; text-decoration: none; border: 1px solid  #64CDE5; color: #666666; -moz-border-radius: 5px; -webkit-border-radius:  5px; display: inline; float: left; } .showpageNum a:hover { background:  #C6E4EC!important; text-decoration: none; border: 1px solid  #6BCDE5!important; } .showpagePoint { font-weight: bold; background:  #C6E4EC; padding: 4px 7px; margin: 0px 5px 0px 0px; text-decoration:  none; border: 1px solid #46BDDB; color: #666666; -moz-border-radius:  5px; -webkit-border-radius: 5px; display: inline; float: left; }  .showpageOf { background: #ffffff; padding: 4px 7px; margin: 0px 5px 0px  0px; text-decoration: none; border: 1px solid #64CDE5; color: #666666;  -moz-border-radius: 5px; -webkit-border-radius: 5px; display: inline;  float: left; } .showpage a { background: #ffffff; padding: 4px 7px;  margin: 0px 5px 0px 0px; text-decoration: none; border: 1px solid  #B9A2A2; color: #674D4D; -moz-border-radius: 5px; -webkit-border-radius:  5px; display: inline; float: left; } .showpage a:hover { background:  #C6E4EC!important; text-decoration: none; border: 1px solid  #64CDE5!important; } .showpageNum a:link,.showpage a:link { background:  #ffffff; padding: 4px 7px; margin: 0px 5px 0px 0px; text-decoration:  none; border: 1px solid #64CDE5; color: #666666; -moz-border-radius:  5px; -webkit-border-radius: 5px; display: inline; float: left; }

ثم ابحث عن الرمز التالي  </body> ونضيف قبله مباشرة الكود التالي.

<script type='text/javascript'> var home_page=&quot;/&quot;; var urlactivepage=location.href; var postperpage=6; var numshowpage=10; var upPageWord ='السابقة '; var downPageWord ='التالية '; </script> <script src='http://bplugins.googlecode.com/files/pagenumbers.js' type='text/javascript'/>

ثم احفظ القالب.

...تابع القراءة

اضافة كود ترقيم مدونات بلوجر عن طريق html/javascript، بحيث لن تكون بحاجة الى تعديل القالب الخاص بمدونتك وتجنب حدوث أخطاء بالقالب.

انتقل الى لوحة التحكم واختر التخطيط ثم اختر  html/javascript وقم باضافة الكود التالي.

<style type=
'text/css'
>#blog-pager{
padding
:
10px
0
;
clear
:
both
;}
.showpageNum a {
color
:
#333333
;
text-decoration
:
none
;
border
: 
1px
solid
#CCCCCC
;
margin
:
0
3px
;
padding
:
3px
7px
;
background-color
:
#FFFFFF
;}
.showpageNum a:hover, .showpage a:hover, .showpagePoint {
color
:
#333333
;
border
: 
1px
solid
#CCCCCC
;
padding
:
3px
7px
;
background-color
:
#CCCCCC
;
margin
:
0
3px
;}
.showpageOf {
color
:
#333
;
text-decoration
:
none
;
padding
:
3px
7px
;
margin
: 
0
3px
0
0
;}
</style>
<script style=
'text/javascript'
>
var numshowpage=
10
;
var postperpage =
5
;
var upPageWord=
"Previous"
;
var downPageWord=
"Next"
;
var urlactivepage=location.href;
var home_page=
"/"
;
</script>
<script style=
'text/javascript'
src=
'http://bloggerblogwidgets.googlecode.com/files/way2blogging_bloggerpagenavi.js'
></script>

احفظ القالب .

...تابع القراءة

يمكنك الأن ترقيم مدونات بلوجر بطريقة بسيطة Simple Pagination For Blogger ولن تتطلب منك الكثير من الوقت.

قم بتحرير قالب مدونتك وابحث عن الرمز </b:skin> قبله مباشرة أضف الكود التالي.

.pagnavi {
    text-align: center;
    margin: 20px
}
. pagnavi a, . pagnavi  span {
    background: #fff;
    display: inline-block;
    margin-right: 3px;
    padding: 4px 12px;
    text-decoration: none;
    line-height: 1.5em;     -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
. pagnavi a:hover {
    background-color: #BEBEBE;
    color: #fff;
}
. pagnavi a:active {
 background: rgba(190, 190, 190, 0.75);
}

احفظ القالب.

...تابع القراءة