Blogroll #3

<!---------------------------------------------------------------------


                ʙʟᴏɢʀᴏʟʟ ᴘᴀɢᴇ ᴍᴀᴅᴇ ʙʏ .ᴄʜʟᴏᴇ.
                [ʏᴏɴɢ.ᴄᴏ.ᴠᴜ] & [sᴏᴏɴᴊᴜɴs.ᴛᴜᴍʙʟʀ.ᴄᴏᴍ]
                ᴛʜᴇᴍᴇs ᴄᴀɴ ʙᴇ ғᴏᴜɴᴅ ᴀᴛ
                [sᴏᴏɴᴊᴜɴᴛʜᴇᴍᴇs.ᴛᴜᴍʙʟʀ.ᴄᴏᴍ]
                ᴘʟᴇᴀsᴇ ʟᴇᴀᴠᴇ ᴛʜᴇ ᴄʀᴇᴅɪᴛ ᴏɴ ᴛʜᴇ ᴛʜᴇᴍᴇ.
                ɪғ ʏᴏᴜ ʜᴀᴠᴇ ᴀɴʏ ǫᴜᴇsᴛɪᴏɴs ᴄᴏᴍᴇ ᴀsᴋ.


---------------------------------------------------------------------->

<html>
<head>
<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: #f85d5b;
    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: 7px; 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;}

#circle {
    position:fixed;
    height: 210px;
    width: 210px;
    /*circle picture*/
    background:url('CIRCLE PIC');
    background-position:center;
    background-size:cover;
    text-align: center;
    border-radius:50%;
    border:10px solid #f6f6f6;
    margin-left: 150px;
    bottom: 50px;
    z-index:99;}

.circle {margin:auto;margin-top:70px;}

#title {
    margin:auto;
    font:oblique bold 50px times;
    color: #fafafa;
    margin-top: 30px;
    letter-spacing: 3px;
    width:210px;
    text-shadow:1px 1px 2px #777;
    -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;}

#circle a {
    font-family:calibri;
    width: 50px;
    display: inline-block;
    padding: 3px 1px 3px 1px;
    color: #fafafa;
    letter-spacing: 1px;
    font-size: 8px;
    text-transform:uppercase;}

#circle a:hover {background-color: #de504f;text-shadow: 1px 1px 0px #aaa;}

#box {position:fixed; width: 500px;height:370px;overflow:auto; margin-top: 20px;margin-left:250px;border-left: 1px solid #f3f3f3;padding-left:30px;}
#icon {margin-top: 0px;}
.icons {margin: 0px;position: relative;}

.pics {
    display: table-cell;
    background-color: #fff;
    margin: 5px;
    height: 40px;
    padding: 5px;
    -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: 10px;
    border: 5px solid #f5f5f5;
    border-radius:3px;
    background-color: #fff;
    height: 55px;
    -moz-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    opacity:0.9;
    -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:hover {border: 5px solid #f85d5b;-webkit-filter: contrast(1.1);opacity:1;-moz-transform: scale(1);-webkit-transform: scale(1);border-radius:50%;}
.pics:hover .name {background-color: #fff;}
.pics:hover .info {color: #fff;background-color: #333;}

#line {width:200px;
/*sidebar picture*/
background:url('SIDEBAR PIC');
background-position:center;background-size:cover;
border-left:10px solid #f5f5f5;
height:100%;top:0px;left:0px;position:fixed;}

</style>
</head>

<body>
<div id="line"></div>
<div id="circle">
<div class="circle">
<!--title--->
<div id="title">blogroll</div>
<a href="/">go back</a>
<a href="/ask">message</a>
<!--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="{FollowedName}" target=”_blank”>
<div class="pics">
<img src="{FollowedPortraitURL-64}">
</div></a>
</div>
{/block:Followed}
</div></div>
{/block:Following}


</body>
<a href="http://soonjunthemes.tumblr.com/" title="page created by soonjun" style="font-size:10px;right:15px;top:15px;position:fixed;font-family:calibri;letter-spacing:1px;background:#f6f6f6;padding: 2px 5px 3px 5px;border-radius:3px;z-index:99;color:#666;"> SJ. </a></div>
</html>