ブロガーの特集記事にページ分割を追加するには

Question

私のブログブロガーのブログには、番号付きページを追加したいと思っています。ページ区切りと同じように私はこのスクリプトを手に入れましたが、番号付きページネーション用にこのスクリプトを変更することはできません。以下は です。

<script> 
var numposts = 5; 
var showpostthumbnails = true; 
var displaymore = true; 
var displayseparator = false; 
var showcommentnum = false; 
var showpostdate = true; 
var showpostsummary = true; 
var numchars = 70; 

var style = document.createElement('style'); 
style.type = 'text/css'; 
style.innerHTML = 'img.recent_thumb {width: 90px;height: 70px;float: left; margin-right: 10px;} .recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;list-style-type:none;} ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;} .recent_posts_with_thumbs a {text-decoration:none;} .recent_posts_with_thumbs strong {font-size:10px;}'; 
document.getElementsByTagName('head')[0].appendChild(style); 
document.getElementById('someElementId').className = 'cssClass'; 

function showrecentpostswiththumbs(json) { 
document.write('<ul class="recent_posts_with_thumbs">'); 
for (var i = 0; i < numposts; i++) { 
    var entry = json.feed.entry[i]; 
    var posttitle = entry.title.$t; 
    var posturl; 
    if (i == json.feed.entry.length) break; 
    for (var k = 0; k < entry.link.length; k++) { 
     if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') { 
      var commenttext = entry.link[k].title; 
      var commenturl = entry.link[k].href; 
     } 
     if (entry.link[k].rel == 'alternate') { 
      posturl = entry.link[k].href; 
      break; 
     } 
    } 
    var thumburl; 
    try { 
     thumburl = entry.media$thumbnail.url; 
    } catch (error) { 
     s = entry.content.$t; 
     a = s.indexOf("<img"); 
     b = s.indexOf("src=\"", a); 
     c = s.indexOf("\"", b + 5); 
     d = s.substr(b + 5, c - b - 5); 
     if ((a != -1) && (b != -1) && (c != -1) && (d != "")) { 
      thumburl = d; 
     } else thumburl = 'http://www.webaholic.co.in/other/no-image.jpg'; 
    } 
    var postdate = entry.published.$t; 
    var cdyear = postdate.substring(0, 4); 
    var cdmonth = postdate.substring(5, 7); 
    var cdday = postdate.substring(8, 10); 
    var monthnames = new Array(); 
    monthnames[1] = "Jan"; 
    monthnames[2] = "Feb"; 
    monthnames[3] = "Mar"; 
    monthnames[4] = "Apr"; 
    monthnames[5] = "May"; 
    monthnames[6] = "Jun"; 
    monthnames[7] = "Jul"; 
    monthnames[8] = "Aug"; 
    monthnames[9] = "Sep"; 
    monthnames[10] = "Oct"; 
    monthnames[11] = "Nov"; 
    monthnames[12] = "Dec"; 
    document.write('<li class="clearfix">'); 
    if (showpostthumbnails == true) document.write('<img class="recent_thumb" src="' + thumburl + '"/>'); 
    document.write('<b><a href="' + posturl + '" target ="_top">' + posttitle + '</a></b><br>'); 
    if ("content" in entry) { 
     var postcontent = entry.content.$t; 
    } else if ("summary" in entry) { 
     var postcontent = entry.summary.$t; 
    } else var postcontent = ""; 
    var re = /<\S[^>]*>/g; 
    postcontent = postcontent.replace(re, ""); 
    if (showpostsummary == true) { 
     if (postcontent.length < numchars) { 
      document.write('<i>'); 
      document.write(postcontent); 
      document.write('</i>'); 
     } else { 
      document.write('<i>'); 
      postcontent = postcontent.substring(0, numchars); 
      var quoteEnd = postcontent.lastIndexOf(" "); 
      postcontent = postcontent.substring(0, quoteEnd); 
      document.write(postcontent + '...'); 
      document.write('</i>'); 
     } 
    } 
    var towrite = ''; 
    var flag = 0; 
    document.write('<br><strong>'); 
    if (showpostdate == true) { 
     towrite = towrite + monthnames[parseInt(cdmonth, 10)] + '-' + cdday + ' - ' + cdyear; 
     flag = 1; 
    } 
    if (showcommentnum == true) { 
     if (flag == 1) { 
      towrite = towrite + ' | '; 
     } 
     if (commenttext == '1 Comments') commenttext = '1 Comment'; 
     if (commenttext == '0 Comments') commenttext = 'No Comments'; 
     commenttext = '<a href="' + commenturl + '" target ="_top">' + commenttext + '</a>'; 
     towrite = towrite + commenttext; 
     flag = 1;; 
    } 
    if (displaymore == true) { 
     if (flag == 1) towrite = towrite + ' | '; 
     towrite = towrite + '<a href="' + posturl + '" class="url" target ="_top">More -></a>'; 
     flag = 1;; 
    } 
    document.write(towrite); 
    document.write('</strong></li>'); 
    if (displayseparator == true) if (i != (numposts - 1)) document.write('<hr size=0.5>'); 
} 
document.write('</ul>'); 
} 
</script> 
<script src='/feeds/posts/default/-/featured?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script> 

Answer 1

そのためのサンプルスクリプトは次のようになります - ポストがフェッチされているから、ラベルを変更するには

var syb_numposts = 3; 
 
    var syb_labelname = "apps"; 
 
    var syb_pagetoshow = 4; 
 
    var syb_showpostthumbnails = true; 
 
    var syb_displaymore = true; 
 
    var syb_displayseparator = true; 
 
    var syb_showcommentnum = false; 
 
    var syb_showpostdate = true; 
 
    var syb_showpostsummary = true; 
 
    var syb_numchars = 70; 
 

 
    var syb_style = document.createElement('style'); 
 
    syb_style.type = 'text/css'; 
 
    syb_style.innerHTML = 
 
     'a.syb_page-link {cursor: pointer;}.syb_pagination li {display: inline-block; margin: 10px 5px 10px;}img.syb_recent_thumb {width: 90px;height: 70px;float: left; margin-right: 10px;} .syb_recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;list-style-type:none;} ul.syb_recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;} .syb_recent_posts_with_thumbs a {text-decoration:none;} .syb_recent_posts_with_thumbs strong {font-size:10px;}'; 
 
    document.getElementsByTagName('head')[0].appendChild(syb_style); 
 

 
    function syb_showrecentpostswiththumbs(json) { 
 
     var syb_FullContainer = document.createElement("div"); 
 
     var syb_ListContainer = document.createElement("ul"); 
 
     syb_ListContainer.className = 'syb_recent_posts_with_thumbs'; 
 

 
     for (var i = 0; i < json.feed.entry.length; i++) { 
 
      var syb_entry = json.feed.entry[i]; 
 
      var syb_posttitle = syb_entry.title.$t; 
 
      var syb_posturl; 
 
      if (i == json.feed.entry.length) break; 
 
      for (var k = 0; k < syb_entry.link.length; k++) { 
 
       if (syb_entry.link[k].rel == 'replies' && syb_entry.link[k].type == 
 
        'text/html') { 
 
        var syb_commenttext = syb_entry.link[k].title; 
 
        var syb_commenturl = syb_entry.link[k].href; 
 
       } 
 
       if (syb_entry.link[k].rel == 'alternate') { 
 
        syb_posturl = syb_entry.link[k].href; 
 
        break; 
 
       } 
 
      } 
 
      var syb_thumburl; 
 
      try { 
 
       syb_thumburl = syb_entry.media$thumbnail.url; 
 
      } catch (error) { 
 
       s = syb_entry.summary.$t; 
 
       a = s.indexOf("<img"); 
 
       b = s.indexOf("src=\"", a); 
 
       c = s.indexOf("\"", b + 5); 
 
       d = s.substr(b + 5, c - b - 5); 
 
       if ((a != -1) && (b != -1) && (c != -1) && (d != "")) { 
 
        syb_thumburl = d; 
 
       } else syb_thumburl = 
 
        'https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/No_image_available.svg/300px-No_image_available.svg.png'; 
 
      } 
 
      var syb_postdate = syb_entry.published.$t; 
 
      var syb_cdyear = syb_postdate.substring(0, 4); 
 
      var syb_cdmonth = syb_postdate.substring(5, 7); 
 
      var syb_cdday = syb_postdate.substring(8, 10); 
 
      var syb_monthnames = new Array(); 
 
      syb_monthnames[1] = "Jan"; 
 
      syb_monthnames[2] = "Feb"; 
 
      syb_monthnames[3] = "Mar"; 
 
      syb_monthnames[4] = "Apr"; 
 
      syb_monthnames[5] = "May"; 
 
      syb_monthnames[6] = "Jun"; 
 
      syb_monthnames[7] = "Jul"; 
 
      syb_monthnames[8] = "Aug"; 
 
      syb_monthnames[9] = "Sep"; 
 
      syb_monthnames[10] = "Oct"; 
 
      syb_monthnames[11] = "Nov"; 
 
      syb_monthnames[12] = "Dec"; 
 

 
      var syb_ItemContainer = document.createElement("li"); 
 
      syb_ItemContainer.className = 'clearfix'; 
 

 
      if (syb_showpostthumbnails == true){ 
 
      var syb_ItemImageLink = document.createElement("a"); 
 
      syb_ItemImageLink.setAttribute("href", syb_posturl); 
 
      var syb_ItemImage = document.createElement("img"); 
 
      syb_ItemImage.className = 'syb_recent_thumb'; 
 
      syb_ItemImage.setAttribute("src", syb_thumburl); 
 
      syb_ItemImageLink.appendChild(syb_ItemImage); 
 

 
      } 
 

 
      var syb_ItemLinkContainer = document.createElement("b"); 
 
      var syb_ItemLink = document.createElement("a"); 
 
      syb_ItemLink.setAttribute("href", syb_posturl); 
 
      var syb_ItemLinkText = document.createTextNode(syb_posttitle); 
 

 

 
      syb_ItemLink.appendChild(syb_ItemLinkText); 
 
      syb_ItemLinkContainer.appendChild(syb_ItemLink); 
 
      
 
      var syb_ItemContainerBreak = document.createElement('br'); 
 

 
      
 
      if ("content" in syb_entry) { 
 
       var syb_postcontent = syb_entry.content.$t; 
 
      } else if ("summary" in syb_entry) { 
 
       var syb_postcontent = syb_entry.summary.$t; 
 
      } else var syb_postcontent = ""; 
 
      var re = /<\S[^>]*>/g; 
 
      syb_postcontent = syb_postcontent.replace(re, ""); 
 
      var syb_ItemLinkSummaryContainer = document.createElement("i"); 
 
      if (syb_showpostsummary == true) { 
 
       if (syb_postcontent.length < syb_numchars) { 
 
        var syb_ItemLinkSummary = document.createTextNode(syb_postcontent); 
 
        syb_ItemLinkSummaryContainer.appendChild(syb_ItemLinkSummary); 
 
       } else { 
 
        syb_postcontent = syb_postcontent.substring(0, syb_numchars); 
 
        var quoteEnd = syb_postcontent.lastIndexOf(" "); 
 
        syb_postcontent = syb_postcontent.substring(0, quoteEnd); 
 
        var syb_ItemLinkSummary = document.createTextNode(syb_postcontent + "..."); 
 
        syb_ItemLinkSummaryContainer.appendChild(syb_ItemLinkSummary); 
 
       } 
 
      } 
 
      var syb_towrite = ''; 
 
      var syb_flag = 0; 
 
      var syb_ItemContainerMetaDataContainer = document.createElement('strong'); 
 
      if (syb_showpostdate == true) { 
 
       syb_towrite = syb_monthnames[parseInt(syb_cdmonth, 10)] + '-' + 
 
        syb_cdday + ' - ' + syb_cdyear; 
 
       syb_flag = 1; 
 
      var syb_ItemContainerMetaDataDateContainer = document.createElement('span'); 
 
      var ItemContainerMetaDataDate = document.createTextNode(syb_towrite); 
 
      syb_ItemContainerMetaDataDateContainer.appendChild(ItemContainerMetaDataDate); 
 
      syb_ItemContainerMetaDataContainer.appendChild(syb_ItemContainerMetaDataDateContainer); 
 

 
      } 
 
      if (syb_showcommentnum == true) { 
 
       
 
       if (syb_commenttext == '1 Comments') syb_commenttext = '1 Comment'; 
 
       if (syb_commenttext == '0 Comments') syb_commenttext = 'No Comments'; 
 

 
       var syb_ItemCommentLink = document.createElement("a"); 
 
       syb_ItemCommentLink.setAttribute("href", syb_commenturl); 
 
       if (syb_flag == 1) { 
 
       var syb_ItemCommentLinkText = document.createTextNode(" | " + syb_commenttext); 
 
       } else { 
 
       var syb_ItemCommentLinkText = document.createTextNode(syb_commenttext); 
 
       } 
 
       syb_ItemCommentLink.appendChild(syb_ItemCommentLinkText); 
 

 
       syb_flag = 1; 
 
       syb_ItemContainerMetaDataContainer.appendChild(syb_ItemCommentLink); 
 

 
      } 
 
      if (syb_displaymore == true) { 
 

 
       var syb_ItemReadMoreLink = document.createElement("a"); 
 
       syb_ItemReadMoreLink.setAttribute("href", syb_posturl); 
 

 
       if (syb_flag == 1) { 
 
       var syb_ItemReadMoreText = document.createTextNode(" | More ->"); 
 
       } else { 
 
       var syb_ItemReadMoreText = document.createTextNode("More ->"); 
 
       } 
 
       syb_ItemReadMoreLink.appendChild(syb_ItemReadMoreText); 
 
       syb_flag = 1; 
 
       syb_ItemContainerMetaDataContainer.appendChild(syb_ItemReadMoreLink); 
 

 
      } 
 
      
 
      syb_ItemContainer.appendChild(syb_ItemImageLink); 
 
      syb_ItemContainer.appendChild(syb_ItemLinkContainer); 
 
      syb_ItemContainer.appendChild(syb_ItemContainerBreak); 
 
      syb_ItemContainer.appendChild(syb_ItemLinkSummaryContainer); 
 
      syb_ItemContainer.appendChild(syb_ItemContainerBreak); 
 
      syb_ItemContainer.appendChild(syb_ItemContainerMetaDataContainer); 
 

 
      if (syb_displayseparator == true){ 
 
       var syb_ItemSeperator = document.createElement("hr"); 
 
       syb_ItemSeperator.style.clear = 'both'; 
 
       syb_ItemContainer.appendChild(syb_ItemSeperator); 
 

 
      } 
 

 
      syb_ListContainer.appendChild(syb_ItemContainer); 
 
      syb_FullContainer.appendChild(syb_ListContainer); 
 
     } 
 
     
 
     syb_numberofpages = Math.ceil(json.feed.openSearch$totalResults.$t/json.feed.openSearch$itemsPerPage.$t); 
 
     var syb_pagestoshow = (syb_pagetoshow <= syb_numberofpages)?syb_pagetoshow:syb_numberofpages; 
 

 
     var syb_PaginationContainer = document.createElement("div"); 
 
     syb_PaginationContainer.className = 'syb_pagination'; 
 
     var syb_PageContainer = document.createElement("ul"); 
 

 
     for (g = 1; g <= syb_pagestoshow; g++) { 
 
     var syb_SinglePage = document.createElement("li"); 
 
     var syb_SinglePageLink = document.createElement("a"); 
 
     syb_SinglePageLink.setAttribute("data-href", "#"); 
 
     syb_SinglePageLink.className = 'syb_page-link'; 
 
     var syb_SinglePageLinkText = document.createTextNode(g); 
 
     syb_SinglePageLink.appendChild(syb_SinglePageLinkText); 
 
     syb_SinglePage.appendChild(syb_SinglePageLink); 
 
     syb_PageContainer.appendChild(syb_SinglePage); 
 

 
     } 
 

 
     syb_PaginationContainer.appendChild(syb_PageContainer); 
 
     syb_FullContainer.appendChild(syb_PaginationContainer); 
 
     document.querySelector('.syb_featuredpostlist').innerHTML = ''; 
 
     document.querySelector('.syb_featuredpostlist').appendChild(syb_FullContainer); 
 

 
     for (j = 0; j < document.querySelectorAll('a.syb_page-link').length; j++)(function(j) { 
 
      document.querySelectorAll('a.syb_page-link')[j].onclick = function(event) { 
 
       event.preventDefault(); 
 
       syb_PaginationScript = document.createElement('script'); 
 
       syb_PaginationScript.src = "https://webmasters.googleblog.com/feeds/posts/summary/-/" + syb_labelname + "?orderby=published&alt=json-in-script&max-results=" + syb_numposts + "&start-index=" + ((j*syb_numposts)+1) + "&callback=syb_showrecentpostswiththumbs"; 
 
       var syb_PaginationScriptPosition = document.querySelector('.syb_featuredpostlist'); 
 
       syb_PaginationScriptPosition.parentNode.insertBefore(syb_PaginationScript, syb_PaginationScriptPosition); 
 
      }; 
 
     })(j); 
 
    } 
 

 
    var syb_ScriptLoad = document.createElement('script'); 
 
    syb_ScriptLoad.src = "https://webmasters.googleblog.com/feeds/posts/summary/-/" + syb_labelname + "?orderby=published&alt=json-in-script&max-results=" + syb_numposts + "&callback=syb_showrecentpostswiththumbs"; 
 
    var syb_ScriptPosition = document.querySelector('.syb_featuredpostlist'); 
 
    syb_ScriptPosition.parentNode.insertBefore(syb_ScriptLoad, syb_ScriptPosition);

<div class='syb_featuredpostlist'></div>

、変数syb_labelnameの値を変更します。また、https://webmasters.googleblog.com/を自分のブログのURLに変更してください。