Blogroll Page Theme

<!--Blogroll Page Theme by confers
http://fluorescent-themes.tumblr.com/
Please do not remove the credit---->

<html lang="en">
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  <head><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>
  <script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  <html lang="en">
<link href='http://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
      <title>blogroll</title>
      <style type="text/css">
      body{
          color:#bebebe;
font-family:Consolas;
font-size:9px;}

      }
      ::selection {
background:#ccc;
color:#fff;
}
::-moz-selection {
background:#ccc;
color:#fff;
}
::selection {
background:#ccc;
color:#fff;
}
::-moz-selection {
background:#ccc;
color:#fff;
}
a:link, a:active, a:visited{
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
-o-transition: 0.3s ease;
-moz-transition: 0.3s ease;
color:#ccc;
text-decoration:none;
}

a:hover{
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
-o-transition: 0.3s ease;
-moz-transition: 0.3s ease;
color:#ccc;
}
::-webkit-scrollbar{
width:0px;
height:0px;}

::-webkit-scrollbar-thumb{
height:0px;}

#page{
overflow-y:scroll;
margin-left:30%;
margin-top:10%;
height:500px;
background:#fff;
width:668px;
border-radius:0px 0px 10px 10px;
z-index:999;
border:1px solid #ccc;
}

#s-m-t-tooltip{
max-width:300px;
margin:15px;
padding:2px 8px;
border:dashed 1px #ccc;
background:#FFF;
color:#000;
border-radius:4px;
z-index:9999999999;
font-size:9px;
text-transform:uppercase;}

#title{
    position:fixed;
  font-size:30px;
  z-index:999999;
  color:#000;

  margin-top:-58px;
  padding-bottom:20px;
  margin-left:-1px;
  background:#fff;
  border-radius:10px 10px 0px 0px;
  width:668px;
  font-family: 'Amatic SC', cursive;
  text-align:center;
  border-bottom:dashed 1px #ccc;
  border-left:solid 1px #ccc;
  border-right:solid 1px #ccc;
  border-top:solid 1px #ccc;
}

#links{
    position:fixed;
    z-index:9999999;
    width:50px;
    border:1px solid #ccc;
    padding:2px;
    font-size:10px;
    top:5px;
    left:5px;
    border-radius:3px;
font-family:consolas;
  text-align:center;
  text-transform:uppercase;
}

#links a{
  color:#000;
}

#container{
margin-left:10px;
z-index:999999999;
width:650px;
height:200px;
overflow-y:scroll;
}

#pic{
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
-o-transition: 0.3s ease;
-moz-transition: 0.3s ease;
padding:20px;
}

#pic img{
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
-o-transition: 0.3s ease;
-moz-transition: 0.3s ease;
padding:2px;
width:64px;
border-radius:6px;
opacity:.9;
}

#pic img:hover{
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
-o-transition: 0.3s ease;
-moz-transition: 0.3s ease;
opacity:1;
margin-left:-15px;
margin-top:-10px;
width:100px;
}

#credit {
position:fixed;
font-family:consolas;
font-size:10px;
bottom:10px;
z-index:999999999999;
right:10px;
text-transform:uppercase;
color:#000;
}

#credit a{
color:#000;
}

</style>
<script type="text/javascript" src="http://static.tumblr.com/dbek3sy/iBElrgjim/jquerymasonry.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/dbek3sy/Qyblrgjfn/jqueryinfintescroll.js"></script>

<script type="text/javascript">
$(window).load(function(){
var $wall = $('#container');
$wall.imagesLoaded(function(){
$wall.masonry({
itemSelector: '#pic, #pic_photo',
isAnimated : false
});
});

$wall.infinitescroll({
itemSelector : '#pic, #pic_photo',
bufferPx : 2000,
debug : false,
errorCallback: function() {
$('#container').fadeOut('normal');
}},
function( newElements ) {
var $newElems = $( newElements );
$newElems.hide();
$newElems.imagesLoaded(function(){
$wall.masonry( 'appended', $newElems,{isAnimated: false}, function(){$newElems.fadeIn('slow');} );
});
}); $('#container').show(500);
});
</script>
  </head>
  <body>
  <div id="page">
  <div id="links">
      <a href="/">↩ go back</a>
  </div><div id="title">blogroll</div>
           <div id="container">{block:Following}{block:Followed}<div id="pic">
<a target="_blank" href="{FollowedURL}"><img src="{FollowedPortraitURL-128}" title="{FollowedName}"/></a></div>
{/block:Followed}{/block:Following}</div></div><div id="credit"><a href="http://fluorescent-themes.tumblr.com">credit</a>
  </body>

</html>