Page Navi: Paginator 3000

New Page Navigation that can support more than 500.
This Plugin call Paginator 3000:
- idea by ecto (ecto.ru)
- coded by karaboz (karaboz.ru)

  

Step 1 : Apply Style

Login to Blogger Dashboard and navigate to Layout > Edit Html
Don’t click the checkbox which says “Expand Widget Templates”

Find this:

]]></b:skin>

Replace with:

.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(http://3.bp.blogspot.com/_McxL-_3YYuM/TBG843o8-TI/AAAAAAAAAAM/tAE1hAOX6Ys/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>


Step 2 : Aplly Javascript

Find This :

</body>

Replace with :

<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>

Change based on your blog setting:

var postperpage=7;
var numshowpage=6;

Postperpage : how many Post every Page for your blog
numshowpage : how many number will show in Your page Navigation


Step 3 : Customize Label (if you already use my previous Page Navi don’t use this step)

Go to the Edit HTML page and “Expand Widget Templates

Find this:

'data:label.url'

Replace with:

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


Change 7 base on how many post every page...


* http://www.abu-farhan.com/2009/12/beautiful-new-page-navi-for-blogger/

0 comments:

Posting Komentar

Related Posts Plugin for WordPress, Blogger...