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>

Evan♥grace