Android & Blog Stuff

See Demo at the Home page of this blog.

How to add this beautiful widget on your Blogger blog:

• Step 1: Apply Style

1. Go to your Dashboard > Design > Edit HTML.
2. Don't click the checkbox which says "Expand Widget Templates".
3. Find this code:

]]></b:skin>

4. And replace it 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1j4nEexoW0EHM68xwdqvDJ2kx1iZ4OHjhlRDhAS00lF_aUJ0eyB1YFYOXioQt7RZAiohozroPAW9kC01AMEZDWcq8FnkN835HZ7TI_LfvPGsztgQ0sY2g6azOR5BWBMZNJ4FBu-KN8Tg/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: Apply Javascript

1. Find this code:

</body>

2. And replace it with this:

<script src='http://sites.google.com/site/bloggetsbtemplate/btemplates/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://sites.google.com/site/bloggetsbtemplate/btemplates/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