Updates Tab Callyope

ANYWHERE AFTER <head> AND BEFORE <style>

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript" src="http://static.tumblr.com/3ikgvxs/0TGl4zgpu/jquery.min.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
   {block:ifupdatestabonclick}$(".updt").hide();{block:ifupdatestabonclick}
   $(".upd").click(function(){
   $(this).next(".updt").slideToggle('fast');
   });
});
</script>

<meta name="color:updates icon color" content="#a4a4a4">
<meta name="color:updates tab background" content="#fff">
<meta name="color:updates title" content="#a4a4a4">
<meta name="color:updates description background" content="#fafafa">
<meta name="color:updates tab links"content="#a4a4a4">
<meta name="color:updates tab links hover" content="#000">
<meta name="color:updates tab bold" content="#a85d49">
<meta name="color:updates tab italic" content="#b3b3b3">
<meta name="color:updates tab underline" content="#585858">

<meta name="select:updates text align" content="left" title="left">
<meta name="select:updates text align" content="center" title="center">
<meta name="select:updates text align" content="right" title="right">

<meta name="if:updates tab left" content="1">
<meta name="if:updates tab right" content="0">
<meta name="if:updates tab on click" content="1">

<meta name="text:updates title size" content="10">
<meta name="text:updates text size" content="9">


DIRECTLY BEFORE </style>
/* updates tab by callyope.tumblr.com */

.up {
    top:30px;
    {block:ifupdatestableft}{block:ifnotupdatestabright}left:30px;{/block:ifnotupdatestabright}{/block:ifupdatestableft}
    {block:ifupdatestabright}{block:ifnotupdatestableft}right:30px;{/block:ifnotupdatestableft}{/block:ifupdatestabright}
    position:fixed;
    width:140px;
    font-family:trebuchet ms;
}

.upd {
    width:150px;
    {block:ifupdatestableft}{block:ifnotupdatestabright}display:inline-block;text-align:left;{/block:ifnotupdatestabright}{/block:ifupdatestableft}
    {block:ifupdatestabright}{block:ifnotupdatestableft}display:inline-block;text-align:right;{/block:ifnotupdatestableft}{/block:ifupdatestabright}
    font-family:arial;
}

.upd i {font-size:1.4em;}

.updt {
    {block:ifupdatestabonclick}display:none;{/block:ifupdatestabonclick}
    margin-top:15px;
    padding:5px;
    background:{color:updates tab background};
    text-align:{select:updates text align};
    font-size:{text:updates text size}px;
}

.up_title {
    margin-bottom:3px;
    text-transform:lowercase;
    font-weight:bold;
    color:{color:updates title};
    font-size:{text:updates title size}px;
}

.up_title i {color:{color:updates title};}

.up_des {
    background:{color:updates description background};
    border:1px solid {color:borders};
    padding:7px;
}

.up_ {padding:1px;}

hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid {color:borders};
    margin:1em 0;
    padding:0;
    width:100%;
}

.up a:link, a:active, a:visited {
    text-decoration:none;
    outline:none;
    color:{color:updates tab links};
    font-weight:bold;
    letter-spacing:1px;
    transition:0.9s ease;
    -o-transition:0.9s ease;
    -moz-transition:0.9s ease;
    -webkit-transition:0.9s ease;
}

.up a:hover {color:{color:updates tab links hover};}
.up b, strong {color:{color:updates tab bold};}
.up i, em {color:{color:updates tab italic};}
.up u {color:{color:updates tab underline};}

/* end updates tab */


DIRECTLY AFTER  <body>

<!---------------

  UPDATES TAB by callyope.tumblr.com

> find more icons here: http://fontawesome.io/icons/; just paste the name of the icon over an existing one, e.g.'cog'

--------------->

<div class="up">
<a href="#" class="upd"><i class="fa fa-bars" aria-hidden="true"></i></a>
<div class="updt">

<div class="up_"><br>

<!-- section 1 -->
<div class="up_title">
<span class="lnr lnr-user"></span>&nbsp;&nbsp; <!-- the icon; change 'cog' to any other icon name -->
The Blogger<!-- title -->
</div>
<!--- your text here --->
<p>Jes, she/her</p>
<p>Ravenpuff//Pukwudgie</p>
<p>Gemini, INFP-A</p>
<p>99 and 3/4% HP</p>
<!-- end section 1 -->

<hr> <!--- this is the divider; you can replace it with a line break <br> too --->

<!-- section 2 -->
<div class="up_title">
<span class="lnr lnr-list"></span>&nbsp;&nbsp;
Updates:<!-- title -->
</div>
<!--- example of a list: --->
- Trying out Photoshop
<!-- end section 2 -->

<hr>

<!-- section 3 -->
<div class="up_title">
<span class="lnr lnr-book"></span>&nbsp;&nbsp;
Reading:<!-- title -->
</div>
<!-- another kind of a list: -->
<p>- Magnus Chase</p>
<p>- The Mortal Instruments
<!-- end section 3 -->

<hr>

<!-- section 4 -->
<div class="up_title">
<span class="lnr lnr-music-note"></span>&nbsp;&nbsp;
Listening to:<!-- title -->
</div>
<p>- Safe & Sound - Taylor Swift</p>
<p>- No More Sad Songs - Little Mix</p>
<!-- end section 4 -->

<hr>

<!-- section 5 -->
<div class="up_title">
<span class="lnr lnr-camera-video"></span>&nbsp;&nbsp;
Watching:<!-- title -->
</div>
<p>- Shadowhunters (*scream*)</p>
<p>- The Flash (IDK who to ship)
<!-- end section 5 -->

</div>
</div>
</div>

<!--- END UPDATES TAB --->