Help - Search - Members - Calendar
Full Version: Tumblr blog pagination
HTMLHelp Forums > Web Authoring > Web Site Functionality
J3llyDesu420
So these past few hours I've been trying to edit the theme of my blog by adding pagination instead of infinite scrolling.
The problem is, the pagination appears at the top of the page instead of at the bottom of the page.
I've tried everything I could to make the pagination buttons appear at the bottom, but NOTHING would work. This is my only option, please help.
here's the html of my theme:

CODE

<!--
theme by nice-meme.tumblr.com
please don't remove the credit!!
have fun with this shitty theme B^)
-->

<!DOCTYPE html>

<head>
{block:ifinfinitescrolling}
<script type="text/javascript" src="http://codysherman.tumblr.com/tools/infinite-scrolling/code"></script>  {/block:ifinfinitescrolling}

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}

<meta name="color:Background" content="#ddf2e8">
<meta name="color:Post BG" content="#ffffff">
<meta name="color:Text" content="#222222">
<meta name="color:Link" content="#224b37">
<meta name="color:Link Hover" content="#bbe4d0">
<meta name="color:footer" content="#eff5f2">
<meta name="color:Border" content="#5acdb3">
<meta name="color:footer border" content="#9ad7b9">
<meta name="color:shadow" content="#bbe4d0">
<meta name="color:box color" content="#eaf8f1">

<meta name="image:favicon" content="http://media.tumblr.com/983e00b7a843ac5296ccef85ad4569a0/tumblr_inline_mz64draZSa1r9ajsd.gif"/>
<meta name="image:Sidebar" content="https://31.media.tumblr.com/62945633a7463e36848c3ad87ffe7270/tumblr_inline_na22fb0Pk31rgz5s8.png" />
<meta name="image:background" content="">
<meta name="image:corner image" content="https://31.media.tumblr.com/dc0df346f3875c2a0d4075be729f7642/tumblr_inline_na258ok6bn1rgz5s8.png">

<meta name="text:corner image bottom" content="-1">
<meta name="text:corner image position" content="30">
<meta name="text:sidebar top" content="22">
<meta name="text:sidebar position" content="470">
<meta name="text:post position" content="434">
<meta name="text:link box name" content="links. . .">
<meta name="text:link1 name" content="link1">
<meta name="text:link1 url" content="">
<meta name="text:link2 name" content="link2">
<meta name="text:link2 url" content="">
<meta name="text:link3 name" content="link3">
<meta name="text:link3 url" content="">
<meta name="text:link4 name" content="link4">
<meta name="text:link4 url" content="http://beeps-and-bloops.tumblr.com">
<meta name="text:pagination position" content="300">

<meta name="if:link1" content="1">
<meta name="if:link2" content="1">
<meta name="if:link3" content="1">
<meta name="if:link4" content="1">
<meta name="if:shadow" content="1">
<meta name="if:round" content="0">
<meta name="if:bgcover" content="0">
<meta name="if:infinitescrolling" content="1">


  
<title>{Title}</title>
      
<link rel="shortcut icon" href="{image:favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<link rel="stylesheet" href="http://static.tumblr.com/qxrkgx6/RWPmgn2qa/normalize.min.css">

<script src="http://static.tumblr.com/qxrkgx6/LuRmgn2rm/modernizr-2.6.2.min.js"></script>
      
<style type="text/css">

::-webkit-scrollbar {
    width:9px;
    height:5px;
    background:{color:Background};}
::-webkit-scrollbar-thumb {background:{color:Text};}

body {
    margin:0px;
    background:{color:Background} url({image:background}) {block:ifbgcover}  no-repeat center fixed;
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;  {/block:ifbgcover}

  {block:ifnotbgcover} top left fixed repeat {/block:ifnotbgcover};

    font-family: tahoma;
    font-size:12px;
    line-height:140%;
    color: {color:Text};

}

a{
    color:{color:link};
    -webkit-transition: 0.6s ease;transition: 0.6s ease;
    -o-transition: 0.6s ease;-moz-transition: 0.6s ease;
}

a:hover{
    color:{color:link hover};
    -webkit-transition: 0.6s ease;transition: 0.6s ease;
    -o-transition: 0.6s ease;-moz-transition: 0.6s ease;
}

.post a{
    color:{color:Link};
    text-decoration:none;
    font-weight:normal;
}
  
.post a:hover{
    color:{color:Link Hover};
    text-decoration:none;
}

#wrapper{
    width:{text:post position}px;
    margin:0 auto;
    padding:10px;
}

#sidebar{
    margin-top: {text:sidebar top}px;
    margin-left: {text:sidebar position}px;
    text-align:center;
    background:{color:post bg};
    width: 136px;
    padding:5px;
    position:fixed;
    border:1px solid {color:border};
  
   {block:ifround}
    -moz-border-radius:4px; -webkit-border-radius:4px; {/block:ifround}
  
    {block:ifshadow}
        -moz-box-shadow: 3px 3px {color:shadow};
-webkit-box-shadow: 3px {color:shadow};
box-shadow: 5px 5px {color:shadow}; {/block:ifshadow}
}


#sidebarimg{
    margin-bottom:0px;

}

#sidebarimg:hover{
}

#sidebarimg img{
    max-width:100%;
    width: 130px
    height: 130px;
}


#description{
    margin:1px 0;
    width: 135px;
    text-align:center;
}

#description a{
    color:{color:Link};
    text-decoration:none;
}

#description a:hover{
    color:{color:Link Hover};
}



.nav{
    margin:0;
    font-size:12px;
    font-style:italic;
    width:150px;
    text-align:center;
}

.nav a{
    text-decoration:none;
    padding:0 3px;
}

#content{
    width:450px;
    padding:10px;
    margin-top:-30px;
    margin-left:-30px;
    overflow:hidden;
}

.post{
    width:400px;
    padding:15px;
    margin:45px 0 35px 0;
    overflow:hidden;
    text-align:justify;
    border:1px solid {color:border};
    background:{color:post bg};
  
  
    {block:ifround}
    -moz-border-radius:4px; -webkit-border-radius:4px; {/block:ifround}
  
    {block:ifshadow}
  
        -moz-box-shadow: 3px 3px {color:shadow};
-webkit-box-shadow: 3px 3px {color:shadow};
box-shadow: 5px 5px {color:shadow};
{/block:ifshadow}
}

.post img{
    max-width:100%;
}

.posttitle{
    font-weight:normal;
    font-size:15px;
    line-height:22px;
    text-decoration:none;
    margin:3px 0 -3px 0;
}

.posttitle a{
    text-decoration:none;
}

.quote{
    font-weight:normal;
    font-size:15px;
    font-style:italic;
    line-height:22px;
    text-decoration:none;
}

.quotesource{
    text-align:right;
}


.question{
    padding-bottom:10px;
    margin:0;
    border-bottom:1px solid {color:Border};
}

.caption{
    margin:0;
}

blockquote{
    margin:0 0 0 15px;
    padding:0 0 0 10px;
    margin-left:5px;
    border-left:solid 2px {color:text};
}





ol.notes li.note img {
    width:10px;
    height:10px;
}
  
ol.notes{
    list-style-type:none;
    padding:2px 10px 2px 10px;
    font-size:11px;
}





#picture
{
position:fixed;
left:20px;
bottom:3px;
z-index:100
}




.footer{
    margin:1px;
    font-size:11px;
    font-style:none;
    line-height:13px;
    border:1px solid {color:footer border};
    background: {color:footer};
    padding: 3px 3px;
    margin-top: 5px;
}


{block:ifnotinfinitescrolling}

.jump_page {
padding: 4px 8px;
border: 1px solid {color:border};
background-color: {color:post BG};
color:{color:text};
font-family:helvetica;
font-size:10px;
text-decoration:none;
}

.current_page, .jump_page:hover {
padding: 4px 8px;
border: 2px solid {color:border};
background-color: {color:border};
color: {color:text};
font-family:helvetica;
font-size:11px;
text-decoration:none;
}
{/block:ifnotinfinitescrolling}




{CustomCSS}
</style>


</head>


<div style="position:fixed; bottom:{text:corner image bottom}px;  left:{text:corner image position}px; z-index:-999">
<img src="{image:corner image}"/></div>


<body class="{block:IndexPage}index{/block:IndexPage} {block:PermalinkPage}permalink{/block:PermalinkPage}">


</div>
</div>





<div id="wrapper">



<div id="sidebar">


<div id="sidebarimg"><a href="http://beeps-and-bloops.tumblr.com"><img src="{image:sidebar}"></a></div>


{block:Description}
<div id="description">{Description}
{/block:Description}
<br>
<select style="width: 130px; border: 0px solid; padding: 3px; color: {color:text}; background-color: {color:box color};  font-family: calibri; text-transform: uppercase; font-size: 11px; letter-spacing: 2px;" onChange="location.href=this.options[this.selectedIndex].value;">
{block:iflink1}<option value="/">{text:link box name}</option>{block:iflink1}
<option value="{text:link1 url}">{text:link1 name}</option>
{block:iflink2}<option value="{text:link2 url}">{text:link2 name}</option>{block:iflink2}
{block:iflink3}<option value="{text:link3 url}">{text:link3 name}</option>{/block:iflink3}
{block:iflink4}<option value="">{text:link4 name}</option>{/block:iflink4}
<option value="http://nice-meme.tumblr.com/">theme</option>
</select></div>
</div>
     {block:ifnotinfinitescrolling}
    
    
     <div style="position:fixed; margin-bottom: {text:pagination position}px;
    margin-left: {text:sidebar position}px;">
    
{block:Pagination}
{block:PreviousPage}<a href="{PreviousPage}" class="jump_page">«</a>{/block:PreviousPage}
{block:JumpPagination length="3"}
{block:CurrentPage}<span class="current_page">{PageNumber}</span>{/block:CurrentPage}
{block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}
{block:NextPage}<a href="{NextPage}" class="jump_page">»</a>{/block:NextPage}
{/block:Pagination}</div>
      
        {/block:ifnotinfinitescrolling}

<div id="content">


{block:Posts}

<!-- {block:NoRebloggedFrom}
{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
{/block:NoRebloggedFrom} -->

{block:ContentSource}<!-- {SourceURL}
{block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
{/block:ContentSource}




<div class="post">

{block:Text}
{block:Title}
<div class="posttitle">{Title}</div>
{/block:Title}
{Body}
{/block:Text}

{block:Photo}
{LinkOpenTag}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{LinkCloseTag}
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:Photo}

{block:Photoset}
{Photoset-400}
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:Photoset}

{block:Quote}
<div class="quote">"{Quote}"</div>
{block:Source}
<div class="quotesource">{Source}</div>
{/block:Source}
{/block:Quote}

{block:Link}
<div class="posttitle"><a href="{URL}">{Name}</a></div>
{block:Description}
<div class="description">{Description}</div>
{/block:Description}
{/block:Link}

{block:Chat}
{block:Title}
<div class="posttitle">{Title}</div>
{/block:Title}

{block:Lines}
<div class="{Alt} user_{UserNumber}">
{block:Label}
<b>{Label}</b>{/block:Label}
 {Line}
</div>
{/block:Lines}
{/block:Chat}

{block:Video}
{Video-400}
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:Video}

{block:Audio}


{AudioPlayerWhite}

<i>{block:TrackName}{TrackName}{/block:TrackName} - {block:Artist}{Artist}{/block:Artist} ({block:Album}{Album}{/block:Album})</i>

{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:Audio}
              
{block:Answer}
<table style="border-bottom:0px solid #a0a0a0;padding-bottom:5px;margin-bottom:5px;">
<tr>
<td style="vertical-align:top;padding-right:10px;"><img src="{AskerPortraitURL-48}"></td>
<td style="vertical-align:top;"><strong>{Asker} said:</strong> {Question}</td>
</tr>
</table>
{Answer}
{/block:Answer}

<div class="footer">
<a href="{Permalink}">{block:Date}{TimeAgo}{/block:Date}{block:NoteCount}</a><font color="{color:link}"> - </font><a href="{Permalink}">{NoteCountWithLabel}{/block:NoteCount}</a>

<div style="float:right">{block:RebloggedFrom}<a href="{ReblogParentURL}" title="{ReblogParentName}" >via</a><font color="{color:link}"> / </font><a href="{ReblogRootURL}" title="{ReblogRootName}">©</a> {/block:RebloggedFrom}</div>

<div align="left">{block:HasTags}
{block:Tags}<font color="{color:link}">#</font><a href="{TagURL}" title="{Tag}">{Tag}</a> {/block:Tags}{/block:HasTags}</div></div>


{block:PermalinkPage}
{block:NoteCount}
{block:PostNotes}{PostNotes}{/block:PostNotes}
{/block:NoteCount}
{/block:PermalinkPage}

</div>
{/block:Posts}
</div>
</div>




</div>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="http://static.tumblr.com/qxrkgx6/q6kmgn2w2/jquery-1.8.3.min.js"><\/script>')</script>
      
        <!-- add Javascript file here -->
        <!--<script src=""></script>-->
      

    </body>

  
</html>
J3llyDesu420
UPDATE: I somehow managed to figure out how to change the position of the pagination buttons. Since I can't delete this post, I'm just letting you all know that you dont have to reply to me.
Have a lovely day everyone!
Frederiek
Posts aren't deleted here.

You might post what you did to solve this, so that others with the same problem can benefit from it when they find this thread.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2017 Invision Power Services, Inc.