Mitsuno Hanna Preview

<html>
<head>

<title>Watashiwa Kawaii</title><link rel="shortcut icon" href="http://media.tumblr.com/tumblr_lkl647v8OI1qfamg6.gif">
<style type="text/css">
#navbar-iframe {
display: none;
}

body {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaa79IBHeKMvb7kApL37AdWG0_mzPv53H4YHypetY20_Xu7LZrHLH2uQ8afl8MVxptKUZjJs8S0WYN2QJMZsBIY_GQpcpW61hwRytb_S-VYAQQ2MJvgfuClOhvRfmEGUnG93x9PmJUmruD/s1600/tumblr_ls0w5txuft1r3vazto8_250.png);
font-family: trebuchet ms;
font-size: 11px;
text-align: left;
}

a:link,a:visited{
text-decoration:none;
color:#aaa;-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 #eee;
padding:2px;
}
a:hover{
color:#fff;
box-shadow:inset 0 50px 8px #eee;
}

.title {
color: #fff;
font-family: trebuchet ms;
font-size:10px;
line-height:17px;
text-align: left;
background: #f0f0f0;
text-transform: uppercase;
letter-spacing: 5px;
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
padding-bottom: 2px;
width: auto;
position: absolute;
}

.title1 {
font-family: consolas;
font-size:10px;
text-transform: uppercase;
line-height:20px;
color: #ddd;
margin-bottom: 20px;
text-align: right;
background: #f9f9f9;
padding-right: 5px;
}

blockquote{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRgQ1oOGFTciqgDvKuCdE4TQhmEjq9Ulk1J4F_TXS0Ohk0A_owZnDFwwzxormvCvlQ0bUu-3ls1L5Kukkltthyphenhyphen6Yz5Trzya87-w4SN9TRvB7laamrLn8ZsStG0Ef7JgKlVlbm-SY_2Xryj/s1600/grey.png);
padding:10px;
border:3px solid #d1d2d3;
color:#808080;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}

blockquote:hover{
border-radius:20px;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
-webkit-box-shadow: 0px 0px 8px #ffd5d5;
-moz-box-shadow: 0px 0px 8px #ffd5d5;
box-shadow: 0px 0px 8px #ffd5d5;
}

.nav{
width:90px;
padding:4px;
margin:2px;
background:#d1d2d3;
font:8px tt;
text-align:center;
Text-decoration:none;
color:#fff;
text-transform:uppercase;
display:inline-block;
-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;
border-right:20px solid #aaa;
}

.nav:hover{
width:110px;
background:#aaa;
color:#fff;
border-right:0px solid #aaa;
}
@font-face {
font-family:tt !important;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf') !important;
}

.sidebar {
position: fixed;
top:1px;
left: 90px;
width: 250px;
background: transparent;
padding: 10px;
color: #aaa;
font-size: 10px;
font-family: century gothic;
}

.sidebar1 {
position: fixed;
top:250px;
left: 90px;
width: 250px;
background: #fff;
padding: 10px;
color: #aaa;
border: 1px solid #f0f0f0;
font-size: 10px;
font-family: century gothic;
}

.sidebar2 {
position: fixed;
top: 550px;
left: 90px;
width: 250px;
background: #fff;
padding: 10px;
color: #aaa;
border: 1px solid #f0f0f0;
font-size: 10px;
font-family: century gothic;
}
.sidebar3 {
position: fixed;
top: 550px;
left: 90px;
width: 250px;
background: #fff;
padding: 10px;
color: #aaa;
border: 1px solid #f0f0f0;
font-size: 10px;
font-family: century gothic;
}

img {
padding: 2px;
border: 1px solid #ddd;
-webkit-transition: 0.5s;
}

img:hover {
opacity: 0.85;
-webkit-transition: 0.5s;
}

a.older {
background: #fff;
color: #ddd;
padding: 2px;
position: fixed;
bottom: 40px;
left: 90px;
width: 30px;
text-align: center;
border: 1px solid #eee;
-webkit-transition: 0.5s;
}

a.older:hover {
color: #fff;
-webkit-transition: 0.5s;
text-decoration: none;
}

a.newer {
background: #fff;
color: #ddd;
padding: 2px;
position: fixed;
bottom: 40px;
left: 327px;
width: 30px;
text-align: center;
border: 1px solid #eee;
-webkit-transition: 0.5s;
}

a.newer:hover {
color: #fff;
-webkit-transition: 0.5s;
text-decoration: none;
}

.blogger-labels a {
background: #f8f8f8;
color: #aaa;
padding: 3px;
font: 10px century gothic;
text-transform: uppercase;
margin-left: -6px;
text-align: right;
}

.blogger-labels {
color: transparent;
border-top: 1px dashed #ddd;
line-height: 33px;
text-align: right;
}

b {
color: #ccc;
}

.entry:hover {
text-decoration: underline;
cursor: pointer;
}

a.link {
width: 100px;
display: inline-block;
padding: 3px;
border: 2px solid #ddd;
color: #ccc;
-webkit-transition: 0.5s;
text-transform: uppercase;
font: 11px candara;
margin-bottom: 5px;
}

a.link:hover {
-webkit-transition: 0.5s;
color: #aaa;
border: 2px solid #aaa;
text-decoration: none;
}

::-webkit-scrollbar {
height: 12px;
width: 7px;
background: #fff;
}
::-webkit-scrollbar-thumb {
background-color: #f0f0f0;
-moz-border-radius: 10px;
border-radius: 10px;
border: 1px solid #fff;
}

::selection {
background: #f0f0f0;
color: #aaa;
}
.ch-grid {
margin: 3px 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: 315px;
height: 320px;
display: inline-block;
margin: 20px;
}

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

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

.ch-img{
background-image: url(http://25.media.tumblr.com/43a2f6dd9a993bfc7e4048ece11f779c/tumblr_mlst5wlyZW1r66meko1_500.png);
background-position:50% 50%;
background-size:500px;
}

.ch-info {
position: absolute;
background: url(http://25.media.tumblr.com/43a2f6dd9a993bfc7e4048ece11f779c/tumblr_mlst5wlyZW1r66meko1_500.png) D9E8FC;background-position:50% 50%;
width: inherit;
height: inherit;
border-radius: 50%;
opacity: 0;

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

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

-webkit-backface-visibility: hidden;

}

.ch-item:hover {
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.1),
0 1px 2px rgba(0,0,0,0.1);
}
.ch-item:hover .ch-info {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}

.ch-item:hover .ch-info p {
opacity: 1;
}
</style>
</head>

<center><a class="older" href=<$OlderPosts$>>◀</a></OlderPosts> <a class="newer" href=<$NewerPosts$>>▶</a></NewerPosts></center>

<table style="font-size: 11px; color: #aaa; letter-spacing: 1px; line-height: 17px;border-radius:0px;"align="center" border="0">

<tbody><tr>

<td valign="top" style="line-height:15px; letter-font-size:10px; width:250px; padding-right:10px;">

<div class="sidebar">
<ul class="ch-grid">
<li> <div class="ch-item ch-img">
<div class="ch-info">
<center>
<div style="margin-top:100px; width:270px;background:#FFFF; border-radius:10px;">
<br/>
<center><a class="nav" onClick="document.getElementById('entry').innerHTML=document.getElementById('about').innerHTML">ABOUT</a>
<a class="nav" onClick="document.getElementById('entry').innerHTML=document.getElementById('board').innerHTML">EXTRAS</a>
<a class="nav" onClick="document.getElementById('entry').innerHTML=document.getElementById('links').innerHTML">LINKIES</a>
<a class="nav" onClick="document.getElementById('entry').innerHTML=document.getElementById('stuffs').innerHTML">TUTOBIES</a>
<a class="nav" href="http://www.blogger.com/follow-blog.g?blogID=YOURBLOGID">+FOLLOW</a>
<a class="nav" href="http://www.blogger.com/home">DASD</a></center></div>
</center>
</div>
</div>
</li>
</ul>

<div class="sidebar1">

<center><img style="border: 0px solid #000; opacity: 1.0;" src="http://24.media.tumblr.com/ef52d99723efea892f97113f85ac9a0d/tumblr_mnaj98eHMA1qhahtxo1_r1_500.png"width="250"></center>
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum dont forget to hover the circle for navigate! Do not remove the credits.. You can edit anything but pls do not remove the credits {<script type="text/javascript" src="http://st2.freeonlineusers.com/on2.php?id=YOURID"> </script>}

</div>

</div>

<div class="sidebar3">

<center>Skin is made by <a href="http://snow-flowerss.blogspot.com">Mitsuno</a> <a href="http://www.blogskins.com/me/MitsunoHanna/">Hanna</a></center>
<center>Basecode by <a href="http://exodusuoshi.blogspot.com/">Pika</a>
<center>Helped by { <a href="http://wanaseoby.blogspot.com/">1</a> | <a href="http://nurulatiqahjaidin.blogspot.com/">2</a> | <a href="http://tumblr.com/">3</a> }

</div>

<td valign="top" style="width:650px; padding:10px; letter-spacing: 1px; background: #fff; position: absolute; left: 400px; border: 1px solid #f0f0f0;">
<div id="entry">
<blogger><div class="title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div class="title1">Posted on <BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> @ <$BlogItemDateTime$> < <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> tomodachi</a> ></BlogItemCommentsEnabled></div>
<$BlogItemBody$>
</blogger>
</div>
</td></tr></tbody>

<div id="about" style="display: none;">
<div class="title">The Girl Inside the Blog</div>
<div class="title1">Wanna know me? // <span class="entry" onClick="document.getElementById('entry').innerHTML=document.getElementById('journal').innerHTML">back to entry</span></div><br>

<center><img src="http://25.media.tumblr.com/f26d33ee134e23eb4e7fcb7361fbf7bc/tumblr_mnqdd4wFdI1s3frmfo1_500.png"></center><br>
</center>
<BR>
<CENTER>{PUT YOUR OWN ABOUT HERE}

</div>
</table>

<div id="journal" style="display: none;">
<blogger><div class="title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div class="title1">Posted on <BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> at <$BlogItemDateTime$> < <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> tomodachi</a> ></BlogItemCommentsEnabled></div>
<$BlogItemBody$>
</blogger>
</div>

<div id="board" style="display: none;">
<div class="title">Foot Steps</div>
<div class="title1">Leave a message before you leave // <span class="entry" onClick="document.getElementById('entry').innerHTML=document.getElementById('journal').innerHTML">back to entry</span></div><br>

<center><img src="http://25.media.tumblr.com/fb822302cd69a45baa79dea5892b0801/tumblr_mnnaufAubQ1qekhpto1_500.png"></center><br>

<center>{PUT YOUR OWN CBOX CODE HERE THIS PAGE CAN BE CBOX CODE OR ANYTHING}
</center>

<div id="links" style="display: none;">
<div class="title">My friends</div>
<div class="title1">Can you visit them? // <span class="entry" onClick="document.getElementById('entry').innerHTML=document.getElementById('journal').innerHTML">back to entry</span></div><Br>

<center><img src="http://24.media.tumblr.com/tumblr_lz6w9ehHI91qdireto1_500.png"></center><br>

<Center><div style="width: 600px;">
<a class="link" href="http://snow-flowerss.blogspot.com.blogspot.com/">Shabrina</a> <a class="link" href="/">Link</a> <a class="link" href="/">Link</a> <a class="link" href="/">Link</a> <a class="link" href="/">Link</a>
<a class="link" href="/">Link</a> <a class="link" href="/">Link</a> <a class="link" href="/">Link</a> <a class="link" href="/">Link</a> <a class="link" href="/">Link</a>
<a class="link" href="/">Link</a> <a class="link" href="/">Link</a> <a class="link" href="/">Link</a> <a class="link" href="/">Link</a> <a class="link" href="/">Link</a>
<a class="link" href="/">Link</a> <a class="link" href="/">Link</a> <a class="link" href="/">Link</a> <a class="link" href="/">Link</a> <a class="link" href="/">Link</a>
<a class="link" href="/">Link</a> <a class="link" href="/">Link</a> <a class="link" href="/">Link</a> <a class="link" href="/">Link</a> <a class="link" href="/">Link</a>
</center></div>

<div id="stuffs" style="display: none;">
<div class="title">My Stuffs</div>
<div class="title1">Try My Stuffs? // <span class="entry" onClick="document.getElementById('entry').innerHTML=document.getElementById('journal').innerHTML">back to entry</span></div><br>

<center><img src="http://25.media.tumblr.com/tumblr_m3j3xnBrmY1r7petyo1_r1_500.png"></center><br>

1. TUTORIAL: <a href="/">Link</a><br>
2. TUTORIAL: <a href="/">Link</a><br>
3. TUTORIAL: <a href="/">Link</a><br>
4. TUTORIAL: <a href="/">Link</a><br>
5. TUTORIAL: <a href="/">Link</a><br>
6. TUTORIAL: <a href="/">Link</a><br>
7. TUTORIAL: <a href="/">Link</a><br>
8. TUTORIAL: <a href="/">Link</a><br>
9. TUTORIAL: <a href="/">Link</a><br>
10. TUTORIAL: <a href="/">Link</a><br><br>

1. FREEBIES: <a href="/">Link</a><Br>
2. FREEBIES: <a href="/">Link</a><Br>
3. FREEBIES: <a href="/">Link</a><Br>
4. FREEBIES: <a href="/">Link</a><Br>
5. FREEBIES: <a href="/">Link</a><Br>
6. FREEBIES: <a href="/">Link</a><Br>
7. FREEBIES: <a href="/">Link</a><Br>
8. FREEBIES: <a href="/">Link</a><Br>
9. FREEBIES: <a href="/">Link</a><Br>
10. FREEBIES: <a href="/">Link</a><Br><br>

<center>{CHANGE THIS WITH YOUR OWN STUFFS. ITS OK IF YOU WANT PUT ANYTHING BUT ITS NOT STUFFS}</center>

</div>

</body>
</html>