Постраничная навигация для blogspot

Как создать постраничную навигацию на блоге?

Здравствуйте посетитель мокго сайта Успех в Интернет

Согласитесь, удобнее просматривать страницы на блоге по номерации, чем "следующая", "предеущая". Я Вам расскажу, как это сделать. 

1. Заходим в Шаблон--Изменить HTML. Далее с помощью поиска (Ctrl+F)  найдите  эту строку в вашем шаблоне: ]]></b:skin>. Перед этой строкой Вам надо будет поставить CSS стиль вашей навигации. Обязательно над ]]></b:skin> вставляем этот код:

.showpageNum a {
color:#FFF;padding:4px 10px;
margin:0 2px;
text-decoration:none;
-webkit-border-radius:2px;-
moz-border-radius:2px;
background:#848484
}
.showpageOf {
color:#222;
margin:0 6px 0 0
}
.showpageNum a:hover {
background:#222;
color:#FFF
}
.showpagePoint {
color:#FFF;
text-shadow:0 1px 2px #333;
padding:4px 10px;
margin:0 2px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
background:#222;
text-decoration:none
}

Теперь находим другую строчку: </body> и над ней вставляем код:

<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=10;
var numshowpage=7;
var upPageWord =&#39;&#9668;&#39;;
var downPageWord =&#39;&#9658;&#39;;
</script>
<script src='http://dl.dropbox.com/u/48089857/pagenav.js' type='text/javascript'/>

Сохраняем шаблон. Выделенное можете настроить на своё усмотрение.
var postperpage=10; - это количество сообщений на одной странице
var numshowpage=7; - это количество кнопок навигации на одной странице. Работает не  во всех шаблонах

Если у Вас не установилась навигация попробуйте этот код, предварительно удалив установленный код ранее.

2. Добавить этот код в гаджет html

<script type='text/javascript'>
var home_page_url = location.href;
var pageCount=1;
var displayPageNum=5;
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"> 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>

Сохраняем и перетаскиваем его под сообщение.

Заходим в Шаблон--Изменить HTML. Далее с помощью поиска (Ctrl+F)  найдите  эту строку в вашем шаблоне:</body> и перед этой строкой

вставляем этот код

<!--Page Navigation Starts-->
<script src='http://rethna30.googlepages.com/smiley.js' type='text/javascript'/><noscript><a href='http://introblogger.blogspot.com' target='_blank'><span style='font-size: x-small;'>Add Smilies</span></a></noscript>

Я Вам рекомендую вставить последний код, он более универсален

Всё. Радуемся.  До новых встреч. Пожалуйста оставляйте комментарии, получается или нет.

Это интересно!:


Комментарии:

Поделитесь с друзьями!

5 комментариев к “Постраничная навигация для blogspot”

  1. Вероника, спасибо большое за те знания которые Вы нам даёте. И щедро делитесь безвозмездно.

  2. Я рада,что Вам это пригодится в своих блогах, буду в дальнешем помогать Вам.

  3. Спасибо, Вероника за прекрасный урок. Постраничную навигацию установила себе на видеоблог.http://infosona.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gifhttp://infosona.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <img src="" alt="" class="" width="" height="">

http://infosona.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://infosona.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://infosona.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://infosona.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://infosona.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://infosona.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://infosona.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://infosona.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://infosona.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://infosona.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://infosona.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://infosona.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://infosona.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://infosona.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://infosona.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://infosona.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://infosona.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif