Blogroll #1

<html>
<!-------------------------------------------------
BLOGROLL #01 BY: http://robbarya.tumblr.com (INSTRUCTIONS IN CODE)
...................................................
...................................................

TERMS OF USE:
- DON'T CLAIM AS YOUR OWN
- DON'T REMOVE OR MOVE THE CREDIT
- DON'T REDISTRIBUTE
- DON'T USE AS A BASE. YOU CAN EDIT IT AS MUCH AS YOU LIKE AS LONG AS THE CREDIT IS STILL IN ITS ORIGINAL PLACE- Thank you
--------------------------------------------->

<head><title>Blogroll</title><!---Change the browser title--->
<link rel="shortcut icon" href="{Favicon}" />


<!----tooltip-->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>

<script>

(function($){

$(document).ready(function(){

$("a[title]").style_my_tooltips({

tip_follows_cursor:true,

tip_delay_time:90,

tip_fade_speed:600,

attribute:"title"

});

});

})(jQuery);

</script>


<style type="text/css">

@font-face {
  font-family: 'Tulpen One';
  font-style: normal;
  font-weight: 400;
  src: local('Tulpen One'), local('TulpenOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/tulpenone/v4/zIBZqHVchKl0ZjPbCjECkhsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}


#s-m-t-tooltip{
    font-family: calibri;
    letter-spacing:1px;
    max-width:150px;
    font-size: 7px;
    margin:0px 10px;
    padding:3px;
    background: #000;
    color:#fdfdfd;
	z-index:999;
	text-transform:uppercase;
}


a, a:active, a:visited, a:hover {
    -webkit-transition: all 0.6s linear;
	-moz-transition: all 0.6s linear;
	-ms-transition: all 0.6s linear;
	-o-transition: all 0.6s linear;
	transition: all 0.6s linear;
	}

::-webkit-scrollbar-thumb:vertical {
    background-color: #c8413a; /*Change color of scroll bar*/
    height:5px;
}
::-webkit-scrollbar-corner {
    background-color: transparent;
}
::-webkit-scrollbar-thumb:horizontal {
	background-color: #c8413a; /*Change color of scroll bar*/
	height:5px!important;
}

::-webkit-scrollbar {
	height:7px;
	width:5px;
}

#credit {
    background-color: #eee;
    position:fixed;
    bottom:10px;
    right:10px;
    text-align: center;
    text-transform: uppercase;
    font-size:8px;
    letter-spacing:0.3em;
    opacity:1;
    width:50px;
    padding:5px;
}
#credit a {
    color: #333;
    text-decoration:none;
}

#credit a:hover {
    letter-spacing: 0.5em;
    opacity: 0.6;
}


body {
        font-family: Calibri;
        color: #666;
        background-color: #FFF;/*Change background color*/
         }

.top {
        background-color: #EEE;/*Change the topbar background color*/
        height: 60px;
        width: 640px;
        margin: auto;
        margin-top: 10px;}

.top img {
        height: 40px;
        width: 40px;
        border: solid 5px #CCC; /*Change the topbar image border color*/
        margin: 5px;
        -webkit-transition: all 0.6s linear;
        -moz-transition: all 0.6s linear;
        -ms-transition: all 0.6s linear;
        -o-transition: all 0.6s linear;
        transition: all 0.6s linear;}

.top img:hover{
    border-color: #c8413a; /*Change the topbar image border color when you hover over it*/
    -webkit-transition: all 0.6s linear;
	-moz-transition: all 0.6s linear;
	-ms-transition: all 0.6s linear;
	-o-transition: all 0.6s linear;
	transition: all 0.6s linear;
	}

.navi {
        margin-top: -70px;
        margin-left: 20px;}
      .navi ul {list-style-type:none;}
      .navi li {
        text-transform: uppercase;
        background-color: #CCC; /*Change the topbar links background color*/
        padding: 2px;
        height: 11px;
        font-size: 8px;
        margin-bottom:2px;
        width:40px;
        text-align:center;
        -webkit-transition: all 0.6s linear;
        -moz-transition: all 0.6s linear;
        -ms-transition: all 0.6s linear;
        -o-transition: all 0.6s linear;
        transition: all 0.6s linear;
        }
.navi a {
    color: #fff;/*Change the topbar links color*/
    text-decoration:none;
    -webkit-transition: all 0.6s linear;
	-moz-transition: all 0.6s linear;
	-ms-transition: all 0.6s linear;
	-o-transition: all 0.6s linear;
	transition: all 0.6s linear;;
      }

.navi a li:hover {
        width: 55px;
        background-color: #c8413a;/*Change the topbar links color when you hover over them*/
        letter-spacing: 0.3em;
    -webkit-transition: all 0.6s linear;
	-moz-transition: all 0.6s linear;
	-ms-transition: all 0.6s linear;
	-o-transition: all 0.6s linear;
	transition: all 0.6s linear;
      }

    .titulo {
    text-transform: uppercase;
    font-family: 'Tulpen One';
    letter-spacing: 0.3em;
    margin-top: -62px;
    font-size: 40px;
    font-weight: 500;
    color: #CCC;/*Change title color*/
    width: 640px;
    text-align: center;}


      /*-----blogs--------------------------------------------------------------*/
      #todo {
      width: 640px;
      margin:auto;
      height: 480px;
      overflow: scroll;
      display:block;
      }

      .blog {
        width: 45px;
        margin-top: 20px;
        height: 45px;
        text-align:center;
        float:left;
        margin-left: 20px;
      }

      .blog img {
        opacity: 0.7;
        margin: 10px;
        border: solid 5px #eee; /*Change the blogs border color*/
        width: 45px;
        height: 45px;
        -webkit-transition: all 0.6s linear;
        -moz-transition: all 0.6s linear;
        -ms-transition: all 0.6s linear;
        -o-transition: all 0.6s linear;
        transition: all 0.6s linear;
        float:left;
        }
    .blog img:hover {
        opacity: 1;
        border-color:#c8413a;/*Change the blogs border color when you hover over them*/
        -webkit-transition: all 0.6s linear;
        -moz-transition: all 0.6s linear;
        -ms-transition: all 0.6s linear;
        -o-transition: all 0.6s linear;
        transition: all 0.6s linear;
    }

      </style>
  </head>
  <body>
 <div class="top"><img src="http://25.media.tumblr.com/avatar_617092a74eb8_128.png"><!--------Top image URL here. To get an URL you should previously upload the image on
http://www.tumblr.com/themes/upload_static_file and then copy here the link it gives you, between the ""--------->
      <div class="navi">
      <ul>
        <a href="/"><li>back</li></a>
        <a href="/ask"><li>ask</li></a>
        <a href="http://www.tumblr.com/dashboard"><li>dash</li></a>
      </ul>
      </div>
      <div class="titulo">Blogroll</div><!---Change the title--------->
    </div>

     <!-----------------------BLOGROLL----------------------->
    <div id="todo">
     {block:Following}{block:Followed}
    <div class="blog">
    <a target="_blank" href="{FollowedURL}"> <img border: "0" src="{FollowedPortraitURL-48}" title="{FollowedName}"/>
       </a>
    </div>
    {/block:Followed}{/block:Following}


        </div>
        <div id="credit"><a href="http://robbarya.tumblr.com">credit</a></div>
    </body>
    </html>