如何为Blogger网站添加分页

本文将教你使用2种方法为blogger网站添加分页，助你提高网站的用户体验和SEO表现。

查看目录

添加分页功能的好处

提升用户体验

易于导航：分页功能使用户可以轻松地浏览您的博客，而无需滚动大量内容。用户可以快速找到他们感兴趣的内容。
减少加载时间：分页可以减少每个页面上加载的内容数量，从而提高页面加载速度。这对于用户在移动设备上的体验尤为重要。

改善SEO表现

降低跳出率：通过分页，用户更有可能继续浏览其他页面，而不是因为内容过多而离开。这有助于降低跳出率，提高用户粘性。
内部链接优化：分页中的链接有助于提升站内链接的密度，搜索引擎更容易抓取和索引您的内容。

增加页面浏览量

延长访问时间：用户在浏览分页内容时，会花更多时间在您的博客上，这有助于增加页面浏览量，提升网站的整体表现。

提高广告收入

多页面展示广告：如果您的博客展示广告，分页可以增加广告展示次数，从而有可能提高广告收入。

通过添加分页功能，您不仅可以显著提升用户体验，还能带来多种SEO和商业上的好处。

第一种方法的具体步骤

步骤 1：备份您的模板

在进行任何更改之前，建议先备份您的模板。这样，如果在编辑过程中出现任何问题，您可以轻松恢复。

打开您的Blogger仪表盘。
进入主题部分。
点击备份/还原按钮，然后选择下载完整模板。
也可以直接保存整个HTML编辑页面的主题代码。

步骤 2：添加分页css代码

返回主题部分，并点击自定义按钮。
选择编辑HTML选项。
可以通过 cltr+f 搜索找到以下代码部分：

]]></b:skin>

在这行代码上方粘贴以下分页CSS代码：

.pagernav {margin-top: 20px; background:#fff;padding:10px 0;border:1px solid #eee;border-top:0;}.turn-left{width:50%;float:left;margin:0;text-align:left;color:#bbb;transition:all .3s ease-out;}.turn-right{width:50%;float:right;margin:0;text-align:right;color:#bbb;transition:all .3s ease-out}.turn-right:hover .pager-title-left,.turn-left:hover .pager-title-left{color:#ddd!important;}.turn-left a,.turn-right a{color:#999;}.turn-right a:hover,.turn-left a:hover{color:#666!important;}.turn-left a,.turn-right a{font-size: 22px; font-weight: 700; text-transform: uppercase;}.pager-title-left{font-family: 'Open Sans',sans-serif;font-size:22px;font-weight:700;text-transform:uppercase;transition:all .3s ease-out}.blog-left{margin:0}.blog-right{margin:5px 10px 10px}#blog-pager-newer-link{float:left;padding:0 0 0 15px;}#blog-pager-older-link{float:right;padding:0 15px 0 0;}.blog-pager,#blog-pager{clear:both;text-align:center}

步骤 3：添加分页HTML代码

选择合适的位置，或者找到以下代码：

data:post.body

在这行代码之后粘贴以下分页HTML代码：

<b:if cond='data:blog.pageType == &quot;item&quot;'><div class='pagernav'><div class='blog-pager' id='blog-pager'><div class='turn-left'><div class='blog-left'><b:if cond='data:newerPageUrl'><span id='blog-pager-newer-link'><span class='pager-title-left'>上一篇博文</span><br/><a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>&#171; 上一篇</a></span><b:else/><span class='current-pageleft'><span class='pager-title-left'>最新博文</span></span></b:if></div></div><div class='turn-right'><div class='blog-right'><b:if cond='data:olderPageUrl'><span id='blog-pager-older-link'><span class='pager-title-left'>下一篇博文</span><br/><a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>下一篇 &#187;</a></span><b:else/><span class='current-pageright'><span class='pager-title-left'>第一篇</span></span></b:if></div></div></div><div style='clear: both;'/></div></b:if>

步骤 4：添加分页JavaScript代码

找到以下代码块，一般在页面底部：

</body>

在这行代码之前粘贴以下分页JavaScript代码：

<script type='text/javascript'>$(document).ready(function(){var olderLink=$(&quot;a.blog-pager-older-link&quot;).attr(&quot;href&quot;);$(&quot;a.blog-pager-older-link&quot;).load(olderLink+&quot; .post-title:first&quot;,function(){var olderLinkTitle=$(&quot;a.blog-pager-older-link&quot;).text();$(&quot;a.blog-pager-older-link&quot;).text(olderLinkTitle);});var newerLink=$(&quot;a.blog-pager-newer-link&quot;).attr(&quot;href&quot;);$(&quot;a.blog-pager-newer-link&quot;).load(newerLink+&quot; .post-title:first&quot;,function(){var newerLinkTitle=$(&quot;a.blog-pager-newer-link:first&quot;).text();$(&quot;a.blog-pager-newer-link&quot;).text(newerLinkTitle);});});</script>

步骤 5：保存更改并预览

完成以上步骤后，点击保存主题按钮。然后预览您的博客，确认分页功能已成功添加并正常工作。

第二种方法的具体步骤

再次提醒：在进行任何更改之前，建议先备份您的模板。

步骤 1：添加分页HTML

在<head>内添加下列代码，用你的网站域名替换代码中的url。

  <!-- 规范链接 -->
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <link href='https://www.yunjiyi.com/' rel='canonical'/>
  </b:if>
  <b:if cond='data:blog.pageType == &quot;page&quot;'>
    <link href='https://www.yunjiyi.com/?max-results=1' rel='canonical'/>
  </b:if>
  <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <link href='https://www.yunjiyi.com/' rel='canonical'/>
  </b:if>

步骤 2：添加分页JavaScript代码

在</body>标签结束前添加下列JavaScript代码：

第一个数字“6”表示每页显示的最大文章数，需要与Blogger设置中“主页上显示的博文数量上限”一致。第二个数字“10”表示分页数，需要 ≥ 总文章数 ÷ 每页最大文章数
假设每页显示文章数设置为6，你总共有30篇文章，那么第二个数字要 ≥ 5

重要提醒：数字错误，会导致搜索引擎抓取失败

    <!-- 修正错误# -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
  /*<![CDATA[*/
    var postperpage=6;
    var numshowpage=10;
    var upPageWord ='← 上一页';
    var downPageWord ='下一页 →';
    var urlactivepage=location.href;
    var home_page="/";
  /*]]>*/
</script>
<script type='text/javascript'>
  /*<![CDATA[*/
    var nopage;var jenis;var nomerhal;var lblname1;halamanblogger();function loophalaman(banyakdata){var html='';nomerkiri=parseInt(numshowpage/2);if(nomerkiri==numshowpage-nomerkiri){numshowpage=nomerkiri*2+1}mulai=nomerhal-nomerkiri;if(mulai<1)mulai=1;maksimal=parseInt(banyakdata/postperpage)+1;if(maksimal-1==banyakdata/postperpage)maksimal=maksimal-1;akhir=mulai+numshowpage-1;if(akhir>maksimal)akhir=maksimal;html+="<span class='showpageOf'>Page "+nomerhal+' of '+maksimal+"</span>";var prevnomer=parseInt(nomerhal)-1;if(nomerhal>1){if(nomerhal==2){if(jenis=="page"){html+='<span class="showpage"><a href="'+home_page+'">'+upPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">'+upPageWord+'</a></span>'}}else{if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+prevnomer+');return false">'+upPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+prevnomer+');return false">'+upPageWord+'</a></span>'}}}if(mulai>1){if(jenis=="page"){html+='<span class="showpageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a></span>'}}if(mulai>2){html+=' ... '}for(var jj=mulai;jj<=akhir;jj++){if(nomerhal==jj){html+='<span class="showpagePoint">'+jj+'</span>'}else if(jj==1){if(jenis=="page"){html+='<span class="showpageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a></span>'}}else{if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'}}}if(akhir<maksimal-1){html+='...'}if(akhir<maksimal){if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+maksimal+');return false">'+maksimal+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+maksimal+');return false">'+maksimal+'</a></span>'}}var nextnomer=parseInt(nomerhal)+1;if(nomerhal<maksimal){if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+nextnomer+');return false">'+downPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+nextnomer+');return false">'+downPageWord+'</a></span>'}}var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function hitungtotaldata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);loophalaman(totaldata)}function halamanblogger(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){jenis="page";if(urlactivepage.indexOf("#PageNo=")!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{nomerhal=1}document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=hitungtotaldata\"><\/script>")}else{jenis="label";if(thisUrl.indexOf("&max-results=")==-1){postperpage=20}if(urlactivepage.indexOf("#PageNo=")!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{nomerhal=1}document.write('<script src="'+home_page+'feeds/posts/summary/-/'+lblname1+'?alt=json-in-script&callback=hitungtotaldata&max-results=1" ><\/script>')}}}function redirectpage(numberpage){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var nBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nBody.appendChild(newInclude)}function redirectlabel(numberpage){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var nBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+lblname1+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nBody.appendChild(newInclude)}function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(jenis=="page"){var alamat="/search?updated-max="+timestamp+"&max-results="+postperpage+"#PageNo="+nopage}else{var alamat="/search/label/"+lblname1+"?updated-max="+timestamp+"&max-results="+postperpage+"#PageNo="+nopage}location.href=alamat}
  /*]]>*/
</script>
</b:if>
</b:if>

通过以上步骤，您可以轻松地为您的Blogger主题添加分页功能。这不仅可以提高用户体验，还能提升您的网站SEO表现。希望这篇教程对您有所帮助！

Happy blogging! 🚀