Как сделать нумерацию страниц в блоге

---

Нумерация страниц блога

Здравствуйте друзья, читатели и гости. Сегодня предлагаю Вашему вниманию два HTML кода виджета нумерации страниц. Гаджет вставляйте админ панель blogger-дизайн-добавить гаджет.

Гаджет нумерации страниц

Протестировала в демо блогах, скрипт рабочий. В своем блоге пока удалила, и так достаточно гаджетов и скриптов, которые как известно сильно влияют на загрузку.   

Итак, кому интересно копируем код ниже.

<style>.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
border:1px solid #CCCCCC;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageNum a:hover {
background-color:#CCCCCC;
border:1px solid #CCCCCC;
}
.showpagePoint {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#CCCCCC none repeat scroll 0 0;
border:1px solid #CCCCCC;
color:#333333;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageOf {
margin:0 3px 0 0;
padding:3px 7px;
text-decoration:none;
}
.showpage a {
border:1px solid #CCCCCC;
padding:3px 7px;
text-decoration:none;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link, .showpage a:link {
color:#333333;
text-decoration:none;
}</style><script type='text/javascript'>
var home_page_url = location.href;
var pageCount=1;
var displayPageNum=3;
var upPageWord ='Назад';
var downPageWord ='Вперёд';
function showpageCount(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);
var title = post.title.$t;
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
  thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;
}
}
itemCount++;
}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
 upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}else{
 upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}

if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
  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]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}
}

if(thisNum>1){
html = ''+upPageHtml+' '+html +' ';
}

html = '<div class="showpageArea"><span  class="showpageOf"> Страниц ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
}

if(postNum==1) postNum++;
html += '</div>';

var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("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;
}

}

function showpageCount2(json) {

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

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
var thisUrl = home_page_url;

for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);

var title = post.title.$t;

if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
 thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount;

}
}
itemCount++;
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
 upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
 upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
 html = labelHtml+'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]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}
}

if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span  class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
}

if(postNum==1) postNum++;
html += '</div>';

var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("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 type='text/javascript'>

var thisUrl = home_page_url;
if (thisUrl.indexOf("/search/label/")!=-1){
if (thisUrl.indexOf("?updated-max")!=-1){
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"));
}else{
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"));
}
}

var home_page = "/";
if (thisUrl.indexOf("?q=")==-1){
if (thisUrl.indexOf("/search/label/")==-1){
document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')
}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')
}
}
</script>

Гаджет необходимо вставить сразу под сообщением. 

Теперь немного настроим нумерацию:

var pageCount=1; должно соответствовать количеству сообщений на главной странице, посмотреть нужно-дизайн-изменить сообщение-увидите число настроенных сообщений;

var displayPageNum=3;-количество страниц в гаджете;

Выделенное жирным шрифтом-коды цвета, форму рамки измените и оформите под дизайн своих блогов.

И второй вариант

HTML код

<style type='text/css'>

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

.showpageNum a,.showpage a {background: rgb(15, 124, 241);color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-weight:bold;line-height:0;text-align:center;padding:7px 13px 7px;-moz-border-radius:36px;-webkit-border-radius:12px;border-radius:12px;} 

.showpageNum a:hover,.showpage a:hover {background: rgb(0, 49, 247); color:#000000; margin-right:.6em;text-decoration:none;font-size:15px;font-weight:bold;line-height:0;text-align:center;padding:7px 13px 7px;-moz-border-radius:36px;-webkit-border-radius:12px;border-radius:12px;}

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

.showpagePoint {background: rgb(0, 49, 247); color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:7px 13px 7px;-moz-border-radius:36px;-webkit-border-radius:12px;border-radius:12px;}

</style>

<script type='text/javascript'>

var home_page_url = location.href;

var pageCount=1;

var displayPageNum=3;

var upPageWord ='Previous';

var downPageWord ='Next';

function showpageCount(json) {

var thisUrl = home_page_url;

var htmlMap = new Array();

var thisNum = 1;

var postNum=1;

var itemCount = 0;

var fFlag = 0;

var eFlag = 0;

var html= '';

var upPageHtml ='';

var downPageHtml ='';

for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);

timestamp = encodeURIComponent(timestamp1);

var title = post.title.$t;

if(title!=''){

if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){

if(thisUrl.indexOf(timestamp)!=-1 ){

  thisNum = postNum;

}

if(title!='') postNum++;

htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;

}

}

itemCount++;

}

for(var p =0;p< htmlMap.length;p++){

if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){

if(fFlag ==0 && p == thisNum-2){

if(thisNum==2){

 upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';

}else{

 upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';

}

fFlag++;

}

if(p==(thisNum-1)){

html += '<span class="showpagePoint">'+thisNum+'</span>';

}else{

if(p==0){

  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]+'">'+ downPageWord +'</a></span>';

eFlag++;

}}}

if(thisNum>1){

html = ''+upPageHtml+' '+html +' ';

}

html = '<div class="showpageArea"><span  class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){

html += downPageHtml;

}

if(postNum==1) postNum++;

html += '</div>';

var pageArea = document.getElementsByName("pageArea");

var blogPager = document.getElementById("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;

}}

function showpageCount2(json) {

var thisUrl = home_page_url;

var htmlMap = new Array();

var isLablePage = thisUrl.indexOf("/search/label/")!=-1;

var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";

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

var thisNum = 1;

var postNum=1;

var itemCount = 0;

var fFlag = 0;

var eFlag = 0;

var html= '';

var upPageHtml ='';

var downPageHtml ='';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

var thisUrl = home_page_url;

for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);

timestamp = encodeURIComponent(timestamp1);

var title = post.title.$t;

if(title!=''){

if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){

if(thisUrl.indexOf(timestamp)!=-1 ){

 thisNum = postNum;

}

if(title!='') postNum++;

htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount;

}}itemCount++;}

for(var p =0;p< htmlMap.length;p++){

if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){

if(fFlag ==0 && p == thisNum-2){

if(thisNum==2){

 upPageHtml = labelHtml + upPageWord +'</a></span>';

}else{

 upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';

}fFlag++;}

if(p==(thisNum-1)){

html += '<span class="showpagePoint">'+thisNum+'</span>';

}else{

if(p==0){

 html = labelHtml+'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]+'">'+ downPageWord +'</a></span>';

eFlag++;

}}}

if(thisNum>1){

if(!isLablePage){

html = ''+upPageHtml+' '+html +' ';

}else{

html = ''+upPageHtml+' '+html +' ';

}}

html = '<div class="showpageArea"><span  class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){

html += downPageHtml;

}

if(postNum==1) postNum++;

html += '</div>';

var pageArea = document.getElementsByName("pageArea");

var blogPager = document.getElementById("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 type='text/javascript'>

var thisUrl = home_page_url;

if (thisUrl.indexOf("/search/label/")!=-1){

if (thisUrl.indexOf("?updated-max")!=-1){

var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"));

}else{

var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"));

}}

var home_page = "/";

if (thisUrl.indexOf("?q=")==-1){

if (thisUrl.indexOf("/search/label/")==-1){

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

}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')

}}

</script>

Гаджет можно сохранить в любом месте макета блога, лучше в футере. Экспериментируйте с настройками (выделено жирным шрифтом), остальное сами. Пока все, надеюсь, что кому либо из Вас эта информация будет полезна. Всего доброго.

Читайте также:

• Фишки для дизайна с использованием CSS для блоггер;
• Изменить изображение маркера в списке используя CSS;
• Как загрузить индивидуальный фон в дизайнере шаблонов blogger;
• Как изменить оформление виджета Linkwithin с использованием CSS стилей;