You are on page 1of 6

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/st rict.dtd"> <html> <head> <link href='http://fonts.googleapis.com/css?

family=Leckerli+One' rel='stylesheet ' type='text/css'> <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/> <title>{title}</title> <link href='http://fonts.googleapis.com/css?family=Playfair+Display' rel='styles heet' type='text/css'> <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 hre f="#" class="close"><img src="http://static.tumblr.com/iihcsbj/Uazlowyai/close9. png" title="Close" class="btn_close" alt="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"> #fade { /*--Transparent background layer--*/ display: none; /*--hidden by default--*/ background: #fff; position: fixed; left: 0; top: 0; width: 100%; height: 100%;

opacity: .80; z-index: 9999; } .popup_block{ display: none; /*--hidden by default--*/ background: #fff; padding: 20px; border: 20px solid #f3f2ee; float: left; font-family:verdana; font-size:10px; color:#9C9995;line-height:15px; position: fixed; top: 35%; left: 50%; z-index: 99999; /*--CSS3 Rounded Corners--*/ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } img.btn_close { float: right; margin: -55px -55px 0 0; } /*--Making IE6 Understand Fixed Positioning--*/ *html #fade { position: absolute; } *html .popup_block { position: absolute; } ::selection{ /* Safari and Opera */ background:#fafafa; } ::-moz-selection{ /* Firefox */ background:#fafafa; } body {background:url('http://img135.imageshack.us/img135/5328/doily.jpg') fixed repeat-x;font-family:verdana; font-size:10px; color:#9C9995;line-height:15px; ba ckground-color:#ffffff;} #navbar-iframe{display:none;} select, input, text {background:#4B4B4B; color:#eee; padding:4px; border:1px sol id #444;font-family:arial; font-size:11px;} a {text-decoration:none; color:#D1A9A9;outline:0;font-weight:bold} blockquote {background: #fcfcfc; border:1px dashed #eee; padding:5px;} .border{border:1px dashed #E0E0E0; padding:3px; margin-right:4px;} #main {width:800px; margin: 80px auto;padding:30px 20px;} #fixed {position:fixed;} #sidebar{text-align:center;float:left; width:220px; margin-right:20px; overflow: hidden;} #content{float:right; width:560px; overflow:hidden;} .header {font-family: 'Lekton', arial, serif;color:#ECECEC;font-size:21px;font-w eight:bold;line-height:32px;text-shadow:1px 1px 1px #000;background:url('http:// img10.imageshack.us/img10/2997/stripe2155807f8e9df6638.png');padding-top:2px;pad ding-right:7px; text-align:right;width:500px;margin-bottom:40px; height:32px;flo at:right} .entry{margin-top:20px;} .h1{font-family: 'Playfair Display', arial, serif; color:#E0D7D3;font-size:24px; font-weight:bold;letter-spacing:0px;margin-bottom:10px}

h1{font-family: 'Leckerli One', cursive; color:#E0D7D3;font-size:24px;font-weigh t:bold;letter-spacing:0px;margin-bottom:10px} .h2{font-family: 'Playfair Display', arial, serif; color:#E0D7D3;font-size:16px; font-weight:bold;letter-spacing:0px;margin-top:10px;margin-bottom:5px} .h3{background:url('http://img228.imageshack.us/img228/5516/rosesl.jpg')no-repea t;font-family: 'Playfair Display', arial, serif; color:#E0D7D3;font-size:23px;fo nt-weight:bold;letter-spacing:0px;padding-left:61px;margin-bottom:5px} .h4{color:#DACBCB;font-size:11px;padding:2px 2px 0px 2px; font-weight:normal;mar gin-bottom:10px;} .h4 a{font-weight:bold;color:#DACBCB;font-size:11px;padding:2px 2px 0px 2px;marg in-bottom:10px;} navi {list-style:none; padding:3px; display:inline-block;color:#DBC4C4; backgrou nd:#FFFCFC;border-bottom: 1px solid #F1E3E3;border-right: 1px solid #F1E3E3;bord er-top: 1px solid #FFFCFC;border-left: 1px solid #FFFCFC;margin-bottom:1px; widt h:35px;} navi:hover {list-style:none; padding:3px; display:inline-block;color:#D3BBBB; ba ckground:#FFFCFC;border-top: 1px solid #F1E3E3;border-left: 1px solid #F1E3E3;bo rder-bottom: 1px solid #FFFCFC;border-right: 1px solid #FFFCFC;margin-bottom:1px ;} #info {font-family: verdana; color:#888; text-align:left; font-size:7pt; borderbottom:1px solid #f1f1f1; padding:2px;} .linha {border-bottom: 2px dashed #DACBCB; margin-bottom: 4px; padding:2px;} </style> </head> <div style="position:fixed; left:90%; top:5%;"><a href="http://tumblr.com/follow /barbiies">+follow</a></div> <div id="about" class="popup_block"> Sobre voc Sobre voc Sobre voc Sobre voc Sobre voc Sobre voc Sobre voc Sobre voc </div> <div id="blog" class="popup_block"> Sobre o blog Sobre o blog Sobre o blog Sobre o blog Sobre o blog Sobre o blog So bre o blog Sobre o blog <div class="linha"> </div> Modificaes e adaptao: <a href="http://barbiies.tumblr.com">Flora</a><br> Retirado do site: <a href="http://www.blogskins.com/info/363230/">BlogSkins</a> Menu PopUp: <a href="http://karinefernandes.tumblr.com">Karine</a> </div> <body> <div id="main"> <div id="fixed"> <div id="sidebar"> <div class="h1"><center>{title}</center></div> {description}

<div class="h2">navi</div> <a <a <a <a href="/"><navi>Home</navi></a> href="#?w=500" rel="about" class="poplight"><navi>She</navi></a> href="#?w=500" rel="blog" class="poplight"><navi>Blog</navi></a> href="/ask"><navi>Ask</navi></a>

</div></div> <div id="content"> <!-- POSTS --> {block:Posts} <div id="box"> <!-- LINKS --> {block:Link}<a href="{URL}" class="link" {Target}><h1>{Name}&nbsp;</h1></a>{/blo ck:Link} <!-- TEXTOS --> {block:Title}<h1>{Title}&nbsp;</h1>{/block:Title} {block:Text}{Body}{/block:Text} <!-- QUOTE --> {block:Quote}{Quote}<p align="right"> b></p>{/block:Quote} <!-- PHOTO --> {block:Photo}<center> {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" width="5 70" border="0" class="borderimage"/>{LinkCloseTag}</center> {block:Caption}{Caption}{/block:Caption} {/block:Photo} <!-- PHOTOSET --> {block:Photoset}<center>{Photoset-500}</center>{block:Caption}{Caption}{/block:C aption}{/block:Photoset} <!-- LINKS --> {block:Link}{block:Description}<P>{Description}</p>{/block:Description}{/block:L ink} <!-- CHAT --> <table> {block:Lines} <tr> {block:Label}<td class="name">{Label}</td>{block:Label} <td class="words">{Line}</td> </tr> {/block:Lines} </table><br /> {/block:Chat} <b>{block:Source}{Source}{/block:Source}</

<!-- VIDEOS --> {block:Video}<center>{Video-500}</center>{block:Caption}{Caption}{/block:Caption }{/block:Video} <!-- ASKS RESPONDIDAS --> {block:Answer}<img src="{AskerPortraitURL-48}" align="left" class="askborder"><d iv class="bubble"><span></span>{Asker}: {Question}&nbsp;</div>{Answer}{/block:An swer} <!-- AUDIO --> {block:Audio}<BR> <center>{AudioPlayerWhite}<br><small> {FormattedPlayCount} pessoas ouviram! {block:ExternalAudio} | <a href="{External AudioURL}">Download!</a>{/block:ExternalAudio}</small></center><BR> {block:Caption}{Caption}{/block:Caption} {/block:Audio} <!-- NOTES, TAGS... --> <div class="linha"> </div><div id="info"><a href="{Permalink}">Postado</a> em {S hortMonth} {DayOfMonth}{DayOfMonthSuffix} com <note>{NoteCount}</note> note(s) < img src="http://mhilkadiniz.zip.net/images/putihp.gif"> <a href="http://tmv.prot o.jp/reblog.php?post_url={Permalink};">Reblogue</a>! {block:RebloggedFrom}<a hre f="{ReblogParentURL}">via</a> / {/block:RebloggedFrom}{block:ContentSource}<a hr ef="{SourceURL}" target="_blank">{block:SourceLogo}<img src="{BlackLogoURL}" wid th="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo} {block:NoSourceLogo}original{/block:NoSourceLogo}</a>{/block:ContentSource}</div > {block:HasTags}<div id="info">Tags: {block:Tags} <a href="{TagURL}">{Tag}</a># { /block:Tags}</div>{/block:HasTags} </div><BR> {/block:Posts} <br /> </div><br /> </Blogger> </div> </div> </body> </html>

You might also like