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

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

ولإضافتها نقوم بالذهاب الى المدونة ثم التخطيط ثم إضافة أداة ونختار HTML/java script ونلصق الكود التالي داخل HTML / java script ثم نضغط حفظ
بعدها نقوم بسحبها إلى أسفل رسائل المدونة الإلكترونية ثم نضغط على حفظ الترتيب
والآن تمتع بترقيم جميل للصفحات

هاهو ذا الكود

"<style>

/*Pagination Style*/

.pagination {

display:block;

text-align: center !important;

padding-left: 0px;

overflow: hidden;

margin-bottom: 20px;

float:right;

clear:right;

}

.pagination a, .pagination a:link, .pagination a:visited {

background: url(../images/pages-num-bg.png);

text-decoration: none;

color:#666 !important;

display: block;

text-align: center;

background: rgb(249,249,249);

background: -moz-linear-gradient(top, rgba(249, 249, 249, 1) 0%, rgba(234, 234, 234, 1) 100%);

background: -webkit-gradient(linear, right top, right bottom, color-stop(0%, rgba(249, 249, 249, 1)), color-stop(100%, rgba(234, 234, 234, 1)));

background: -webkit-linear-gradient(top, rgba(249, 249, 249, 1) 0%, rgba(234, 234, 234, 1) 100%);

background: -o-linear-gradient(top, rgba(249, 249, 249, 1) 0%, rgba(234, 234, 234, 1) 100%);

background: -ms-linear-gradient(top, rgba(249, 249, 249, 1) 0%, rgba(234, 234, 234, 1) 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#eaeaea', GradientType=0 );

background: linear-gradient(top, rgba(249, 249, 249, 1) 0%, rgba(234, 234, 234, 1) 100%);

border: 1px solid #d6d6d6;

text-shadow: 0px 0px 0px #fed4a8;

-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);

-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);

box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);

-webkit-transition: all 0.5s ease;

-moz-transition: all 0.5s ease;

-o-transition: all 0.5s ease;

transition: all 0.5s ease;

display: block;

float: right;

padding: 7px 15px;

margin-left: 7px;

}

.pagination a:hover {

color: #666;

background: #fff;

}

.pagination span.pages {

display:none;

}

.pagination span.current {

text-decoration: none;

color:#fff !important;

display: block;

text-align: center;

margin-left: 7px;

background: rgb(223,115,9);

background: -moz-linear-gradient(top, rgba(223, 115, 9, 1) 0%, rgba(207, 78, 7, 1) 100%);

background: -webkit-gradient(linear, right top, right bottom, color-stop(0%, rgba(223, 115, 9, 1)), color-stop(100%, rgba(207, 78, 7, 1)));

background: -webkit-linear-gradient(top, rgba(223, 115, 9, 1) 0%, rgba(207, 78, 7, 1) 100%);

background: -o-linear-gradient(top, rgba(223, 115, 9, 1) 0%, rgba(207, 78, 7, 1) 100%);

background: -ms-linear-gradient(top, rgba(223, 115, 9, 1) 0%, rgba(207, 78, 7, 1) 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#df7309', endColorstr='#eaeaea', GradientType=0 );

background: linear-gradient(top, rgba(223, 115, 9, 1) 0%, rgba(207, 78, 7, 1) 100%);

border: 1px solid #a43900;

text-shadow: 1px 1px 1px #823604;

-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);

-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);

box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);

-webkit-transition: all 0.3s ease;

-moz-transition: all 0.3s ease;

-o-transition: all 0.3s ease;

transition: all 0.3s ease;

display: block;

padding: 7px 15px;

float: right;

}

.pagination span.extend {

text-decoration: none;

color:#666 !important;

display: block;

text-align: center;

margin-left: 4px;

background: rgb(249,249,249);

background: -moz-linear-gradient(top, rgba(249, 249, 249, 1) 0%, rgba(234, 234, 234, 1) 100%);

background: -webkit-gradient(linear, right top, right bottom, color-stop(0%, rgba(249, 249, 249, 1)), color-stop(100%, rgba(234, 234, 234, 1)));

background: -webkit-linear-gradient(top, rgba(249, 249, 249, 1) 0%, rgba(234, 234, 234, 1) 100%);

background: -o-linear-gradient(top, rgba(249, 249, 249, 1) 0%, rgba(234, 234, 234, 1) 100%);

background: -ms-linear-gradient(top, rgba(249, 249, 249, 1) 0%, rgba(234, 234, 234, 1) 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#eaeaea', GradientType=0 );

background: linear-gradient(top, rgba(249, 249, 249, 1) 0%, rgba(234, 234, 234, 1) 100%);

border: 1px solid #d6d6d6;

text-shadow: 0px 0px 0px #fed4a8;

-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);

-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);

box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);

-webkit-transition: all 0.5s ease;

-moz-transition: all 0.5s ease;

-o-transition: all 0.5s ease;

transition: all 0.5s ease;

display: block;

padding: 7px 15px;

float: right;

}

</style>

var pageNaviConf = {

perPage: 8,

numPages: 8,

firstText: "الصفحة الأولى",

lastText: "الصفحة الأخيرة",

nextText: "»",

prevText: "«"

}

//<![CDATA[

function pageNavi(o) {

var m = location.href,

l = m.indexOf("/search/label/") != -1,

a = l ? m.substr(m.indexOf("/search/label/") + 14, m.length) : "";

a = a.indexOf("?") != -1 ? a.substr(0, a.indexOf("?")) : a;

var g = l ? "/search/label/" + a + "?updated-max=" : "/search?updated-max=",

k = o.feed.entry.length,

e = Math.ceil(k / pageNaviConf.perPage);

if(e <= 1) {

return

}

var n = 1,

h = [""];

l ? h.push("/search/label/" + a + "?max-results=" + pageNaviConf.perPage) : h.push("/?max-results=" + pageNaviConf.perPage);

for(var d = 2; d <= e; d++) {

var c = (d - 1) * pageNaviConf.perPage - 1,

b = o.feed.entry[c].published.$t,

f = b.substring(0, 19) + b.substring(23, 29);

f = encodeURIComponent(f);

if(m.indexOf(f) != -1) {

n = d

}

h.push(g + f + "&max-results=" + pageNaviConf.perPage)

}

pageNavi.show(h, n, e)

}

pageNavi.show = function (f, e, a) {

var d = Math.floor((pageNaviConf.numPages - 1) / 2),

g = pageNaviConf.numPages - 1 - d,

c = e - d;

if(c <= 0) {

c = 1

}

endPage = e + g;

if((endPage - c) < pageNaviConf.numPages) {

endPage = c + pageNaviConf.numPages - 1

}

if(endPage > a) {

endPage = a;

c = a - pageNaviConf.numPages + 1

}

if(c <= 0) {

c = 1

}

var b = '<span class="pages">الصفحة ' + e + ' من ' + a + "</span>";

if(c > 1) {

b += '<a href="' + f[1] + '">' + pageNaviConf.firstText + "</a>"

}

if(e > 1) {

b += '<a href="' + f[e - 1] + '" class="inactive">' + pageNaviConf.prevText + "</a>"

}

for(i = c; i <= endPage; ++i) {

if(i == e) {

b += '<span class="current">' + i + "</span>"

} else {

b += '<a href="' + f[i] + '" class="inactive">' + i + "</a>"

}

if(e < a) {

b += '<a href="' + f[e + 1] + '">' + pageNaviConf.nextText + "</a>"

}

if(endPage < a) {

b += '<a href="' + f[a] + '" class="inactive">' + pageNaviConf.lastText + "</a>"

}

document.write(b)

};

(function () {

var b = location.href;

if(b.indexOf("?q=") != -1 || b.indexOf(".html") != -1) {

return

}

var d = b.indexOf("/search/label/") + 14;

if(d != 13) {

var c = b.indexOf("?"),

a = (c == -1) ? b.substring(d) : b.substring(d, c);

document.write('<script type="text/javascript" src="/feeds/posts/summary/-/' + a + '?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')

} else {

document.write('<script type="text/javascript" src="/feeds/posts/summary?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')

}

})();

//]]>

</script>

</div>
"