©

CODES

<html>
<head>
<link rel="shortcut icon" href="http://media.tumblr.com/tumblr_m2vn8qheGH1qdlkyg.gif" />

</script>
<link href='http://fonts.googleapis.com/css?family=Cedarville+Cursive' rel='stylesheet' type='text/css'>

<title>purpose</title>

<script type="text/javascript">
function changeNavigation(id)
{document.getElementById('main').innerHTML=document.getElementById(id).innerHTML}
</script>

</head>

<style type="text/css">
#navbar-iframe { display: none; }

body {
background:url(http://media.tumblr.com/tumblr_m9ey9bOcsx1r0x4q9.jpg);
color: #888888;
line-height: 15px;
text-align: justify;}

table {
background:#fff;
font: 11px arial;
letter-spacing: 1px;
color: #999;
line-height: 20px;
padding:5px;
border:1px solid #d7d7d7;
border-radius:0px;
width:955;}


::-moz-selection {
background:#000;
color:#fff;
}

::selection {
background:#000;
color:#fff;
}

a:link,a:visited{
text-decoration:none;
color:#A4A4A4;-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;
}
a:hover{
color:#fff;
background:#111;
}

b {
-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;
color:red;
text-decoration:none;

}

i {
-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;
color:#F778A1;
text-decoration:none;
background:#FDEEF4;
padding:2px;
border-radius:5px;
}

i:hover {
padding: -3px;
background:#FAF8CC;
}

blockquote {
background:url(http://i.imgur.com/YhkndO6.png);
border:1px solid #f8f8f8;
margin-left:23px;width:85%;
padding:15px;
letter-spacing:1px;
font:10px consolas; color:#A4A4A4;
}

.post-footer{border-top:1px solid #f1f1f1;margin-top:10px;}

.comment-timestamp {
margin:0 0 .5em;
padding:0 0 .75em 20px;
color:#666;
}

.deleted-comment {
font-style:italic;
color:gray;
}

#comments {
margin:5;
border-width:0 1px 1px;
padding:20px 0 15px 0;
}
.comment-icon blogger-comment-icon{display:none}
#comments-block {
margin:2px ;
}

.comment-data {
background:url("http://media.tumblr.com/tumblr_m2hsr17fgQ1qdlkyg.gif") no-repeat 2px .3em;
margin-top:5px !important;background-size:18px;
padding:0 0 0 20px;
color:#666;
}

span.comment-icon{display:none}

.comment-poster {
font-weight:bold;
}

.comment-body {
margin:0px;
}

.comment-body p {
background:url(http://i.imgur.com/JQLYlGK.png);
border:1px solid #f1f1f1;
margin:0em;
padding:5px;
color:#808080;
}

.pocetit {
margin-top:0px;
background:url(http://i.imgur.com/JQLYlGK.png);height:25px;
border:1px solid #d7d7d7;
font-family:le;
font-size:30px;
padding:4px;
padding-left:20px;
letter-spacing:1px;
text-transform:block;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}

a.jeonjin1{
display:inline-block;
background:url(http://i.imgur.com/l6vFEWe.png) left center;
font:11px calibri, halvetica;
text-transform:uppercase;
letter-spacing:1px;
background-repeat:no-repeat;
color:#666;text-align:left;
width:250px;background-size:7px;
line-height:10px;text-decoration:none;
padding:5px 5px 5px 20px;}

a.jeonjin1:hover{
display:inline-block;
background:url(http://i.imgur.com/l6vFEWe.png) left center;
background-repeat:no-repeat;
color:#FFF;text-align:left;
width:250px;background-size:7px;
line-height:10px;text-decoration:none;
padding:5px 5px 5px 20px;}

.archive{
-webkit-transition:All 0.4s ease;
-moz-transition:All 0.4s ease;
-o-transition:All 0.4s ease;
background:url(http://i.imgur.com/l6vFEWe.png);
border-bottom:1px solid #f1f1f1;
background-size:7px;
background-repeat:no-repeat;
padding:5px;
padding-left:20px;
background-position:left;

}

.archive:hover{ background:url(http://i.imgur.com/l6vFEWe.png);
background-size:7px;
background-repeat:no-repeat;
padding-left:37px;
background-position:left;
}

.h1 {
text-transform:lowercase;
background:url(http://media.tumblr.com/tumblr_m9ey9bOcsx1r0x4q9.jpg);
color:#d7d7d7;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;letter-spacing:5px;
margin-bottom:5px;
font-size:12px;
line-height:20px;
text-align:right;
padding-right:0px;
border:1px solid #f8f8f8;
}


img{max-width:550px;padding:3px;margin-bottom:5px;border:1px solid #f1f1f1;}

.umi {
margin-top:0px;
background:url(http://i.imgur.com/JQLYlGK.png);
border:1px solid #d7d7d7;
border-radius:5px;
font-family:le;
font-size:30px;
padding:2px;
padding-left:20px;
letter-spacing:1px;
text-transform:block;
}

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

.blogger-labels {
display:inline-block;
background:url(http://i.imgur.com/YhkndO6.png);
border:1px solid #f1f1f1;
padding:5px;
}

::-webkit-scrollbar-thumb:vertical {background-color: #ffffff;border:1px solid #f1f1f1; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;}

::-webkit-scrollbar-thumb:horizontal {background-color: #ffffff;height: 4px;border:1px solid #f1f1f1; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}

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

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

a.tablo{
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
cursor:pointer;
background:#F2F4F2;
width:60px;
font:8px tt;
padding:3px;
text-decoration:none;
color:#555;
display:inline-block;
text-align:center;
}
a.tablo:hover{background:#FF7171;color:#fff;}

.h2{
background:#eee;
width:110px;
color:#fff;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
font:8px tt;
margin-bottom:-25px;
padding:10px;
text-align:center;
margin-left:100px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;}

.h3{
background:#D2EEF8;
width:110px;
font:8px tt;
margin-bottom:-5px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
padding:10px;
text-align:center;
margin-left:230px;-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.header{width:952px;border:1px solid #d7d7d7;height:40px;line-height:20px;font:40px le;color:#A4A4A4;background:url(http://1.bp.blogspot.com/-6wMuhvKip5w/UxLYYKEGBrI/AAAAAAAAHcA/FoXVat6RvVA/s1600/03+-+Pgk1cjM.png);border-bottom:none;margin-bottom:-30px;}
@font-face{
font-family:le;
src:url(http://static.tumblr.com/dep4vzc/B9rmy7mca/lemons_can_fly.ttf);}

a.navi{
 display: inline-block;
    margin: 4px;
    width: 110px;
    text-align: center;
    font-family: tinytots;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 8px;
    padding: 5px;
    background-color: #f8f8f8;
    color: #555;
    box-shadow: 2px 2px 2px #eee;
    border-radius: 4px;
}

.navi:hover {
    background-color: #A4A4A4;
    color: #fff;
}

</style>
<br><br><br>
<center><div class="header">
</div></center>

</head>

<div align="center">
<center>
<table border="0" cellspacing="0" cellpadding="20">
</center>

<tr>

<td valign="top" width="275">


<center><img src="http://40.media.tumblr.com/ff6233e6e03e8bd4c98cf04cb1476735/tumblr_n0p614Soup1truecro1_500.png" align="center" style="width:270px; padding: 5px;border: 1px solid #d7d7d7; padding-bottom:30px;"></center>

<center>
<div style="background:url(http://1.bp.blogspot.com/-6wMuhvKip5w/UxLYYKEGBrI/AAAAAAAAHcA/FoXVat6RvVA/s1600/03+-+Pgk1cjM.png);width:270px;padding:2px;  ">
</div>
<a class="tablo" onclick="document.getElementById('main').innerHTML=document.getElementById('a').innerHTML" >Post</a>
<a class="tablo" onclick="document.getElementById('main').innerHTML=document.getElementById('b').innerHTML" >About</a>
<a class="tablo" onclick="document.getElementById('main').innerHTML=document.getElementById('c').innerHTML" >Tutorials</a>
<a class="tablo" onclick="document.getElementById('main').innerHTML=document.getElementById('d').innerHTML" >Link</a>

<div style="background:url(http://1.bp.blogspot.com/-6wMuhvKip5w/UxLYYKEGBrI/AAAAAAAAHcA/FoXVat6RvVA/s1600/03+-+Pgk1cjM.png);width:270px;padding:2px; margin-top:5px; ">
</div></center><br>

replace this<br></br>
</div>

<div class="pocetit">Talk;</div><br>
your cbox codes
<br>
</div>
</div><br>

<div class="pocetit">Memory;</div>

<div style="text-align:left; padding:10px; border-radius:0px; height:200px; overflow-x:hidden; overflow-y:Scroll; border-radius:5px;border:1px solid #f1f1f1;margin-top:20px;">
<bloggerpreviousitems>
<a  href="<$BlogItemPermalinkURL$>">
<div class="archive">
<$BlogPreviousItemTitle$></div>
</a></BloggerPreviousItems></div>

</div><br>

<div class="pocetit">Credit;</div><br>

<img src="http://2.bp.blogspot.com/-W8nD13j0L6E/TxK0nM-9htI/AAAAAAAAB-c/aK3qgEhaYU4/s1600/11.jpg" align="left" style="width:50px; padding: 5px;">

  © 23 Jan 2016 - Skins by <b><a href="http://umihumairayusof.blogspot.com">uhbmy</a></b> Cute icon from <b><a href="http://pixel-diary.tumblr.com/">Pixel</a></b></b>
</div></div></td>

</div>

<td id="main" valign="top" style="width:590px; padding-left:13px; border-left:1px dotted #f7f7f7; padding-right:13px; ">

<Blogger>
</div><div class="h2"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader></div><div class="h3"><a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>> <$BlogItemCommentCount$> Comments</a></BlogItemCommentsEnabled></div><div class="umi"><$BlogItemTitle$></div></br><$blogitembody$><div class="post-footer"></div>


</p>

<itempage>
  <div id="comments" style="margin-top:5px;">
 <blogitemcommentsenabled><a name="comments"></a>
<dl id="comments-block">
<div style="width:570px; padding:1px;margin-top:-20px;">
      <$CommentPager$>
      <blogitemcomments>
<dt class="comment-data" id="<$BlogCommentAnchorName$>"><a name="<$BlogCommentAnchorName$>"></a>
 <$I18NCommentAuthorSaid$></dt>
<dd class="comment-body">
        <p>
<$BlogCommentBody$></p>
<$BlogCommentDeleteIcon$>
      </dd>
   </BlogItemComments>
    <$CommentPager$>
    </dl>
<p class="comment-timestamp">
<$BlogItemCreate$>
    </p>
</ItemPage>


</Blogger>
</td>

<td id="a" style="display: none;">

<Blogger>
</div><div class="h2"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader></div><div class="h3"><a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>> <$BlogItemCommentCount$> Comments</a></BlogItemCommentsEnabled></div><div class="umi"><$BlogItemTitle$></div></br><$blogitembody$><div class="post-footer"></div>
</br>


<itempage>
  <div id="comments" style="margin-top:5px;">
 <blogitemcommentsenabled><a name="comments"></a>
<dl id="comments-block">
<div style="width:570px; padding:1px;margin-top:-20px;">
      <$CommentPager$>
      <blogitemcomments>
<dt class="comment-data" id="<$BlogCommentAnchorName$>"><a name="<$BlogCommentAnchorName$>"></a>
 <$I18NCommentAuthorSaid$></dt>
<dd class="comment-body">
        <p>
<$BlogCommentBody$></p>
<$BlogCommentDeleteIcon$>
      </dd>
   </BlogItemComments>
    <$CommentPager$>
    </dl>
<p class="comment-timestamp">
<$BlogItemCreate$>
    </p>
</ItemPage>


</Blogger>
</div>
</td>

<td id="b" style="display: none;">

<div class="umi">About;</div><br>

<center><img src="https://41.media.tumblr.com/ad9651a149e9dd842c181cf8227d68f5/tumblr_o0w5xlT6e51rprpe9o1_540.jpg" align="center" style="width:270px; padding: 5px;border: 1px solid #f1f1f1; padding-bottom:30px;"></center>
<center>
<a class="tablo" href="link">Ask.fm</a>
<a class="tablo" href="link">Twitter</a>
<a class="tablo" href="link">Instagram</a></center><br>

<b>Basic about me</b><br>
place this section with yours


</td>

<td id="c" style="display: none;">

<div class="umi">Tutorials;</div><br>

<div class="h1">Tutorials</div>
<a class="jeonjin1" href="">Tutorial</a>
<a class="jeonjin1" href="">Tutorial</a>
<a class="jeonjin1" href="">Tutorial</a>
<a class="jeonjin1" href="">Tutorial</a>
<a class="jeonjin1" href="">Tutorial</a>
<a class="jeonjin1" href="">Tutorial</a>
<a class="jeonjin1" href="">Tutorial</a>
<a class="jeonjin1" href="">Tutorial</a>
<br><br>

<div class="h1">Tutorial</div>
<a class="jeonjin1" href="">Tutorial</a>
<a class="jeonjin1" href="">Tutorial</a>
<a class="jeonjin1" href="">Tutorial</a>
<a class="jeonjin1" href="">Tutorial</a>
<a class="jeonjin1" href="">Tutorial</a>
<a class="jeonjin1" href="">Tutorial</a></div>
</div>

<div id="d" style="display:none;">
<div class="umi">Link;</div><br>
<a class="navi" href="LINK">inspirit</a>
<a class="navi" href="LINK">inspirit</a>
<a class="navi" href="LINK">inspirit</a>
<a class="navi" href="LINK">inspirit</a>
<a class="navi" href="LINK">inspirit</a>
<a class="navi" href="LINK">inspirit</a>
<a class="navi" href="LINK">inspirit</a>
<a class="navi" href="LINK">inspirit</a>
</td>

<br><br/>
<table style="border:1px solid #d7d7d7;border-top:none;background:url(http://1.bp.blogspot.com/-6wMuhvKip5w/UxLYYKEGBrI/AAAAAAAAHcA/FoXVat6RvVA/s1600/03+-+Pgk1cjM.png);height:100px;width:955px;">
</table>
</body>
<br><br><br>
</html>