Blogroll Theme 01

<!DOCTYPE html>
<html>
<head>
<title>{Title} - Blogroll</title>
<link rel="shortcut icon" href="{Favicon}">

<!--
Blogroll Theme 01 by Elowen (theghostoflove.tumblr.com)

I really don't care what you do with this, edit away as much as you like! Any problems, feel free to contact me.
-->

<script src="https://static.tumblr.com/n82fyzo/XjQmg8058/cufon-yui.js" type="text/javascript"></script>
<script src="https://static.tumblr.com/ougxdjo/1Temrvk4h/dancing_script_ot_400.font.js" type="text/javascript"></script>
<script type="text/javascript"> Cufon.replace('#title'); </script>

<style type="text/css">

::selection {color:#fff;background-color:#000;}
::-moz-selection {color:#fff;background-color:#000;}
::-webkit-selection {color:#fff;background-color:#000;}

::-webkit-scrollbar {width: 6px; height:auto; background:#000;}
::-webkit-scrollbar-corner {background:#bebebe;}
::-webkit-scrollbar-thumb:vertical {background:#fff;}
::-webkit-scrollbar-thumb:horizontal {background:#fff;}

a:link, a:active, a:visited {color:#ffffff;text-decoration:none;-webkit-transition:all 0.5s ease-out;-moz-transition:all 0.5s ease-out;transition:all 0.5s ease-out;}
a:hover {color:#bebebe;-webkit-transition-duration:0.5s;-moz-transition-duration:0.5s;}

body {color:#fff;background-color:#000;font-size:11px;font-family:georgia;line-height:100%;text-align:center;}

/**-----------------------------TITLE-------------------------------**/
#title {
    font-size:35px;
    margin-top:-50px;
}

/**-----------------------------SIDEBAR-------------------------------**/
#sidebar {
    margin-top:150px;
    margin-left:90px;
    height:200px;
    width:200px;
    border:2px dotted #fff;
    background-color:#bebebe;
    position:fixed
}
#sidebarimage {
    width: 200px;
    margin-top:15px;
}
#sidebarimage img {
    width:200px;
    height:200px;
}

/**---------------------------DESCRIPTION-----------------------------**/
#sidebar:hover #desc {opacity:1;position:absolute;-moz-transition-duration:1s;-webkit-transition-duration:1s;-o-transition-duration:1s;}
#desc {
    opacity:0;
    margin-top:-202px;
    height:180px;
    width:180px;
    padding:10px;
    font-family:georgia;
    font-size:11px;
    background-color:#000;
    overflow:hidden;
    -moz-transition-duration:1s;-webkit-transition-duration:1s;-o-transition-duration:1s;}

/**-----------------------------LINKS-------------------------------**/
#links {margin-top:-10px;margin-left:-10px;width:200px;padding-top:10px;padding-bottom:10px}
#links a {
    margin:2px;
    height:10px;
    width:30px;
    display:inline-block;
    background-color:#fff;
    color:#000;
    font-size:9px;
    font-family:Georgia;
    letter-spacing:1px;
    text-align:center;
    padding:4px;
    border:solid 1px #fff;
}
#links a:hover {
    background-color:#bebebe;
    color:#000;
    text-align:center;
    letter-spacing:2px
}

#container {margin-left:350px;width:800px;z-index:5;padding:20px}
#following {display:inline;text-align:center;margin:5px;}
#following a {
    display:inline;
    text-align:center;
    opacity:0.7;
    -moz-transition-duration:0.5s;-webkit-transition-duration:0.5s;-o-transition-duration:0.5s;
}
#following a:hover {
    opacity:1;
    display:inline;
    text-align:center;
}
#following img {
    width:64px;
    height:64px;
    border:2px solid;border-color:transparent;
    -webkit-transition-duration:0.5s;-moz-transition-duration:0.5s;
}
#following img:hover {
    border:2px solid;
    border-color:#dbd4d1;
}

</style>
</head>

<body>
<div id="sidebar">
<div id="title">Blogroll</div>
<div id="sidebarimage">
<center><img src="SIDEBAR IMAGE URL HERE"></center>
</div>

<div id="desc">
<div id="links">
<a href="/">home</a>
<a href="/ask">ask</a>
<a href="https://www.tumblr.com/dashboard">dash</a>
<a href="https://www.theghostoflove.tumblr.com">cred</a>
</div>
<!--DESCRIPTION-->
Put whatever you want to say about your following over here. Don't make it too long though.<div></div>
</div></div>
<div id="container">
{block:Following}{block:Followed}<div id="following"><a target="_blank" href="{FollowedURL}" title="{FollowedName}"><img src="{FollowedPortraitURL-64}" style="margin-bottom:10px;"></a>
</div>
{/block:Followed}
{/block:Following}
</div>

</body>
</html>