Blogroll #4

<!DOCTYPE html>
<head>

<!--


    ʙʟᴏɢʀᴏʟʟ #4;
    © ᴍᴀᴅᴇ ʙʏ ᴄʜʟᴏᴇ
    [ ʏᴏɴɢ.ᴄᴏ.ᴠᴜ ] & [ sᴏᴏɴᴊᴜɴs.ᴛᴜᴍʙʟʀ.ᴄᴏᴍ ]

    ᴛʜᴇᴍᴇs ᴄᴀɴ ʙᴇ ғᴏᴜɴᴅ ᴀᴛ:
    [ sᴏᴏɴ-co.ᴛᴜᴍʙʟʀ.ᴄᴏᴍ ]


    - ᴅᴏɴ'ᴛ sᴛᴇᴀʟ ɪᴛ.
    - ᴘʟᴇᴀsᴇ ʟᴇᴀᴠᴇ ᴛʜᴇ ᴄʀᴇᴅɪᴛ ᴏɴ ᴛʜᴇ ᴘᴀɢᴇ.


                                                                   -->

<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="altertnate" type="application/rss+xml" href="{RSS}">
<meta name="description" content="" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/whx9ghv/1eGm9d17y/isotope.js"></script>
<script>
    $(function(){
     var $container = $('#icon');
     $container.isotope({
        itemSelector: '.icons'
      });
    });
</script>

<script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
<script>
    (function($){
        $(document).ready(function(){
            $("[title]").style_my_tooltips();
        });
    })(jQuery);
</script>

<style type="text/css">

#s-m-t-tooltip {
    display: block;
    background: #111;
    font-size: 8px;
    font-family: calibri;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height:100%;
    color: #fff;
    text-align: center;
    margin-left: 18px;
    padding:7px;
    min-width: 40px;
    max-width: 200px;
    z-index: 99;}

::-webkit-scrollbar-thumb:vertical{background-color: #f6f6f6;}
::-webkit-scrollbar {width: 2px; background-color:#fff;}

body {background-color: #fff;margin: 0px;}

a:link, a:visited, a:active {
        text-decoration: none;
        -webkit-transition: all 0.7s ease-in-out;
        -moz-transition: all 0.7s ease-in-out;
        -o-transition: all 0.7s ease-in-out;
        -ms-transition: all 0.7s ease-in-out;
        transition: all 0.7s ease-in-out;}

a:hover {-webkit-transition: all 0.7s ease-in-out;
        -moz-transition: all 0.7s ease-in-out;
        -o-transition: all 0.7s ease-in-out;
        -ms-transition: all 0.7s ease-in-out;
        transition: all 0.7s ease-in-out;}

#head {
    margin:auto;
    /****************HEADER IMAGE********************/
    background:url('HEADER IMAGE URL');
    background-size:cover;
    z-index:99;
    opacity:0.9;
    height: 130px;
    margin-top:50px;
    width: 700px;}

#sets{
    position:relative;
    margin:auto;
    width:700px;
    padding-bottom:5px;
    z-index:9999;
    -webkit-transition: all 0.7s ease-in-out;
    -moz-transition: all 0.7s ease-in-out;
    -o-transition: all 0.7s ease-in-out;
    -ms-transition: all 0.7s ease-in-out;
    transition: all 0.7s ease-in-out;}

#title {
    margin:auto;
    margin-top:-75px;
    font: bold 10px consolas;
    text-transform:uppercase;
    color: #000;
    letter-spacing: 15px;
    padding:8px 2px 0px 2px;
    -webkit-transition: all 0.7s ease-in-out;
    -moz-transition: all 0.7s ease-in-out;
    -o-transition: all 0.7s ease-in-out;
    -ms-transition: all 0.7s ease-in-out;
    transition: all 0.7s ease-in-out;}

#links {
    background:#000;
    margin-top:40px;opacity:0;padding:1px 3px 5px 3px;
    -webkit-transition: all 0.7s ease-in-out;
    -moz-transition: all 0.7s ease-in-out;
    -o-transition: all 0.7s ease-in-out;
    -ms-transition: all 0.7s ease-in-out;
    transition: all 0.7s ease-in-out;}

#links a {
    font: oblique 9px arial;
    width: 65px;
    display: inline-block;
    padding-top: 2px;
    color: #fff;
    letter-spacing: 2px;
    text-align:center;}

#sets a:hover {background-color: #fff; color: #000;}
#sets:hover #links {opacity:1;margin-top:50px;}

#box {margin:auto; width: 698px;height:340px;background:#fff; margin-top:-15px;padding-top: 20px;overflow:auto;border-right: 1px solid #f3f3f3;border-left: 1px solid #f3f3f3;}
#icon {margin:auto;margin-left:20px;}
.icons {margin: 15px;position: relative;}

.pics {
    border-radius:2px;
    display: table-cell;
    background-color: #f5f5f5;
    border:2px solid #f4f4f4;
    margin: 5px;
    height:20px;
    padding: 6px;
    -webkit-transition: all 0.7s ease-in-out;
    -moz-transition: all 0.7s ease-in-out;
    -o-transition: all 0.7s ease-in-out;
    -ms-transition: all 0.7s ease-in-out;
    transition: all 0.7s ease-in-out;}

.pics img {
    display: inline-block;
    padding: 6px;
    border: 1px solid #f0f0f0;
    background-color: #fff;
    height: 20px;}

.info {
    margin-top:5px;
    word-wrap: break-word;
    background:#f5f5f5;
    text-align:center;
    width:125px;
    height:20px;
    margin-left:40px;
    margin-top:-33px;
    padding:5px 3px 7px 3px;
    -webkit-transition: all 0.7s ease-in-out;
    -moz-transition: all 0.7s ease-in-out;
    -o-transition: all 0.7s ease-in-out;
    -ms-transition: all 0.7s ease-in-out;
    transition: all 0.7s ease-in-out;}

.name {
    text-align: center;
    color: #555;
    font: bold 8px calibri;
    text-transform:uppercase;
    letter-spacing: 2px;
    padding:3px;
}

.pics:hover .info{color: #fff;}
.pics:hover .name{color: #fff;}


#cr {font-size:9px;font-family:arial;text-align:center;padding: 4px;z-index:99999;position:fixed;top:5px;left:5px;color:#888;}
#cr a {color:#333;}

</style>
</head>

<body>
<div id="head"></div>
<div id="sets" align="center">
<!--title--->
<div id="title">blogroll</div>
<div id="links">
<a href="/">go back</a>
<a href="/ask">message</a>
<!--extra link--->
<a href="URL">link</a>
</div></div>


{block:Following}
<div id="box">
<div id="icon">
{block:Followed}
<div class="icons">
<a href="{FollowedURL}" title="{FollowedTitle}" target="_blank">
<div class="pics">
<img src="{FollowedPortraitURL-30}">
<div class="info">
<div class="name">
{FollowedName}
</div></div></div></a>
</div>
{/block:Followed}
</div></div>
{/block:Following}


</body>
<div id="cr" title="theme by soonjun"><a href="http://soon-co.tumblr.com/">©</a></div>
</html>