Evan♥grace

Tutorials&Freebies(including Blogskins!)

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>
<!--
//Disable right click script III- By Renigade (renigade@mediaone.net)
//For full source code, visit http://www.dynamicdrive.com
var message="";
///////////////////////////////////
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
document.oncontextmenu=new Function("return false")
// -->
</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>