- Updates tab #1

/*-- U P D A T E S  T A B  #1  BY  H U N T E R  T H E M E S --*/

PASTE THIS UNDER <style type="text/css">

/*-- UPDATES TAB #1 BY @HUNTERTHEMES --*/

#updatestab{
position:fixed;  /* if you want it to move on scroll then replace “fixed” with “absolute” */
/* change the top and left value, width, padding etc, leave height on “auto” */
top:20px;
left:60px;
width:140px;
height:auto;
/* change the colors*/
background:#fff;
border:1px solid #eee;
/* z-index value needs to be big so it will make sure the navigation tab doesn’t get hidden below other elements on the page*/
z-index:10000;
 /* makes the tab hidden before you click on icon to open it*/
display:none;
}

#updatestabin{
margin:5px;
border:1px dashed #eee;
}

/*– Styling of the updates tab headings (you can change the values yourself) –*/
#utitle1, #utitle2, #utitle3, #utitle4 {
margin:0px;
padding:6px;
color:#333;
background:#fff;
background:url("https://68.media.tumblr.com/fd25cf263f97e81a3b403a06dae0013e/tumblr_or8ckeAiyP1uo5urho1_250.png");
border-top:1px solid #eee;
border-bottom:1px solid #eee;
font-size:14px;
line-height:14px;
font-family:Helvetica;
font-weight:normal;
text-align:center;
}

#utitle1{
border-top:1px solid transparent;
}

/*– Styling of the updates tab content (you can change the values yourself) –*/

#ucontent1, #ucontent2, #ucontent3, #ucontent4 {
padding:5px;
font-size:12px;
line-height:17px;
color:#333;
background:#fff;
text-align:center;
}

/*– Styling of the updates tab links (you can change the values yourself) –*/

#updatestab a {
font-size:12px;
padding:2px;
font-family:Helvetica;
color:#555;
}

#updatestab a:hover {
color:000;
}

/*– Updates tab bolded and italic text (you can change the values yourself) –*/

#updatestab b {
color:#000;
}

#updatestab i {
color:#ccc;
}

/* END CSS */


PASTE THIS UNDER <body>

<!-- UPDATES TAB #1 BY @HUNTERTHEMES -->

<div id="click"><i class="fa fa-bars"></i></div>

<div id="updatestab">

<div id="updatestabin">

<div id="utitle1"> Updates </div>
<div id="ucontent1">

Put updates here

</div>
<!--End content-->

<div id="utitle2"> Status </div>
<div id="ucontent2">

<b>Ask box:</b> open <br>
<b>Followers:</b> xxxxxx </br>
<b>Visis:</b> xxxxxx </br>
<b>Online</b> xxxxxx </br>

</div>
<!--End content-->

<div id="utitle3"> Networks </div>
<div id="ucontent3">

<b>01</b> <a href="http://"> network </a> <br>
<b>02</b> <a href="http://"> network </a> <br>
<b>03</b> <a href="http://"> network </a> <br>

</div>
<!--End content-->

<div id="utitle4"> Other </div>
<div id="ucontent4">

Put info here

</div>
<!--End content-->

</div>
<!--End updatestabin-->

</div>
<!--End updatestab-->


SCRIRPTS

<!-- Font awesome -->

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<!--Show/hide updates tab on click-->

<script>
$(document).ready(function(){
    $("#click").click(function(){
        $("#updatestab").toggle(500);
    });
});
</script>