为Blogger添加页码导航条

       Blogger没有自带到航条，这样的话，想要直接看后面的文章只能一点一点的往后翻，而这篇文章将告诉你怎么增加漂亮的导航条。效果可以见下图：

      漂亮的Blogger新页滚动导航制作步骤。
      步骤1：
      登录到blogger信息中心—>设计—>修改HTML，并选择" 扩展窗口小部件模板"。
      步骤2：
      找到以下代码：
]]></b:skin>
      并用一下代码替换(一下是定义样式):
.paginator {
margin-top:60px;
font-size:1em;
}
.paginator table {
border-collapse:collapse;
table-layout:fixed;
width:100%;
}
.paginator table td {
padding:0;
white-space:nowrap;
text-align:center;
}
.paginator span {
display:block;
padding:3px 0;
color:#fff;
}
.paginator span strong,
.paginator span a {
padding:2px 6px;
}
.paginator span strong {
background:#ff6c24;
font-style:normal;
font-weight:normal;
}
.paginator .scroll_bar {
width:100%; height:20px;
position:relative;
margin-top:10px;
}
.paginator .scroll_trough {
width:100%; height:3px;
background:#ccc;
overflow:hidden;
}
.paginator .scroll_thumb {
position:absolute;
z-index:2;
width:0; height:3px;
top:0; left:0;
font-size:1px;
background:#363636;
}
.paginator .scroll_knob {
position:absolute;
top:-5px; left:50%;
margin-left:-10px;
width:20px; height:20px;
overflow:hidden;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw4IGnoh4dPIXbvcPbJe1YV086ZCmbPnR5qJD8mBDbSx0Gi_6HKZSKOZYJuqCGffTF8mZXg_G7Exk6VQTKVdZDm46zinFTn99mkdlkF-lm9m0LpYwVSCZ9EO3KU2b7DY3V-Ff5VWQs7LQ/s1600/slider_knob.gif) no-repeat 50% 50%;
cursor:pointer; cursor:hand;
}
.paginator .current_page_mark {
position:absolute;
z-index:1;
top:0; left:0;
width:0; height:3px;
overflow:hidden;
background:#ff6c24;
}

.fullsize .scroll_thumb {
display:none;
}

.paginator_pages {
width:600px;
text-align:right;
font-size:0.8em;
color:#808080;
margin-top:-10px;
}
]]></b:skin>
      步骤3：
      找到以下代码(下面是应用Javascript):
</body>
      并用一下代码替换：
<script src='http://page-number-pack.googlecode.com/files/paginator3000.js' type='text/javascript'></script>
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=6;
</script>
<script src='http://page-number-pack.googlecode.com/files/paginator3000-forblogger-v1.0.0.js' type='text/javascript'/>
</body>
      改变上面红色部分代码，其中var postperpage=7;7代表每页显示的文章个数，这个在设置里面有。var numshowpage=6;中的6代表会有多少数值显示在导航条中。
      步骤4:
      自定义标签，找到以下代码(找到所有的)：
'data:label.url'
      并用一下代码替换:
'data:label.url + "?&max-results=7"'
      注意上面的红色数字7要改成在步骤3中的每页显示文章数。
      步骤5:
      保存。
      Enjoy！
      本文转自Abu-Farhan.

本文地址：https://hebzhb.blogspot.com/2010/12/blogger_5774.html 原创文章如转载，请注明链接： 转自Boleyn Inn