; Blogskins Codes
BS ; 10 // Blossom





<!---------------------------------------------------------------------------
Don't COPY Any Code From This Template ! 101% Made & Create By Elaine0211 !
Designed By; Elaine0211
Designer's Blog; http://elaine0211.blogspot.com/
Date Of Design; 16.03.15 -- 20.03.15
---------------------------------------------------------------------------!>
<HTML><head>
<link href='http://fonts.googleapis.com/css?family=Imprima' rel='stylesheet' type='text/css'>

<base target='_blank'/><title>; Blossom</title>

<style type="text/css">

#navbar-iframe {display: none;}

body{
background:url(http://i.imgur.com/bZF6rTb.jpg) #f6f3ec fixed no-repeat right bottom;
background-size:290px;
font: 13px Imprima;
line-height:1.25;
color:#e7ceb6;}

::-moz-selection {
background:#fff;
color:#fff;
text-shadow: 0px 2px #f6f3ec;}
::selection {
background:#fff;
color:#fff;
text-shadow: 0px 2px #f6f3ec;}

::-webkit-scrollbar {width: 8px;}
::-webkit-scrollbar-button:start:decrement{height:8px; display:block;}
::-webkit-scrollbar-button:end:increment { height:8px; display: block;}
::-webkit-scrollbar-track-piece {background-color:#f6f3ec;}
::-webkit-scrollbar-thumb{ background:#fff0f0;border:2px solid #f6f3ec;}

a:link,a:visited {
text-decoration:none;
padding:2px;
color:#ebd0b8;
text-shadow:8px 0 rgba(255,255,255,0), -8px 0 rgba(255,255,255,0);
-webkit-transition: .5s;
-moz-transition: .5s;
}
a:hover {
color:#dfc8b4;
text-shadow:0px 0 #f0e2d5, 0px 0 #f0e2d5;
-webkit-transition: .5s;
-moz-transition: .5s;}

b{
text-decoration:bold;
-webkit-filter: hue-rotate(0deg);
-webkit-transition: .5s;
-moz-transition: .5s;}
b:hover{
-webkit-filter: hue-rotate(270deg);
-webkit-transition: .5s;
-moz-transition: .5s;}

u{
text-decoration:underline;
border-bottom:1px dashed #ebd0b8;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;}

u:hover{
padding-left:6px;
border-bottom:3px double #fff;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;}

i{-webkit-transition: .4s;}
i:hover{letter-spacing:2px;-webkit-transition: .4s;}

.post-title {
margin:0px 0px 5px;
height:18px;
text-align:center;
border-bottom:1px solid #ebd0b8;
}

.page-title{
text-align:center;
font:14px eexc;
border-bottom:1px solid #ebd0b8;
}

/* Other
----------------------------------------------- */
blockquote {
border: 2px solid #ebd0b8;
padding:5px;
padding-left:10px;
-webkit-transition: .8s;
-moz-transition: .8s;
}

a.li {
border:3px double #ebd0b8;
padding: 3px;
display:inline-block;
width:100px;
margin: 2px;
background: #fff;
-webkit-background-clip: none;
-webkit-text-fill-color: ##ebd0b8; }

#date{
-webkit-transition:All 0.6s ease;
-moz-transition:All 0.6s ease;
-o-transition:All 0.6s ease;
opacity:0;
font-family:etiny;
font-size:8px;
padding:2px;
margin-top:0px;
left:6px;
position:fixed;
BACKGROUND:#fff;
border:1px solid #f6f3ec;
border-left:0px solid #fff;
border-radius:0 0 8px 0;
}

#main:hover #date{
opacity:1;
margin-top:26px;}


/* navi
----------------------------------------------- */
.navibar {
height: 50px;
position: fixed;
left: 0px;
z-index: 999;
top: 0px;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;}

.navibg {
background:#f6f3ec;
opacity:0.8;
width: 620px;
height: 60px;
position: absolute;
left: 5px;
bottom: 0px;
overflow: hidden;}

.navibg2 {
width: 1000px;
position: absolute;
bottom: -3px;
left: 0px;}

.last {
display:inline-block;
background: #caa380;
width: 480px;
height: 4px;
overflow:hidden;}

.navi1, .navi2, .navi3, .navi4{
display:inline-block;
width:25px;
height:10px;
padding:15px 5px;
margin-left: 0px;
overflow:hidden;
-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;}

.navi1:hover, .navi2:hover, .navi3:hover, .navi4:hover{width:90px;}
.navi1 {border-bottom: 4px solid #f6e7d9;}
.navi2 {border-bottom: 4px solid #ead8c8;}
.navi3 {border-bottom: 4px solid #dcbea3;}
.navi4 {border-bottom: 4px solid #d1ac8c;}

.dive, .dive_2, .dive_3, .dive_4 {
text-align: center;
max-width: 90px;
font:16px eexc;
color: #e7ceb6;
opacity: 0;
-webkit-transition: all .6s ease;
-moz-transition:all .6s ease;
-o-transition:  all .6s ease;
-ms-transition: all .6s ease;
transition: all .6s ease;
-webkit-transition-delay: 0s;
transition-delay: 0s;}

.navi1:hover .dive, .navi2:hover .dive_2, .navi3:hover .dive_3, .navi4:hover .dive_4{
-webkit-transition-delay: .5s;
transition-delay: .5s;
opacity: 1;}

/* desc
----------------------------------------------- */
.desc {
position: absolute;
width: 240px;
height: 160px;
margin: 0px;
overflow: hidden;
background: #fff;
border-top:4px solid #caa380;}

.desc:hover .picture {
margin-top: 165px;
-webkit-transition-delay: 0s;
transition-delay: 0s;}

.picture {
z-index: 2;
position: absolute;
width: 240px;
height: auto;
margin: 0px;
-webkit-transition: .8s;
transition: .8s;
-webkit-transition-delay: .8s;
transition-delay: .8s;}
.picture img {width: 240px;height: auto;}

.description {
position: absolute;
padding: 10px;
width: 230px;
height: 150px;
margin: 0px;
font-family:etiny;
font-size: 8px;
text-align: left;
line-height: 9px;
overflow: auto;
opacity: 0;
-webkit-transition: .8s;
transition: .8s;
-webkit-transition-delay: 0s;
transition-delay: 0s;}

.desc:hover .description {
opacity: 1;
-webkit-transition-delay: .5s;
transition-delay: .5s;}

@font-face {
font-family: "etiny";
src: url('https://dl.dropbox.com/s/t74az3yznkqxe3o/tinytots.ttf'); }

@font-face {
font-family: "eexc";
src: url('https://dl.dropbox.com/s/0uxc77rlb69ubaz/TheOnlyException.ttf'); }

</style>

<script language="JavaScript">
document.ondragstart = function () { return false; };
</script>

<div style="position:fixed;top:-22px;right:0px;"><img src="http://i.imgur.com/dbXtB6A.png" width="430px"></div>

<!-------------------desc----------------------->
<div style="position:fixed; top:100px;left:700px;">
<div class="desc">
<div class="picture"><img src="http://i.imgur.com/RuxmVWr.jpg"></div>
<div class="description">
<a href="http://www.blogger.com/follow-blog.g?blogID=Your Blog ID" title="">Follow</a> || <a href="http://www.blogger.com/home" title="">Home</a>
<br>>> Blog Designer; <a href="http://elaine0211.blogspot.com/">BabeX e.ling</a>
<br>>> ReDesign; <a href="Blog URL">Your Name</a>
<br>>> Navi & Sidebar; <a href="http://nff-themes.tumblr.com/">NFF</a>
<br>>> Picture; <a href="http://topit.me/">Topit</a>
<br>>> Best Viewed In Google Chrome.
<br><br>Cbox Code Here *width:220px height:70px</div>
</div></div>

<!-------------------navi----------------------->
<div class="navibar">
<div class="navibg">
<div class="navibg2">
<a class="" onClick="document.getElementById('main').innerHTML=document.getElementById('entry').innerHTML" >
<div class="navi1">
<div class="dive">Entry</div></div></a>

<a class="" onClick="document.getElementById('main').innerHTML=document.getElementById('about').innerHTML">
<div class="navi2">
<div class="dive_2">About</div></div></a>

<a class="" onClick="document.getElementById('main').innerHTML=document.getElementById('link').innerHTML" >
<div class="navi3">
<div class="dive_3">Bloggie</div></div></a>

<a class="" onClick="document.getElementById('main').innerHTML=document.getElementById('stuff').innerHTML" >
<div class="navi4">
<div class="dive_4">Stuff</div>
</div></a>
<div class="last"></div>
</div></div></div>

<!-------------------post----------------------->
<div style="position:absolute; left:6px; top:50px; overflow-x:hidden; overflow-y:hidden; background:url(http://i.imgur.com/IwF3qwq.png) #fff no-repeat bottom right;  background-size:100px;width:599px; padding:10px;">
<Blogger><div id="main"><div id="date"><BlogDateHeader><$BlogDateHeaderDate$> </BlogDateHeader><$BlogItemDateTime$> || <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> love(s)</a></BlogItemCommentsEnabled></div>
<div class="post-title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<p><$BlogItemBody$></p>
</Blogger>
<center><span style="font-family:etiny; font-size:8px;"><NewerPosts><a href=<$NewerPosts$>>Newer</a></NewerPosts> // <OlderPosts><a href=<$OlderPosts$>>Older</a></OlderPosts></span></center>
</div></div>

<!-------------------PAGE1----------------------->
<div id="entry" style="display: none;">
<blogger><div id="date"><BlogDateHeader><$BlogDateHeaderDate$> </BlogDateHeader><$BlogItemDateTime$> | <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> comments</a></BlogItemCommentsEnabled></div>
<div class="post-title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<p><$BlogItemBody$></p>
</Blogger>
<center><span style="font-family:etiny; font-size:8px;"><NewerPosts><a href=<$NewerPosts$>>Newer</a></NewerPosts> // <OlderPosts><a href=<$OlderPosts$>>Older</a></OlderPosts></span></center>
</div>

<!-------------------PAGE2----------------------->
<div id="about" style="display: none;">
<div class="page-title">Da' Owner</div>
<br>
<center>
<br># Name :
<br># Age :
<br># Birthday :
<br># Tumblr :
<br># Blog :
<br># Facebook :
<br>--- Replace with your profile ---
</center>
</div>

<!-------------------PAGE3----------------------->
<div id="link" style="display: none;">
<div class="page-title">Links</div>
<br>
<center>
<br><br>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
<br>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
<br><br><br><br>
</center>
</div>

<!-------------------PAGE4----------------------->
<div id="stuff" style="display: none;">
<div class="page-title"> Stuff </div>
<br>
<b> Tutorial ; </b>
<br><br>
↘ <a href="URL">List 1</a><br>
↘ <a href="URL">List 2</a><br>
↘ <a href="URL">List 3</a><br>
↘ <a href="URL">List 4</a><br>
↘ <a href="URL">List 5</a><br>
<br><br>
<b> Material ;</b>
<br><br>
↘ <a href="URL">List 1</a><br>
↘ <a href="URL">List 2</a><br>
↘ <a href="URL">List 3</a><br>
↘ <a href="URL">List 4</a><br>
↘ <a href="URL">List 5</a><br>
<br><br>
<blockquote class="tr_bq">Coming Soon..</blockquote>
</div>

<!-------------------------- END ----------->

Other Blogskins templete :

» BS ; 09 // Secret
» BS ; 08 // Bunny Bunny
» BS ; 07 // Forever Friend
» BS ; 06 // Hi Darling
» BS ; 05 // Paris Lovee
» BS ; 04 // f(x) - Red Light
» BS ; 03 // Beloved Café
» BS ; 02 // Memories
» BS ; 01 // My love - Winnie

© 2012-2020 Designed By Elaine0211