; Blogskins Codes
BS ; 09 // Secret





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

<base target='_blank'/><title>; Secret ♥</title>

<style type="text/css">

#navbar-iframe {display: none;}

body{
background:#fff;
font: 13px Shadows Into Light Two;
line-height:1.25;
color:#ddd;}

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

::-webkit-scrollbar {width: 3px;}
::-webkit-scrollbar-button:start:decrement{height:0px; display:block; background:none;}
::-webkit-scrollbar-button:end:increment{height:0px; display: block; background:none;}
::-webkit-scrollbar-track-piece {background-color:#ddd;}
::-webkit-scrollbar-thumb{ background:#fff;}

a:link,a:visited {
text-decoration:none;
padding:2px;
color:#eee;
text-shadow:0px 0px #ddd;
-webkit-transition: .5s;
-moz-transition: .5s;
}
a:hover {
color:#b9b9b9;
text-shadow:2px 2px #eee;
-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(90deg);
-webkit-transition: .5s;
-moz-transition: .5s;}

u{
text-decoration:underline;
border-bottom:1px dashed #eee;
-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:left;
border-bottom:1px dashed #ddd;}

.page-title {
margin:0px 0px 10px;
height:26px;
font:28px emis;
text-align:left;
border-bottom:1px dashed #ddd;}


/* Other
----------------------------------------------- */
blockquote {
border: 2px dashed transparent;
-moz-border-image: -moz-linear-gradient(left, #ddd , rgba(255,255,255,0));
-webkit-border-image: -webkit-linear-gradient(left, #ddd , rgba(255,255,255,0));
border-image: linear-gradient(to right, #ddd, rgba(255,255,255,0));
border-image-slice: 1;
padding:5px;
padding-left:10px;
box-shadow: inset 0 0px 0 0 #eee;
text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
-webkit-transition: .8s;
-moz-transition: .8s;
}
blockquote:hover {
box-shadow: inset 1000px 0 0 0 rgba(255,255,255,0);
-webkit-transition: 1.3s;
-moz-transition: 1.3s;}

.left {
position:fixed;
z-index:9999;
height:100%;
width:22px;
left:0;
top:0;
background:#ddd;}

.right {
position:fixed;
z-index:9999;
height:100%;
width:22px;
right:0;
top:0;
background:#ddd;}

.top {
position:fixed;
z-index:9999;
height:22px;
width:100%;
right:0;
top:0;
background:#ddd;}

.bottom {
position:fixed;
z-index:9999;
height:22px;
width:100%;
right:0;
bottom:0;
background:#ddd;}

#credit {
position:fixed;
top:170px;
left:290px;
background:#fff;
border:1px dashed #ccc;
width:220px;
height:175px;
padding:5px;
font-family:etiny;
font-size: 8px;
text-align: left;
line-height:9px;}

#info {width: 220px;height: 175px;overflow: hidden;}


/* links
----------------------------------------------- */
a.li {
text-align:center;
border:1px dashed #eee;
padding: 2px;
display:inline-block;
width:100px;
margin: 2px;
background: #fff;
overflow: hidden;}

/* Date
----------------------------------------------- */
#date ,#on{
-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;
color:#fff;
padding:2px;
padding-left:5px;
margin-top:-10px;
left:620px;
position:fixed;
BACKGROUND:#ccc;}

#date a , #on a{color:#fff;}

#date::after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-bottom-color: #ccc;
border-width: 4px;
margin-left: -55px;
margin-top:-22px;}

#on::after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-bottom-color: #ccc;
border-width: 4px;
margin-left: -43px;
margin-top:-22px;}

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

#main:hover #on{
opacity:1;
margin-top:48px;}

.container {
top:50px;
left:620px;
width:600px;
position:absolute;}

/* navi
----------------------------------------------- */
.navi {position:relative; width:auto;}
.naviimage{
width: 100px;
height: 160px;
background:url(https://i.imgur.com/ytLctnv.gif)no-repeat;
background-size:100px 160px;
-webkit-mask-image: url(https://i.imgur.com/bkybwb8.gif);
-webkit-mask-size:100px 160px ;}

.title {
font-size:11px;
color:#a5a5a5;
text-transform:uppercase;
margin-top:12px;
letter-spacing:1.5px;
text-align:center;
width:110px;}

.navis {
overflow:hidden;
width:110px;
font-size:9px;
color:#ccc;
letter-spacing:1.5px;
text-transform:uppercase;
text-align:center;}

.navis li {
background:#ffffff;
border-top:1px solid #eeeeee;
padding:5px;
margin-bottom:-1px;}

.navis li:last-child {
border-radius: 0 0 3px 3px;;
-o-border-radius: 0 0 3px 3px;
-ms-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;}

.navis li {
-webkit-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(250px) rotateX(-90deg);
-o-transform: perspective(250px) rotateX(-90deg);
transform: perspective(250px) rotateX(-90deg);
-moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);}

.navis .first {
margin-left:80px;
-webkit-transition: 0.3s linear 0.9s;
-o-transition: 0.3s linear 0.9s;
transition: 0.3s linear 0.9s;}

.navis .second {
margin-left:-80px;
-webkit-transition: 0.3s linear 0.7s;
-o-transition: 0.3s linear 0.7s;
transition: 0.3s linear 0.7s;}

.navis .third {
margin-left:80px;
-webkit-transition: 0.3s linear 0.5s;
-o-transition: 0.3s linear 0.5s;
transition: 0.3s linear 0.5s;}

.navis .fourth {
margin-left:-80px;
-webkit-transition: 0.3s linear 0.3s;
-o-transition: 0.3s linear 0.3s;
transition: 0.3s linear 0.3s;}

.navis .five {
margin-left:80px;
-webkit-transition: 0.3s linear 0.1s;
-o-transition: 0.3s linear 0.1s;
transition: 0.3s linear 0.1s;}

.navi:hover .navis li {
margin-left:0px;
-webkit-transform: perspective(350px) rotateX(0deg);
-o-transform: perspective(350px) rotateX(0deg);
transform: perspective(350px) rotateX(0deg);
-webkit-transition: 0.3s linear 0s;
-o-transition: 0.3s linear 0s;
transition: 0.3s linear 0s;}

.navi:hover .navis .second {
margin-left:0px;
-webkit-transition-delay: 0.15s;
-o-transition-delay: 0.15s;
transition-delay: 0.15s;}

.navi:hover .navis .third {
margin-left:0px;
-webkit-transition-delay: 0.35s;
-o-transition-delay: 0.35s;
transition-delay: 0.35s;}

.navi:hover .navis .fourth {
margin-left:0px;
transition-delay: 0.55s;
-o-transition-delay: 0.55s;
transition-delay: 0.55s;}

.navi:hover .navis .five {
margin-left:0px;
transition-delay: 0.75s;
-o-transition-delay: 0.75s;
transition-delay: 0.75s;}
ul, li {margin: 0;padding: 0;list-style-type: none;}
.sfm input {
background-color: #ffffff;
font: 8px Shadows Into Light Two;
text-transform: uppercase;
width:70px;
border:none;
margin-top:0px;
margin-left:0px;
text-align:center;
color:#767b7e;
letter-spacing:1.5px;
padding: 3px 3px;}

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


@font-face {
font-family: "emis";
src: url('https://dl.dropbox.com/s/a07ffjz27mpyt56/Mistress.ttf'); }

</style>

<div class="right"></div>
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>

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

<div style="position:fixed;top:25px; left:25px;">
<embed src="https://www.sheepproductions.com/billy/billy.swf?autoplay=false&f0=MP3/MUSIC LINK&t0=NAME OF SONG&f1=MP3/MUSIC LINK2&t1=NAME OF SONG 2&total=2" quality="high" wmode="transparent" width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" /></div>

<!-------------------desc----------------------->
<div id="credit">
<div style="position: absolute; margin-top: -9px; margin-left: -12px; color: #ccc; font-size: 30px;">◤</div>
<div style="position: absolute; margin-top: -9px; margin-left: 208px; color: #ccc; font-size: 30px;">◥</div>
<div id="info"><center><span style="font:12px Shadows Into Light Two;">* <a href="https://www.blogger.com/follow-blog.g?blogID=YOUR BLOG ID HERE" title="">FOLLOW</a> * <a href="https://www.blogger.com/home" title="">HOME</a> *</span></center>
<br>>> Blog Designer; <a href="https://elaine0211.blogspot.com/">BabeX e.ling</a>
<br>>> Redesign; <a href="BLOG URL">Your Name</a>
<br>>> Navi; <a href="https://mrsmilicevic.tumblr.com/">Jennie</a>
<br>>> Tutorial; <a href="https://tympanus.net/codrops/">Tympanus</a>
<br>>> Best Viewed In Google Chrome.
<br><br>CBOX CODE HERE *width:220px height:70px</div>
<div style="position: absolute; margin-top: -8px; margin-left: -12px; color: #ccc; font-size: 30px;">◣</div>
<div style="position: absolute; margin-top: -8px; margin-left: 208px; color: #ccc; font-size: 30px;">◢</div>
</div>

<!-------------------navi----------------------->
<div class="navi" style="position:fixed;left:120px;top:110px;">
<div class="naviimage"></div>
<div class="title">Secret</div>
<div class="navis">
<li class="first"><a class="" onClick="document.getElementById('main').innerHTML=document.getElementById('entry').innerHTML" >Entry</a></li>
<li class="second"><a class="" onClick="document.getElementById('main').innerHTML=document.getElementById('about').innerHTML">About</a></li></a>
<li class="third"><a class="" onClick="document.getElementById('main').innerHTML=document.getElementById('link').innerHTML" >Bloggie</a></li>
<li class="fourth"><a class="" onClick="document.getElementById('main').innerHTML=document.getElementById('stuff').innerHTML" >Stuff</a></li>
<li class="five"><form action="/search" method="get" class="sfm" name="theform"><input type="text" name="q" value='' placeholder="Search"/>
</form></li>
</div></div>

<div class="container">
<Blogger><div id="main"><div id="date"><BlogDateHeader><$BlogDateHeaderDate$> </BlogDateHeader><$BlogItemDateTime$> || <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> love(s)</a></BlogItemCommentsEnabled></div>
<div id="on"><a class="option" href=<$NewerPosts$>><< Newer</a></NewerPosts> //  <OlderPosts><a class="option" href=<$OlderPosts$>>Older >></a> </OlderPosts></div>
<div class="post-title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<p><$BlogItemBody$></p>
</Blogger>
</div></div>

<!-------------------PAGE1----------------------->
<div id="entry" style="display: none;">
<blogger><div id="date"><BlogDateHeader><$BlogDateHeaderDate$> </BlogDateHeader><$BlogItemDateTime$> || <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> love(s)</a></BlogItemCommentsEnabled></div>
<div id="on"><a class="option" href=<$NewerPosts$>><< Newer</a></NewerPosts> //  <OlderPosts><a class="option" href=<$OlderPosts$>>Older >></a> </OlderPosts></div>
<div class="post-title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<p><$BlogItemBody$></p>
</Blogger>
</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">Beloved Bloggie</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 ; 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