All-in-One Blogroll

<!DOCTYPE html>
<html>
<head>

<title> {Title}{block:PostSummary}: {PostSummary}{/block:PostSummary}</title>
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
<link rel="shortcut icon" href="{Favicon}" />

<link href='http://fonts.googleapis.com/css?family=News+Cycle|Megrim' rel='stylesheet' type='text/css'>

<style type="text/css">

*{-webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out; -ms-transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out;}

body {
    background-color:#000000; /*CHANGE THE BACKGROUND COLOR*/
    background-image:url(); /*CHANGE THE BACKGROUND IMAGE*/
    font-family:News Cycle; /*CHANGE THE FONT TO News Cycle OR ANY DEFAULT FONT*/
}

a, a:visited, a:link, a:active, a:hover {
    text-decoration:none;
    color:#000; /*CHANGE THE DEFAULT LINK COLOR*/
}

#things {
    background-color:#fff;/*CHANGE THE BACKGROUND COLOR OF THE CONTENT*/
    height:100%;
    width:600px;
    position:fixed;
    top:0;
    left:340px;
    padding:5px;
    -webkit-box-shadow: 3px 3px 10px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    3px 3px 10px rgba(50, 50, 50, 0.75);
    box-shadow:         3px 3px 10px rgba(50, 50, 50, 0.75);
}

#links a {
    display:inline-block;
    color:#666; /*CHANGE THE COLOR OF THE NAVIGATION LINKS*/
    letter-spacing:1px;
    margin:5px;
    margin-right:15px;
    padding:1px 5px;
}

#links a:hover {
    background-color:#000; /*CHANGE THE NAVIGATION LINK BACKGROUND COLOR ON HOVER*/
    color:#ccc;/*CHANGE THE NAVIGATION LINK TEXT COLOR ON HOVER*/
}

#textroll a:hover {
    color:#b8b8b8; /*CHANGE THE TEXT COLOR OF THE USERNAME BLOGROLL ON HOVER*/
}

#titleroll a:hover {
    background-color:#000;/*CHANGE THE BACKGROUND COLOR OF THE TITLE BLOGROLL ON HOVER*/
    color:#fff;/*CHANGE THE TEXT COLOR OF THE TITLE BLOGROLL ON HOVER*/
}

/*-------------------------------------------------------------------*/
#desc {overflow:scroll; padding:5px; text-align:justify;}

h2 {text-align:center; font-size:2em; font-family:megrim;}

#links {padding:5px; width:47.5%; text-align:center; float:left;}

#buttons {padding:5px; padding-top:10px; width:47.5%; text-align:center;float:left; margin-left:5px;}

button {margin:5px;}

button:focus, button:hover {cursor:pointer;}

.spacer {width:580px; border:solid 10px transparent; border-bottom:solid 1px black; clear:both; margin-top:10px;}

.roll { overflow:scroll;width:595px;padding:5px; position:fixed; top:210; left:345px; background-color:#fff;}

#textroll {text-align:justify; word-break:keep-all;}

#textroll a {margin:5px;}

#portroll {text-align:center; z-index:99;}

#titleroll {text-align:center;}

#titleroll a {padding:5px; display:inline-block; margin:5px;}


{CustomCSS}
</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var $height = $('#things').height();
    var $h = $('#topthings').height();
    $('.roll').css('height', $height - ($h + 10));
    $('#names').click(function(){
        $('#textroll').css('z-index','99');
        $('#portroll, #titleroll').css('z-index','1');
    });
    $('#portraits').click(function(){
        $('#portroll').css('z-index','99');
        $('#textroll, #titleroll').css('z-index','1');
    });
    $('#titles').click(function(){
        $('#titleroll').css('z-index','99');
        $('#portroll, #textroll').css('z-index','1');
    });
});

</script>

</head>
<body>

<div id="things">

<div id="topthings">
<div id="desc">

<h2>
Blogroll <!--CHANGE THE TITLE-->
</h2>

<!--CHANGE OR REMOVE THE DESCRIPTION-->
This is text which serves as a filler description in this Tumblr theme.  You can see <b>bold</b>, <em>italic</em>, and <strike>strikethrough</strike> text. <big>Big text</big>, <small>small text</small>, <sup>superscript,</sup> <sub>subscript,</sub> <a href="//syntaxthemes.tumblr.com">links,</a> anything you want.
</div>

<div id="links">
<a href="/">home</a>

<a href="/ask">ask</a>

<!--FEEL FREE TO ADD OR REMOVE AS MANY LINKS AS YOU WANT-->
<a href="/"> <!--CHANGE THE LINK URL-->
link 1<!--CHANGE THE LINK TITLE-->
</a>

<a href="/"> <!--CHANGE THE LINK URL-->
link 2<!--CHANGE THE LINK TITLE-->
</a>

<a href="/"> <!--CHANGE THE LINK URL-->
link 3<!--CHANGE THE LINK TITLE-->
</a>

<a href="/"> <!--CHANGE THE LINK URL-->
link 4<!--CHANGE THE LINK TITLE-->
</a>

<a href="/"> <!--CHANGE THE LINK URL-->
link 5<!--CHANGE THE LINK TITLE-->
</a>

</div>

<div id="buttons">
<b>Display Options</b><br/>
<button id="names">Usernames</button>
<button id="portraits">Portraits</button>
<button id="titles">Blog Titles</button>
</div>

<div class="spacer"></div>
</div><!--topthings-->

{block:Following}

<div class="roll" id="textroll">
{block:Followed}
<a href="{FollowedURL}">{FollowedName}&nbsp;</a>
{/block:Followed}
</div>

<div class="roll" id="portroll">
{block:Followed}
<a href="{FollowedURL}"><img style="margin:5px;" src="{FollowedPortraitURL-40}"/></a>
{/block:Followed}
</div>

<div class="roll" id="titleroll">
{block:Followed}
<a href="{FollowedURL}"><b>{FollowedTitle}</b></a>
{/block:Followed}
</div>

{/block:Following}

</div><!--things-->

<!------DO NOT REMOVE THE CREDIT. DOING SO WOULD MAKE YOU A THIEF.------->
<a href="http://syntaxthemes.tumblr.com">
<img style="position:fixed; bottom:0; right:0; display:block; opacity:0.7; margin:0; z-index:999999999999!important;" onmouseover="this.style.opacity=0.9" onmouseout="this.style.opacity=0.7" src="http://static.tumblr.com/puls2hm/QOHn1brjx/st.png"/></a>
<!----------------------------------THANK-------------------------------->

</body>
</html>