Blogskins by evan

Blogskin #12

*click on the pic for a larger view

the codes:

<style type="text/css">body {cursor: url(http://cur.cursors-4u.net/others/oth-7/oth708.cur), progress !important;}</style>
<body class="lang_en"><!DOCTYPE html>
<html lang="en">
<head>

<title> gracie</title>

<link rel="stylesheet" type="text/css" href="http://tympanus.net/Tutorials/YouTubeLeftSideMenu/css/default.css" />
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Tutorials/YouTubeLeftSideMenu/css/component.css" />
<script src="http://tympanus.net/Tutorials/YouTubeLeftSideMenu/js/modernizr.custom.js"></script>

<link href='http://fonts.googleapis.com/css?family=Sniglet|Sintony|Geo' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/cpgw3dl/liImwcj3i/gracie.css" />
<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/cpgw3dl/kO6mu98bs/style.css" />
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
//
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://cdn2.iconfinder.com/data/icons/bwpx/icons/symbol_multiplication.gif" class="btn_close" title="Close" alt="Close" /></a>');
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
return false;
});
$('a.close, #fade').live('click', function() {
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove(); //fade them both out
});
return false;
});
});
</script>
<style type="text/css">
.wrapper-dropdown-3 .dropdown {
/* Size & position */
position: absolute;
top: 140%;
left: 0;
right: 0;
/* Styles */
background: rgb(201,147,147);

border: 3px solid white;
border-radius: inherit;
color:#fff;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
font-weight: normal;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
list-style: none;
/* Hiding */
opacity: 0;
pointer-events: none;
}
.wrapper-dropdown-3:after {
content: "";
width: 0;
height: 0;
position: absolute;
right: 25px;
top: 50%;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: white transparent;
}
.wrapper-dropdown-3.active:after {
border-width: 0 6px 6px 6px;}
</style>
</head>
<body>
<div class="container">
<div id="musicplayer">
<div id="music"> <center>
<form id="tfnewsearch"name="cse" id="searchbox_demo" action="http://www.google.com/cse" method="get" action="http://evangelista-grace.blogspot.com">
<input type="hidden" name="cref" value="" />
<input type="hidden" name="ie" value="utf-8" />
<input type="hidden" name="hl" value="" />
<input type="text" class="tftextinput" name="q" size="15" maxlength="120"><input type="submit" value="search" class="tfbutton">
</form></center>
<div class="tfclear"></div> </div> <script type="text/javascript" src="https://www.google.com/cse/tools/onthefly?form=searchbox_demo&lang="></script>
<div id="musictab"><span class="icon-search"></span></div>

</div>
<header class="clearfix"><div style="margin-top:-30px;">
<center><a href="/"><img src="http://i.imgur.com/7PnoI7t.gif" style="width:80px;border:7px solid white;border-radius: 50%;"></a></center><div style="padding:5px;"></div>
<div class="name">Your blog title</div><span style="font-family:'sintony';font-size:17px;">your subtitle</span></div>
</header>
<div class="main">
<center><div class="entry" style="margin-right:-60px;width:74%"><blogger><div style="padding:4px;"></div><div class="h2"><$BlogItemTitle$></div><div class="date"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> | <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>></BlogItemCommentsEnabled>Leave a comment </a></div><br><$BlogItemBody$></blogger><center><div style="border:5px solid #D96459;width: 100%;"></div><span style="float:left;"> <a class="pager" title="Newer Posts" href=<$NewerPosts$>><p class=" icon-circle-arrow-left" data-icon=""></p></a></span><span style="float:right;"> <a class="pager" title="Older Posts" href=<$OlderPosts$>><p class="icon-circle-arrow-right" data-icon=""></p></a></span></center><span style="font-family: 'geo'; font-size:17px;color:#fff ;text-align:center;">Copyright ©.Layout by:<a href="http://evangelista-grace.blogspot.com/" target="_blank">Evangelista</a>. Custom drop-dowm menu by Codrops. Colour palette used: <a href="https://kuler.adobe.com/Autumn-berries-color-theme-2585780/">Autumn Berries</a>. Best viewed on Google Chrome.All right reserved.</span><br>
</div></center>
<div class="side" >
<div style="position:absolute;background-color:#F2E394;float: right;left:0px;height:420px;border: 3px #fafafa solid;border-top:none;
width: 30%;margin-top:-34px;
padding-right: 20px;
min-width: 320px;"><br><br><br><div id="dd" class="wrapper-dropdown-3" tabindex="1">
<span>Le Collapsible</span>
<ul class="dropdown">
<li><a href="#?w=300" rel="02" class="poplight"><span class="icon-user"></span>  About</a></li>
<li><a href="#?w=400" rel="05" class="poplight"><span class="icon-list"></span>  Tutorials</a></li>
<li><a href="#?w=400" rel="04" class="poplight"><span class="icon-heart"></span>  Freebies</a></li>
<li><a href="#?w=400" rel="06" class="poplight"><span class="icon-bubble"></span>  Chat</a></li>
</ul>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">

function DropDown(el) {
this.dd = el;
this.placeholder = this.dd.children('span');
this.opts = this.dd.find('ul.dropdown > li');
this.val = '';
this.index = -1;
this.initEvents();
}
DropDown.prototype = {
initEvents : function() {
var obj = this;
obj.dd.on('click', function(event){
$(this).toggleClass('active');
return false;
});
obj.opts.on('click',function(){
var opt = $(this);
obj.val = opt.text();
obj.index = opt.index();
obj.placeholder.text(obj.val);
});
},
getValue : function() {
return this.val;
},
getIndex : function() {
return this.index;
}
}
$(function() {
var dd = new DropDown( $('#dd') );
$(document).click(function() {
// all dropdowns
$('.wrapper-dropdown-3').removeClass('active');
});
});
</script></div>
</div>
</div>
</div>

<script type="text/javascript" src="//www.blogger.com/static/v1/common/js/2216424884-csitail.js"></script>
<script type="text/javascript">BLOG_initCsi('classic_blogspot');</script></body>

</html>
<script src="http://static.tumblr.com/3ikgvxs/K16l80ow6/cufon-yui.js" type="text/javascript"></script>
<script src="http://static.tumblr.com/3driglx/PH8l1y75m/lorie_400.font.js" type="text/javascript"></script>
<script type="text/javascript">Cufon.replace('');</script>
<script src="http://static.tumblr.com/3ikgvxs/K16l80ow6/cufon-yui.js" type="text/javascript"></script>
<script src="http://static.tumblr.com/3driglx/PH8l1y75m/lorie_400.font.js" type="text/javascript"></script>
<script type="text/javascript">Cufon.replace('.name');</script>
<script src="http://static.tumblr.com/3ikgvxs/K16l80ow6/cufon-yui.js" type="text/javascript"></script>
<script src="http://static.tumblr.com/3driglx/PH8l1y75m/lorie_400.font.js" type="text/javascript"></script>
<script type="text/javascript">Cufon.replace("'');</script>
</body></html>
<div id="02" class="popup_block">
<Center><div class="title">Hello there!</div><center><img src="http://i.imgur.com/2NatPe1.jpg" style="width:100px; opacity:.80;border:5px solid #e4aa93;
-moz-border-radius:0px 100px 100px 100px;
border-radius:100px 100px 100px 100px;
width:100px;
height:100px;"><br><br><div class="ar"></div>
<div class="sd">YOUR PROFILE HERE..
</div></center></div>
</div></div></div></div></div></div></div></div></div></div>

<div id="05" class="popup_block">
<div style="width:auto;height:150px;overflow:auto; "><Center><div class="title">Tutorials for you</div></center>
<br>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
</div>
</div></div></div></div></div></div></div></div></div></div>
<div id="04" class="popup_block"><div style="width:auto;height:150px;overflow:auto; ">
<Center><div class="title">Freebies for you</div></center>
<br>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
</div></div>
</div></div></div></div></div></div></div></div></div></div>
<div id="06" class="popup_block"><div style="width:auto;height:150px;overflow:auto; ">
<Center><div class="title">Leave your footprints</div></center><center>
<br>
<div><div><iframe frameborder="0" width="200" height="75" src="http://www6.cbox.ws/box/?boxid=739736&boxtag=w59n4q&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform6-739736" style="border: 0px solid;border-top:0px" id="cboxform6-739736"></iframe></div></div></center>
</div></div></div></div></div></div></div></div></div></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://static.tumblr.com/5ojoydj/p9wmmzopi/jquery.style-my-tooltips.js"></script>
<script src="http://static.tumblr.com/5ojoydj/En2mmzorm/style-my-tooltips.css"></script>
<script>
(function($){
$(document).ready(function(){
$("[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:100,
tip_fade_speed:100,
attribute:"title"
});
});
})(jQuery);
</script>
<div style="position:fixed; left:20px; bottom:10px; display:inline;"><a href="http://evangelistagrace.tumblr.com/" target="_blank" title="Tumblr"><p class=" icon-tumblr" data-icon=""></p></a><a href="https://www.google.com/+EvangelistaGrace" target="_blank" title="GooglePlus"><p class=" icon-google-plus" data-icon=""></p></a><a href="http://www.blogger.com/follow-blog.g?blogID= YOURBLOGID" target="_blank" title="Follow"><p class=" icon-google-plus-2" data-icon=""></p></a></div>

Blogskin #11

*click on the pic for a larger view

the codes:

<html><head>
<title>b i c k e r y b i s h ; </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://static.tumblr.com/5ojoydj/p9wmmzopi/jquery.style-my-tooltips.js"></script>
<script src="http://static.tumblr.com/5ojoydj/En2mmzorm/style-my-tooltips.css"></script>
<script>
(function($){
$(document).ready(function(){
$("[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:100,
tip_fade_speed:100,
attribute:"title"
});
});
})(jQuery);
</script>

<script language=JavaScript>

</script>
<link href='http://fonts.googleapis.com/css?family=Averia+Sans+Libre' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Autour+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Short+Stack' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Rochester' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="http://www.favicon.co.uk/favicon.gif?id=6m0pcm96foke2fjem2j75so5n1"/>

<script type="text/javascript">
document.documentElement.className = 'js';
</script>
<meta name='robots' content='noindex,nofollow' />
<link rel="alternate" type="application/rss+xml" title="Fable Theme » Feed" href="http://elegantthemes.com/preview/Fable/feed/" />
<link rel="alternate" type="application/rss+xml" title="Fable Theme » Comments Feed" href="http://elegantthemes.com/preview/Fable/comments/feed/" />
<link rel="alternate" type="application/rss+xml" title="Fable Theme » Shortcodes Comments Feed" href="http://elegantthemes.com/preview/Fable/shortcodes/feed/" />
<meta content="Fable v.1.4" name="generator"/><link rel='stylesheet' id='wp-color-picker-css' href='http://elegantthemes.com/preview/Fable/wp-admin/css/color-picker.min.css?ver=3.7.1' type='text/css' media='all' />
<link rel='stylesheet' id='et_google_fonts_style-css' href='http://cdn.elegantthemes.com/preview/Fable/wp-content/themes/Fable/epanel/google-fonts/et_google_fonts.css' type='text/css' media='all' />
<link rel='stylesheet' id='et_frontend_customizer_style-css' href='http://elegantthemes.com/preview/Fable/wp-content/plugins/ET-Frontend-Customizer/css/et_frontend_customizer.css' type='text/css' media='all' />
<link rel='stylesheet' id='fable-fonts-css' href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,800italic,400,300,700,800|Raleway:400,200,100,500,700,800&subset=latin,latin-ext' type='text/css' media='all' />
<link rel='stylesheet' id='fable-style-css' href='http://cdn.elegantthemes.com/preview/Fable/wp-content/themes/Fable/style.css?ver=3.7.1' type='text/css' media='all' />
<link rel='stylesheet' id='et-shortcodes-css-css' href='http://cdn.elegantthemes.com/preview/Fable/wp-content/themes/Fable/epanel/shortcodes/css/shortcodes.css?ver=3.0' type='text/css' media='all' />
<link rel='stylesheet' id='et-shortcodes-responsive-css-css' href='http://cdn.elegantthemes.com/preview/Fable/wp-content/themes/Fable/epanel/shortcodes/css/shortcodes_responsive.css?ver=3.0' type='text/css' media='all' />
<link rel='stylesheet' id='wp-pagenavi-css' href='http://elegantthemes.com/preview/Fable/wp-content/plugins/wp-pagenavi/pagenavi-css.css?ver=2.70' type='text/css' media='all' />
<link rel='stylesheet' id='fancybox-css' href='http://cdn.elegantthemes.com/preview/Fable/wp-content/themes/Fable/epanel/page_templates/js/fancybox/jquery.fancybox-1.3.4.css?ver=1.3.4' type='text/css' media='screen' />
<link rel='stylesheet' id='et_page_templates-css' href='http://cdn.elegantthemes.com/preview/Fable/wp-content/themes/Fable/epanel/page_templates/page_templates.css?ver=1.8' type='text/css' media='screen' />
<script type='text/javascript' src='http://cdn.elegantthemes.com/preview/Fable/wp-includes/js/jquery/jquery.js?ver=1.10.2'></script>
<script type='text/javascript' src='http://cdn.elegantthemes.com/preview/Fable/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='http://cdn.elegantthemes.com/preview/Fable/wp-includes/js/comment-reply.min.js?ver=3.7.1'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://elegantthemes.com/preview/Fable/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://cdn.elegantthemes.com/preview/Fable/wp-includes/wlwmanifest.xml" />
<link rel="stylesheet" href="http://i.icomoon.io/public/temp/c6dd973489/UntitledProject1/style.css">
<script src="http://cdn.jotfor.ms/static/jotform.js?3.1.513" type="text/javascript"></script>
<script type="text/javascript">
JotForm.init(function(){
$('input_9').rating({stars:'5', inputClassName:'form-textbox', imagePath:'http://cdn.jotfor.ms/images/stars.png', cleanFirst:true, value:''});
});
</script>
<link href="http://cdn.jotfor.ms/static/formCss.css?3.1.513" rel="stylesheet" type="text/css" />
<link type="text/css" media="print" rel="stylesheet" href="http://cdn.jotfor.ms/css/printForm.css?3.1.513" />
<link href='http://fonts.googleapis.com/css?family=Geo' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Codystar' rel='stylesheet' type='text/css'>
<style type="text/css">
blockquote {
padding: 5px 5px 5px 5px;
position:center;
border:5px double #eee;
border-radius:5px ;
background-position:bottom right;
background-repeat:no-repeat;
background-image: url(http://media.tumblr.com/tumblr_m89lrp2PC61qdlkyg.gif);
letter-spacing: 1px;
padding: 5px 5px 5px 5px;
width:400px;
height:100px;overflow:auto;
color:#c0c0c0;
overflow-x: hidden;
overflow-y: scroll;
}
#s-m-t-tooltip{
width:auto;
z-index:10;
margin:15px 10px 3px 10px;
padding:3px;
background-color:#fff;
font-family:'helvetica';
letter-spacing:2px;
font-size:7px;
line-height:7px;
color:#bbb;
text-transform:uppercase;
border:1px solid #bbb;
z-index:999999999;
}
.form-label{
width:150px !important;
}
.form-label-left{
width:150px !important;
}
.form-line{
padding-top:12px;
padding-bottom:12px;
}
.form-label-right{
width:150px !important;
}
.form-all{
width:650px;
color:#C0C0C0 !important;
font-family:'Verdana';
font-size:12px;
}
.form-radio-item label, .form-checkbox-item label, .form-grading-label, .form-header{
color:#C0C0C0;
}

.et-tabs-container .et-tabs-control li {
background-image:url(http://i.imgur.com/bgKcJoi.png);
}
.et-tabs-container .et-tabs-control li a {
font-size: 12px;
font-family:tahoma;
letter-spacing: 2px;
color: #fff !important;
text-shadow:none !important;
display: block;
padding: 15px 20px;
}
.et-tabs-container .et-tabs-control li a:hover {
font-size: 12px;
font-family:tahoma;
letter-spacing: 2px;
color: #fff !important;
display: block;
padding: 15px 20px;
text-shadow: 0 0 2.5px #fff , 0 0 0.1em #fff !important;
}

.et-tabs-container .et-tabs-control5 li a {
font-size: 12px;
font-family:tahoma;
letter-spacing: 2px;
color: #fff !important;
text-shadow:none !important;
display: block;
padding: 15px 20px;
}

.et-tabs-container {
border: 1px solid #eee;
border-radius:10px;
position: relative;
margin: 50px 0px 15px;
background-image:url(http://31.media.tumblr.com/cdedc082f3c7eeaf7c2e9ec30aacd283/tumblr_movdbcThVO1ru3nbdo1_250.png);
-webkit-box-shadow: -4px 3px 14px rgba(50, 50, 50, 0.07);
-moz-box-shadow: -4px 3px 14px rgba(50, 50, 50, 0.07);
box-shadow: -4px 3px 14px rgba(50, 50, 50, 0.07);
}
p{
background-image:url(http://31.media.tumblr.com/cdedc082f3c7eeaf7c2e9ec30aacd283/tumblr_movdbcThVO1ru3nbdo1_250.png);}
.et-tabs-container .et-tabs-control li.active a {
background-image:url(http://31.media.tumblr.com/cdedc082f3c7eeaf7c2e9ec30aacd283/tumblr_movdbcThVO1ru3nbdo1_250.png);
color: #bbb !important;
}
blockquote {
padding: 5px 5px 5px 5px;
position:center;
border:5px double #eee;
border-radius:5px ;
background-position:bottom right;
background-repeat:no-repeat;
background-image: url(http://media.tumblr.com/tumblr_m89lrp2PC61qdlkyg.gif);
letter-spacing: 1px;
padding: 5px 5px 5px 5px;
width:400px;
height:100px;overflow:auto;
color:#c0c0c0;
overflow-x: hidden;
overflow-y: scroll;
}
.et-tabs-container .et-tabs-control {
border-top-left-radius:10px;
border-top-right-radius:10px;
}
/*------ IMAGE ANIMATION------*/
img {filter:alpha(opacity=70);
-moz-opacity:0.7;
opacity:0.7;
}
img:hover {
filter:alpha(opacity=100);
-moz-opacity:.0;
opacity:1.0;
}
.tr-caption{font-size: 13px ; font-family:'short stack' ; color:#c0c0c0;padding-top: -3px;padding-bottom: 3px;}
a.thingi{
word-spacing:10px;
color: #000;
text-decoration:none;
font-family:verdana;
font-size:13px;
background:url(http://i257.photobucket.com/albums/hh205/xoxojays/smilies/05-20-2012/image32-1.gif);
background-repeat:no-repeat;background-size:12px ;padding-left:15px !important;line-height:18px !important;}
a.thingi:hover{
color: #ccc;cursor: url('http://cur.cursors-4u.net/others/oth-6/oth589.cur'), auto;
-webkit-transition:All 0.4s ease ;
-moz-transition:All 0.4s ease ;
-o-transition:All 0.4s ease ;
background:url(http://media.tumblr.com/8a69100e3fd1e52fab8b0208b2d0b4ae/tumblr_inline_mn41t889Fn1qz4rgp.gif);
background-repeat:no-repeat !important;background-size:12px !important;padding-left:15px !important;line-height:18px !important; !important}

ul
{
list-style-image:url('http://media.tumblr.com/tumblr_m2kfzgmf7Z1qdlkyg.gif') ;
}
.icon-arrow-left:before {
content: "\e606";
font-size:30px;
padding-left:10px;
color:#e9e4d9;
}
.icon-arrow-right:before {
content: "\e607";
font-size:30px;
padding-right:10px;
color:#e9e4d9;
}
a:link {
color:#ddd; font-family:'short stack'; font-size:11px; letter-spacing:1px; font-weight:10;}
a:hover {
color: #808080; cursor: url('http://cur.cursors-4u.net/others/oth-6/oth589.cur'), auto; text-decoration:none; }
.sd {width: 400px; padding: 10px; background: #fff;
-webkit-box-shadow: -3px 3px 11px rgba(50, 50, 50, 0.07);
-moz-box-shadow: -3px 3px 11px rgba(50, 50, 50, 0.07);
box-shadow: -3px 3px 11px rgba(50, 50, 50, 0.07); color:#ccc; z-index: 100; text-align: left; border-radius: 5px; -ms-border-radius: 5px; -moz-border-radius: 5px;
-webkit-border-radius: 5px; -khtml-border-radius: 5px; }
.ar {margin: 0 auto; width: 0; height: 0; margin-top:-9px;border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 9px solid #fff;}
::-webkit-scrollbar-thumb:vertical {background-color: #000; border:4px solid #eee; border-top: 5px solid #ccc; border-bottom: 5px solid #ccc; height: 10px;}
::-webkit-scrollbar-thumb:horizontal {background-color: #000; height:10px!important;}
::-webkit-scrollbar {background-color: #000; border: 4px solid #000; height:10px; width:10px;}
::-webkit-scrollbar-track-piece {
background-color: #e9e4d9;
border: 3px solid #fff;
}
::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
background: #ddd;
}
.sidebar { width: 200px; float: left; left:100px;position: fixed ; top: -80px; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; }
.sidebar:hover { top: 0px; }
.nav1 { margin-top:-230px; text-align: center; background-color: #fff; padding: 4px; opacity: 0.5;}
.nav2 { color: #666; cursor: pointer; font-family:verdana; font-size:10px; letter-spacing:2px;}
.nav2:hover { border-bottom: 1px solid #666; }
.follow {
color: #666; cursor: pointer; font-family:verdana; font-size:10px; letter-spacing:2px; }
#banner {
width:100%;
height:18px;
left:0;
margin-top:-10px;
background-image:url('http://static.tumblr.com/3yblkz0/S8omdno3x/jaja.png');
repeat:repeat-x;
opacity:100;
}
#navbar-iframe {
display: none; }
body{
background-image: url('http://i.imgur.com/Ytb4jNN.png');
cursor: url(http://i932.photobucket.com/albums/ad167/DottyDita/1338348137_cursor-small.png), progress !important;color: #c0c0c0; font-family:verdana;font-size:8pt;
line-height: 150%;
text-align: justify;
padding: 10px;
}
@font-face {
font-family: 'icomoon';
src: url('http://static.tumblr.com/cpgw3dl/kU7mwtbqr/icomoon.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-facebook:before {
content: "\e60f";
}
.icon-user:before {
content: "\e608";
}
.icon-heart:before {
content: "\e609";
}
.icon-bubble:before {
content: "\e602";
}
.icon-plus:before {
content: "\e60a";
}
.icon-list:before {
content: "\e60b";
}
.icon-menu:before {
content: "\e600";
}
.icon-envelope:before {
content: "\e605";
}
.icon-home:before {
content: "\e60d";
}
.icon-calendar:before {
content: "\e603";
}
.icon-comment-alt:before {
content: "\e604";
}
.icon-arrow-left:before {
content: "\e606";
}
.icon-arrow-right:before {
content: "\e607";
}
.icon-reorder:before {
content: "\e60c";
}
.h2{
font-family: tinytots;
text-transform:uppercase;
font-size:8px;
margin-top:2px;
padding:2px;
text-align:left;
color:#000;
}
.h3{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2Hi0zznqtOMNrDZXww9ei1FjSvklpY-f3VxVJ8XVBFBSPM9hxinFm260rndPh4SQA7daULFGALbJPR9hJQ1oKh1J8yVXbvVfvJ-vsTdhPRuPfbJ7rYLQznFGp7kU9Ipbdu7z7j-UxFXbw/s1600/g82sj6a.png);
width:199px;
height:50px;
overflow:hidden;
margin-top:10px;
padding:10px;
line-height: 14px;
}
::selection{background:#fafafa;color:#000;}
.cody {
font-family:'codystar';
font-size:30px;
color: #c0c0c0;
}

.ha, .hb, .hc{
height:16px;
width:240px;
padding:4px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
text-align:center;
position:relative;
font-family : tahoma;
font-size:.5em;
font-style:bold;
text-transform: uppercase;
background:url(http://i.imgur.com/UgSZu6k.png);background-size:40px;
z-index:500;
border: solid 2px #fff;
color: #c0c0c0;
letter-spacing:2px;
}
</style>
<div id="banner"></div>
<div style="display:scroll; position:fixed; top:25px; right:10px; border-radius:5px;width:10px:height:auto;background:#fff; border:2px solid #eee;padding:2px;"><a style="font-family:'short stack';font-weight:200;font-size:9px; letter-spacing:2px; color:#ccc;"href="/">  Home</a> | <a style="font-family:'short stack';font-weight:200;font-size:9px; letter-spacing:2px; color:#ccc;"href="http://www.blogger.com/follow-blog.g?blogID= YOURBLOGID" target="_blank" rel="nofollow" title="Follow !" style="margin-left: 1em; margin-right: 1em;">Follow+</a>|<a style="font-family:'short stack';font-weight:200;font-size:9px; letter-spacing:2px; color:#ccc;" href="/view/sidebar"> Archive</a> </div>
<center><a href="/" title="Home"><img src="http://i.imgur.com/SzsXI3C.gif" style="opacity:.9;"><img src="http://i.imgur.com/XQVQBYW.gif" style="margin-left:-80px;"></a></center>
<div style="margin-left:300px;margin-bottom:250px;width:1505px"><div class='one_half'>
<div class='et-tabs-container et_sliderfx_fade et_sliderauto_false et_sliderauto_speed_5000 et_slidertype_top_tabs'>
<ul class='et-tabs-control'>
<li style="border-top-left-radius:10px;"><a href='#'>
<span class="icon-reorder"></span> Entries
</a></li>
<li><a href='#'>
<span class="icon-user"></span> About
</a></li>
<li><a href='#'>
<span class="icon-list"></span> Tutorials
</a></li>
<li><a href='#'>
<span class="icon-heart"></span> Freebies
</a></li>
<li><a href='#'>
<span class="icon-bubble"></span> Cbox
</a></li>
<li style="border-top-right-radius:10px;"><a href='#'>
<span class="icon-envelope"></span> Free page....
</a></li>
</ul> 
<div class='et-tabs-content'>
<div class='et-tabs-content-main-wrap'>
<div class='et-tabs-content-wrapper'>
<div class='et_slidecontent'>
<p><div style="background:rgba(255,255,255, 0.9);height:300px; color: #aaa; font-family:verdana;font-size:8pt;
line-height: 150%; text-align: justify; overflow:auto; padding: 10px;overflow-x: hidden; overflow-y: scroll;"><Blogger><center><table cellspacing="1px" background-color="#fff">
<tr>
<td class="ha"><$BlogItemTitle$></td><td class="hc"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader></td><td class="hb"><a style="color: #c0c0c0; href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>>Leave a comment</a></BlogItemCommentsEnabled></td>
</tr></table></center><br>
<$BlogItemBody$></blogger><br><span style="float:left;"><a class="pager" title="Newer posts" href=<$NewerPosts$>><span class="icon-arrow-left"></span></a></span></center>
<span style="float:right;"><a class="pager" title="Older Posts" href=<$OlderPosts$>><span class="icon-arrow-right "></span></a></span></div></p>
</div>
<div class='et_slidecontent'>
<br>
<center><div class="cody">About Me</div> </center>
<p><div style="height:268px; color: #808080; font-family:verdana;font-size:8pt;
line-height: 150%; text-align: justify;overflow:auto; padding: 10px;overflow-x: hidden; overflow-y: scroll;"><center><br>
<div style="height:200px;"class="sd"><img align="left" padding="10px 10px" width="100px" style=" border-right:solid 5px #fff; opacity:.7;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_fjc99yMjXJpWjcpGRB9KL6F_XPEK6cnKIuYh6ws0zOgd7YUx7YjorymYjg2S8NSdd94tWoUPu45l7E-Rn7RaJhFKV-2LJn82GfUcaYsZkyPLmBSJA8-RmZZB-cqLkM9mO10mPThkONI/s1600/Untitled-1.jpg">YOUR PROFILE HERE
</div><br></center></div></p>
</div>
<div class='et_slidecontent'>
<p><div style="background:rgba(255,255,255, 0.8);height:300px; color: #808080; font-family:verdana;font-size:8pt;
line-height: 150%; text-align: justify;overflow:auto; padding: 10px;overflow-x: hidden; overflow-y: scroll;"><ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
</div></p>
</div>
<div class='et_slidecontent'>
<p><div style="background:rgba(255,255,255, 0.8);height:300px; color: #808080; font-family:verdana;font-size:8pt;
line-height: 150%; text-align: justify;overflow:auto; padding: 10px;overflow-x: hidden; overflow-y: scroll;"><ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul></div></p>
</div>
<div class='et_slidecontent'>
<br>
<center><div class="cody">Chatbox</div></center>
<p><div style="height:268px; color: #808080; font-family:verdana;font-size:8pt;
line-height: 150%; text-align: justify; overflow:auto; padding: 10px;overflow-x: hidden; overflow-y: scroll;"><br><center>
<div><iframe frameborder="0" width="400" height="105" src="http://www6.cbox.ws/box/?boxid=739736&boxtag=w59n4q&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain5-712646" style="border:#eee 2px solid;" id="cboxmain5-712646"></iframe></div><div><iframe frameborder="0" width="400" height="100" src="http://www6.cbox.ws/box/?boxid=739736&boxtag=w59n4q&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform5-712646" style="border: 2px solid #eee;" id="cboxform5-712646"></iframe></div></center></div></p>
</div>
<div class='et_slidecontent'>
<p><div style="height:300px; color: #808080; font-family:verdana;font-size:8pt;
line-height: 150%; text-align: justify;overflow:auto; padding: 10px;overflow-x: hidden; overflow-y: scroll;"><center><div style="height:200px;"class="sd">INSERT HERE ANYTHING YOU WANT...</div></center>
</div></p>
</div>
</div>
</div>
</div>
</div><center>Copyright ©.Layout by <a href="http://www.blogskins.com/me/evangrace98">Evangelista</a>. All rights reserved 2011-infinity.</center>
</div></div>

<script src="http://static.tumblr.com/3ikgvxs/K16l80ow6/cufon-yui.js" type="text/javascript"></script>
<script src="http://static.tumblr.com/3driglx/PH8l1y75m/lorie_400.font.js" type="text/javascript"></script>
<script type="text/javascript">Cufon.replace('');</script>
<script src="http://static.tumblr.com/3ikgvxs/K16l80ow6/cufon-yui.js" type="text/javascript"></script>
<script src="http://static.tumblr.com/3driglx/PH8l1y75m/lorie_400.font.js" type="text/javascript"></script>
<script type="text/javascript">Cufon.replace('');</script>
<script src="http://static.tumblr.com/3ikgvxs/K16l80ow6/cufon-yui.js" type="text/javascript"></script>
<script src="http://static.tumblr.com/3driglx/PH8l1y75m/lorie_400.font.js" type="text/javascript"></script>
<script type="text/javascript">Cufon.replace('a.thingi');</script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>

<script type='text/javascript' src='http://cdn.elegantthemes.com/preview/Fable/wp-includes/js/jquery/ui/jquery.ui.core.min.js?ver=1.10.3'></script>
<script type='text/javascript' src='http://cdn.elegantthemes.com/preview/Fable/wp-includes/js/jquery/ui/jquery.ui.widget.min.js?ver=1.10.3'></script>
<script type='text/javascript' src='http://cdn.elegantthemes.com/preview/Fable/wp-includes/js/jquery/ui/jquery.ui.mouse.min.js?ver=1.10.3'></script>
<script type='text/javascript' src='http://cdn.elegantthemes.com/preview/Fable/wp-includes/js/jquery/ui/jquery.ui.draggable.min.js?ver=1.10.3'></script>
<script type='text/javascript' src='http://cdn.elegantthemes.com/preview/Fable/wp-includes/js/jquery/ui/jquery.ui.slider.min.js?ver=1.10.3'></script>
<script type='text/javascript' src='http://cdn.elegantthemes.com/preview/Fable/wp-includes/js/jquery/jquery.ui.touch-punch.js?ver=0.2.2'></script>
<script type='text/javascript' src='http://elegantthemes.com/preview/Fable/wp-admin/js/iris.min.js?ver=3.7.1'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var wpColorPickerL10n = {"clear":"Clear","defaultString":"Default","pick":"Select Color","current":"Current Color"};
/* ]]> */
</script>
<script type='text/javascript' src='http://elegantthemes.com/preview/Fable/wp-admin/js/color-picker.min.js?ver=3.7.1'></script>
<script type='text/javascript' src='http://cdn.elegantthemes.com/preview/Fable/wp-content/themes/Fable/epanel/google-fonts/et_google_fonts.js?ver=1.0'></script>
<script type='text/javascript' src='http://elegantthemes.com/preview/Fable/wp-content/plugins/et-frontend-customizer-fable/js/et_customizer_change_color.js?ver=1.0'></script>
<script type='text/javascript' src='http://cdn.elegantthemes.com/preview/Fable/wp-content/themes/Fable/js/superfish.js?ver=1.0'></script>
<script type='text/javascript' src='http://cdn.elegantthemes.com/preview/Fable/wp-content/themes/Fable/js/waypoints.min.js?ver=1.0'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var et_custom = {"mobile_nav_text":"Navigation Menu"};
/* ]]> */
</script>
<script type='text/javascript' src='http://cdn.elegantthemes.com/preview/Fable/wp-content/themes/Fable/js/custom.js?ver=1.0'></script>
<script type='text/javascript' src='http://cdn.elegantthemes.com/preview/Fable/wp-content/themes/Fable/epanel/page_templates/js/fancybox/jquery.easing-1.3.pack.js?ver=1.3.4'></script>
<script type='text/javascript' src='http://cdn.elegantthemes.com/preview/Fable/wp-content/themes/Fable/epanel/page_templates/js/fancybox/jquery.fancybox-1.3.4.pack.js?ver=1.3.4'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var et_ptemplates_strings = {"captcha":"Captcha","fill":"Fill","field":"field","invalid":"Invalid email"};
/* ]]> */
</script>
<script type='text/javascript' src='http://cdn.elegantthemes.com/preview/Fable/wp-content/themes/Fable/epanel/page_templates/js/et-ptemplates-frontend.js?ver=1.1'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var et_shortcodes_strings = {"previous":"Previous","next":"Next"};
/* ]]> */
</script>
<script type='text/javascript' src='http://cdn.elegantthemes.com/preview/Fable/wp-content/themes/Fable/epanel/shortcodes/js/et_shortcodes_frontend.js?ver=3.0'></script>
<script type='text/javascript' src='http://elegantthemes.com/preview/Fable/wp-content/plugins/ET-Frontend-Customizer/js/modernizr.js?ver=3.7.1'></script>
</body>
</html>

Blogskin #10

*click on the pic for a larger view

the codes:

<html>
<head>
<title> timeline ; </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://static.tumblr.com/5ojoydj/p9wmmzopi/jquery.style-my-tooltips.js"></script>
<script src="http://static.tumblr.com/5ojoydj/En2mmzorm/style-my-tooltips.css"></script>
<script>
(function($){
$(document).ready(function(){
$("[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:100,
tip_fade_speed:100,
attribute:"title"
});
});
})(jQuery);
</script>

<script language=JavaScript>

</script>

<link rel="shortcut icon" href="http://www.favicon.co.uk/favicon.gif?id=6m0pcm96foke2fjem2j75so5n1"/>
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Blueprints/VerticalTimeline/css/default.css" />

<link href='http://fonts.googleapis.com/css?family=Averia+Sans+Libre' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Autour+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Short+Stack' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Rochester' rel='stylesheet' type='text/css'>
<link href='http://static.tumblr.com/cpgw3dl/FBgmvh8n2/gracey.css' rel='stylesheet' type='text/css'>
<style type="text/css">
@font-face {
font-family: 'icomoon';
src: url('http://static.tumblr.com/cpgw3dl/9Sumwbhg8/icomoon.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;

/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.icon-user:before {
content: "\e608";
}
.icon-heart:before {
content: "\e609";
}
.icon-bubble:before {
content: "\e602";
}
.icon-plus:before {
content: "\e60a";
}
.icon-list:before {
content: "\e60b";
}
.icon-menu:before {
content: "\e600";
}
.icon-envelope:before {
content: "\e605";
}
.icon-home:before {
content: "\e60d";
}
.icon-calendar:before {
content: "\e603";
}
.icon-comment-alt:before {
content: "\e604";
}
.icon-arrow-left:before {
content: "\e606";
}
.icon-arrow-right:before {
content: "\e607";
}
.icon-reorder:before {
content: "\e60c";
}

#banner {
width:100%;
height:18px;
left:0;
background-image:url('http://static.tumblr.com/3yblkz0/S8omdno3x/jaja.png');
repeat:repeat-x;
opacity:100;
}
.icon-list , .icon-plus {
font-size:12px; }

#navbar-iframe {displaY: nonE;}

.date {
margin: 15px 0 0 -35px; background:#e9e4d9;width:60px; padding:1px; color:#fff; border-radius:5px; text-align:center;}
.icon-arrow-right:before {
content: "\e607";
font-size:30px;
margin-left:-60px;
color:#e9e4d9;
}
.sd , .sd1 {
border-right:5px solid rgb(254,254,254);
border-top: 5px solid rgb(254,254,254);
width: 210px;
}
.icon-arrow-left:before {
content: "\e606";
font-size:30px;
margin-left:-30px;
color:#e9e4d9;
margin-top:-80px;
}
.h {
border: 10px solid rgb(254,254,254);
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
}
::-webkit-scrollbar-thumb:vertical {background-color: #000; border:4px solid #eee; border-top: 5px solid #ccc; border-bottom: 5px solid #ccc; height: 10px;}
::-webkit-scrollbar-thumb:horizontal {background-color: #000; height:10px!important;}
::-webkit-scrollbar {background-color: #000; border: 4px solid #000; height:10px; width:10px;} ::-webkit-scrollbar-track-piece {
background-color: #e9e4d9;
border: 3px solid #fff;
}
::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
background: #ddd;
}
</style>
</head>
<script type="text/javascript" SRC="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".box").hide();
$(".trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("active");
});
});
</script>

<body>
<div style=" position:fixed; z-index:999999999;" id="banner"></div>
<div style="margin-top:90px; left:150px;position:fixed;">
<a href="/" title="Home"><div style="margin-left:-25px;"><img src="http://i.imgur.com/ikVWuLy.gif" style="opacity:.8;"></div></a><div style="padding:2px;"></div>
<div class="hg"><div class="name"><b>R</b>eminiscence</div></div><div style="padding:20px;"></div>
<div class="trigger"><div class="navi" ><span class="icon-user"></span> About</div></div>
<span style="display:none; font-size: 10px; color: #666; " style=&{head};><br><div class="ar"></div>
<div class="sd"><img align="left" padding="10px 10px" width="60px" style="border:5px solid #fff; opacity:.8;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_fjc99yMjXJpWjcpGRB9KL6F_XPEK6cnKIuYh6ws0zOgd7YUx7YjorymYjg2S8NSdd94tWoUPu45l7E-Rn7RaJhFKV-2LJn82GfUcaYsZkyPLmBSJA8-RmZZB-cqLkM9mO10mPThkONI/s1600/Untitled-1.jpg">Your profile here..
</div><br>
</span>
<div class="trigger"><div class="navi" ><span class="icon-list"></span> Tutorials</div></div>
<span style="display:none; font-size: 10px; color: #666;" style=&{head};><br><div class="ar"></div>
<div class="sd"><div style="margin-left:-40px;">
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul></div>
</div><br>
</span>
<div class="trigger"><div class="navi" ><span class="icon-heart"></span> Freebies</div></div>
<span style="display:none; font-size: 10px; color: #666; " style=&{head};><br><div class="ar"></div>
<div class="sd"><div style="margin-left:-40px;">
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul> </div>
</div><br>
</span>
<div class="trigger"><div class="navi" ><span class="icon-bubble"></span> Cbox</div></div>
<span style="display:none; margin-top: 5px; padding-bottom: 5px; margin-bottom: 5px; font-size: 10px; color: #666; " style=&{head};><br><div class="ar"></div>
<div class="sd1"><center><div style="margin-top:-5px;">
CBOX HERE<br><br></div>
<img src="http://i128.photobucket.com/albums/p165/charmroyal/graphics/dividers/58.png" style="width:110px; opacity:.7; margin-top:-10px;">
</center>
</div><br>
</span>

<div class="navi" ><span class="icon-plus"></span><a style="color:#fff; font-size:8px;" class="end" href="javascript:void(0);" onClick=window.open("http://www.blogger.com/follow-blog.g?blogID=blogidhere","Ratting","width=550,height=550,0,status=0,");> Follow</a>
</div>
<div class="navi" ><span class="icon-envelope"></span><a style="color:#fff; font-size:8px;" href="/"> Link</a></div>
<br>
<div style="opacity:.4;"><embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=true&f0=http://k003.kiwi6.com/hotlink/4lvc8j7u7e/fly_-_ludovico_einaudi_www.mp3fiber.com_.mp3&t0=Fly&total=1" quality="high" wmode="transparent" width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" /></div>

</div>
<div class="e">
<Blogger><ul class="cbp_tmtimeline" style="margin-right:850px; "><li>
<div class="cbp_tmicon icon-calendar" title="date"></div><br><br><div class="date"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader></div><br><br><br><div style="padding:20px;"></div><a style="color: #fff;" title="Leave a comment" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><span class="cbp_comment icon-bubble"></span></a></BlogItemCommentsEnabled><div class="b"><div style="margin-left:-10px; margin-top:-20px;"><div class="h">
<center><table cellspacing="1px" background-color="#fff">
<tr>
<td class="ha"><$BlogItemTitle$></td></tr></table></center><br>
<$BlogItemBody$>
</div></div><div style="margin-bottom:15px;"></div></div>
</li></ul></Blogger>
<div style="position:relative;left:80px; width:650px;margin-top:-80px;"><span style="float:left;"><a class="pager" title="Newer posts" href=<$NewerPosts$>><span class="icon-arrow-left"></span></a></span>
<span style="float:right;"><a class="pager" title="Older Posts" href=<$OlderPosts$>><span class="icon-arrow-right "></span></a></span>
<br><footer style="right:-20px;
"><span style="font-family: arial; font-size: x-small;color:#fff ;">Copyright ©.Layout by <a style="color:#aaa;" href="http://blogskins.com/me/evangrace98">Evangelista</a>.</span><span style="font-family: arial; font-size: x-small;color:#fff;">.Inspiration:<a style="color:#fff" href="http://www.blogskins.com/info/402868/">x</a>,<a style="color:#fff" href="http://tympanus.net/codrops/2013/05/02/vertical-timeline/"> x</a> and <a style="color:#fff" href="http://travel-theme.tumblr.com/"> x</a>.</span></footer></div><br>
</div>

</body>
</html>
<script src="http://static.tumblr.com/3ikgvxs/K16l80ow6/cufon-yui.js" type="text/javascript"></script>
<script src="http://static.tumblr.com/3driglx/PH8l1y75m/lorie_400.font.js" type="text/javascript"></script>
<script type="text/javascript">Cufon.replace('');</script>
<script src="http://static.tumblr.com/3ikgvxs/K16l80ow6/cufon-yui.js" type="text/javascript"></script>
<script src="http://static.tumblr.com/3driglx/PH8l1y75m/lorie_400.font.js" type="text/javascript"></script>
<script type="text/javascript">Cufon.replace('');</script>
<script src="http://static.tumblr.com/3ikgvxs/K16l80ow6/cufon-yui.js" type="text/javascript"></script>
<script src="http://static.tumblr.com/3driglx/PH8l1y75m/lorie_400.font.js" type="text/javascript"></script>
<script type="text/javascript">Cufon.replace('.name');</script>

Blogskin #9

*click on the pic for a larger view

the codes:

<html>
<head>
<title>galaxy ;</title>

<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/CreativeLinkEffects/css/component.css" />
<script src="http://tympanus.net/Development/CreativeLinkEffects/js/modernizr.custom.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://static.tumblr.com/5ojoydj/p9wmmzopi/jquery.style-my-tooltips.js"></script>
<script src="http://static.tumblr.com/5ojoydj/En2mmzorm/style-my-tooltips.css"></script>
<script language=JavaScript>

</script>
<script>
(function($){
$(document).ready(function(){
$("[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:100,
tip_fade_speed:100,
attribute:"title"
});
});
})(jQuery);
</script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

<link href='http://fonts.googleapis.com/css?family=Averia+Sans+Libre' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Autour+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Short+Stack' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Rochester' rel='stylesheet' type='text/css'>

<style type="text/css">
::-webkit-scrollbar {
width:10px;
height:10px;
}
::-webkit-scrollbar {
width: 9px;
height: 8px;
}
::-webkit-scrollbar-track-piece {
background-color: #ccc;
border: 3px solid #FFFFFF;
}
::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
background-image:url(http://i.imgur.com/R2VIlhy.png);
border: 2px solid #bbb;
}
#s-m-t-tooltip{
width:auto;
z-index:10;
margin:15px 10px 3px 10px;
padding:3px;
background-color:#fff;
font-family:'helvetica';
letter-spacing:2px;
font-size:7px;
line-height:7px;
color:#bbb;
text-transform:uppercase;
border:1px solid #bbb;
z-index:999999999;
}
::selection{background:#fafafa;color:#000;}
ul
{
list-style-image:url('');
}
.tr-caption{font-size: 13px ; font-family:'short stack' ; color:#c0c0c0;padding-top: -3px;padding-bottom: 3px;}
#navbar-iframe {
display: none; }
#spacer { width: 100%; height: 90px; }
body {
cursor: url(http://cur.cursors-4u.net/others/oth-7/oth708.cur), progress!important;color: #808080; font-family:verdana;font-size:8pt;cursor: url(http://i932.photobucket.com/albums/ad167/DottyDita/1338348137_cursor-small.png),auto;
background-image: url(http://i.imgur.com/R2VIlhy.png);

}
#fade { /*--Transparent background layer--*/
display: none; /*--hidden by default--*/
background: #808080;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .2;
z-index: 9999;
}
.popup_block{
display: none;
background: #D3D3D3;
background-image: url(http://i.imgur.com/fGbedxJ.png);
padding: 10px;
font-family: "short stack";
float: left;
color:#fff;
font-size: 10px;
position: fixed;
top: 50%; left: 50%;
z-index: 20000000;
border: 4px solid #fff;
-moz-box-shadow: 9px 9px 9px #eee;
-webkit-box-shadow: 0 0 15px #eee;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
img.btn_close {
float: right;
margin: -5px -5px 0 0;
width:25px;
border:none;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
.title{
font-family:"rochester";
font-size:20px;
color: #fff;
text-shadow: 1px 1px 1px #808080;
}
.sd {width: 230px; padding: 8px; background-color:#fff; color:#ccc; z-index: 100; text-align: justify; border-radius: 5px; -ms-border-radius: 5px; -moz-border-radius: 5px;
-webkit-border-radius: 5px; -khtml-border-radius: 5px;}
.ar {margin: 0 auto; width: 0; height: 0; margin-top:-10px;border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #fff;}
.box {
display:inline-block;
width:100px;
background:#fff;
color: #333;
text-align:center;
font-family:courier new;
font-size:11px;
letter-spacing:3px;
cursor:pointer;
padding:4px;
filter: alpha (opacity=60);
-moz-opacity: 0.60;
opacity: 0.60;
-webkit-transition-duration: .50s;}
.box:hover {
filter: alpha (opacity=90);
-moz-opacity: 0.90;
opacity: 0.90;
-webkit-transition-duration: .50s;
border-bottom:none;}
a:link, a:visited, a:active {
color: #afafaf; cursor: default; text-decoration: none; font-size: 10pt; -webkit-transition:1s;}
a:hover {
cursor: url('http://cur.cursors-4u.net/symbols/sym-6/sym579.cur'), auto; color: #666; text-decoration:none; }
.wrapper {
margin: 0 auto; width: 760px;
background-color: #fff;
border:10px solid #eee;
border-radius:10px;
border-shadow: inset 0px 0px 9px 4px rgba(119, 119, 119, 0.2);
-moz-border-shadow: inset 0px 0px 9px 4px rgba(119, 119, 119, 0.2);
-webkit-box-shadow: inset 0px 0px 9px 4px rgba(119, 119, 119, 0.2);
box-shadow: 0px 0px 9px 4px rgba(119, 119, 119, 0.27);
-moz-box-shadow: 0px 0px 9px 4px rgba(119, 119, 119, 0.27);
-webkit-box-shadow: 0px 0px 9px 4px rgba(119, 119, 119, 0.27);
padding: 7px;
}

.icon-circle-arrow-right {
color:#eee; }
.icon-circle-arrow-left {
color:#eee; }
.icon-circle-arrow-left:hover {
text-shadow: 1px 1px 1px #bbb; }
.icon-circle-arrow-right:hover {
text-shadow: 1px 1px 1px #bbb;}
.heyo {
background-image:url(http://i.imgur.com/ubcMmsV.gif);
width:750px; }
blockquote {
opacity: .5;
position:center;
border:5px double #fafafa;
border-radius:5px ;
background-repeat:repeat;
background-image: url(http://www.swimchick.net/resources/textures/newtextures/text133.jpg);
letter-spacing: 1px;
padding: 5px 5px 5px 5px;
width:400px;
height:70px;overflow:auto;
color:#fff;
overflow-x: hidden;
overflow-y: scroll;
}
.ha, .hb, .hc{
height:16px;
width:240px;
padding:4px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
text-align:center;
position:relative;
font-family : tahoma;
font-size:9px;
font-style:bold;
text-transform: uppercase;
background-image: url(http://i.imgur.com/R2VIlhy.png);
z-index:500;
border: solid 2px #fff;
color: #fff;

}
footer{
height:auto;
width:580px;
font-size:9px;
font-family: tahoma;
padding:3px;
letter-spacing: 2px;
text-align:center;
position:relative;
border-radius: 10px;
font-style:bold;
text-transform: none;
background-image: url(http://i.imgur.com/R2VIlhy.png);
z-index:500;
border: solid 2px #fff;
color: #fff;
}
h4 {
font-family: 'star';
font-size: 30px;
color: #fff;
text-shadow: 1px 1px 1px #808080;
-webkit-text-stroke-width: 0.5px;
-webkit-text-stroke-color: #ddd; }
@font-face{font-family:star; src:url('http://static.tumblr.com/cpgw3dl/u7dmup8xr/lavanderia_regular.ttf');}
@font-face{font-family:south rose; src:url('http://static.tumblr.com/cpgw3dl/uvJmuos7j/southrose.ttf');}
</style>
</head>
<body>
<div style="width:auto; height: 150px; top:0px; overflow: hidden; background-image: url(http://static.tumblr.com/f5257a1065d4d68b3f5e0a77aab11970/cpgw3dl/HSPmuuv0t/tumblr_static_tumblr_mqjvi1vllr1qjv7quo1_1280.jpg); border-bottom: 5px solid #fff;box-shadow: 0px 0px 12px 5px rgba(189, 189, 189, 0.91);
-moz-box-shadow: 0px 0px 12px 5px rgba(189, 189, 189, 0.91);
-webkit-box-shadow: 0px 0px 12px 5px rgba(189, 189, 189, 0.91);"></div>
<center><div style="margin-top:-120px;"><div style="display:inline-block; ">
<nav class="cl-effect-1" id="cl-effect-1"><a style="color:#fff; font-weight:bold;" href="/">Home</a><a style="color:#fff; font-weight:bold;" href="#?w=300" rel="03" class="poplight" >About</a><a style="color:#fff; font-weight:bold;" href="#?w=300" rel="05" class="poplight">Tutorials</a><a style="color:#fff; font-weight:bold;" href="#?w=300" rel="04" class="poplight" >Freebies</a><a style="color:#fff; font-weight:bold;" href="#?w=300" rel="07" class="poplight">Cbox</a><a style="color:#fff; font-weight:bold;" href="http://www.blogskins.com/me/evangrace98" target="_blank">Blogskins</a><a style="color:#fff; font-weight:bold;" href="http://www.blogger.com/follow-blog.g?blogID= YOURBLOGID" target="_blank" >Follow</a></a></nav></div></div></center>
<br><br><br><br><div style="text-align: center; margin-top:-65px; margin-bottom: -55px;">
<img style="border: 5px solid #fff; box-shadow: 0px 0px 12px 5px rgba(189, 189, 189, 0.91);
-moz-box-shadow: 0px 0px 12px 5px rgba(189, 189, 189, 0.91);
-webkit-box-shadow: 0px 0px 12px 5px rgba(189, 189, 189, 0.91);border-radius: 100px 100px 100px 100px; width:110px;" src="http://i.imgur.com/2NatPe1.jpg"></div>
<div style="padding: 55 0 25 0; text-align: center;"><br>
<div style="margin: auto; margin-top: 0; width: 500px; color: #999; font: 12px courier new; text-align: center;"><h4>
"I wanna liberate my imaginations <div style="padding:5px;"></div><p>to go beyond the cosmos."</p></h4>
</div>
</div>
<br>
<div class="wrapper">
<Blogger>
<center><table cellspacing="1px" background-color="#fff">
<tr>
<td class="ha"><$BlogItemTitle$></td><td class="hc"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader></td><td class="hb"><a style="color: #fff; href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>>Leave a comment</a></BlogItemCommentsEnabled></td>
</tr></table></center>
<br>
<$BlogItemBody$><br><br><br>
</Blogger>
<center>
<span style="float:left;"><a class="pager" title="Newer posts" href=<$NewerPosts$>><i class="icon-circle-arrow-left icon-3x"></i></a></span>
<span style="float:right;"><a class="pager" title="Older Posts" href=<$OlderPosts$>><i class="icon-circle-arrow-right icon-3x"></i></a></span>
<br><center><footer><span style="font-family: arial; font-size: x-small;color:#fff ;">Copyright ©.Layout by <a style="color:#aaa;" href="http://blogskins.com/me/evangrace98">Evangelista</a>.</span><span style="font-family: arial; font-size: x-small;color:#fff;">. All rights reserved 2011-infinity.</span></footer></center><br>
</div>
<br>
<div id="07" class="popup_block"><div style="width:auto;height:150px;overflow:auto; ">
<Center><div class="title">Chatbox</div></center>
<br>
<center><div><iframe frameborder="0" width="230" height="75" src="http://www5.cbox.ws/box/?boxid=712646&boxtag=zg4n92&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform5-712646" style="border: 5px solid #ddd;" id="cboxform5-712646"></iframe></div></center>
</div>
</div></div>
</div></div></div></div></div></div></div></div></div></div>

<div id="05" class="popup_block">
<div style="width:auto;height:150px;overflow:auto; "><Center><div class="title">Tutorials for you</div></center>
<br>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
</div>
</div></div></div></div></div></div></div></div></div></div>
<div id="04" class="popup_block"><div style="width:auto;height:150px;overflow:auto; ">
<Center><div class="title">Freebies for you</div></center>
<br>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
</div></div>
</div></div></div></div></div></div></div></div></div></div>
<div id="03" class="popup_block"><div style="width:auto;height:150px;overflow:auto; ">
<Center><div class="title">Hello there!</div><br><center><img src="http://i.imgur.com/ftog37J.jpg" style="width:100px; border:8px solid #fff ;
-moz-border-radius:0px 100px 100px 100px;
border-radius:100px 100px 100px 100px;
width:100px;
height:100px;"><br><br><div class="ar"></div>
<div class="sd">Blarara..your profile goes here..
</div></center></div>
</div></div></div></div></div></div></div></div></div></div>
</body>
</html>
<script src="http://static.tumblr.com/3ikgvxs/K16l80ow6/cufon-yui.js" type="text/javascript"></script>
<script src="http://static.tumblr.com/3driglx/PH8l1y75m/lorie_400.font.js" type="text/javascript"></script>
<script type="text/javascript">Cufon.replace('a:link');</script>
<script src="http://static.tumblr.com/3ikgvxs/K16l80ow6/cufon-yui.js" type="text/javascript"></script>
<script src="http://static.tumblr.com/3driglx/PH8l1y75m/lorie_400.font.js" type="text/javascript"></script>
<script type="text/javascript">Cufon.replace('');</script>
<script src="http://static.tumblr.com/3ikgvxs/K16l80ow6/cufon-yui.js" type="text/javascript"></script>
<script src="http://static.tumblr.com/3driglx/PH8l1y75m/lorie_400.font.js" type="text/javascript"></script>
<script type="text/javascript">Cufon.replace('');</script>

<script>
$(document).ready(function() {
//
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://www.blogskins.com/cachepic_s3.php?sid=400216&pic=http://static.tumblr.com/bc7znss/MN5ma27op/373813c8qyd2txyp.gif" class="btn_close" title="Close" alt="Close" /></a>');
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
return false;
});
$('a.close, #fade').live('click', function() {
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove(); //fade them both out
});
return false;
});
});
</script>

Blogskin #8

*click on the pic for a larger view

the codes:

<html>
<head>
<script type="text/javascript">
document.ondragstart = function () { return false; }; </script>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> i'm an aurophile </title>
<script language=JavaScript>

</script>

<link href='http://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Patrick+Hand+SC' rel='stylesheet' type='text/css'>
<style type="text/css">
#navbar-iframe { display: none }
body { background-color: #FFF; text-align: justify; font: 10px 'verdana'; color: #aaa; line-height: 1.5; text-decoration: none; cursor: url(http://i932.photobucket.com/albums/ad167/DottyDita/1338348137_cursor-small.png), progress !important;}
.content { margin: 0px auto; width: 775px; }
.sidebar { width: 200px; float: left; position: fixed ; top: -80px; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; }
.sidebar:hover { top: 0px; }
.posts { width: 538px; margin-top: 0; margin-bottom: 0; padding: 20px }
::selection {color: #eee; background: #fff;} ::-moz-selection{color: #eee; background: #fff;}
.joon {
position:fixed;
top:0px;
width:700px;
padding-top:20px;
background-color:white;
padding:10px;
height:100px;
left:390px;

z-index:999;
}
bu{
font-size: 40px;
font-family: 'star';
text-transform:uppercase;
}
.popup_block{
display: none;
background: #D3D3D3;
background-image: url(http://i.imgur.com/KsGMEMH.png);
padding: 10px;
font-family: "short stack";
float: left;
color:#fff;
font-size: 10px;
position: fixed;
top: 50%; left: 50%;
z-index: 2;
border: 4px solid #fff;
-moz-box-shadow: 9px 9px 9px #eee;
-webkit-box-shadow: 0 0 15px #eee;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.title{
font-family:"short stack";
font-size:12px;
color:#c0c0c0;

}
textarea {
-webkit-appearance: textarea;
background-color: white;
border: 4px outset #c0c0c0;
border-image: initial;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
-webkit-box-orient: vertical;
resize: auto;
cursor: url(http://media.tumblr.com/tumblr_lpyq18WTCg1qcn2vb.gif),auto;
padding: 2px;
white-space: pre-wrap;
word-wrap: break-word;
font-family: short stack;
font-size: 10px;
line-height:11px;
letter-spacing:0px;
color:#E9E9E9;
}
#pic {
width:120px;
height:120px;
-moz-border-radius:100px;
border-radius:100px;
}
img.btn_close {
float: right;
margin: -5px -5px 0 0;
}
#mimo{
margin-top:-92px;
margin-left:128px;
opacity: 100;
}
@font-face{font-family:star; src:url('http://static.tumblr.com/cpgw3dl/u7dmup8xr/lavanderia_regular.ttf');}
@font-face{font-family:south rose; src:url('http://static.tumblr.com/cpgw3dl/uvJmuos7j/southrose.ttf');}
@font-face {
font-family:tt !important;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf') !important;
}
@font-face {
font-family:jonjun !important;
src: url('http://static.tumblr.com/cpgw3dl/S9Lmk29ee/sign-handwriting_demo-version.ttf') !important;
}
@font-face {
font-family: "tinytots";
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');
}
a.thingi{
word-spacing:10px;
color: #c0c0c0;
text-decoration:none;
font-family:"short stack";
font-size:10px;
background:url(http://i257.photobucket.com/albums/hh205/xoxojays/smilies/05-20-2012/image32-1.gif);
background-repeat:no-repeat;background-size:10px ;padding-left:15px !important;line-height:18px !important;}
a.thingi:hover{
color: #E8D6CC;cursor: url('http://cur.cursors-4u.net/others/oth-6/oth589.cur'), auto;
-webkit-transition:All 0.4s ease ;
-moz-transition:All 0.4s ease ;
-o-transition:All 0.4s ease ;
background:url(http://media.tumblr.com/tumblr_m89lqpqCgU1qdlkyg.gif) !important;
background-repeat:no-repeat !important;background-size:10px !important;padding-left:15px !important;line-height:18px !important; !important}
a.navi1:hover {
color:#000 !important;
}
div.thingi{
-webkit-transition:All 0.4s ease ;
-moz-transition:All 0.4s ease ;
-o-transition:All 0.4s ease ;
background:url(http://media.tumblr.com/tumblr_m89lql8qIE1qdlkyg.gif) !important;color:#555 !important;
background-repeat:no-repeat !important;background-size:15px !important;padding-left:25px !important;line-height:18px !important;}
div.thingi:hover{
background:url(http://media.tumblr.com/tumblr_m89lqpqCgU1qdlkyg.gif) !important;
background-repeat:no-repeat !important;padding-left:25px !important;background-size:15px !important;line-height:18px !important;color:#666 !important}

.pic {
border:2px dashed #ffcdbd;
width:120px;
height:120px;
-moz-border-radius:100px;
border-radius:100px;
padding:10px;
margin-left:170px;

}
.eminem{
font-family:'short stack';
font-size:10px;
color:#c0c0c0;
}
@font-face{font-family:"nara";src:url("http://static.tumblr.com/rbfc1fi/GL1m6m44f/nara.ttf")}
.tr-caption{font: 15px nara; color:#C8D9DB;padding-top: -3px;padding-bottom: 3px;}
.footer { display: inline; font-size: 10px; }
.ttl {
text-align: center;
z-index: 3222;
position:absolute;
margin-top:-70px;
margin-left:180px;
font-family: 'amatic sc';
font-weight: bold;
font-size: 40px;
opacity:.8;
letter-spacing:2px;
color: transparent;
background: -webkit-linear-gradient(transparent, transparent),
url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQgvxtg1ZF1qdBxM0bZGpekhukGBT5BenL51UVcg-fzzbXLgcis-w) repeat;
-webkit-background-clip: text;
}
#t3 {
border: 3px double #F5F5F5;
background: url(http://i.imgur.com/r9lmj.png);
text-align: center;

color: #a9a9a9;
margin-top: 10px;
margin-bottom: 10px;
width:550px;
}
.h1 {padding:2px; font:15pt 'patrick hand sc'; letter-spacing:1px;line-height:10px; color:#c0c0c0; margin-bottom:10px; }.h2{ font-family: consolas; color:#fff; font-size:10px;}
.date { text-align: right; font-size: 9pt;}
.nav {
border-bottom:3px solid #ffcdbd;
width:400px;

margin-top:20px;
text-align:center;
margin-left:52px;
}
.ar {margin: 0 auto; width: 0; height: 0; margin-top:-10px;border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #ECD7AA;}
.sd {width:180px; padding: 0px; background-image:url(http://i.imgur.com/B5Y2m.png); z-index: 100; text-align: justify; border-radius: 5px; -ms-border-radius: 5px; -moz-border-radius: 5px;
-webkit-border-radius: 5px; -khtml-border-radius: 5px;}
img {
filter: alpha(opacity="80");
opacity: 0.8;
-webkit-transition:3s;
}
img:hover {
filter:alpha(opacity="100");
opacity: 1;
-webkit-transition:1s;
}
@font-face {
font-family: "Meow";
src: url(http://static.tumblr.com/kauezwz/YlIlz8nop/theonlyexception.ttf) format("truetype");
}
@font-face{font-family:pixel;src:url(http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf)}
#single {
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
z-index:999;
border:5px solid #f9f9f9;
-moz-border-radius:0px 100px 100px 100px;
border-radius:100px 100px 100px 100px;
width:80px;
height:80px;
}

#fed {
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
z-index:999;
-moz-border-radius:100px;
border-radius:100px;
width:80px;
height:80px;
}
::-webkit-scrollbar {
width:10px;
height:10px;
}
::-webkit-scrollbar {
width: 9px;
height: 8px;
}
::-webkit-scrollbar-track-piece {
background-color: #E8D6CC;
border: 3px solid #FFFFFF;
}
::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
background-image:url(http://i.imgur.com/sbq7PjI.png);
border: 3px solid #ddd;
}
{/block:ifroundedsidebarimage}

a:link { color: #c0c0c0; text-decoration:none; font-family:"short stack"; font-size:12px; letter-spacing:1px;}
a:hover { color: #E8D6CC;cursor: url('http://cur.cursors-4u.net/others/oth-6/oth589.cur'), auto; }
blockquote{
-webkit-transition: All 0.4s ease;
-moz-transition: All 0.4s ease;
-o-transition: All 0.4s ease;
background: url(http://i.imgur.com/N54rX6a.png);
border-radius: 10px;
outline: none;
color: #ccc;
border: 4px solid #F8F5F4;
letter-spacing: 1px;
padding: 5px 5px 5px 5px;
width:320px;
height:50px;overflow:auto;
overflow-x: hidden;
overflow-y: scroll;
margin-top: 5px;
margin-bottom: 5px;
margin-left:100px;
}

.footer { display: inline; font-size: 10px; }
.nav1 { margin-top:-230px; text-align: center; background-color: #fff; padding: 4px; opacity: 0.5;}
.nav2 { color: #666; cursor: pointer; }
.nav2:hover { border-bottom: 1px solid #666; }

#single:hover, #single:hover #fed {
-moz-border-radius:0px 100px 100px 100px;
border-radius:0px 100px 100px 100px;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
}
ul { list-style-type: hiragana }
.blogger-labels { display: none; }
</style>
</head>
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
//
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://cdn2.iconfinder.com/data/icons/bwpx/icons/symbol_multiplication.gif" class="btn_close" title="Close" alt="Close" /></a>');
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
return false;
});
$('a.close, #fade').live('click', function() {
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove(); //fade them both out
});
return false;
});
});
</script>
<body>

<div class="content">
<div class="joon">
<div id="single"><img src="http://i.imgur.com/hgaCeL5.png" id="fed" ><div class="ttl"><center>I'm an <bu>A</bu>urophile</center></div>
</div>

<div id="t3">
<a class="thingi" href="/"><b>H</b>ome</a>
<a class="thingi"><a href="#?w=300" rel="03" class="poplight"><b>A</b>bout</a></a>
<a class="thingi"><a href="#?w=300" rel="08" class="poplight"><b>C</b>box</a></a>
<a class="thingi"><a href="#?w=300" rel="05" class="poplight"><b>T</b>utorials</a></a>
<a class="thingi"><a href="#?w=300" rel="04" class="poplight"><b>F</b>reebies</a></a> 
<a class="thingi" href="/view/magazine"><b>A</b>rchive</a>
<a class="thingi" href="http://www.blogskins.com/me/evangrace98"><b>B</b>logskins</a>
</div>
</div>
<center>
<div class="posts">
<div id="main">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<Blogger>
<center><div class="h1" href="<$BlogItemPermalinkUrl$>"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<img src='http://i.imgur.com/7iCaD.png' style="margin-top:-9px;opacity:.80;"><br><br>
<div class="ar"></div>
<div class="sd">
<center><div class="h2"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> <img src='http://i.imgur.com/iGxniJa.gif' style="opacity: .70;"></div></center>
</div>
<br>
<$BlogItemBody$>
<br><br>
</Blogger>
</div>
<div class="footer">
<span style="float:left;"><a class="pager" href=<$NewerPosts$>><img src=http://i.imgur.com/EFpqa.png></a></span>
<span style="float:right;"><a class="pager" href=<$OlderPosts$>><img src=http://i.imgur.com/4byHR.png></a></span>
<br>
<center><div class="eminem">Copyright ©.Layout by:<a href="http://evangelista-grace.blogspot.com/" target="_blank"> Evangelista</a>.</span> All rights reserved 2011 - Infinity.</div></center><br>

</body>
<div id="07" class="popup_block"><div style="width:auto;height:150px;overflow:auto; ">
<Center><div class="title">Cbox</div></center>
<br>
<center><div><iframe frameborder="0" width="230" height="75" src="http://www5.cbox.ws/box/?boxid=712646&boxtag=zg4n92&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform5-712646" style="border: 5px solid #ddd;" id="cboxform5-712646"></iframe></div></center>
</div>
</div></div>
</div></div></div></div></div></div></div></div></div></div>

<div id="08" class="popup_block">
<div style="width:auto;height:120px;overflow:auto; "><Center><div class="title">Tagboard</div></center>
<center><div style="background:url(http://i.imgur.com/mAyUHjl.png) repeat; border:3px solid #fff;padding:5px; width:213px; border-radius:5px; opacity:.80;">
<div style="border:1px dotted #A9BCF5; background:#fff; width:200px;height:60px; padding: 5px;"><br />
<center><div><div style="margin-top:-20px;"><iframe frameborder="0" width="170" height="70" src="http://www5.cbox.ws/box/?boxid=712646&boxtag=zg4n92&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform5-712646" style="border: 0px solid;border-top:0px" id="cboxform5-712646"></iframe></div></div>
</div></center>
</div>
</div></div><br /></div></div></center>

</div>
<div id="05" class="popup_block">
<div style="width:auto;height:150px;overflow:auto; "><Center><div class="title">Tutorials for you</div></center>
<br>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
</div>
</div></div></div></div></div></div></div></div></div></div>
<div id="04" class="popup_block"><div style="width:auto;height:150px;overflow:auto; ">
<Center><div class="title">Freebies for you</div></center>
<br>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
<ul><a class="thingi" href='/' >LINK</a></ul>
</div></div>
</div></div></div></div></div></div></div></div></div></div>
<div id="03" class="popup_block"><div style="width:auto;height:150px;overflow:auto; ">
<Center><div class="title">Hello there!</div><br><center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZDlvon5xjlU6ofelcXOhh_wpSRixCm3-AYLDsG9Q1oqpJzj_iR3xZlKjD5lZC6v_Ax43rbktRD_cl6tZ-PdccLb6cPbFpxS1DPvOcsUicYR-mpoopBfy7o9qj9UtgVvF63EnGifUvsEM/s1600/iconsmals.png" style="width:100px; border:8px solid #fff ;
-moz-border-radius:0px 100px 100px 100px;
border-radius:100px 100px 100px 100px;
width:80px;
height:80px;"><br><br><div class="ar"></div>
<div class="sd">I'm an introvert, a bibliophile, an aurophile, an otaku and a template designing enthusiast. I'm 15 this year, a victim of PMR. I am sometimes nicknamed "Miss Whatever" because I'm nonchalant in reality. I dread homeworks. Slacking and procrastinating are mundane and monotonous to me. Grammatical errors and not being able to speak flawlessly in English are among my pet peeves. I'm an individual with barometric self-esteem. I am currently residing in Rawang, Selangor, Malaysia. I am Evangelista Grace, a.k.a The computer Geek. REPLACE THIS WHOLE <strike>shit</strike> with your own profile.
</div></center></div>
</div></div></div></div></div></div></div></div></div></div>
<img src='http://31.media.tumblr.com/d567751098c4e1df70324e58c5d77d02/tumblr_mf5h3ybp6h1qc4uvwo1_500.gif' style="right:0px; bottom:20px;position:fixed;width:280px; opacity:.7;">

</html>
<script src="http://static.tumblr.com/3ikgvxs/K16l80ow6/cufon-yui.js" type="text/javascript"></script>
<script src="http://static.tumblr.com/3driglx/PH8l1y75m/lorie_400.font.js" type="text/javascript"></script>
<script type="text/javascript">Cufon.replace('a:link');</script>
<script src="http://static.tumblr.com/3ikgvxs/K16l80ow6/cufon-yui.js" type="text/javascript"></script>
<script src="http://static.tumblr.com/3driglx/PH8l1y75m/lorie_400.font.js" type="text/javascript"></script>
<script type="text/javascript">Cufon.replace('');</script>

Evan♥grace