Create a Page and Make its Link Appear on Tumblr
Creating a Tumblr Page is indeed easy, since the option is available in the customize section. However, after creating the page, many find out that the link for such page wouldn’t show up anywhere. This is due to a simple reason, the theme installed is missing the code necessary to pull the Tumblr Page, and of course, there’s no link whatsoever in the layout. This two step guide will show you how to create a page on Tumblr and make its link appear on the theme.
Create a Tumblr Page.
- Go to the customize section in your dashboard.
- In the customize navigation bar, click on Pages >>> Add a New Page.
- After that, an edition screen will pop up, besides giving the page a title, it’s very important that you tick the option Show a Link to This Page and alsogive the page an url (for example, if you want to name your page First Tumblr Page, you will write the url as follows first-tumblr-page using the dashes to connect the word. Both steps are necesary to display the link correctly.
- Click on Create Page. That is it, you now have a Tumblr Page, that is indeed, different from a Tumblr post.
Show Your Page Link on Your Tumblr Layout.
We have two sets of code to insert in our layout, one of them goes to the theme’s html (to actually make the link appear) and the other one to the custom css option (to modify the looks).
- This is the code to insert in the theme’s html. You can place it in the sidebar, header, or footer. always make sure not to break any other line of code in the theme
- Now with the CSS, we already used a tag in the previous code;
id="navcontainer".Which will be used to identify this piece of code and modify the way it looks. The following code must be inserted into Customize >>> Advanced >>> Add Custom CSS
<div id=”navcontainer”>
{block:HasPages}
{block:Pages}
<ul>
<li><a href=”{URL}”>{Label}</a></li>
</ul>
{/block:Pages}
{/block:HasPages}
</div>
If you are placing the CSS in the header or footer and need the page links to be displayed horinzotally, paste the following code:
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navcontainer ul li { display: inline; }#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}#navcontainer ul li a:hover
{
color: #fff;
background-color: #369;
}
If you are placing the links in the sidebar and need the page links to be displayed vertically, paste the following code:
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}#navcontainer ul li a:hover
{
color: #fff;
background-color: #369;
}
You can, of course, keep modifying the css to add bullets, colors, font type and more, but as this is not a CSS article, I consider this enough for you to make the links appear.
15 Responses to "Create a Page and Make its Link Appear on Tumblr"
Add Comment