Codes | Black & White


<!---------------------------------------------------------------------------
THIS SKIN IS TOTALLY MADE BY ME, BII. PLEASE DO NOT VIEW MY SOURCE CODE AND BE A
COPYCAT :) THANKS A LOT YA ^^

BLOG OF OWNER : http://bii-babey.blogspot.com/

DESIGNER: Bii Babey
DATE OF DESIGN: 16.03.15
---------------------------------------------------------------------------!>

<html>
<head>
<link rel="shortcut icon" href="http://i.imgur.com/QGOTlQE.png">
<title>Black and White</title>
<link href='http://fonts.googleapis.com/css?family=Overlock' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Architects+Daughter' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=The+Girl+Next+Door' rel='stylesheet' type='text/css'>

<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 href="#" class="close"><img src="http://i.imgur.com/m7Xgl9P.gif" class="btn_close" title="Close Window" alt="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>
</head>

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

body {
overflow-y: auto;
font-family: Architects Daughter, ms gothic;
font-size: 12px;
cursor: url(http://static.tumblr.com/mpornxv/JVilj15ds/0215.png), progress;
}

.b-title {
position: absolute;
top: 50px;
left: 550px;
font-family: 'The Girl Next Door', cursive;
font-size: 90px;
color: #000;
}

.msg {
position: fixed;
top: 120px;
left: 50px;
width: 230px;
background: #FFF;
padding: 5px;
border: 1px solid transparent;
-moz-border-image: -moz-linear-gradient(top, #fff, #000, #fff);
-webkit-border-image: -webkit-linear-gradient(top, #fff, #000, #fff);
border-image: linear-gradient(to left bottom, #fff, #000, #fff);
border-image-slice: 1;
font-family: Architects Daughter;
font-size: 13px;
color: #000;
opacity: .7;
}

.navi-column {
position: fixed;
top: 275px;
left: 50px;
width: 230px;
background: #FFF;
padding: 5px;
border: 1px solid transparent;
-moz-border-image: -moz-linear-gradient(top, #fff, #eee, #fff);
-webkit-border-image: -webkit-linear-gradient(top, #fff, #eee, #fff);
border-image: linear-gradient(to left bottom, #fff, #eee, #fff);
border-image-slice: 1;
font-family: Architects Daughter;
font-size: 13px;
color: #000;
opacity: .7;
}

/* Navigator Button
----------------------------------------------- */
.navi {
font-family: tinytots;
font-size: 8px;
color: #000;
text-transform: uppercase;
letter-spacing: 1px;
display: inline-block;
width: 60px;
border: 1px solid #ccc;
padding: 3px;
margin: 10px;
}

.d-bar {
position: fixed;
top: 473px;
left: 75px;
background: #fff;
color: #fff;
width: 200px;
overflow: hidden;
-webkit-transition-duration: 1.5s;
z-index: 1000;
}

.navi:hover .d-bar {
top: 448px;
background: #eee;
color: #000;
width: 200px;
box-shadow: inset 800px 0 0px 0 #F2F2F2;
-webkit-transition-duration: 1.5s;
z-index: 1000;
}

/* ChatBox
----------------------------------------------- */
#fade { /*--Transparent background layer--*/
 display: none; /*--hidden by default--*/
 background: #fff;
 position: fixed; left: 0; top: 0;
 width: 100%; height: 100%;
 opacity: .70;
 z-index: 9999;
}

.popup_block{
 display: none; /*--hidden by default--*/
 background: #fff;
 padding: 20px;
 border: 1px solid transparent;
 -moz-border-image: -moz-linear-gradient(top, #fff, #eee, #fff);
 -webkit-border-image: -webkit-linear-gradient(top, #fff, #eee, #fff);
 border-image: linear-gradient(to left bottom, #fff, #eee, #fff);
 border-image-slice: 1;
 float: left;
 font-size: 13px;
 position: fixed;
 top: 50%; left: 50%;
 z-index: 99999;
}

img.btn_close {
 float: right;
 margin: -25px -25px 0 0;
}

*html #fade {
 position: absolute;
}

*html .popup_block {
 position: absolute;
}

/* Playbox
----------------------------------------------- */
.b-musicbox {
position: fixed;
top: 0px;
left: 30px;
background: #eee;
color: #000;
font-family: tinytots;
font-size: 8px;
letter-spacing: 1px;
padding: 5px;
-webkit-transition-duration: .7s;
}

.b-musicbox:hover {
margin-top: -20px;
-webkit-transition-duration: .7s;
}

.b-musicbox:hover .playbox {
top: 3px;
-webkit-transition-duration: .7s;
}

.playbox {
position: fixed;
top: -30px;
left: 34px;
width: 50px;
padding: 3px;
border: 1px solid #ccc;
background: white;
overflow-x: hidden;
z-index: 1000;
-webkit-transition-duration: .7s;
}

#content {
font-family: consolas, ms gothic;
background: transparent;
display: block;
border: 1px solid #ccc;
width: 700px;
padding: 10px;
position: absolute;
left: 400px;
top: 150px;
margin-bottom: 50px;
}

.post {
color: #000;
line-height: 1.6;
padding: 20px;
letter-spacing: 1px;
}

.multibar {
background: #FFF;
border: 1px solid #ccc;
padding: 5px;
padding-left: 20px;
margin-left: -11px;
margin-bottom: 5px;
position: relative;
top: 60px;
width: 695px;
}

.ptit {
font-family: b-only, ms gothic;
font-size: 20px;
color: #000;
padding: 1px;
text-align: left;
margin-top: 30px;
}

.page-title {
font-family: Architects Daughter;
background: url(http://i.imgur.com/sXos9Z2.gif) no-repeat left;
padding-left: 30px;
border-bottom: 1px solid #ccc;
}

img {
opacity: .5;
-webkit-transition-duration: .8s;
}

img:hover {
opacity: .8;
-webkit-transition-duration: .8s;
}

b {
text-shadow: 1px 1px 1px #ccc;
}

u {
text-decoration: none;
border-bottom: 1px solid #ccc;
-webkit-transition-duration: 1.5s;
}

u:hover {
color: #888;
text-decoration: none;
border-bottom: 1px solid #fff;
-webkit-transition-duration: 1.5s;
}

strike {
opacity: 1;
-webkit-transition-duration: 1.5s;
}

strike:hover {
opacity: 0;
-webkit-transition-duration: 1.5s;
}

blockquote {
font-size: 11px;
padding: 10px;
box-shadow: inset 0px 0 0px 0 #F2F2F2;
border-left: 1px solid #ccc;
-webkit-transition-duration: 1.5s;
}

blockquote:hover {
text-shadow: 2px 2px 2px #fff;
border-left: 1px solid #ccc;
box-shadow: inset 800px 0 0px 0 #F2F2F2;
-webkit-transition-duration: 1.5s;
}

a.b-luv {
display: inline-block;
width: 70px;
padding: 3px;
font-family: overlock;
text-align: left;
}

a.b-link {
display: inline-block;
width: 70px;
padding: 3px;
padding-top: 1.5px;
padding-bottom: 1.5px;
margin-bottom: 5px;
font-family: overlock;
text-align: center;
border: 1px solid #eee;
border-bottom: 2px groove #eee;
-webkit-transition-duration: .5s;
}

a.b-link:hover {
border-bottom: 2px solid #D4C6AF;
-webkit-transition-duration: .5s;
}

a:link, a:visited {
text-decoration: none;
color: #000;
-webkit-transition-duration: .5s;
}

a:hover {
text-decoration: none;
color: #DFDAEB;
-webkit-transition-duration: .5s;
}

::-webkit-scrollbar {
width: 5px;
background: #FFF;
}

::-webkit-scrollbar-thumb {
background-color: #ccc;
width: 5px;
border: 1px solid #FFF;
-moz-border-radius: 10px;
border-radius: 10px;
}

::-moz-selection {
background: #eee;
color: #888;
}

::selection {
background: #eee;
color: #888;
}

@font-face{
font-family: b-only;
src:url(https://dl.dropbox.com/s/wfzl0oqqi4g9k4z/TheOnlyException.ttf);
}

@font-face{
font-family: tinytots;
src:url(https://dl.dropbox.com/s/ddjib2ocemkfc73/04B_03_.TTF);
}

</style>

<body>
<blogger>


<div style='position:fixed; top:0px; left:125px;'><img src='http://i1198.photobucket.com/albums/aa448/shehjing/24072015%20design/mono125_zpsonyewvw3.gif'></div>
<div style='position:fixed; top:130px; left:200px; '><img height='90' src='http://i1198.photobucket.com/albums/aa448/shehjing/mono137_zpsc8nnt6e8.gif'></div>
<div class='msg'>
<img src='http://i.imgur.com/G2Osjf1.gif'> Hello. Welcome to my webpage! Do feel free to leave me some sweet words. Thanks for your visit anyway :) Do attach me your blog link so that I can visit you back ^ ^
</div>
<div style='position:fixed; top:110px; left:45px; font-size:18px; color:#000; font-family: Architects Daughter;'>╱</div>
<div style='position:fixed; top:203px; left:278px; font-size:18px; color:#000; font-family: Architects Daughter;'>╱</div>

<div class='navi-column'>
<br>
<center><span style='border-bottom:1px solid #eee;'>N A V I G A T O R</span>
<br><br>
<div class='navi' onClick="document.getElementById('content').innerHTML=document.getElementById('posts').innerHTML" title=""> HOME
<div class='d-bar'>- Back to content -</div>
</div>
<div class='navi' onClick="document.getElementById('content').innerHTML=document.getElementById('profile').innerHTML" title="">PROFILE
<div class='d-bar'>- Know more about me -</div>
</div><br>
<div class='navi' onClick="document.getElementById('content').innerHTML=document.getElementById('links').innerHTML" title="">AFFILIATES
<div class='d-bar'>- All my beloved -</div>
</div>
<div class='navi' onClick="document.getElementById('content').innerHTML=document.getElementById('cbox').innerHTML" title=""><a class='poplight' href='#?w=500' rel='1'>CBOX</a>
<div class='d-bar'>- Say something -</div>
</div><br>
<div class='navi'><a href='https://www.blogger.com/home'>DASHBOARD</a></div>
<div class='navi'><a href='http://www.blogger.com/follow-blog.g?blogID=5844858100638941379'>+ FOLLOW</a></div>
<br>
<br></center>
</div>

<div style='position:absolute; top:20px; left:450px;'><img src='http://i1198.photobucket.com/albums/aa448/shehjing/24072015%20design/mono122_zpswugleypg.gif'></div>
<div class='b-title'>Black & White</div>

<div class='b-musicbox'>HOVER HERE
<div class='playbox'><embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=true&f0=http://k001.kiwi6.com/hotlink/4nw3rl8jf6/Christina_Perri-Distance.mp3&t0=&total=1" quality="high" wmode="transparent" width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" /></div>
</div>

<div id='content'>
<div class='post'>
<div class='page-title'><$BlogItemTitle$></div>
<br>
<BlogItemBody><$BlogItemBody$></BlogItemBody>
<center><OlderPosts><a href='<$OlderPosts$>'>< Older Posts</a></OlderPosts> | <NewerPosts><a href='<$NewerPosts$>'>Newer Posts ></a></NewerPosts></center>
</div>

<div class='multibar'>
<table style='width:700px; font-size:10.5px; text-transform:uppercase; text-align:center;'>
<tr>
<td style='width:33.3%; border-right:1px solid #ccc;'><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader></td>
<td style='width:33.3%; border-right:1px solid #ccc;'><a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> comment(s)</a></BlogItemCommentsEnabled></td>
<td style='width:33.3%;'><a href='http://www.blogger.com/follow-blog.g?blogID=5844858100638941379'>+ FOLLOW ?</a></td>
</tr>
</table>
</div>
</div>


<!--------------------------------------POSTS--------------------------------------!>
<div id="posts" style="display: none;">
<div class='post'>
<div class='page-title'><$BlogItemTitle$></div>
<br>
<BlogItemBody><$BlogItemBody$></BlogItemBody>
<center><OlderPosts><a href='<$OlderPosts$>'>< Older Posts</a></OlderPosts> | <NewerPosts><a href='<$NewerPosts$>'>Newer Posts ></a></NewerPosts></center>
</div>

<div class='multibar'>
<table style='width:700px; font-size:10.5px; text-transform:uppercase; text-align:center;'>
<tr>
<td style='width:33.3%; border-right:1px solid #ccc;'><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader></td>
<td style='width:33.3%; border-right:1px solid #ccc;'><a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> comment(s)</a></BlogItemCommentsEnabled></td>
<td style='width:33.3%;'><a href='http://www.blogger.com/follow-blog.g?blogID=5844858100638941379'>+ FOLLOW ?</a></td>
</tr>
</table>
</div>
</div>

<!-------------------------------------PROFILE-------------------------------------!>
<div id="profile" style="display: none;">
<div class='post'>
<div class='page-title'>About the Author .</div>
<br><br>
<center><img src='http://36.media.tumblr.com/22201d0ff69553909eb16d31150ba1ad/tumblr_mksnubpedg1rp268eo1_500.jpg' width='350' style='border:7px solid #fff; -moz-box-shadow: 0 0 2px 2px #eee;
-webkit-box-shadow: 0 0 2px 2px #eee; box-shadow: 0 0 2px 2px #eee;'></center>
<br><br>
<center>
Your profile here
<br><br>
<div style='border-top:1px dashed #ccc;'></div>
<br>
Ways to contact you
</center>
<br>
</div>
</div>

<!-------------------------------------CHATBOX-------------------------------------!>
<div class='popup_block' id='1'>
<!-- BEGIN CBOX - www.cbox.ws - v4 -->
<img src='http://36.media.tumblr.com/fdcdb6fc26398806ca75a2092bd9c4a3/tumblr_nq4h76thEz1rdbglto4_1280.jpg' width='90' style='border-radius:80px; border:5px solid #fff; box-shadow: 0 0 1px 1px #ccc;' align='right'>
<div id="cboxdiv" style="position:relative; margin: 0 auto; padding:0px; font-size: 0;">
<div style="font-family:noto sans;position: relative; height: 52px; overflow: hidden; border-top: 1px solid #ccc; border-bottom:1px solid #ccc; background: #ffffff; opacity: 0.8; margin-top:15px; padding-top:10px; padding-bottom:10px;"><iframe src="http://www7.cbox.ws/box/?boxid=594458&boxtag=s5atw2&sec=form" marginheight="0" marginwidth="0" frameborder="0" width="100%" height="100%" scrolling="no" allowtransparency="yes" name="cboxform7-594458" id="cboxform7-594458"></iframe><br><br></div>
</div>
<br><br>
<div style="position: relative; height: 200px; overflow: auto; overflow-y: auto; -webkit-overflow-scrolling: touch; border: 0px solid; background: #ffffff; opacity: 0.8;"><iframe src="http://www7.cbox.ws/box/?boxid=594458&boxtag=s5atw2&sec=main" marginheight="0" marginwidth="0" frameborder="0" width="100%" height="100%" scrolling="auto" allowtransparency="yes" name="cboxmain7-594458" id="cboxmain7-594458"></iframe></div>

<!-- END CBOX -->

<!--------------------------------------LINKS--------------------------------------!>
<div id="links" style="display: none;">
<div class='post'>
<div class='page-title'>All my Beloved .</div>
<br><br>
<center>
<a class='b-luv' href=''><img align='left' src='http://i.imgur.com/SX9On72.png'> Friend</a>
<a class='b-luv' href=''><img align='left' src='http://i.imgur.com/SX9On72.png'> Friend</a>
<a class='b-luv' href=''><img align='left' src='http://i.imgur.com/SX9On72.png'> Friend</a>
<br><br>
<a class='b-link' href=''>Friend</a>
<a class='b-link' href=''>Friend</a>
<a class='b-link' href=''>Friend</a>
<a class='b-link' href=''>Friend</a>
<br><br>
<a class='b-link' href=''>Friend</a>
<a class='b-link' href=''>Friend</a>
<a class='b-link' href=''>Friend</a>
<a class='b-link' href=''>Friend</a>
<br><br>
<a class='b-link' href=''>Friend</a>
<a class='b-link' href=''>The Next?</a>
<a class='b-link' href=''>The Next?</a>
<a class='b-link' href=''>The Next?</a>
<br><br>
</center>
</div>
</div>

</div>

</blogger>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
</body>
<br><br>
<div style='font-family:trebuchet ms; font-size:10px; position:absolute; top:0px; right:5px;'>© Skin by <a href='http://angelbii.blogspot.my/'>Bii</a>. Edited by Your Name.</div>

</html>