Blogroll #1 press any button

<!--
//press any button

a blogroll page by espoirthemes //
    +don't remove/touch the credit.
    +edit it as much as you want!

base by azurethemes

-->
<!DOCTYPE html>
<head>


 <!--change "Blogroll" to whatever you want the title to be -->
<title>Blogroll </title>
<link rel="shortcut icon" href="{Favicon}">

<!-- TOOLTIP SCRIPTS -->
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
<script>
   (function($){
       $(document).ready(function(){
           $("[title]").style_my_tooltips({
               tip_follows_cursor:true,
               tip_delay_time:200,
               tip_fade_speed:300
           }
               );
       });
   })(jQuery);
</script>

<style type="text/css">

::-webkit-scrollbar{height: 6px; width: 8px; -webkit-border-radius: 0px; background:transparent;
}

::-webkit-scrollbar-thumb{background:#fff; height:8px;border:4px double black;}
::-webkit-scrollbar-track{background:#fff;
 }


 @font-face { font-family: "bitxmap"; src: url('https://dl.dropboxusercontent.com/s/ynigokwezl7b8uy/Early%20GameBoy.ttf'); }

body{cursor:help;
font-family:bitxmap;

}


 .tmblr-iframe.tmblr-iframe--desktop-loggedin-controls.iframe-controls--desktop{border:1px solid black;}
/* tooltips */
#s-m-t-tooltip{
max-width:300px;
margin:30px;
border:1px solid white;
box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 1);
font-family:bitxmap;
padding:5px 5px;
background:#000; /** tooltip background color **/
color:#fff; /** toolip color **/
z-index:999999999;
font-size:8px;
text-transform:uppercase;
}

/* don't touch this, this is the what makes it look like a speech bubble */
#s-m-t-tooltip:after{position: absolute;
    content: "";
    width: 0; height: 0;
    border-top: 14px solid black;
    border-left: 14px solid transparent;
        border-width: 14px 14px 0px;
    height:0;
    width:0;
    z-index:-999;
    position:absolute;
    left:-15px;
    top:2px;}
#s-m-t-tooltip:before{position: absolute;
    content: "";
    z-index:-2;
    width: 0; height: 0;
    border-top: 100px solid white;
    border-left: 100px solid transparent;
    border-width: 15px 15px 0px;
    height:0;
    width:0;
    z-index:-999;
    position:absolute;
    left:-15px;
    top:2px;}

/* LINKS */
/*body/general links*/
a{color:black; text-decoration:none;}
a:hover{cursor:help;}
/*the back button */

#title a {
    color: #000; /*link color */
    font-size:12px;
    font-family:bitxmap;
    border:2px solid black;
    text-decoration: none;
    background-image: linear-gradient(to right,
                                      transparent,
                                      transparent 50%,
                                      #090909 50%,
                                      #090909);
                                      padding:4px;

   background-position: 0 0;
    background-size: 200% 100%;
    transition: all .4s ease-in;

    text-decoration:none;

}
#title a:hover{
    color:white;
    background-position: -100% 0%;

}


/*container*/
#content {
margin:0 auto;
width:600px;
padding:10px;
height:80vh;
overflow-y:auto;
border:6px double black;
padding-right:16px;

}
#content a{background-image:none; border:none;}

/*icons*/
#content img{
margin-left:40px;
margin-top:40px;

/*erase the border-radius if you want square images */
border-radius:90px;
/*change the borders of the images */
border:2px solid black;
border-bottom:6px solid black;
width:70px;

-webkit-transition-duration:.6s;
-moz-transition-duration:.6s;
-o-transition-duration:.6s;
-ms-transition-duration:.6s;
}
#content img:hover{border:2px solid black;}

/* TITLE */
#title{
font-size:30px;
color:#000; /* title color */
font-weight:bold;
width:400px;
font-family:bitxmap;
margin-left:300px;
margin-top:30px;
margin-bottom:10px;
}

/*don't touch this*/
.egg {
font-size:7px;
bottom:7px;
right:10px;
position:fixed;
letter-spacing:1px;
font-weight:bold;
text-transform:uppercase;
color:#000;
text-decoration:none;
 margin-left:600px; margin-top:200px;
 display:block; width: 16px;
 height: 22px; background-color: #FFFEFC;
 -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
 animation-name: egg;
 animation-duration: 1s;
animation-iteration-count: infinite;
font-family: "bitxmap";
border:1px solid black;}

 @keyframes egg{
        0%{}
        10%{transform:rotate(6deg)}
        80%{transform:rotate(-6deg)}
        100%{}
    }


</style>
</head>
<body>

<div id="title">// blogroll<!--change blogroll to whatever title you want -->
<div style=" position:absolute;top:40px; right:380px; font-size:10px;">
<!--replace "/link" and "link" with an actual link -->
 <a href="/link"> ~~ link</a>

 <a href="/"> ~~ back</a></div></div>


<div id="content">

{block:Following}{block:Followed}<a href="{FollowedURL}" title="{FollowedName}"><img src="{FollowedPortraitURL-96}">{/block:Followed}{/block:Following}
</div>


<a href="http://espoirthemes.tumblr.com"><div class="egg"></div></a>

</body>
</html>