CODES;

<html>
<head><base target='_blank'/><link href='http://media.tumblr.com/tumblr_lkl5u75YJB1qfamg6.gif' rel='icon' type='image/x-icon'/>
<title> Yell at grey </title>

<style type="text/css">

body{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhISd9Bef_axBEXvqSNCjpm8f2pmdeNgxe7yKRZhfyxLj9P1bIeZnJVqZ0cb3tZOlv8YqKukEU5ImpDN46lZtJSnhwbtY4s1PIkz49xCH5hrGx1920HYy9_Qo-lFK6__IRjXbpbt7T9hrdQ/s1600/bg_243048.png);
font: 11px arial;
letter-spacing:1px;
color:#999;
}

a:link,a:visited{
text-decoration:none;
color:#E0B962;;-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
box-shadow:inset 0 0px 0px #ddd;;
padding:2px;
}

a:hover{
color:#fff;
box-shadow:inset 0 -50px 0px #ddd;;
}

u{
text-decoration:none;
border-bottom:2px solid #e5dada;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}

u:hover{
border-bottom:2px solid #fff;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}

b:hover{
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
color:#808080;
}

#DGNA{
width:300px;
position:fixed;
left:60px;
top:70px;
padding:5px;
}

#navbar-iframe {
display: none !important;
}

#karam{
width:220;
margin-top:-2px;
background:#fff;
}

blockquote {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl2zG59sRjlglr_sVRkiYkR0ltguCsfXF6NSIf62sm1GeUT9PixK8KpKsiaH0D_7_zph2_qvDyJybmEV79Jk7evIMxGpc4Vo_pG4pu9dlEzCO3ufKpycc9gM-DRPLtsTYzZE8vxqym6M9d/s1600/pinkpink.gif);
padding:5px;
border: 1px solid #FAFAA9;
}

a.jay{
background:#FFB5CD;
width:20px;
display:inline-block;
height:16px;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;cursor:url(http://static.tumblr.com/mpornxv/JVilj15ds/0215.png);
text-align:center;
border-radius:30px;padding:2px;
padding-top:5px;
color:#fff;
margin:3px;

}

a.jay:hover{
background:#FF8EB3;
color:#fff;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}

a.Mika{
background:#B5FFAA;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
width:20px;
display:block;
height:16px;
cursor:url(http://static.tumblr.com/mpornxv/JVilj15ds/0215.png);
text-align:center;
border-radius:30px;padding:2px;
padding-top:5px;
color:#fff;
margin:3px;

}

a.Mika:hover{
background:#33FFFF;
color:#fff;

}

.karamu{
-webkit-transition: 1.0s;
-moz-transition: 1.0s;width:100px;height:100px;
border:2px solid #EEEEEE;}

.karamu:hover{
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
border:2px solid #D2DFFE;}

a.Injun{
background:#FBB3F3;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
width:20px;
display:block;
height:16px;
text-align:center;
border-radius:30px;
padding:2px;
padding-top:5px;
color:#fff;
margin:3px;

}

a.Injun:hover{
background:#888888;
color:#fff;

}

a.hyunmin{
background:#C1D7FE;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
width:20px;
display:block;
height:16px;
text-align:center;
border-radius:30px;padding:2px;
padding-top:5px;
color:#fff;
margin:3px;

}

a.hyunmin:hover{
background:#FFF038;
color:#fff;

}

#Kevin {
width:650px;
position:absolute;
left:405px;top:50px;
}

.Kevin-wu{
height:4px;
padding:5px;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
background:#F9F0CC;
border-radius:300px;
}

.h1 {
line-height:15px;text-transform:uppercase;
color:#999999;-webkit-transition: 1.0s;
-moz-transition: 1.0s;
padding:3px;
font-family:consolas;
font-size:17px;
background:#F0f0f0;
margin:0px 0px 5px;
text-align:center;
}

.post-footer{
color:#fff;
font-size:13px;
margin:15px 0px 15px;
line-height:2px;
height:5px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0E430_VKLMlpwUzZdvg_FoWtxq3z0_-3zzDPvs0R2y-pNuwEmHZ6yBFkGomQpRwnp4vx4BvMOf3YnQYQDFUmtGIU-uZvdqMJwH7tRN1t_Pp-9dqEUHflW04_U4G-gT_MD4h36QSmcl3MV/s1600/stripe_efc6d1bc416a037feebb0e9849f955cc.png);
}

a.c{
color:#2828282;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg74fryIw4CsyfA2uMLa70lG7kiXa9tf2rlMrGGJleU8PPEITwkbN7yOMT61EqOuAoXHdBiuzcByuJn-KehIUX-K7BtZuYkrqrgETk3BxWH_ytybBdRd6MDQxueKGII0cdRVBUc_tUuzU5K/s1600/2.png);
-webkit-transition: 1.0s; padding:2px;
-moz-transition: 1.0s;
cursor:url(http://static.tumblr.com/mpornxv/JVilj15ds/0215.png);
font-family:consolas;display:inline-block; width:40px;
margin:2px;
}

a.c:hover{
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
color:#222;
border:none;cursor:url(http://static.tumblr.com/mpornxv/JVilj15ds/0215.png);
}

.nav{
color:#FFC0C0;
cursor:url(http://static.tumblr.com/mpornxv/JVilj15ds/0215.png);
text-decoration:none;
padding:2px;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;

}

.nav:hover{
cursor:url(http://static.tumblr.com/mpornxv/JVilj15ds/0215.png);
-webkit-transition: 1.0s;color:#222;
-moz-transition: 1.0s;
padding:2px;
}

::-webkit-scrollbar {
width:6px;
height:auto;
background:#fff;
}

::-webkit-scrollbar-thumb{
background:url(http://27.media.tumblr.com/tumblr_lzxkhw34cK1r9g6hvo2_100.png);
border-radius:10px;
}

.sidebar{
height:20px;
overflow:hidden;
background:#fff;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;

}
@font-face {
font-family:tt !important;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf') !important;
}

.sidebar:hover {
height:100px;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}

.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
cursor: default;
}

.ch-info-wrap,
.ch-info{
position: absolute;
width: 180px;
height: 180px;
border-radius: 50%;
}

.ch-info-wrap {
top: 20px;
left: 20px;
background: #fff;
box-shadow:
0 0 0 20px rgba(255,255,255,0.2),
inset 0 0 3px rgba(115,114, 23, 0.8);

}

.ch-info > div {
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background-position: center center;

-webkit-backface-visibility: hidden; /*Just for webkit to have a smooth font*/
}

.ch-info .ch-info-front {
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}

.ch-info .ch-info-back {
opacity: 0;

background: #DDDDDC;
pointer-events: none;

-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);

-webkit-transition: all 0.4s ease-in-out 0.2s;
-moz-transition: all 0.4s ease-in-out 0.2s;
-o-transition: all 0.4s ease-in-out 0.2s;
-ms-transition: all 0.4s ease-in-out 0.2s;
transition: all 0.4s ease-in-out 0.2s;
}

.ch-img-1 {
background-image: url(http://24.media.tumblr.com/tumblr_m3tive9CdV1r0yfa8o1_500.png);
}

.ch-info h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 18px;
margin: 0 15px;
padding: 40px 0 0 0;
height: 80px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
color: #fff;
padding: 10px 5px 0;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5);
}

.ch-info p a {
display: block;
color: #e7615e;
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Open Sans', Arial, sans-serif;
}

.ch-info p a:hover {
color: #fff;
}

.ch-item:hover .ch-info-front {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);

opacity: 0;
}

.ch-item:hover .ch-info-back {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);

opacity: 1;
pointer-events: auto;
}

.ch-grid {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
display: block;
text-align: center;
width: 100%;
}

.ch-grid:after,
.ch-item:before {
content: '';
display: table;
}

.ch-grid:after {
clear: both;
}

.ch-grid li {
width: 220px;
height: 220px;
display: inline-block;
margin: 20px;
}

a.bnavi{
text-align:center;
background:#fff;
border:1px solid #eee;
width:50px;
display:inline-block;
padding:5px;
color:#ccc;
text-transform:uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
cursor:pointer;
margin:2px;
}
a.bnavi:hover{
background:#FFFF99;
box-shadow:none;
}
</style></head><body><center>

<div id="DGNA">
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-1">
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-1"></div>
<div class="ch-info-back">

<br/><br/><Br/><br/>
<a class="bnavi" onClick="document.getElementById('main').innerHTML=document.getElementById('about').innerHTML" >About</a>
<a class="bnavi" onClick="document.getElementById('main').innerHTML=document.getElementById('entry').innerHTML" >Entry</a><br/>
<a class="bnavi" onClick="document.getElementById('main').innerHTML=document.getElementById('links').innerHTML" >Linkies</a>
<a class="bnavi" href="http://wanaseoby.blogspot.com/" >credit</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div style="position:fixed;left:95px;top:350px;">
<div class="sidebar">
<div style="width:220px;font:8px tt; padding:3px;-webkit-transition: 1.0s; -moz-transition: 1.0s; background:#F9F0CC;color:#333;border-radius:300px;letter-spacing:2px;margin-bottom:5px;">CBOX</div>
CBOX CODES HERE
</div>

<div id="karam"><div style="float:right;clear:both;">
<a class="jay" href="http://www.facebook.com/KebinJihwan" >FB</a>
<a class="Mika" href="https://twitter.com/#!/Jeon_Jixwan" >TW</a>
<a class="Injun" href="http://www.formspring.me/wanaseoby" >FS</a>
<a class="hyunmin" href="http://www.blogger.com/follow-blog.g?blogID=333784674777325026" title="follow" >✚</a><br/>

</div>
<div style="text-align:left;margin-left:4px; width:205px;">
You have no idea how much I like you, how much you make me smile, how much I love talking to you, or how much I wish you were mine.
An #Aquarius makes good friends, better lovers but your fucking worst enemy.

</div>
<div style="clear:both;"></div>
<div style="width:220px;font:8px tt; padding:3px;-webkit-transition: 1.0s; -moz-transition: 1.0s; background:#F9F0CC;color:#333;border-radius:300px;letter-spacing:2px;margin-bottom:5px;"></div>
</div></div></center>

<div style="position:absolute; top:20px; left:400px;">

<div style="background:#fff; width:600px; border-radius:2px; padding:10px; border:1px solid #eee;">
<div style="width:640px;margin-left:-23px;font:8px tt; padding:3px;-webkit-transition: 1.0s; -moz-transition: 1.0s;height:10px; background:#F9F0CC;color:#333;border-radius:300px;letter-spacing:2px;margin-top:-20px; margin-bottom:10px;"></div>
<div id="main"><Blogger>
<div class="h1"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div class="h2"><BlogDateHeader><$BlogDateHeaderDate$> </BlogDateHeader><$BlogItemDateTime$> | <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> dorks</a></BlogItemCommentsEnabled></div>
<$BlogItemBody$>

<div style="margin-top:10px;"></Blogger><a class="option" href=<$NewerPosts$>>←</a></NewerPosts> <OlderPosts><a class="option" style="float:right;" href=<$OlderPosts$>>→</a> </OlderPosts><div style="clear:both;"></div>
</div></div>
</div><div style="width:640px;margin-left:-10px;px;font:8px tt; padding:3px;-webkit-transition: 1.0s; -moz-transition: 1.0s;height:10px; background:#F9F0CC;color:#333;border-radius:300px;letter-spacing:2px;margin-top:-20px; margin-top:-5px;"></div>


<div id="about" style="display: none;">
<div class="h1">
About Me</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar lobortis luctus. Donec posuere sollicitudin diam, non semper metus vulputate nec. Curabitur lobortis porttitor convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar lobortis luctus. Donec posuere sollicitudin diam, non semper metus vulputate nec. Curabitur lobortis porttitor convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. I'm editing my old skin and decided to freebies it. Inspired by the image im using on the sidebar. <br/><br/>
<div class="h1">
Contact</div>
<a href="">facebook</a> <a href="">twitter</a> <a href="">formspring</a> <a href="">tumblr</a> <br/>

</div>

<div id="entry" style="display: none;">
<blogger>
<Blogger>
<div class="h1"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div class="h2"><BlogDateHeader><$BlogDateHeaderDate$> </BlogDateHeader><$BlogItemDateTime$> | <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> dorks</a></BlogItemCommentsEnabled></div>
<$BlogItemBody$>

<div style="margin-top:10px;"></Blogger><a class="option" href=<$NewerPosts$>>←</a></NewerPosts> <OlderPosts><a class="option" style="float:right;" href=<$OlderPosts$>>→</a> </OlderPosts><div style="clear:both;"></div>
</div></div>
</div>

<div id="links" style="display: none;">
<div class="h1">
Exchange links</div>
<a class="linkies" href="LINK">lissa</a>
<a class="linkies" href="LINK">jane</a>
<a class="linkies" href="LINK">rose</a>
<a class="linkies" href="LINK">soyeon</a>
<a class="linkies" href="LINK">hyomin</a>
<a class="linkies" href="LINK">juniel</a>
<a class="linkies" href="LINK">alice</a>
<a class="linkies" href="LINK">sunny</a>
<a class="linkies" href="LINK">gummy</a>
<a class="linkies" href="LINK">illa</a>
<a class="linkies" href="LINK">bomi</a>
</div>
</div>
</body>
</html>