I've been wanting to put a sidebar to my current tumblr theme (right side) . Ive been trying to figure it out for moths but i couldn't
It would really be a big help if someone can tell me how!
here's my code
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
{block:IfDisableRightClick}<script type="text/javascript" src="http://static.tumblr.com/1cmk6kw/HlSla0dfm/darlieecious-dot-tumblr-dot-com.js"></script>{/block:IfDisableRightClick}
{block:IfEndlessScrolling}<script type="text/javascript" src="http://static.tumblr.com/1cmk6kw/DFlle575s/darlieecious_endlessscrolling.js"></script>{/block:IfEndlessScrolling}
{block:ifEnableStreampad}<script type="text/javascript" src="http://o.aolcdn.com/art/merge?f=/_media/sp/sp-player.js&f=/_media/sp/sp-player-tumblr.js&expsec=86400&ver=11&bgcolor={color:Streampad Background}&clicktext=Play%20All%20Audio%20Posts&clickimg=true&showpop=false"></script>{/block:ifEnableStreampad}
<!-- DEFAULT VARIABLES -->
<meta name="if:Disable right click" content="1"/>
<meta name="color:Background" content="#FFFFFF" />
<meta name="color:Box" content="#E6E6E6" />
<meta name="color:Text" content="#000000" />
<meta name="color:Links" content="#857B77" />
<meta name="color:Links Hover" content="#000000" />
<meta name="color:Chat" content="#E6BCBC" />
<meta name="color:Asker Background" content="#E6BCBC" />
<meta name="image:Background" content="" />
<meta name="font:Body" content="Georgia" />
<meta name="font:Links" content="Georgia" />
<meta name="font:Title" content="Georgia" />
<meta name="image:100pxPortrait" content=""/>
<meta name="if:Description" content="1"/>
<meta name="if:Links Background Hover Color" content="1"/>
<meta name="if:Notes" content="1"/>
<meta name="text:Title Text transform" content="uppercase" />
<meta name="color:Permalink background" content="#ffffff">
<script type="text/javascript" src="http://static.tumblr.com/3ikgvxs/2eWl5b9xv/nav.js"></script>
<link href='http://fonts.googleapis.com/css?family=Homemade+Apple' rel='stylesheet' type='text/css'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{Title}{block:SearchPage}, Search results for: {SearchQuery}{/block:SearchPage}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
<link rel="shortcut icon" href="{Favicon}" />
<link rel="alternate" type="application/rss+xml" href="{RSS}" />
<style type="text/css">
body{
color:{color:text};
background-color:{color:background};
background-image:url('{image:background}');
background-position: center;
background-attachment:fixed;
background-repeat: repeat;
font-family:{font:body};
font-size: 12px;
line-height:{text:line height};
text-align:justify;
padding-top:5px;
}
a:link, a:active, a:visited{
color: {color:Links};
font-family: {font:Links};
text-decoration:none;
font-size: 10px;
}
a:hover{
color: {color:Links Hover};
text-decoration: none;
{block:ifLinksBackgroundHoverColor} title-color: {color:Links Background Hover};{/block:ifLinksBackgroundHoverColor}
}
.linkbox {margin-top:5px;font-size:10px;text-transform: uppercase;}
.linkbox a {margin-top:5px;font-size:10px;text-transform: uppercase;}
.navlinks a {color: {color:Links}; font-family: {font:Links}; text-transform: lowercase; text-decoration: none; font-size: 10px;background-color:{color:box};text-align:right;display:block;padding:1px;-moz-border-radius:6px; border-radius:6px;}
.navlinks a:hover {color: {color:Text};background-color:{color:chat};display:block;-moz-border-radius:6px; border-radius:6px;}
#main { margin: 20px auto; overflow: auto; width:650px;padding:5px;}
.left {
background-color: {color:Box};
float: left;
width: 210px;
overflow:hidden;
text-align:justify;
text-transform:{text:Text transform};
padding: 5px;
border-right : 0px dashed {color:Text};
}
.right { background-color: {color:Box}; margin: 0 0 5px 0; padding: 5px; text-align: left;
width: 402px;text-transform:{text:Text transform};float:right;}
.title, .title a { font-Title: {font:Title}; font-size: 17px; text-transform: uppercase; letter-spacing:-1px; {font:Links}; text-transform: {text:Title text transform};display:block;}
.blogname a {color: {color:Links}; font-family: {font:Links}; text-transform: lowercase; text-decoration: none; font-size: 25px;background-color:{color:box};text-align:left;display:block;margin-bottom:5px;padding:1px;}
.blogname a:hover {background-color:{color:chat};display:block;}
.sub, .sub a { font-family: {font:Title}; }
.sub img { vertical-align: text-bottom; }
.odd { background-color: {color:Chat}; padding: 1px; }
.even { padding: 1px; }
.audioplayer { padding-left: 12px;background-color:#000; }
.playcount {float: right;clear: both;padding-top: 7px;padding-right: 20px;color: white;text-shadow: none;font-size:10px;text-transform:uppercase;}
.left img {max-width:100%;}
.right img {max-width:400px;}
*:active,*:focus { outline: 0px; }
.asked {margin-top:4px;background-color:{color:Asker Background}; padding:5px; -moz-border-radius:5px; border-radius:5px;
font-family: {font:Title}; font-size: 16px; line-height: 16px; text-transform: uppercase; letter-spacing:-1px;}
.asked a {font-family: {font:Title}; font-size: 16px; line-height: 16px; text-transform: uppercase; letter-spacing:-1px;}
.asked a:hover {{block:ifLinksBackgroundHoverColor} background-color: {color:Links Background Hover};{/block:ifLinksBackgroundHoverColor}}
.said {font-family: {font:Title}; font-size: 14px; line-height: 14px; text-transform: uppercase; letter-spacing:-1px;margin-top:6px;}
.said a {font-family: {font:Title}; font-size: 14px; line-height: 14px; text-transform: uppercase; letter-spacing:-1px;margin-top:6px;}
#footer input {margin-top: 0px;width:100%;border: 0px solid;font-family:{font:Links};font-size:10px;}
#footer { text-align:;}
#footer input:hover {background-color: {color:Links Background Hover};}
.title1{font:normal 45pt 'Homemade apple'; color:#333333; text-align:center>; letter-spacing:-1px; line-height:100%;}
.sidebartext{clear: both; text-align: justify; background-color: #F6F6F6; opacity: 0.8; filter:alpha (opacity=80); margin: 10px 5px 0px 5px; padding: 5px; -moz-border-radius: 6px; border-radius: 6px }
.sidebartext a{font-size:12px}
.sidebartext a:hover{font-size:12px}
.userpic{float: left; margin: 0px 4px 2px 0; width:48px; height:auto}
.llinks{width: 200px; margin: 5px auto 5px auto;padding: 0 0 0px 0; font-size: 10px; text-transform: uppercase}
.llinks a{
display: block;
text-decoration: none;
color:#FFFFFF;
background-color:#E6BCBC;
padding: 3px 0px 3px 0px;
margin: 0 0 1px 0
}
.llinks a:hover{
background-color:#857B77;
color:#BAABA6
}
.pages {margin: 5px 0 5px 0; text-align: center; line-height: 20px}
.pages a {text-decoration: none; background-color:#E6BCBC;
padding: 2px 4px 2px 4px; color:{color:text}}
div.permaa{font-size:80%; width:400px; text-align:center; text-transform: uppercase; background:{color:permalink background}; margin-top:8px; margin-bottom:3px; font-family: Iskoola Pota; letter-spacing:1px; -moz-border-radius: 2px; -webkit-border-radius: 2px;}
#left {line-height: 10px;height:auto;padding: 5px; -moz-border-radius: 4px;
-webkit-border-radius: 4px; background-Color:#E3E3E3;Display:block;}
blockquote {
background-color: {color:box};
padding:0px;
padding-left:5px;
margin:5px;
border-left:1px solid {color:background};
border-bottom:0px solid {color:background};
}
b, strong{color:{color:title};}
i, em {color:{color:link};}
p{margin-top:3px; margin-bottom:3px;}
blockquote img{ display:block; width:100%;}
blockquote p {padding:0px; margin:0px;}
blockquote blockquote {position:relative; left:-5px; margin-top:0px; margin-right:0px; padding-right:0px;}
a img{border:none;display: block;}
.user_1 .label, .user_4 .label, .user_7 .label {color:{color:title};}
.user_2 .label, .user_5 .label, .user_8 .label {color:{color:link};}
.user_3 .label, .user_6 .label, .user_9 .label {color:{color:text}; opacity:.75;}
ul.chat, .chat ol, .chat li {list-style:none; margin:0px; padding:0px;}
.notes img{width:10px; position:relative; top:1px;}
ol.notes, .notes li{list-style:none; margin:0px; padding:0px;}
iframe input, iframe submit, iframe textarea, iframe div, iframe table {background-color:transparent!important;}
</style>
<style type="text/css">
#sidebar {
float:right;
width:250px;
height:100%;
}
</head>
<body>
</div>{CustomCSS}</style>
<center><span class="title1">{Title}</span></center>
<div id="main">
<div class="left">
{block:If100pxPortraitImage} <img class="roundedtop portrait" src="{image:100pxPortrait}" /> {/block:If100pxPortraitImage}
<div class="sidebartext">{Description}
</div>
<div class="llinks">
<center><a href="/">MY BIG FAT STORY</a>
<a href="/ask">OWLERY</a>
<a href="/submit">ACCIO WORKS</a>
<a href="/archive">PENSIEVE</a>
</div>
<div class="pages"> {block:Pagination}
{block:PreviousPage}<a href="{PreviousPage}">FUTURE</a>{/block:PreviousPage}
{block:JumpPagination length="10"}{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}">PAST</a>{/block:NextPage}{/block:Pagination}
</div>
</div>
{block:Posts}
<div class="right">
{block:Text}{block:Title}<div class="title"><a href="{Permalink}">{Title}</a></div>{/block:Title}{Body}{/block:Text}
{block:Photo}
{block:IndexPage} <a href="{Permalink}"> {/block:IndexPage}
{block:PermalinkPage}{LinkOpenTag}{/block:PermalinkPage}
<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}">
{block:IndexPage}</a>{/block:IndexPage}
{block:PermalinkPage}{LinkCloseTag}{/block:PermalinkPage}
{block:Caption}{Caption}{/block:Caption}
{/block:Photo}
{block:Photoset}{Photoset-400}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
{block:Quote}<div class="title"><a href="{Permalink}">{Quote}</a></div> {block:Source}— {Source}{/block:Source}<BR>{/block:Quote}
{block:Link}<div class="title"><a href="{URL}"> {Target}{Name} ←</a></div> {block:Description}{Description}{/block:Description}{/block:Link}
{block:Chat}{block:Title}<div class="title"><a href="{Permalink}">{Title}</a></div>{/block:Title} {block:Lines}<div class="{Alt}">{block:Label}{Label}{/block:Label} {Line}</div>{/block:Lines}{/block:Chat}
{block:Audio}<div class="playcount">{PlayCount} plays</div><div class="audioplayer">{AudioPlayerBlack}</div>{block:Caption}{Caption}{/block:Caption}{/block:Audio}
{block:Video}{Video-400}{block:Caption}<a href="{Permalink}">{Caption}</a>{/block:Caption}{/block:Video}
{block:Answer} <div class="asked"> {Asker} said: {Question}</div>
<i>{Answer}</i>{/block:Answer}
{block:ExternalAudio} <a href="{ExternalAudioURL}">download</a>{/block:ExternalAudio}
<div class="linkbox">
<div class="permaa"><a href="{Permalink}"> <center> posted on {Month} {Dayofmonth},{Year} </div>
{block:PermalinkPage}<BR> {block:HasTags}{block:Tags} <a href="{TagURL}">#{Tag}</a> {/block:Tags}{/block:HasTags} {/block:PermalinkPage}
</div>
</div>
{block:PostNotes}
<div class="right">
<div class="title">{block:NoteCount} {NoteCountWithLabel}{/block:NoteCount} </div>
{PostNotes}
</div>
{/block:PostNotes}
{/block:Posts}
</div>
</div>
</div>
<script type="text/javascript">
.onunload = unloadPage;
function unloadPage()
{
alert("Thanks for visiting my blog! :) Lots of Love, Nina xx");
}
</script>
</body>
<div id="sidebar">
</div>
</html>
</div>
<div class="pages"> {block:Pagination}
{block:PreviousPage}<a href="{PreviousPage}">FUTURE</a>{/block:PreviousPage}
{block:JumpPagination length="10"}{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}">PAST</a>{/block:NextPage}{/block:Pagination}
</div>
Thanks a lot! xx