Coding

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head><div>
<a style="display:scroll;position:fixed;top:5px;left:15px;" href="http://www.blogger.com/follow-blog.g?blogID=9010665318119695715" title="Follow"><img src="http://content.pimp-my-profile.com/i49/5/3/9/f_6c81498eb1e4.png" /></a>

<center><img src="http://content.pimp-my-profile.com/i49/5/3/9/f_9740e82aad1a.png"class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()" onClick="top.focus()" /></center>
<title>© Cool-Blog 2012</title><link rel="shortcut icon" href="http://i1030.photobucket.com/albums/y365/lurunnia/pic002demoji_10027652decoojp.gif"><link href='http://fonts.googleapis.com/css?family=Cedarville+Cursive&v1' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<style type="text/css">

</style>
<script type="text/javascript">
$(document).ready(function() {
//Tooltips
$(".tip_trigger").hover(function(){
tip = $(this).find('.tip');
tip.show(); //Show tooltip
}, function() {
tip.hide(); //Hide tooltip
}).mousemove(function(e) {
var mousex = e.pageX + 20; //Get X coodrinates
var mousey = e.pageY + 20; //Get Y coordinates
var tipWidth = tip.width(); //Find width of tooltip
var tipHeight = tip.height(); //Find height of tooltip

//Distance of element from the right edge of viewport
var tipVisX = $(window).width() - (mousex + tipWidth);
//Distance of element from the bottom of viewport
var tipVisY = $(window).height() - (mousey + tipHeight);

if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
mousex = e.pageX - tipWidth - 20;
} if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
mousey = e.pageY - tipHeight - 20;
}
//Absolute position the tooltip according to mouse position
tip.css({ top: mousey, left: mousex });
});
});
</script>
<script type="text/javascript">

/*
Combo-Box Viewer script- Created by and © Dynamicdrive.com
Visit http://www.dynamicdrive.com/ for this script and more
This notice MUST stay intact for legal use
*/

if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.dropcontent{display:none;}\n')
document.write('</style>\n')
}

function contractall(){
if (document.getElementById){
var inc=0
while (document.getElementById("dropmsg"+inc)){
document.getElementById("dropmsg"+inc).style.display="none"
inc++
}
}
}

function expandone(){
if (document.getElementById){
var selectedItem=document.dropmsgform.dropmsgoption.selectedIndex
contractall()
document.getElementById("dropmsg"+selectedItem).style.display="block"
}
}<div style="background:url(http://i53.tinypic.com/npgo4w.png);border:1px solid #eee;">

if (window.addEventListener)
window.addEventListener("load", expandone, false)
else if (window.attachEvent)
window.attachEvent("onload", expandone)

</script>

</head>

<script language=JavaScript>

</script>
<style type="text/css">

#navbar-iframe { display: none; }

::-webkit-scrollbar {
width: 7px;
height: 7px;
}
::-webkit-scrollbar-track-piece {
background-color: #F5A9A9;
border: 3px solid #fff;
}
::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
background-color: #F78181;
border: 1px solid #fff;
}

img {
-webkit-transition: 0.5s;
border-radius: 10px;
}
img:hover {
-webkit-transition-duration: 0.5s;
-moz-transform: rotate(6deg);
-webkit-transform: rotate(6deg);
}
img.photo { float:left; outline: 0px; padding: 0px; background: none; margin-right: 10px; margin-bottom: 25px; width: 100px; border-top:10px solid #F0F0D8; border-left:10px solid #F0F0D8; border-right:10px solid #F0F0D8; border-bottom:20px solid #F0F0D8;}
img.photo:hover { float:left; outline: 0px; padding: 0px; background: none; margin-right: 10px; margin-bottom: 25px; width: 100px; border-top:10px solid #ECE5B6; border-left:10px solid #ECE5B6; border-right:10px solid #ECE5B6; border-bottom:20px solid #ECE5B6;}

a, a:link {
font: 13 century gothic;
color: #555;
text-decoration: none;
text-transform:uppercase;
letter-spacing: 2px;
-webkit-transition: 1s;
}
a:hover{
color:#434343;
text-transform:Uppercase;
letter-spacing: 4px;
-webkit-transition: 1s;
text-shadow:0px 0px 5px #666;
}
blockquote {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQT8_LVhP3GjRZ1M_ZyjsYXaR0w5cOf6rcq3MjCPjTyG-nMMKj1iJZC4Qqc3zFdIFPNp4AZ2TM606yzQR6YNvndECR33e2Sq40gJabayS_ArLyrAA7CSGY4fgEx0gQpet8D0mJuTwXi1A/s1600/linepattern.png);
border: 1px solid #FFC2D5;
color:#2E2E2E;
border-radius: 10px;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
padding-left: 10px;
margin:1em 40px;
-webkit-transition: 0.5s;
}
blockquote:hover {
border: 1px solid #8ABEEE;
-webkit-transition: 0.5s;
}
i {
text-decoration:none;
color: grey;
border-left: 0px solid #eee;
-webkit-transition: 1s;
}
i:hover {
text-decoration:none;
color: #22aaff;
border-left: 0px solid #eee;
-webkit-transition: 1s;
}
u {
text-decoration:none;
color:#616161;
padding: 3px;
line-height: 10px;
border-bottom: 1px solid #f8b0cf;
-webkit-transition: 0.5s;
}
u:hover {
border-bottom: 6px solid transparent;
-webkit-transition: 0.5s;
}
b {
color: #f8b0cf;
font-weight: bold;
-webkit-transition: 1s;
}
b:hover {
color: #fff;
font-weight: bold;
-webkit-transition: 1s;
}
strike {
text-decoration: strike;
color:#99CAF7;
-webkit-transition: .5s;
}

body {
background-image: url(http://content.pimp-my-profile.com/i49/5/3/9/f_64b6f3faab5b.png);
background-repeat: repeat;
background-color: #FFFFFF;
font-family: Century Gothic;
font-weight: normal;
font-size: 8pt;
color: #6E6E6E;
line-height: 120%;
text-align: justify;
}
h1 {
font-weight: normal;
font-family: Century Gothic;
font-size: 12pt;
color: #6E6E6E;
line-height: 80%;
letter-spacing: 3px;
text-transform: normal;
margin: 0;
border-top: 2px solid #FFBBDD;
border-bottom: 2px solid #99CAF7;
padding: 3px;
-webkit-transition: 1s;
}
h1:hover {
font-weight: normal;
font-family: Century Gothic;
font-size: 12pt;
color: #000;
line-height: 80%;
letter-spacing: 3px;
text-transform: normal;
margin: 0;
border-top: 2px dotted #99CAF7;
border-bottom: 2px dotted #FFBBDD;
padding: 3px;
-webkit-transition: 1s;
}

h3 {
font-weight: normal;
font-family: Century Gothic;
font-size: 7.5pt;
color: #6E6E6E;
background-color: #FAFAFA;
line-height: 100%;
letter-spacing: 3px;
text-transform: uppercase;
margin: 0 0 15px 0;
}

h2 {
font-family: Century gothic;
font-weight: normal;
font-size: 12pt;
letter-spacing: 3pt;
text-transform: normal;
text-align: right;
color: #6E6E6E;
line-height: 60%;
margin: 0 0 5px 0;
border-top: 2px solid #FFBBDD;
border-bottom: 2px solid #99CAF7;
padding: 3px;
-webkit-transition: 3s;
}
h2:hover {
font-family: Century Gothic;
font-weight: normal;
font-size: 12pt;
letter-spacing: 3pt;
text-transform: normal;
text-align: left;
color: #000;
line-height: 60%;
margin: 0 0 5px 0;
border-top: 2px dotted #99CAF7;
border-bottom: 2px dotted #FFBBDD;
padding: 3px;
-webkit-transition: 3s;
}
.box {
font-family: Trebuchet ms;
font-size: 8pt;
padding: 10px;
background-color: #FFFFFF;
border-top: #F8F8F8 1px solid;
border-right: #F8F8F8 1px solid;
border-left: #F8F8F8 1px solid; box-shadow:#A4A4A4 0px 0px 12px;
border-bottom: #F8F8F8 1px solid; -moz-border-radius: 0px 0px 0px; -webkit-border-radius: 0px 0px 0px; padding: 10px 10px 10px 10px;
}
.box1 {
font-family: Trebuchet ms;
font-size: 8pt;
padding: 10px;
background-color: #FFFFFF;
border-top: #F8F8F8 1px solid;
border-right: #F8F8F8 1px solid;
border-left: #F8F8F8 1px solid; box-shadow:#A4A4A4 0px 0px 12px;
border-bottom: #F8F8F8 1px solid; -moz-border-radius: 0px 0px 0px; -webkit-border-radius: 0px 0px 0px; padding: 10px 10px 10px 10px;
}
.navi{
color:#000;
-webkit-transition: 1s;
text-transform:uppercase;
}
.navi:hover{
color:#000;
-webkit-transition: 1s;
text-transform:uppercase;
text-shadow:0px 0px 5px #666;
}

.head {
font-family: Trebuchet ms;
font-weight: normal;
font-size: 15pt;
letter-spacing: -1pt;
text-transform: lowercase;
color: #AAAAAA;
line-height: 100%;
}

#head {
position: absolute;
top: 50px;
left: 280px;
}
#quote{font-family: century gothic; font-size:32pt; color:black; padding-top: 50px; text-shadow:#A4A4A4 0px 0px 12px; line-height:80%; position: absolute; left: 330px;
letter-spacing:1pt;}
#menu {
position: absolute;
top: 132px;
left: 112px;
background-color: #FAFAFA;
}

#sidebar {
position:fixed;
top: 170px;
left: 112px;
width: 230px;
}

#main {
position: absolute;
top: 170px;
left: 360px;
width: 620px;
background-color: #ffffff;
padding: 0 10px 0 10px; box-shadow:#A4A4A4 0px 0px 12px;
border-left: #E5E5E5 1px dotted;
border-right: #E5E5E5 1px dotted;-moz-border-radius: 0px 0px 0px; -webkit-border-radius: 0px 0px 0px; padding: 10px 10px 10px 10px;
}
.nav {
font-size: 11px;
text-align: center;
background-color: #FFFFFF;
color: #000000;
display: block;
width: 220px;
padding: 3px;
-webkit-transition-duration: 1.5s;
}
.nav:hover{
font-size: 11px;
text-align: left;
background-color: #FFFFFF;
display: block;
width: 220px;
padding: 3px;
-webkit-transition-duration: 1.5s;
}

</style>

<body>

<div id="sidebar">

<div class="box"><h2>Disclaimer</h2>
<center><img src="http://content.pimp-my-profile.com/i49/5/3/9/f_e808badab06f.gif" width="200">
<center>
<a class="navi" onClick="document.getElementById('main').innerHTML=document.getElementById('me').innerHTML">Bio</a> ✦
<a class="navi" onClick="document.getElementById('main').innerHTML=document.getElementById('you').innerHTML">MINE</a> ✦
<a class="navi" onClick="document.getElementById('main').innerHTML=document.getElementById('credits').innerHTML">WEBSITE</a> ✦
<a class="navi" onClick="document.getElementById('main').innerHTML=document.getElementById('hire').innerHTML">HIRE</a>
</center>
<br>
<center><b>Mood:</b> HAPPY! =D<br></center>
<center><b>Status:</b> SKIN BARU =D<br/></center>
<br/>
<center><div style= "Border: 1px dashed #C8C8C8; -moz-border-radius: 9px;
border-radius: 10px; padding: 3px 3px 3px 3px">
ⒸREPLACEYOURNAMEHERE2012
<br/>
</div><br>

</div><br>

</div>

<div id="main">
<Blogger>
<h1><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></h1>
<h3><BlogDateHeader>Posted on: <$BlogDateHeaderDate$></BlogDateHeader> @ <$BlogItemDateTime$></h3>
<$BlogItemBody$><br>
</Blogger>
<OlderPosts><a href="<$OlderPosts$>">REWIND ME THE PAST</a></OlderPosts> | <NewerPosts><a href="<$NewerPosts$>">MY SWEET FUTURE</a></NewerPosts>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type='text/javascript' language='Javascript'>
var scrolltotop={
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (1=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="http://content.pimp-my-profile.com/i49/5/3/9/f_b911bc20a652.png"/>', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ center of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport) //if control is positioned using JavaScript
this.$control.css({opacity:0}) //hide control immediately after clicking it
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},
keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},
togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},
init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Scroll Back to Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>

<div id="me" style="display: none;">
<h1>big beauty boss</h1>
<br/>
<center><img src="http://content.pimp-my-profile.com/i49/5/3/9/f_5bc620d2ee4b.png"><br>
REPLACE WITH YOUR OWN PROFILE :)
<br/>

<br>
<a href="YOUR URL BLOG"> << Back </a>
<br>

</div>

<div id="you" style="display: none;">
<h1> Favourite Sites </h1><br>
<br>
<center><img src="http://l1.pimp-my-profile.com/i49/5/3/9/f_47975b150eab.png">
<br>
<a class="links" href="http://pulpyjuicy.blogspot.com/">Eva Jay Will.</a> <b>✦</b> <a class="links" href="http://pulpyjuicy.blogspot.com/">Eva Jay Will.</a> <b>✦</b> <a class="links" href="http://pulpyjuicy.blogspot.com/">Eva Jay Will.</a> <b>✦</b> <a class="links" href="http://pulpyjuicy.blogspot.com/">Eva Jay Will.</a> <b>✦</b>
</br>
<center>
<select style="border: 0px none; padding: 3px; background: #FAAFBE; font-family: trebuchet ms; font-size: 11px; color: #fff; width: 80%; -moz-border-radius:5px 5px 5px 5px; -webkit-border-radius:5px 5px 5px 5px;"
onChange="location.href=this.options[this.selectedIndex].value;" value="GO" target="_blank">
<option selected="selected">Rewind The Random Memories</option><BloggerPreviousItems>
<option value="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></option>
</BloggerPreviousItems>
</select><br>
<br>
<a href="YOUR URL BLOG"> << Back </a>
<br>
</div>

<div id="hire" style="display: none;">
<h1> Hire :) </h1><br>
<center><img src="http://content.pimp-my-profile.com/i49/5/3/9/f_c2167327de9f.png">
<br>Put anything here. Hire this section!</div><br>

<div id="credits" style="display: none;">
<h1> About The Website </h1><br>
<center><img src="http://25.media.tumblr.com/tumblr_loz5l8a95z1qdsbwdo1_500.gif">
<br/><br>
</center><b>Current site name</b>: Cool-Blog.<br>
<b>Current site theme</b>: Pink + Grey + Blue + White it may be a colourful later.<br>
<b>Best view in</b>: Google Chrome and 1366 X 671.<br>
<b>Site opened since</b>: 2012.<br><br>
<center><a href="http://l1.pimp-my-profile.com/i49/5/3/9/f_c1e21779d8ce.png"><imghttpsrc=<a href="http://www.pimp-my-profile.com/"><img src="http://l1.pimp-my-profile.com/i49/5/3/9/f_c1e21779d8ce.png" alt="Image hosted at Pimp-My-Profile.com" width="490"></a>
<center><br>
<div style="background:url(http://i53.tinypic.com/npgo4w.png);border:1px solid #eee;">This awesome template made by <a href="http://pulpyjuicy.blogspot.com/">Eva <a href="http://www.blogskins.com/me/eva_jay">Jay</a>. Images by <a href="http://www.tumblr.com">TDC</a>.
Fonts by <a href="http://www.dafonts.com/">Dafont</a> Of course the tutorials and freebies are from <a href="http://pulpyjuicy.blogspot.com/">Eva William.</a> And it was powered by <a href="http://www.blogger.com/">BLOGGER</a>
</center>
<br>
<a href="YOUR URL BLOG"> << Back </a>
<br>
</div>

</body>
</html>