ページ送りナビゲーションの設置

コチラのサイト、bloggerのカスタマイズのtipsが豊富。英語サイトなので詳しい点までは理解できないかもしれないが、step1→step2→step3と、ゆっくり読めば、「コレをコレに置き換えろ！」であるとか、コレの上にコピーせよ」だとかはわかります。

で、やってみたのがページナビのボタンと下のバーが連動しているので、全体のどのあたりのページを表示しているかがビジュアルでわかるので便利。。。

1. さて、やり方を整理しておこうと思う。

STEP1

bloggerのhtml編集画面で

]]></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/AVvXsEj45fyTnnGbK2jJuYAGK545JcfUmQMKCs1m-QJBdxLYmO7XJCj2YJau5Gmqn1d-dD0auSxeEp6qKiV1oWxGDsDVh_rOwMgphlbmFvm7BBeQECrITulok4bWW54dET3yla-QGgBgzVxDOPs/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>

STEP2

bloggerの編集画面で

</body>

の部分を検索し、そこに下のコードを置換します

<script src='http://scriptabufarhan.googlecode.com/svn/trunk/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://scriptabufarhan.googlecode.com/svn/trunk/paginator3000-forblogger-v1.0.0.js' type='text/javascript'/> </body>

STEP3

bloggerの編集画面で

'data:label.url'

の部分を検索し、そこに下のコードを置換します

'data:label.url + &quot;?&amp;max-results=7&quot;'

以上で完成します。