Anda di halaman 1dari 6

Chat Box

<html><head>
<title>Boyfriend.</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/
1.4.1/jquery.min.js"></script>
<script>$(document).ready(function() {
//
//When you click on a link with class of poplight and the href starts with a #
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
//Pull Query & Variables from href URL
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
//Fade in the Popup and add close button
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a sty
le="outline: none; background-color: #fff;" href="#" class="close"></a>');
//Define margin for center alignment (vertical horizontal) - we add 80px t
o the height/width to accomodate for the padding and border width defined in th
e css
var popMargTop = ($('#' + popID).height() - 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Fade in Background
$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of
the body tag.
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fad
e layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fa
ding transparencies
return false;
});
//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or f
ade layer...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove(); //fade them both out
});
return false;
});
});
</script>

<style type="text/css">
#navbar-iframe {display:none}
@font-face {font-family:tinytots;src: url(http://static.tumblr.com/tjzfmfv/vbEm0
8r8p/04b_03__.ttf); }
body {font:11px trebuchet ms;background:url(http://i.imgur.com/HUFqT.png);backgr
ound-attachment:fixed;background-position:top right;background-repeat:no-repeat;
cursor:url(http://i.imgur.com/iEr3N.png), auto;color:#888;}
a:link, a:visited {color:#980002;text-decoration:none;-webkit-transition:0.5s;-m
oz-transition:0.5s;cursor:url(http://i.imgur.com/IdGWK.png), auto;}
a:hover {color:transparent;text-decoration:none;-webkit-transition:0.5s;-moz-tra
nsition:0.5s;}
blockquote {background:#eee;padding:8px;border:1px solid #eee;}
.nav {z-index: 2;color:#9a9a9a;-webkit-transition:0.5s;-moz-transition:0.5s;back
ground:#1e1e1e;font:13px consolas;text-transform:uppercase;letter-spacing:2px;cu
rsor:url(http://i.imgur.com/iEr3N.png), auto;position:fixed;top:0px;left:0px;mar
gin-bottom:50px;text-align:center;padding:6px;word-spacing: 18px;}
.nav a {color:#9a9a9a;}
.nav:hover, nav a:hover {color:white;-webkit-transition:0.5s;-moz-transition:0.5
s;}
.post {padding:4px;font:11px consolas;text-transform:uppercase;color:white;lette
r-spacing:2px;}
.post a {color:white;}
a.link1 {background:#CC956E;padding:4px;padding-left:6px;padding-right:6px;font:
8px tinytots;text-transform:uppercase;color:white;-webkit-transition:1s;-moz-tra
nsition:1s;}
a.link2 {background:#BF5A4B;padding:4px;padding-left:6px;padding-right:6px;font:
8px tinytots;text-transform:uppercase;color:white;-webkit-transition:1s;-moz-tra
nsition:1s;}
a.link3 {background:#786049;padding:4px;padding-left:6px;padding-right:6px;font:
8px tinytots;text-transform:uppercase;color:white;-webkit-transition:1s;-moz-tra
nsition:1s;}
a.link4 {background:#758549;padding:4px;padding-left:6px;padding-right:6px;font:
8px tinytots;text-transform:uppercase;color:white;-webkit-transition:1s;-moz-tra
nsition:1s;}
.link1 a, .link2 a, .link3 a, .link4 a {color:white;}
a.link1:hover {-webkit-transition:0.5s;-moz-transition:0.5s;text-align:center;}
a.link2:hover {padding-left:69px;margin-left:-69px;-webkit-transition:1s;-moz-tr
ansition:1s;text-align:center;}
a.link3:hover {padding-left:125px;margin-left:-125px;-webkit-transition:1s;-moztransition:1s;text-align:center;}
a.link4:hover {padding-left:175px;margin-left:-175px;-webkit-transition:1s;-moztransition:1s;text-align:center;}
.judul1 {font:italic 15px georgia;text-align:center;border-bottom:1px solid #eee
;color:#758549;margin-bottom:10px;letter-spacing:3px;}
.judul2 {font:8px tinytots;text-align:right;margin-bottom:10px;margin-top:-10px;
color:#888;}
.judul3 {font:italic 18px georgia;text-align:center;letter-spacing:3px;}
.blogger-labels a {font-style:italic;border-top:1px solid #eee; color:#BF5A4B;te
xt-align:right;}
.blogger-labels {font-style:italic;border-top:1px solid #eee; color:#888;text-al
ign:right;}
b, strong {color:#980002;font-weight:bold;}
i, italic {color:#D1C368;font-style:italic;}
s, strike {color:#758549;}
u, underline {border-bottom:2px solid #786049;text-decoration:none;}
ul, li {list-style:url(http://static.tumblr.com/rltvkjt/jwflmr3vh/marcadores71.g
if);margin-bottom:0px;}
::-webkit-scrollbar {height:10px;width: 8px;background:white;}
::-webkit-scrollbar-thumb {background-color:#786049;}
.icon {float:right; width:auto; height:auto; overflow:hidden;}

.icon img {border:5px solid #eee;width:75px;}


::-moz-selection {color:#DCD5BC;background:transparent;}
::selection {color:#DCD5BC;background:transparent;}
.navs {width:100%;height:114px;padding-top:3px;padding-bottom:3px;margin-top:0px
;font-size:8px;font-family:tinytots;text-align:center;opacity:0;color:#777;backg
round-color:white;-webkit-transition: opacity 1s linear;-webkit-transition: all
1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in
-out;}
.navs a {color:white;}
.button:hover .navs {opacity:1;-moz-opacity:1;border:0px solid white;}
.button {float:left;margin-right:2px;height:120px;width:95%;}
#button1 {border:5px solid #eee;background-image:url('http://i1084.photobucket.c
om/albums/j403/auseptiya/bike-2-1.png');background-color:#eee;}
<!------- DON'T REMOVE THIS! OR YOUR NAVIGATION NOT WORK ---------!>
* html #fade { /*\*/position: absolute; top: expression((0 + (ignoreMe = documen
t.documentElement.scrollTop ? document.documentElement.scrollTop : document.body
.scrollTop)) + 'px'); right: expression((0 + (ignoreMe2 = document.documentEleme
nt.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft))
+ 'px');/**/ }
#foo > #fade { position: fixed; top: 0px; right: 0px; }
* html .popup_block { /*\*/position: absolute; top: expression((200 + (ignoreMe
= document.documentElement.scrollTop ? document.documentElement.scrollTop : docu
ment.body.scrollTop)) + 'px'); right: expression((-340 + (ignoreMe2 = document.d
ocumentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.
scrollLeft)) + 'px');/**/ }
#foo > .popup_block { position: fixed; top: 100px; right: 50%; }
#fade {display: none;background: #585858;position: fixed; left: 0; top: 0;width:
100%; height: 100%;opacity: .80;z-index: 9999;}
.popup_block{display: none;background: #fff;padding: 8px; font-family: trebuchet
ms; font-size: 11px; position: absolute;top:250px; left: 50%;z-index: 99999;-we
bkit-box-shadow: 0px 0px 30px #CC956E;-moz-box-shadow: 0px 0px 30px #CC956E;boxshadow: 0px 0px 30px #CC956E;overflow-x:hidden;overflow-y:scroll;height:450px;}
img.btn_close {float: right;}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {position: absolute;}
*html .popup_block {position: absolute;}
<!------- DON'T REMOVE THIS! OR YOUR NAVIGATION NOT WORK ---------!>
</style></head>
<body><script type="text/javascript">
function setAttributeOnload(object, attribute, val) {
if(window.addEventListener) {
window.addEventListener("load",
function(){ object[attribute] = val; }, false);
} else {
window.attachEvent('onload', function(){ object[attribute] = val; });
}
}
</script><script type="text/javascript">
document.ondragstart = function () { return false; }; </script>
<div style="width:100%;" class="nav">
<a href="#?w=500" rel="profile" class="poplight" onClick="changeNavigation('prof
ile')">ABOUT</a> // <a href="#?w=500" rel="other" class="poplight onClick="chang
eNavigation('other')">OTHER</a> // <a href="#?w=500" rel="stuff" class="poplight
onClick="changeNavigation('stuff')">STUFF</a> // <a href="http://www.blogger.co
m/follow-blog.g?blogID=<$BlogID$>" target="_blank">+FOLLOW</a></div>
<table style="font-size: 11px; color: #848484; line-height: 16px; background:tra
nsparent;" width="800" border="0" cellspacing="10">

<tbody><tr>
<td valign="top" style="line-height:15px; letter-spacing:1px; position:fixed;top
:100px;left:50px;font-size:10px; width:220px;">
<div class="judul3">Boyfriend.</div>
<center>
<div class="button" id="button1"><div class="navs">Change with yours! This is ju
st image, hehe xD<br>
<img src="http://i.imgur.com/EhN7p.jpg" width="90%" /></div></div></a>
<br>
<select style="width: 100%; font:8pt georgia; background:#f9f9f9; border: 1px so
lid #ffffff; padding:2px; color: #666666;" name="ArchiveMenu" onChange="location
.href=this.options[this.selectedIndex].value;">
<option value="/">
Travel to Past</option>
<BloggerArchives>
<option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option>
</BloggerArchives>
</select><br><br>
Hi. Im Aulia, 13, INDONESIAN. From Bali \m/ Do you know Bali? Don't? Search in G
oogle :p<br>
Put your welcome note or anything. But, make it short!<br><br>
<a class="link1" href="http://www.facebook.com/aiebershawty">facebook<a> <a clas
s="link2" href="http://www.twitter.com/auseptiyaa">twitter<a> <a class="link3" h
ref="http://auliaaakk.tumblr.com">tumblr<a> <a class="link4" href="http://www.bl
ogskins.com/me/auseptiyaa">bskins<a>
</center>
<td valign="top" style="width:550px; padding-left:5px; padding-bottom:5px; paddi
ng-right:15px;position:absolute;top:20px;left:300px;"><br><br><br>
<table width="550" align="center" cellpadding="0" cellspacing="0">
<tr>
<td style="font:11px trebuchet ms;" width="80%" valign="top">
<blogger><div class="judul1"><$BlogItemTitle$></div>
<div class="judul2"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> @ <$
BlogItemDateTime$> // <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOn
Click$>>[<$BlogItemCommentCount$></BlogItemCommentsEnabled> letters]</a></div>
<$BlogItemBody$>
</blogger></td>
<td width="20%" valign="top">
<div class="icon">
<script type="text/javascript">
var image=new Array()
image[0]='<img src="http://2.bp.blogspot.com/_sv9RTKnkL7c/TDwu8ihdm0I/AAAAAAAAAM
c/fIAnr3OxlFY/s320/bff+1.png">'
image[1]='<img src="http://4.bp.blogspot.com/_sv9RTKnkL7c/TBcePzaDToI/AAAAAAAAAJ
U/BRgyrqsrBBw/s320/candy.png">'
image[2]='<img src="http://3.bp.blogspot.com/_sv9RTKnkL7c/TDwwSvsOrCI/AAAAAAAAAN
U/j2PscvE-Nmc/s320/bffffff.png">'
image[3]='<img src="http://1.bp.blogspot.com/_sv9RTKnkL7c/TBH37hjjUhI/AAAAAAAAAG
I/kZM80dMVxos/s320/ain%27s+2.png">'
image[4]='<img src="http://2.bp.blogspot.com/_sv9RTKnkL7c/TBDR3PRjeKI/AAAAAAAAAF
Q/DqOC27B1kSY/s320/sweets.png">'
image[5]='<img src="http://1.bp.blogspot.com/_sv9RTKnkL7c/TA823ETLg2I/AAAAAAAAAD
I/Ea-dSKFbvNo/s320/4th.png">'
var random=Math.floor(Math.random()*(image.length))
document.write(image[random])
</script></div></td></tr></table>
<div style="float:left"><a class="post" href="<$NewerPosts$>" target="_blank">&l
arr; NEWER</a></div><div style="float:right"><a class="post" href="<$OlderPosts$

>" target="_blank">OLDER &rarr;</a></div><br><br>


</td>
</tr></tbody>
</table>
<div id="profile" class="popup_block">
<div class="judul1">About me</div>
<div class="judul2">I just want to be myself</div>
<div style="float:left;margin-right:6px;margin-bottom:0px;"><img src="http://i.i
mgur.com/3CHh4.jpg" width="70px"/></div>
I am Aulia Septiyaningrum. Get older since September 10th. Proud INDONESIAN.<br>
And bla blablablabla.And bla blablablabla. And bla blablablabla. And bla blablab
labla. And bla blablablabla. And bla blablablabla. And bla blablablabla. And bla
blablablabla. And bla blablablabla. And bla blablablabla. And bla blablablabla.
And bla blablablabla. And bla blablablabla. And bla blablablabla. And bla blabl
ablabla. And bla blablablabla. And bla blablablabla. And bla blablablabla. And b
la blablablabla. And bla blablablabla. And bla blablablabla. And bla blablablabl
a. And bla blablablabla. And bla blablablabla. And bla blablablabla.<br><br>
<blockquote><center><b><u>Make it longer</u></b></center></blockquote>
</div>
<div id="other" class="popup_block">
<div class="judul1">I have friends</div>
<div class="judul2">And you're jealous to them</div>
<center><img src="http://1.bp.blogspot.com/_sv9RTKnkL7c/TBH48VgMXtI/AAAAAAAAAG4/
9alx3Pxa6g0/s320/ain%27s+3.png" width="80%"/><br>
You can put your affiliates.</center>
<br><br>
<!------- DONT REMOVE THIS! -----------!>
<div class="judul1">Credits section</div>
<div class="judul2">They are amazing</div>
Layout: <a href="http://www.blogskins.com/me/auseptiyaa" target="_blank">Aulia<
/a> <a href="http://thisisme-aulia.blogspot.com" target="_blank">Septiya</a><br>
Inspiration: <a href="http://letthaprincess.blogspot.com" target="_blank">Lettha
previous, previous and previous skin</a><br>
Resource: <a href="http://www.colourlovers.com/palette/2056545/Fortnight_Flowers
" target="_blank">colour;</a> <a href="http://cloudondream.blogspot.com" target=
"_blank">picture;</a> <a href="http://letthaprincess.blogspot.com" target="_blan
k">cursor;</a><br>
Some codes from: <a href="http://gyapo.tumblr.com" target="_blank">Gyapo</a><br>
All rights reserved YOUR NAME 2012.<br>
<center><b>Best view in Google Chrome</b></center>
<!------- DONT REMOVE THIS! -----------!>
</div>
<div id="stuff" style="overflow-x:hidden;overflow-y:scroll" class="popup_block">
<div class="judul1">My stuff</div>
<div class="judul2">Don't forget to credit me!</div>
<center><img src="http://1.bp.blogspot.com/_sv9RTKnkL7c/TBH4szQqxvI/AAAAAAAAAGw/
z7lgvaSIk6E/s320/ain%27s+4.png" width="80%"/></center><br>
<b>Tutorials</b> :<br>
<li> <a href="http://thisisme-aulia.blogspot.com/2012/01/tutorial-taruh-fanpagedi-blog.html" target="_blank">Tutorial: Float Fanpage di Blog</a><br>
<li> <a href="http://thisisme-aulia.blogspot.com/2012/01/tutorial-use-domain-coc
c.html" target="_blank">Tutorial: Use domain .co.cc</a><br>
<li> <a href="http://thisisme-aulia.blogspot.com/2012/02/tutorial-bloskins-profi
le-codings.html" target="_blank">Tutorial: Blogskins Profile Codes</a><br>
<li> <a href="http://thisisme-aulia.blogspot.com/2012/02/tutorial-install-and-us
e-custom-fonts.html" target="_blank">Tutorial: Install and use custom fonts</a><
br>

<li> <a href="http://thisisme-aulia.blogspot.com/2012/02/tutorial-copy-and-highl


ight-text.html" target="_blank">Tutorial: Disable keyboard and highligh text</a>
<br>
<li> <a href="http://thisisme-aulia.blogspot.com/2012/02/tutorial-create-your-ow
n-template.html" target="_blank">Tutorial: Create your own classic template</a><
br>
<li> <a href="http://thisisme-aulia.blogspot.com/2012/02/tutorial-image-hover-zo
om.html" target="_blank">Tutorial: Image Hover; Zoom</a><br>
<li> <a href="http://thisisme-aulia.blogspot.com/" target="_blank">Coming soon..
.</a><br>
<li> <a href="http://thisisme-aulia.blogspot.com/" target="_blank">Coming soon..
.</a></li><br><br>
<b>Freebies</b> :<br>
<li> <a href="http://thisisme-aulia.blogspot.com/2012/01/freebies-cursors-own-ma
de.html" target="_blank">Freebies: Cursor</a> <i>own made</i><br>
<li> <a href="http://thisisme-aulia.blogspot.com/2011/12/newbie-in-blogskins.htm
l" target="_blank">Freebies: Classic Template <b>Like A Paradise</b></a><br>
<li> <a href="http://thisisme-aulia.blogspot.com/2012/02/new-skin-submitted.html
" target="_blank">Freebies: Classic Template <b>Everytime Miss You</b></a><br>
<li> <a href="http://thisisme-aulia.blogspot.com/2012/02/new-skin-submitted_07.h
tml" target="_blank">Freebies: Classic Template <b>Starbucks</b></a><br>
<li> <a href="http://thisisme-aulia.blogspot.com/2012/02/2-days-ago-very.html" t
arget="_blank">Freebies: Classic Template <b>Fond of Kindness</b></a><br>
<li> <a href="http://thisisme-aulia.blogspot.com/" target="_blank">Coming soon..
</a><br>
<li> <a href="http://thisisme-aulia.blogspot.com/" target="_blank">Coming soon..
.</a></li><br><br>
</div>
</body></html>