<!---------------------------------------------------------------------------
THIS SKIN IS TOTALLY MADE BY ME, BII. PLEASE DO NOT REMOVE THE CREDITS WHEN YOU ARE USING MY BLOGSKIN. THANKS FOR YOUR CO-OPERATION. DO EDIT THE EDITABLE PART.
BLOG OF OWNER : http://angelbii.blogspot.com/
DESIGNER: BII
DATE OF DESIGN: 29.08.13
---------------------------------------------------------------------------!>
<html>
<head>
<title>Live Out Your Life</title>
</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
//
//When you click on a link with class of poplight and the href starts with a #
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
//Pull Query & Variables from href URL
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
//Fade in the Popup and add close button
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a style="outline: none; background-color: #fff;" href="#" class="close"></a>');
//Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css
var popMargTop = ($('#' + popID).height() - 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Fade in Background
$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
return false;
});
//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove(); //fade them both out
});
return false;
});
});
</script>
<style type="text/css">
#navbar-iframe {
display: none;
}
body {
font-family: trebuchet ms;
font-size: 12px;
}
#content {
border:12px solid #F9EEE9; border-top:0px; width:518px; height:495px; left:449px; top:0px; position:fixed; padding:10px; padding-bottom:15px;
}
#nav {
margin-top: -5px;
display: inline block;
width: 30px;
height: 30px;
background: #E1ECEE;
border-radius: 50px;
-webkit-transition-duration: .7s;
}
#nav:hover {
display: inline block;
width: 30px;
height: 30px;
background: #EDF6F7;
border-radius: 50px;
-webkit-transition-duration: .7s;
}
#nav1 {
margin-top: -5px;
display: inline block;
width: 30px;
height: 30px;
background: #F1E5DC;
border-radius: 50px;
-webkit-transition-duration: .7s;
}
#nav1:hover {
display: inline block;
width: 30px;
height: 30px;
background: #F5EEE9;
border-radius: 50px;
-webkit-transition-duration: .7s;
}
.navi {
color: #F1E5DC;
width: 100px;
padding-top: 7px;
display: inline-block;
opacity: 1;
padding-left: 45px;
-webkit-transition-duration: .7s;
}
.navi:hover {
color: #F1E5DC;
width: 100px;
padding-top: 7px;
padding-bottom: 15px;
display: inline-block;
opacity: 1;
padding-left: 65px;
-webkit-transition-duration: .7s;
}
.navi1 {
color: #E1ECEE;
width: 100px;
padding-top: 7px;
display: inline-block;
opacity: 1;
padding-left: 45px;
-webkit-transition-duration: .7s;
}
.navi1:hover {
color: #E1ECEE;
width: 100px;
padding-top: 7px;
padding-bottom: 15px;
display: inline-block;
opacity: 1;
padding-left: 65px;
-webkit-transition-duration: .7s;
}
::-webkit-scrollbar {
width: 9px;
height: 7px;
}
::-webkit-scrollbar-track-piece {
background-color: #999;
border: 4px solid #fff;
}
::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
background: url(http://data.whicdn.com/images/67101771/large.jpg);
background-position: 50% 75%;
border: 1px solid #fff;
border-radius: 10px;
opacity: .5;
}
a:link, a:visited {
text-decoration: none;
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
background-image:url(http://media-cache-ak0.pinimg.com/736x/d4/c2/16/d4c21678a407481e33830c1c8b2dc5d0.jpg) ;
background-position:60% 20%;
-webkit-transition-duration: .7s;
}
a:hover {
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
background-image:url(http://media-cache-ak0.pinimg.com/736x/d4/c2/16/d4c21678a407481e33830c1c8b2dc5d0.jpg) ;
background-position:20% 70%;
-webkit-transition-duration: .7s;
}
a.b-love {
display: inline-block;
width: 75px;
padding: 1px;
border: 1px solid #fff;
text-align: center;
background: #F5EFE9;
box-shadow: 0 0 2px #F5EFE9;
color: #fff;
margin-right: 20px;
-webkit-background-clip: none;
-webkit-text-fill-color: #fff;
border-bottom: 0px;
}
a.b-love:hover {
-webkit-transition-duration: .67s;
display: inline-block;
width: 75px;
padding: 1px;
text-align: center;
background: url(http://media.tumblr.com/tumblr_mat4aeP8O11qid2nw.gif) no-repeat left bottom;
color: #F5EFE9;
margin-right: 20px;
-webkit-background-clip: none;
-webkit-text-fill-color: #F5EFE9;
border-bottom: 0px;
}
blockquote {
padding: 10px;
background: url(http://data.whicdn.com/images/70493333/large.png);
background-size: 500px;
background-position: 50% 50%;
text-shadow: -1px 0 #fff, 0 1px #fff,
1px 0 #fff, 0 -1px #fff;
letter-spacing: 1px;
-webkit-transition-duration: .7s;
-webkit-border-radius: 24px 12px;
-moz-border-radius: 24px / 12px;
-webkit-transform: skew(-1.deg,-1.5deg);
}
blockquote:hover {
padding: 10px;
background: url(http://data.whicdn.com/images/70493333/large.png);
background-size: 500px;
background-position: 40% 99.5%;
text-shadow: -1px 0 #fff, 0 1px #fff,
1px 0 #fff, 0 -1px #fff;
letter-spacing: 1px;
-webkit-transition-duration: .7s;
-webkit-border-radius: 24px 12px;
-moz-border-radius: 24px / 12px;
-webkit-transform: skew(-1.deg,-1.5deg);
}
b {
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
background-image:url(http://media-cache-ak0.pinimg.com/736x/1a/66/6e/1a666e4f87a934ce1ab86f6956f1db48.jpg) ;
background-position:20% 70%;
-webkit-transition-duration: .7s;
}
b:hover {
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
background-image:url(http://media-cache-ak0.pinimg.com/736x/1a/66/6e/1a666e4f87a934ce1ab86f6956f1db48.jpg) ;
background-position:80% 70%;
-webkit-transition-duration: .7s;
opacity: .7;
}
u {
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
background-image:url(http://media-cache-ak0.pinimg.com/736x/25/63/f8/2563f86a1cdd10f2b7d96f0cdd458e97.jpg) ;
background-position:80% 70%;
-webkit-transition-duration: .7s;
text-decoration: none;
border-bottom: 1px solid #E1ECEE;
}
strike {
-webkit-transition-duration: .7s;
}
strike:hover {
opacity: 0;
-webkit-transition-duration: .7s;
}
#fade { /*--Transparent background layer--*/
display: none; /*--hidden by default--*/
background: #000;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .50;
z-index: 9999;
}
.popup_block{
display: none; /*--hidden by default--*/
background: #fff;
padding: 20px;
border: 15px solid #E1ECEE;
float: left;
font-size: 13px;
position: fixed;
top: 40%; left: 50%;
z-index: 99999;
/*--CSS3 Box Shadows--*/
-webkit-box-shadow: 0px 0px 20px #fff;
-moz-box-shadow: 0px 0px 20px #fff;
box-shadow: 0px 0px 20px #fff;
/*--CSS3 Rounded Corners--*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
img.btn_close {
float: right;
margin: -25px -25px 0 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
</style>
<body>
<!--------------------------------SIDEBAR---------------------------------!>
<div style='background:#E1ECEE; width:12px; height:1000px; left:350px; top:0px; position:fixed;'></div>
<div style='background:#F9EEE9; width:12px; height:1000px; left:362px; top:0px; position:fixed;'></div>
<div style='background:#F9EEE9; position:fixed; top:280px; left:25px; width:185px; height:185px; padding:5px;'><div style='background:#fff; width:173px; height:173px; padding:5px; color:#ccc; border:1px dashed #F9EEE9;'><center><img src='http://th1157.photobucket.com/albums/p585/bieber_boyz/th_if905y.gif'></center><br>Replace with the things you want to say.</div></div>
<img width='400' src='http://i.imgur.com/fBjbWPB.gif' style='position:fixed; top:270px; left:110px;'>
<div style='position:fixed; top:80px; left:25px; border-bottom:2px dotted #E1ECEE; width:300px;'></div>
<div style='position:fixed; width:300px; top:60px; left:0px; text-align:center; color:#F1E5DC; font-size:15px; letter-spacing:2px; margin-left:25px;'>LIVE OUT YOUR LIFE</div>
<!---------------------------------NAVIS----------------------------------!>
<div style='position:fixed; top:100px; left:65px;'>
<div id='nav'><div class='navi'><a onClick="document.getElementById('content').innerHTML=document.getElementById('entry').innerHTML" title="Back to Entry">Back To Entry</a></div></div><div id='nav1'><div class='navi1'><a onClick="document.getElementById('content').innerHTML=document.getElementById('profile').innerHTML" title="About Owner">About The Owner</a></div></div><div id='nav'><div class='navi'><a onClick="document.getElementById('content').innerHTML=document.getElementById('other').innerHTML" title="Friend List">Ways Out</a></div></div><div id='nav1'><div class='navi1'><a onClick="document.getElementById('content').innerHTML=document.getElementById('credit').innerHTML" title="Credits">Credits To</a></div></div><div id='nav'><a class='navi' href='http://www.blogger.com/follow-blog.g?blogID=5222993684700133944'>Follow</a></div></div>
<!---------------------------------POSTS----------------------------------!>
<blogger>
<div style='position:fixed; left:374px; top:25px; padding:5px; color:#fff; background:#F9EEE9; width:65px;'><center><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader></center></div>
<div id='content'>
<div style='width:500px; border-bottom:2px solid #F9EEE9; padding:10px; text-align:center; color:#E1ECEE; font-family:b-ts; margin-bottom:10px;'><$BlogItemTitle$></div><div style='line-height:1.7; height:465px; overflow-y:auto; color:#AB9C97;'><$BlogItemBody$></div>
</div>
</blogger>
<!----------------------------------POSTS----------------------------------!>
<div id="entry" style="display: none;">
<Blogger>
<div style='line-height:1.7; width:500px; border-bottom:2px solid #F9EEE9; padding:10px; text-align:center; color:#E1ECEE; font-family:b-ts; margin-bottom:10px;'><$BlogItemTitle$></div><div style='line-height:1.7; height:465px; overflow-y:auto; color:#AB9C97;'><$BlogItemBody$></div>
</blogger>
<br>
</div>
<br>
<!---------------------------------PROFILE---------------------------------!>
<div id="profile" style="display: none;">
<div style='width:500px; border-bottom:2px solid #F9EEE9; padding:10px; text-align:center; color:#E1ECEE; font-family:b-ts;'>All About Owner</div>
<br>
<div style='line-height:1.7; height:465px; overflow-y:auto; color:#AB9C97;'>
Replace with your personal information :)
</div></div>
<!---------------------------------OTHERS---------------------------------!>
<div id="other" style="display: none;">
<div style='width:500px; border-bottom:2px solid #F9EEE9; padding:10px; text-align:center; color:#E1ECEE; font-family:b-ts;'>Babes' Sweet Home</div>
<br>
<div style='line-height:1.7; height:445px; overflow-y:auto; color:#AB9C97;'>
Put your friends' links here :)
<br>
</div>
<!---------------------------------CREDITS---------------------------------!>
<div id="credit" style="display: none;">
<div style='width:500px; border-bottom:2px solid #F9EEE9; padding:10px; text-align:center; color:#E1ECEE; font-family:b-ts;'>Credit's of da'blog</div>
<br>
<div style='line-height:1.7; height:445px; overflow-y:auto; color:#AB9C97;'>
<center><img width='350' src='http://data.whicdn.com/images/10859467/5836221353_51b5f20129_z_large.jpg'><br><br>
Created by <a href='http://bii-babey.blogspot.com/'>Bii</a>. Edited by <a href='xxx'>your name</a>. <br> <br>
Best viewed in Google Chrome.<br>
Copyrighted © by <a href='http://angelbii.blogspot.com/'>Bii</a>. All rights reserved.</center>
<br>
</div></div></div>
<div style="display:scroll; position:fixed;top:80px; left:394px;" ><object width="25" height="25"><param name="movie" value="http://www.youtube.com/v/PwBkQtSWacU?version=2&autoplay=1&loop=1&color1=ffffff&color2=ffffff" /><embed src="http://www.youtube.com/v/PwBkQtSWacU?version=2&autoplay=1&loop=1&color1=ffffff&color2=ffffff" type="application/x-shockwave-flash" width="25" height="25"></embed></object></div>
<div style='background:#F9EEE9; position:fixed; width:65px; top:113px; left:374px; text-align:center; padding:5px;'><a class='poplight' href='#?w=500' rel='1'>Cbox</a></a></div>
<div class='popup_block' id='1'>
Replace with your cbox code :)
</div>
<div style='position:fixed; top:150px; left:394px;'><OlderPosts><a href="<$OlderPosts$>">PAST > </a></OlderPosts></div>
</body>
</html>