الحل الامثل لإضافة ترقيم الصفحات لمدونات بلوجر وبـ5 أشكال

الكود:

#blog-pager, .pagenavi {

الكود:

     

الكود:

clear

الكود:

: 

الكود:

both

الكود:

;

الكود:

     

الكود:

text-align

الكود:

: 

الكود:

center

الكود:

;

الكود:

     

الكود:

margin

الكود:

: 

الكود:

30px

 

الكود:

auto

 

الكود:

10px

الكود:

;

الكود:

}

الكود:

#blog-pager a, .pagenavi span, .pagenavi a {

الكود:

text-decoration

الكود:

: 

الكود:

none

الكود:

;

الكود:

color

الكود:

: 

الكود:

#333

الكود:

;

الكود:

text-shadow

الكود:

: 

الكود:

0

 

الكود:

1px

 

الكود:

0

 

الكود:

rgba(

الكود:

255

الكود:

, 

الكود:

255

الكود:

, 

الكود:

255

الكود:

, .

الكود:

5

الكود:

);

الكود:

background-color

الكود:

: 

الكود:

#F8F8F8

الكود:

;

الكود:

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=

الكود:

0

الكود:

,StartColorStr=

الكود:

#fffcfc

الكود:

fc,EndColorStr=

الكود:

#fff8f8

الكود:

f

الكود:

8

الكود:

);

الكود:

background-image

الكود:

: -moz-linear-gradient(

الكود:

top

الكود:

,

الكود:

#FCFCFC

 

الكود:

0

الكود:

,

الكود:

#F8F8F8

 

الكود:

100%

الكود:

);

الكود:

background-image

الكود:

: -ms-linear-gradient(

الكود:

top

الكود:

,

الكود:

#FCFCFC

 

الكود:

0

الكود:

,

الكود:

#F8F8F8

 

الكود:

100%

الكود:

);

الكود:

background-image

الكود:

: -o-linear-gradient(

الكود:

top

الكود:

,

الكود:

#FCFCFC

 

الكود:

0

الكود:

,

الكود:

#F8F8F8

 

الكود:

100%

الكود:

);

الكود:

background-image

الكود:

: -webkit-gradient(linear,

الكود:

left

 

الكود:

top

الكود:

,

الكود:

left

 

الكود:

bottom

الكود:

,color-stop(

الكود:

0

الكود:

,

الكود:

#FCFCFC

الكود:

),color-stop(

الكود:

100%

الكود:

,

الكود:

#F8F8F8

الكود:

));

الكود:

background-image

الكود:

: -webkit-linear-gradient(

الكود:

top

الكود:

,

الكود:

#FCFCFC

 

الكود:

0

الكود:

,

الكود:

#F8F8F8

 

الكود:

100%

الكود:

);

الكود:

background-image

الكود:

: linear-gradient(to 

الكود:

bottom

الكود:

,

الكود:

#FCFCFC

 

الكود:

0

الكود:

,

الكود:

#F8F8F8

 

الكود:

100%

الكود:

);

الكود:

padding

الكود:

: 

الكود:

5px

 

الكود:

10px

الكود:

;

الكود:

border

الكود:

: 

الكود:

1px

 

الكود:

solid

 

الكود:

lightGrey;

الكود:

font-weight

الكود:

: 

الكود:

bold

الكود:

;

الكود:

font-size

الكود:

: 

الكود:

12px

الكود:

;

الكود:

vertical-align

الكود:

: 

الكود:

middle

الكود:

;

الكود:

-moz-border-radius: 

الكود:

2px

الكود:

;

الكود:

-webkit-border-radius: 

الكود:

2px

الكود:

;

الكود:

border-radius: 

الكود:

2px

الكود:

;

الكود:

margin

الكود:

: 

الكود:

2px

 

الكود:

2px

الكود:

;

الكود:

-webkit-transition: .

الكود:

0

الكود:

s ease-in

الكود:

!important

الكود:

;

الكود:

-moz-transition: .

الكود:

0

الكود:

s ease-in

الكود:

!important

الكود:

;

الكود:

-ms-transition: .

الكود:

0

الكود:

s ease-in

الكود:

!important

الكود:

;

الكود:

-o-transition: .

الكود:

0

الكود:

s ease-in

الكود:

!important

الكود:

;

الكود:

transition: .

الكود:

0

الكود:

s ease-in

الكود:

!important

الكود:

;

الكود:

}

الكود:

#blog-pager a:hover, .pagenavi a:hover {

الكود:

border-color

الكود:

: 

الكود:

#C6C6C6

الكود:

;

الكود:

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=

الكود:

0

الكود:

,StartColorStr=

الكود:

#fff8f8

الكود:

f

الكود:

8

الكود:

,EndColorStr=

الكود:

#ffeeee

الكود:

ee);

الكود:

background-image

الكود:

: -moz-linear-gradient(

الكود:

top

الكود:

,

الكود:

#F8F8F8

 

الكود:

0

الكود:

,

الكود:

#EEE

 

الكود:

100%

الكود:

);

الكود:

background-image

الكود:

: -ms-linear-gradient(

الكود:

top

الكود:

,

الكود:

#F8F8F8

 

الكود:

0

الكود:

,

الكود:

#EEE

 

الكود:

100%

الكود:

);

الكود:

background-image

الكود:

: -o-linear-gradient(

الكود:

top

الكود:

,

الكود:

#F8F8F8

 

الكود:

0

الكود:

,

الكود:

#EEE

 

الكود:

100%

الكود:

);

الكود:

background-image

الكود:

: -webkit-gradient(linear,

الكود:

left

 

الكود:

top

الكود:

,

الكود:

left

 

الكود:

bottom

الكود:

,color-stop(

الكود:

0

الكود:

,

الكود:

#F8F8F8

الكود:

),color-stop(

الكود:

100%

الكود:

,

الكود:

#EEE

الكود:

));

الكود:

background-image

الكود:

: -webkit-linear-gradient(

الكود:

top

الكود:

,

الكود:

#F8F8F8

 

الكود:

0

الكود:

,

الكود:

#EEE

 

الكود:

100%

الكود:

);

الكود:

background-image

الكود:

: linear-gradient(to 

الكود:

bottom

الكود:

,

الكود:

#F8F8F8

 

الكود:

0

الكود:

,

الكود:

#EEE

 

الكود:

100%

الكود:

);

الكود:

}

الكود:

#blog-pager-older-link, #blog-pager-newer-link {

الكود:

     

الكود:

float

الكود:

: 

الكود:

none

الكود:

;

الكود:

}

الكود:

.pagenavi .current {

الكود:

border-color

الكود:

: 

الكود:

#C6C6C6

الكود:

;

الكود:

background-color

الكود:

: 

الكود:

#E9E9E9

الكود:

;

الكود:

background-image

الكود:

: 

الكود:

none

الكود:

;

الكود:

-moz-box-shadow: 

الكود:

inset

 

الكود:

0

 

الكود:

1px

 

الكود:

1px

 

الكود:

rgba(

الكود:

0

الكود:

,

الكود:

0

الكود:

,

الكود:

0

الكود:

,.

الكود:

20

الكود:

);

الكود:

-ms-box-shadow: 

الكود:

inset

 

الكود:

0

 

الكود:

1px

 

الكود:

1px

 

الكود:

rgba(

الكود:

0

الكود:

,

الكود:

0

الكود:

,

الكود:

0

الكود:

,.

الكود:

20

الكود:

);

الكود:

-webkit-box-shadow: 

الكود:

inset

 

الكود:

0

 

الكود:

1px

 

الكود:

1px

 

الكود:

rgba(

الكود:

0

الكود:

, 

الكود:

0

الكود:

, 

الكود:

0

الكود:

, .

الكود:

20

الكود:

);

الكود:

box-shadow: 

الكود:

inset

 

الكود:

0

 

الكود:

1px

 

الكود:

1px

 

الكود:

rgba(

الكود:

0

الكود:

, 

الكود:

0

الكود:

, 

الكود:

0

الكود:

, .

الكود:

20

الكود:

);

الكود:

}

الكود:

.pagenavi a:active {

الكود:

border-color

الكود:

: 

الكود:

#C6C6C6

الكود:

;

الكود:

background-color

الكود:

: 

الكود:

#E9E9E9

الكود:

;

الكود:

background-image

الكود:

: 

الكود:

none

الكود:

;

الكود:

-moz-box-shadow: 

الكود:

inset

 

الكود:

0

 

الكود:

1px

 

الكود:

1px

 

الكود:

rgba(

الكود:

0

الكود:

,

الكود:

0

الكود:

,

الكود:

0

الكود:

,.

الكود:

20

الكود:

);

الكود:

-ms-box-shadow: 

الكود:

inset

 

الكود:

0

 

الكود:

1px

 

الكود:

1px

 

الكود:

rgba(

الكود:

0

الكود:

,

الكود:

0

الكود:

,

الكود:

0

الكود:

,.

الكود:

20

الكود:

);

الكود:

-webkit-box-shadow: 

الكود:

inset

 

الكود:

0

 

الكود:

1px

 

الكود:

1px

 

الكود:

rgba(

الكود:

0

الكود:

, 

الكود:

0

الكود:

, 

الكود:

0

الكود:

, .

الكود:

20

الكود:

);

الكود:

box-shadow: 

الكود:

inset

 

الكود:

0

 

الكود:

1px

 

الكود:

1px

 

الكود:

rgba(

الكود:

0

الكود:

, 

الكود:

0

الكود:

, 

الكود:

0

الكود:

, .

الكود:

20

الكود:

);

الكود:

}

الكود:

#blog-pager, .pagenavi {

الكود:

     

الكود:

clear

الكود:

: 

الكود:

both

الكود:

;

الكود:

     

الكود:

text-align

الكود:

: 

الكود:

center

الكود:

;

الكود:

     

الكود:

margin

الكود:

: 

الكود:

30px

 

الكود:

auto

 

الكود:

10px

الكود:

;

الكود:

}

الكود:

#blog-pager a, .pagenavi span, .pagenavi a {

الكود:

background-color

الكود:

: 

الكود:

#3BB3E0

الكود:

;

الكود:

padding

الكود:

:  

الكود:

5px

 

الكود:

10px

الكود:

;

الكود:

position

الكود:

: 

الكود:

relative

الكود:

;

الكود:

margin

الكود:

: 

الكود:

2px

الكود:

;

الكود:

font-size

الكود:

: 

الكود:

12px

الكود:

;

الكود:

text-decoration

الكود:

: 

الكود:

none

الكود:

;

الكود:

color

الكود:

: 

الكود:

white

الكود:

;

الكود:

border

الكود:

: 

الكود:

solid

 

الكود:

1px

 

الكود:

#186F8F

الكود:

;

الكود:

background-image

الكود:

: linear-gradient(

الكود:

bottom

الكود:

, 

الكود:

#2CA0CA

 

الكود:

0%

الكود:

, 

الكود:

#3EB8E5

 

الكود:

100%

الكود:

);

الكود:

background-image

الكود:

: -o-linear-gradient(

الكود:

bottom

الكود:

, 

الكود:

#2CA0CA

 

الكود:

0%

الكود:

, 

الكود:

#3EB8E5

 

الكود:

100%

الكود:

);

الكود:

background-image

الكود:

: -moz-linear-gradient(

الكود:

bottom

الكود:

, 

الكود:

#2CA0CA

 

الكود:

0%

الكود:

, 

الكود:

#3EB8E5

 

الكود:

100%

الكود:

);

الكود:

background-image

الكود:

: -webkit-linear-gradient(

الكود:

bottom

الكود:

, 

الكود:

#2CA0CA

 

الكود:

0%

الكود:

, 

الكود:

#3EB8E5

 

الكود:

100%

الكود:

);

الكود:

background-image

الكود:

: -ms-linear-gradient(

الكود:

bottom

الكود:

, 

الكود:

#2CA0CA

 

الكود:

0%

الكود:

, 

الكود:

#3EB8E5

 

الكود:

100%

الكود:

);

الكود:

background-image

الكود:

: -webkit-gradient( linear, 

الكود:

left

 

الكود:

bottom

الكود:

, 

الكود:

left

 

الكود:

top

الكود:

, color-stop(

الكود:

0

الكود:

,

الكود:

#2CA0CA

الكود:

), color-stop(

الكود:

1

الكود:

, 

الكود:

#3EB8E5

الكود:

) );

الكود:

-webkit-box-shadow: 

الكود:

inset

 

الكود:

0px

 

الكود:

1px

 

الكود:

0px

 

الكود:

#7FD2F1

الكود:

, 

الكود:

0px

 

الكود:

1px

 

الكود:

0px

 

الكود:

white

الكود:

;

الكود:

-moz-box-shadow: 

الكود:

inset

 

الكود:

0px

 

الكود:

1px

 

الكود:

0px

 

الكود:

#7fd2f1

الكود:

, 

الكود:

0px

 

الكود:

1px

 

الكود:

0px

 

الكود:

#fff

الكود:

;

الكود:

box-shadow: 

الكود:

inset

 

الكود:

0px

 

الكود:

1px

 

الكود:

0px

 

الكود:

#7FD2F1

الكود:

, 

الكود:

0px

 

الكود:

1px

 

الكود:

0px

 

الكود:

white

الكود:

;

الكود:

-webkit-border-radius: 

الكود:

5px

الكود:

;

الكود:

-moz-border-radius: 

الكود:

5px

الكود:

;

الكود:

-o-border-radius: 

الكود:

5px

الكود:

;

الكود:

border-radius: 

الكود:

5px

الكود:

;

الكود:

}

الكود:

#blog-pager a:hover, .pagenavi a:hover {

الكود:

background-image

الكود:

: linear-gradient(

الكود:

bottom

الكود:

, 

الكود:

#3EB8E5

 

الكود:

0%

الكود:

, 

الكود:

#2CA0CA

 

الكود:

100%

الكود:

);

الكود:

background-image

الكود:

: -o-linear-gradient(

الكود:

bottom

الكود:

, 

الكود:

#3EB8E5

 

الكود:

0%

الكود:

, 

الكود:

#2CA0CA

 

الكود:

100%

الكود:

);

الكود:

background-image

الكود:

: -moz-linear-gradient(

الكود:

bottom

الكود:

, 

الكود:

#3EB8E5

 

الكود:

0%

الكود:

, 

الكود:

#2CA0CA

 

الكود:

100%

الكود:

);

الكود:

background-image

الكود:

: -webkit-linear-gradient(

الكود:

bottom

الكود:

, 

الكود:

#3EB8E5

 

الكود:

0%

الكود:

, 

الكود:

#2CA0CA

 

الكود:

100%

الكود:

);

الكود:

background-image

الكود:

: -ms-linear-gradient(

الكود:

bottom

الكود:

, 

الكود:

#3EB8E5

 

الكود:

0%

الكود:

, 

الكود:

#2CA0CA

 

الكود:

100%

الكود:

);

الكود:

background-image

الكود:

: -webkit-gradient( linear, 

الكود:

left

 

الكود:

bottom

الكود:

, 

الكود:

left

 

الكود:

top

الكود:

, color-stop(

الكود:

0

الكود:

,

الكود:

#3EB8E5

الكود:

), color-stop(

الكود:

1

الكود:

, 

الكود:

#2CA0CA

الكود:

) );

الكود:

}

الكود:

#blog-pager-older-link, #blog-pager-newer-link {

الكود:

     

الكود:

float

الكود:

: 

الكود:

none

الكود:

;

الكود:

}

الكود:

.pagenavi .current {

الكود:

background-image

الكود:

: linear-gradient(

الكود:

bottom

الكود:

, 

الكود:

#3EB8E5

 

الكود:

0%

الكود:

, 

الكود:

#2CA0CA

 

الكود:

100%

الكود:

);

الكود:

background-image

الكود:

: -o-linear-gradient(

الكود:

bottom

الكود:

, 

الكود:

#3EB8E5

 

الكود:

0%

الكود:

, 

الكود:

#2CA0CA

 

الكود:

100%

الكود:

);

الكود:

background-image

الكود:

: -moz-linear-gradient(

الكود:

bottom

الكود:

, 

الكود:

#3EB8E5

 

الكود:

0%

الكود:

, 

الكود:

#2CA0CA

 

الكود:

100%

الكود:

);

الكود:

background-image

الكود:

: -webkit-linear-gradient(

الكود:

bottom

الكود:

, 

الكود:

#3EB8E5

 

الكود:

0%

الكود:

, 

الكود:

#2CA0CA

 

الكود:

100%

الكود:

);

الكود:

background-image

الكود:

: -ms-linear-gradient(

الكود:

bottom

الكود:

, 

الكود:

#3EB8E5

 

الكود:

0%

الكود:

, 

الكود:

#2CA0CA

 

الكود:

100%

الكود:

);

الكود:

background-image

الكود:

: -webkit-gradient( linear, 

الكود:

left

 

الكود:

bottom

الكود:

, 

الكود:

left

 

الكود:

top

الكود:

, color-stop(

الكود:

0

الكود:

,

الكود:

#3EB8E5

الكود:

), color-stop(

الكود:

1

الكود:

, 

الكود:

#2CA0CA

الكود:

) );

الكود:

}

الكود:

#blog-pager, .pagenavi {

الكود:

     

الكود:

clear

الكود:

: 

الكود:

both

الكود:

;

الكود:

     

الكود:

text-align

الكود:

: 

الكود:

center

الكود:

;

الكود:

     

الكود:

margin

الكود:

: 

الكود:

30px

 

الكود:

auto

 

الكود:

10px

الكود:

;

الكود:

}

الكود:

#blog-pager a, .pagenavi span, .pagenavi a {

الكود:

border

الكود:

: 

الكود:

1px

 

الكود:

solid

 

الكود:

#3d8bf2

الكود:

;               

الكود:

padding

الكود:

: 

الكود:

5px

 

الكود:

10px

الكود:

;                

الكود:

text-decoration

الكود:

: 

الكود:

none

الكود:

;                

الكود:

font-family

الكود:

: 

الكود:

arial

الكود:

;                

الكود:

color

الكود:

:

الكود:

#fff

الكود:

;                

الكود:

margin

الكود:

: 

الكود:

2px

الكود:

;                

الكود:

background-image

الكود:

: 

الكود:

url

الكود:

(

الكود:

'http://onlinetrick-ot.googlecode.com/svn/image/menubg1.PNG'

الكود:

);

الكود:

background-position

الكود:

: 

الكود:

left

الكود:

;           

الكود:

-webkit-transition: 

الكود:

all

 

الكود:

0.7

الكود:

s ease-in-out;              

الكود:

-moz-transition: 

الكود:

all

 

الكود:

0.7

الكود:

s ease-in-out;                

الكود:

-o-transition: 

الكود:

all

 

الكود:

0.7

الكود:

s ease-in-out; 

الكود:

}

الكود:

#blog-pager a:hover, .pagenavi a:hover {

الكود:

background-position

الكود:

:

الكود:

right

الكود:

;

الكود:

}

الكود:

#blog-pager-older-link, #blog-pager-newer-link {

الكود:

     

الكود:

float

الكود:

: 

الكود:

none

الكود:

;

الكود:

}

الكود:

.pagenavi .current {

الكود:

background-position

الكود:

:

الكود:

right

الكود:

;

الكود:

}

الكود:

#blog-pager, .pagenavi {

الكود:

     

الكود:

clear

الكود:

: 

الكود:

both

الكود:

;

الكود:

     

الكود:

text-align

الكود:

: 

الكود:

center

الكود:

;

الكود:

     

الكود:

margin

الكود:

: 

الكود:

30px

 

الكود:

auto

 

الكود:

15px

الكود:

;

الكود:

}

الكود:

#blog-pager a, .pagenavi span, .pagenavi a {

الكود:

border

الكود:

: 

الكود:

1px

 

الكود:

solid

 

الكود:

#3d8bf2

الكود:

;               

الكود:

padding

الكود:

: 

الكود:

5px

 

الكود:

10px

الكود:

;                

الكود:

text-decoration

الكود:

: 

الكود:

none

الكود:

;                

الكود:

font-family

الكود:

: 

الكود:

arial

الكود:

;                

الكود:

color

الكود:

:

الكود:

#fff

الكود:

;                

الكود:

margin

الكود:

: 

الكود:

2px

الكود:

;                

الكود:

background-image

الكود:

: 

الكود:

url

الكود:

(

الكود:

'http://onlinetrick-ot.googlecode.com/svn/image/menubg2.PNG'

الكود:

);

الكود:

background-position

الكود:

: 

الكود:

bottom

الكود:

;        

الكود:

-webkit-transition: 

الكود:

all

 

الكود:

0.7

الكود:

s ease-in-out;              

الكود:

-moz-transition: 

الكود:

all

 

الكود:

0.7

الكود:

s ease-in-out;                

الكود:

-o-transition: 

الكود:

all

 

الكود:

0.7

الكود:

s ease-in-out; 

الكود:

}

الكود:

#blog-pager a:hover, .pagenavi a:hover {

الكود:

background-position

الكود:

:

الكود:

top

الكود:

;

الكود:

}

الكود:

#blog-pager-older-link, #blog-pager-newer-link {

الكود:

     

الكود:

float

الكود:

: 

الكود:

none

الكود:

;

الكود:

}

الكود:

.pagenavi .current {

الكود:

background-position

الكود:

:

الكود:

top

الكود:

;

الكود:

}

الكود:

#blog-pager, .pagenavi {

الكود:

     

الكود:

clear

الكود:

: 

الكود:

both

الكود:

;

الكود:

     

الكود:

text-align

الكود:

: 

الكود:

center

الكود:

;

الكود:

     

الكود:

margin

الكود:

: 

الكود:

30px

 

الكود:

auto

 

الكود:

15px

الكود:

;

الكود:

}

الكود:

.pagenavi .pages {

الكود:

display

الكود:

: 

الكود:

none

الكود:

;

الكود:

}

الكود:

#blog-pager a, .pagenavi span, .pagenavi a {

الكود:

padding

الكود:

: 

الكود:

5px

 

الكود:

10px

الكود:

;

الكود:

text-decoration

الكود:

: 

الكود:

none

الكود:

;

الكود:

font-family

الكود:

: 

الكود:

arial

الكود:

;

الكود:

color

الكود:

: 

الكود:

white

الكود:

;

الكود:

margin

الكود:

: 

الكود:

2px

الكود:

;

الكود:

background

الكود:

: 

الكود:

black

الكود:

;

الكود:

background-position

الكود:

: 

الكود:

bottom

الكود:

;

الكود:

-webkit-transition: 

الكود:

all

 

الكود:

0.3

الكود:

s ease-in-out;

الكود:

-moz-transition: 

الكود:

all

 

الكود:

0.3

الكود:

s ease-in-out;

الكود:

-o-transition: 

الكود:

all

 

الكود:

0.3

الكود:

s ease-in-out;

الكود:

border-radius: 

الكود:

30px

الكود:

;

الكود:

font-size

الكود:

: 

الكود:

20px

الكود:

;

الكود:

}

الكود:

#blog-pager a:hover, .pagenavi a:hover {

الكود:

background

الكود:

: orange;

الكود:

}

الكود:

#blog-pager-older-link, #blog-pager-newer-link {

الكود:

     

الكود:

float

الكود:

: 

الكود:

none

الكود:

;

الكود:

}

الكود:

.pagenavi .current {

الكود:

background

الكود:

: orange;

الكود:

}