новости

Здесь Вы найдете все для красивого оформления блога,подписывайтесь на мой блог!


13.09.2015

Постраничная навигация для 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='https://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='https://rethna30.googlepages.com/smiley.js' type='text/javascript'/><noscript><a href='https://introblogger.blogspot.com' target='_blank'><span style='font-size: x-small;'>Add Smilies</span></a></noscript>

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


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

5 комментариев:

  1. Спасибо Вероника за информацию!

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

    ОтветитьУдалить
  3. Большое спасибо,Вероника! Очень полезная фишка для блога!!!

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

    ОтветитьУдалить
  5. Спасибо, Вероника за прекрасный урок. Постраничную навигацию установила себе на видеоблог.

    ОтветитьУдалить

Страниц (25)1234 Вперёд

+

Grattis - партнерская программа по продаже голосовых поздравлений

ShareThis