Soft Theme (blogroll)

<!-- SOFT BLOGROLL THEME BY RAMYEONS // http://ramyeons.tumblr.com / http://hobakjeon.tumblr.com

---------------------RULES--------------------------------

*DO NOT USE MY THEME CODES AS BASE CODES FOR YOUR OWN THEME
*DO NOT CLAIM AS YOUR OWN OR I WILL HUNT YOU DOWN
*DO NOT BREAK ANY RULES OR YOU WILL BE REPORTED
*YOU MAY EDIT THIS THEME, BUT LEAVE THE CREDITS ALONE
*DO NOT TAKE MY CREDITS OUT

----------------------HOW TO CUSTOMIZE BLOGROLL---------------------------------

                                  HOW TO CHANGE THE SIDEBAR IMAGE
To change the sidebar image, find this:
http://static.tumblr.com/iuggpng/bpUm5fh56/side.png
and replace it with whatever image you would like.

                                  HOW TO CHANGE THE SIDEBAR DESCRIPTION
Find this:
This is a list of the wonderful blogs im following ~
Then replace it with whatever description you would like.

                                  HOW TO CHANGE THE BLOGROLL TITLE
Find this:
<div style="position:absolute; left:500px; top:45px;">Blogroll</div></div>
Replace "Blogroll" with whatever title you would like. Max # of characters: 8 ~ 12.

                                  HOW TO CHANGE THE BACKGROUND IMAGE
Find this (theres 2 of them) :
http://25.media.tumblr.com/tumblr_m33qwzyv7F1r6uwfxo12_r1_250.png
Replace it with whatever background img you would like to use.

                                  HOW TO CHANGE THE DESC AND BLOG URL'S COLORS
DESC: Change the "white" in background-color:white; to a hex color code in #desc
To change the color of the text, add color:HEX COLOR CODE HERE;
To change the border color/remove it, change the #eee in border. To change the width of the border, chanhe the 1px to 0px or 5px, etc.
BLOG URL: Same as the desc, but it is in the div #names

                                  HOW TO CHANGE THE TITLE:
Change "Blogroll" in between <title></title>

                                  HOW TO CHANGE FONTS AND FONT SIZES:
Find font-family and font-size and change them.


----------------------------CREDITS:-----------------------------

Image: http://icanchangemylife.tumblr.com
Background: http://subtlepatterns.com/

-->


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>Blogroll</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">

<style type="text/css">


body {

background-image:url(http://25.media.tumblr.com/tumblr_m33qwzyv7F1r6uwfxo12_r1_250.png);
color:#555;
 background-repeat:repeat;

    background-attachment:fixed;

font-family:trebuchet ms;
font-size:9px;
text-transform:none;

}


@font-face {font-family: "print";src: url('http://static.tumblr.com/iuggpng/oQfm4mzne/princ___.ttf');}


a, a:link, a:active, a:visited {
color: #555;
text-decoration:none;
border-bottom:0px dashed #fc8b65;
padding-bottom:20px;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;

}

a:hover {color:#888;
border-bottom:1px dashed #fc8b65;
padding-bottom:1px;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;

}


#taemin {
position:absolute;
top:150px;
left:400px;
width:600px;

}

#pic {
    margin-left:10px;
margin-bottom:10px;
float:left;
z-index:-999;
}

#pic:hover .pic {
    -moz-border-radius:100px;
border-radius:100px;
    -webkit-transition: all 1.5s ease-out;
-moz-transition: all 1.5s ease-out;
transition: all 1.5s ease-out;
}

.pic:hover {
    -moz-border-radius:100px;
border-radius:100px;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
transition: all 1s ease-out;
}

.pic {
    -webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}

#pic:hover #names {
    opacity:1;
    -webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
    }

#names {
    z-index:999;
    max-width:87px;
min-width:87px;
height:auto;
overflow:hidden;
    margin-top:-40px;
    margin-left:-18px;
    color:#aaa;
    opacity:0;
    text-align:center;
    font-family:consolas;
    font-size:8px;
    text-transform:uppercase;
    padding:3px;
    letter-spacing:2px;
    border-left:3px solid black;
    border-right:3px solid black;
    position:absolute;
    background-color:#fff;
    -webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}

#side {
    position:fixed;
    top:200px;
    left:100px;
}

#sidedesc {
    position:absolute;
    margin-top:10px;
    margin-left:10px;
    width:170px;
    padding:5px;
    opacity:.8;
    border:1px solid #eee;
    background-color:white;
}

#nav {
    display:inline block;
    width:auto;
    font-family:open sans;
    font-size:20px;
    float:left;
    margin-top:-35px;
    position:absolute;
    letter-spacing:2px;
    padding-bottom:20px;
    border-bottom:0px dotted #aaa;
    -webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}

#nav:hover {
    border-bottom:1px dashed #aaa;
    padding-bottom:1px;
    -webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}

#taemin a:hover {
    border:none;
}

#tiffany {
    position:fixed;
    top:0px;
    left:0px;
    font-family:print;
    font-size:50px;
    letter-spacing:30px;
    text-transform:uppercase;
    background-image:url(http://25.media.tumblr.com/tumblr_m33qwzyv7F1r6uwfxo12_r1_250.png);
    width:100%;
    height:100px;
    z-index:999;
    }

    @font-face {font-family: "print";src: url('http://static.tumblr.com/iuggpng/oQfm4mzne/princ___.ttf');}


 @font-face {font-family: "open sans";src: url('http://static.tumblr.com/iuggpng/jrXm0dlyf/opensans-condlight.ttf');}


</style>
</head>
<body>

<div id="tiffany">

<div style="position:absolute; left:500px; top:45px;">Blogroll</div></div>


<div id="side">
<a href="/" id="nav">Go back</a>
<div style="margin-left:150px;"><a href="http://hobakjeon.tumblr.com" id="nav">Credit</a></div>
<img src="http://static.tumblr.com/iuggpng/bpUm5fh56/side.png" width="200">
<div id="sidedesc">This is a list of the wonderful blogs im following ~
&nbsp;<a href="http://icanchangemylife.tumblr.com/" target="new">© image</a>
</div>

</div>

<div id="taemin">


{block:Following}
{block:Followed}

<div id="pic"><a href="{FollowedURL}" target="new"><img src="{FollowedPortraitURL-64}" class="pic"></a>
<div id="names">{FollowedName}</div>
</div>
{/block:Followed}

{/block:Following}

</div>

</body>

</html>