Quinta-feira, 5 de Julho de 2012
Alguém quer? Já não usava o CSS há cerca de um ano mas hoje decidi voltar ao trabalho, e estou a adorar aprender novas coisas e reaprender o que já me esqueci.
Anyway, fiz um visual. Fiz 2 versões, uma com o cabeçalho de fundo branco e outra com o fundo transparente. Se alguém quiser, só tem de deixar 15 comentários neste post e de seguida enviarei o código CSS. Digam também qual querem :)
Design 1:

Design 2:

Sábado, 30 de Outubro de 2010

Reserva comentando este post 25 vezes, incluindo o teu nome, nome do blog/site e url.
I did this, a long time ago.
Sexta-feira, 3 de Setembro de 2010
visual de http://electric-skies.pt.to/ para a M !
RESERVADO

40 Comentários, com css
Quinta-feira, 12 de Agosto de 2010
Oláá'
Daqui a uns dias o blog vai completar um aninho e eu gostava de completar os 4000 comentários do blog até lá.
Aqui estão alguns trabalhos meus... A maior parte deles fiz sem destino.
Hope you like.
Não se esqueçam de dizer o nº do header que pretendem no comentário.
E não faço css, mas posso dar bases para códigos css.
beijinhos ,
ily
Header 1: (reservado)

Reserva comentando este post 20 vezes, incluindo o teu nome, nome do blog/site e url.
Header 2:

Reserva comentando este post 20 vezes, incluindo o teu nome, nome do blog/site e url.
Header 3:

Reserva comentando este post 20 vezes, incluindo o teu nome, nome do blog/site e url.
Header 4:

Reserva comentando este post 20 vezes, incluindo o teu nome, nome do blog/site e url.
Header 5:

Reserva comentando este post 20 vezes, incluindo o teu nome, nome do blog/site e url.
Header 6: (reservado)

Reserva comentando este post 20 vezes, incluindo o teu nome, nome do blog/site e url.
Segunda-feira, 9 de Agosto de 2010

Medidas: 800x400
Formato: Png
Url: Não disponível
Reserva comentando este post 20 vezes, incluindo o teu nome, nome do blog/site e url.
música: hush hush - pussycat dolls
Domingo, 8 de Agosto de 2010

Medidas: 800x400
Formato: Png
Url: Não disponível
Reserva comentando este post 20 vezes, incluindo o teu nome, nome do blog/site e url.
Sexta-feira, 25 de Junho de 2010
Header 1

Medidas: 674x400
Formato: Png
Url: Não disponível
Reserva comentando este post 20 vezes, incluindo o teu nome, nome do blog/site, url e diz que é este o header que queres.
Header 2

Medidas: 674x400
Formato: Png
Url: Não disponível
Reserva comentando este post 20 vezes, incluindo o teu nome, nome do blog/site, url e diz que é este o header que queres.
Aqui está :b
50 comentários (a)

http://img208.imageshack.us/img208/2557/summerrain.png
Segunda-feira, 21 de Junho de 2010
Olá :D
Desculpa a demora (:
CSS:
body { margin:0px 10px 0px 10px; background: url('http://i152.photobucket.com/albums/s186/tanlynn789/pattern3-1.png') repeat top-left; }
form { margin:0; padding: 0; }
blockquote{color:#424242; padding:5; background:#f2f2f2; -webkit-border-radius:5; -moz-border-radius:5;}
blockquote:hover{color:#1C1C1C; background:#e6e6e6;}
::selection{color:black; background:transparent;}
a, a:link, a:active {color:#ffffff; text-decoration:underline;}
a:visited { color:#ffffff; text-decoration:underline;}
a:hover {color:#e18f9d; text-decoration:underline;}
p { margin:0px;}
.clear { clear: both; height: 0px; line-height: 0px; font-size: 1px;}
#container { font-family:Trebuchet MS, Arial, Helvetica, sans-serif; width:820px; font-size:13px; color:#E18F9D; background: transparent; border-left:0px solid #940928; border-right:0px solid #940928; margin: auto; }
#header { width:820px; height:140px; margin-bottom:18px; padding-left:18px; }
#header .title { font-size:30px; font-weight:bold; color: transparent; backgroud-color: transparent; padding-top:10px; width:400px; text-align:left;}
#header .title a, .title a:link, .title a:visited, .title a:active, .title a:hover{ color:#ffffff; text-decoration:none;}
#header .descri { color:#bb294a; width:724px; text-align:left; font-size:13px; font-weight: bolder; }
#header .descri a, .descri a:link, .descri a:visited, .descri a:active, .descri a:hover { color:#bb294a; text-decoration:underline;}
#extras { float:right; display: none; width:200px; padding-left:18px; background-color: transparent; background-color: #ceed60;}
#extras .title { font-size:18px; color:#ffffff;}
#extras p { color:#ECA4B0; font-weight:bold;}
#extras p a, p a:link, p a:active{ font-size:11px; color:#eca4b0; text-decoration:underline; font-weight:normal;}
#extras p a:visited { color:#eca4b0; text-decoration:underline;}
#extras p a:hover { color:#ffffff; text-decoration:underline;}
#extras .comment { margin-bottom: 10px; padding-right: 10px; font-size: 11px; }
#extras .sep {margin-bottom:20px;}
#extras .sepB {margin-bottom:5px; margin-top:5px;}
#extras .sapo img { border:1px solid #CCC;}
#profile img { border:1px solid #000; /*float:left;*/ margin-right:7px;}
#messenger img { border:0px solid #CCC;}
.buton { margin-top:5px; font: bold 11px Trebuchet MS, Arial, Helvetica, sans-serif; color: #eca4b0; background: #bb294a; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #eca4b0; border-right-color: #eca4b0; border-bottom-color: #eca4b0; border-left-color: #eca4b0;}
.form { font: normal 11px Trebuchet MS, Arial, Helvetica, sans-serif; color: #eca4b0; background: #ffffff; border: 1px solid #eca4b0; margin-top:5px; padding-left:3px; padding-right:3px;}
#calendar { text-align:center;}
#calendar .day { width:19px; padding:2px 3px; height:19px; float:left; text-transform:uppercase; font-size:9px; color:#eca4b0;}
#calendar .dayNum { font-size:10px; font-weight:bold; color:#eca4b0; float:left; width:19px; padding:2px 3px; height:19px;}
#calendar .dayNum a, .dayNum a:link, .dayNum a:visited, .dayNum a:active{ color:#ffffff; text-decoration:underline; background-color:#bb294a; padding:2px 3px; }
#calendar .dayNum a:hover { color:#bb294a; text-decoration:underline; background-color:#eca4b0; padding:2px 3px; }
#calendar .today { font-size:10px; font-weight:bold; color:#bb294a; float:left; width:19px; padding:2px 3px; height:19px;}
#calendar .today a, .today a:link, .today a:visited, .today a:active { color:#bb294a; text-decoration:underline; padding:2px 3px; background-color:#ffffff;}
#calendar .today span { color:#bb294a; padding:2px 3px; background-color:#ffffff;}
#calendar .today a:hover{ color:#ffffff; text-decoration:underline; padding:2px 3px; background-color:#940928;}
#barrita { text-align:center;}
#posts { text-align: center; float:left; width:680px; padding-right:50px; font-size:13px; color:#32372f; background-color: #D3D3D3; border: 20px solid #1C1C1C;}
#posts .date { font-size:12px; font-weight:none; text-transform:uppercase; margin-bottom:0px; color:#89b36f; font-family: verdana;}
#posts .title { font-family: georgia; font-size:26px; font-weight:bold; color:#ffffff; margin-bottom:5px;}
#posts .title:hover {
color:#E3556E;
text-shadow:1px 1px 1px #99D66F;
}
#posts p { margin:0px 0px 5px 0px; color:#32372f; font-size:10px; font-weight:normal; font-family: verdana;}
#posts p a, p a:link, p a:active {display:block; border-bottom:1px solid #bdbdbd;}
#posts p a:visited {display:block; border-bottom:1px solid #bdbdbd;}
#posts p a:hover {text-align:right; font-style:italic; font-family:georgia; cursor:vertical-text; background:#f2f2f2; margin:2 0 2 0; padding-right:5; border:1px solid #bdbdbd;}
#posts .sign { font-size:10px; margin-top:15px; color:#e18f9d;}
#posts .sep { width:483px; border-bottom:1px solid #de5473; height:15px; margin-bottom:20px;}
#posts .sepB { margin-bottom:15px;}
#posts .otherInfo { margin:5px 0px; font-size:11px; color:#e18f9d;}
#posts .nav { font-size:10px; text-align:center; padding-bottom:20px;}
#posts .nav2 { font-size:10px; text-align:right; padding-bottom:20px;}
#comentar .title { font-size:16px; color:#FFF; font-weight:bold;}
#comentar .campo1 { float:left; width:40px; padding:12px 4px 3px 0px; font-weight:bold; font-size:12px; color:#FFF;}
#comentar .campo1B { float:left; width:50px; padding:12px 4px 3px 0px; font-weight:bold; font-size:11px; color:#e18f9d;}
#comentar .campo1C { width:460px; float:left; padding:12px 4px 3px 0px; font-size:13px; font-weight:normal; color:#e18f9d;}
#comentar .campo1D { float:left; padding:10px 4px 3px 0px; font-size:11px; font-weight:normal; color:#e18f9d; width:460px;}
#comentar .campo2 { float:left; padding:10px 4px 3px 0px; font-size:11px; font-weight:normal; color:#e18f9d; width:390px;}
#comentar .campo2 em { font-style:normal; font-weight:bold; color:#e18f9d; font-size:13px;}
#comentar .campo2B { padding:10px 4px 3px 0px; font-size:11px; font-weight:normal; color:#e18f9d;}
#comentar .campo2C { width:390px; float:left; padding:12px 4px 3px 0px; font-size:13px; font-weight:normal; color:#e18f9d;}
#comentar .campo2C em { font-style:normal; font-weight:bold; color:#e18f9d;}
#comentar .campo2D { padding:12px 4px 3px 0px; font-size:13px; font-weight:normal; color:#e18f9d;}
#comentar .campo2D em { font-style:normal; font-weight:bold; color:#e18f9d;}
#comentar p { margin:0px; color:#E18F9D; font-weight:bold; font-size:16px;}
#comentar p a, p a:link, p a:visited, p a:active { color:#E18F9D; text-decoration:underline; font-weight:bold; font-size:16px;}
#comentar p a:hover {color:#FFF; text-decoration:underline;}
#comentar .txt {color:#e18f9d; font-size:13px;}
#comentar .options {font-size:10px;}
#comentar2 { margin-left:30px;}
#comentar2 .campo1C { width:430px; float:left; padding:12px 4px 3px 0px; font-size:12px; font-weight:normal; color:#e18f9d;}
#comentar2 .campo2C { width:360px; float:left; padding:12px 4px 3px 0px; font-size:12px; font-weight:normal; color:#e18f9d;}
#comentar3 { margin-left:60px;}
#comentar3 .campo1C { width:400px; float:left; padding:12px 4px 3px 0px; font-size:12px; font-weight:normal; color:#e18f9d;}
#comentar3 .campo2C { width:330px; float:left; padding:12px 4px 3px 0px; font-size:12px; font-weight:normal; color:#e18f9d;}
#comentar4 { margin-left:90px;}
#comentar4 .campo1C { width:370px; float:left; padding:12px 4px 3px 0px; font-size:12px; font-weight:normal; color:#e18f9d;}
#comentar4 .campo2C { width:300px; float:left; padding:12px 4px 3px 0px; font-size:12px; font-weight:normal; color:#e18f9d;}
#comentar5 { margin-left:120px;}
#comentar5 .campo1C { width:340px; float:left; padding:12px 4px 3px 0px; font-size:12px; font-weight:normal; color:#e18f9d;}
#comentar5 .campo2C { width:270px; float:left; padding:12px 4px 3px 0px; font-size:12px; font-weight:normal; color:#e18f9d;}
/*SEARCH RESULTS*/
#pesquisa { margin-bottom: 20px;line-height: 25px; }
#pesquisa .campo1B { width: 65px; float:left; }
#pesquisa .campo2B { float:left; }
#pesquisa .campo3B { margin-left: 65px; float:left; }
#searchResults .quantos { color:#e18f9d; font-size:10px;}
#searchResults .pesquisapor { font-size:11px; font-weight:bold;}
#searchResults .pesquisapor a, .pesquisapor a:link, .pesquisapor a:visited, .pesquisapor a:active{ text-decoration:underline; font-weight:bold; font-size:11px;}
#searchResults .pesquisapor a:hover { text-decoration:underline;}
#results li { list-style-type:decimal; font-size:14px; font-weight:bold; margin:0px 0px 15px 0px;}
/*title*/#results h1 { margin:0px; font-size:18px; color:#ffffff;}
#results h1 a, h1 a:link, h1 a:visited, h1 a:active{color:#ffffff; text-decoration:none; font-weight:bold; font-size:14px;}
#results h1 a:hover { color:#ffffff; text-decoration:underline;}
/*data e autor*/#results h2 { margin:0px; font-size:10px; color:#e18f9d; font-weight:normal;}
/*texto*/#results p { margin:0px; font-weight:normal; font-size:13px;}
/*highlight*/#results em { font-weight:bold; font-style:normal;}
/*url*/#results h3 { margin:0px; font-size:11px; font-weight:normal; }
#results h3 a, h3 a:link, h3 a:visited, h3 a:active{ text-decoration:underline; font-weight:normal; font-size:11px;}
#results h3 a:hover { text-decoration:underline;}
#navega p{ text-decoration:none; float:right; margin:0px 0px 25px 0px; padding:2px 4px 2px 4px; font-size:10px; font-weight:bold; text-transform:uppercase;}
#navega p a, p a:link, p a:visited, p a:active { text-decoration:none; padding:2px 4px 2px 4px; font-weight:bold; font-size:10px;}
#navega p a:hover { text-decoration:none; padding:2px 4px 2px 4px; background-color:#BB294A;}
#navega em { text-decoration:none; padding:2px 3px 2px 3px; font-style:normal; font-weight:bold; border:solid 1px #BB294A;}
/*ADWORDS*/
#adw {font-size:10px; margin-bottom:20px; width:150px;}
#adw #adwtop * p {color:#ffffff;}#adw #adwcont .adwtit a {color:#eca4b0; text-decoration:underline;}
#adw #adwcont .adwtit .title {color:#eca4b0; text-decoration:underline; font-size:10px;}
#adw #adwsub {display:none;}
#adw #adwcont .adwtit {font-weight:normal;}
#adw #adwcont .adwtit a:hover, #adw #adwsub a:hover, #adw #adwcont
.urlbot a:hover {color:#ffffff; text-decoration:underline;}
#adw #adwcont .urlbot a, .urlbot a:link,.urlbot a:visited,.urlbot
a:active {color:#eca4b0; text-decoration:underline;}
#adw #adwcont #adwad4, #adw #adwcont #adwad5, #adw #adwtop #adwright,
#adw #adwbot, #adw #adwcont .s {display:none;}
#adw .pos {display:none;}
#adw .url {display:none;}
#adw .adwline {margin-bottom:10px;}
#posts, #extras { overflow: hidden; }
#extras .comment a { color: #eca4b0; }
#extras .comment a:hover { color: #ffffff; }
depois tens de fazer as alterações que desejares.
HTML:
(cola num componente do teu blog e coloca no topo dos posts):
<html><head>
<title> ... </title>
<style>
#navbar-iframe{display:none;}
::selection{color:black; background:transparent;}
body{}
table{font-family:arial; font-size:8pt; color:#424242;}
#form{border:1px solid #f2f2f2; padding:5; background:#FCFCFC;}
#form2{border:1px solid #f2f2f2; padding:5; margin:5 auto 5; background:#FCFCFC;}
#bar{font-family:georgia; font-size:12pt; background:#f2f2f2; padding:5 0 2 5; color:#424242; letter-spacing:-1pt; margin-bottom:3;}
#bar2{font-family:georgia; font-size:10pt; background:#ECECEC; padding-left:15; color:#585858;}
#photo{float:left; border:2px solid #f2f2f2; margin-right:3;}
a{text-decoration:none; color:#424242;}
a:hover{color:#848484;}
a.escape{display:block; border-bottom:1px solid #bdbdbd;}
a.escape:hover{text-align:right; font-style:italic; font-family:georgia; cursor:vertical-text; background:#f2f2f2; margin:2 0 2 0; padding-right:5; border:1px solid #bdbdbd;}
a.stalks{font-style:italic; color:#848484;}
a.stalks:hover{color:#424242;}
blockquote{color:#424242; padding:5; background:#f2f2f2; -webkit-border-radius:5; -moz-border-radius:5;}
blockquote:hover{color:#1C1C1C; background:#e6e6e6;}
</style></head>
<body>
<br><br>
<table width="700" align="center" cellspacing="5" cellpadding="0">
<tr>
<td width="200" valign="top" style="padding-top:30;">
<div style="font-family:georgia; font-size:40pt; color:#D43A3A; font-style:italic; line-height:50%;">titulo</div>
<div style="font-family:georgia; font-size:20pt; font-style:italic; border-bottom:1px solid #f2f2f2;">do blog aqui (;</div>
<span style="font-family:georgia; font-size:10pt; font-style:italic; color:#585858;">Desire</span><br>
Desejos, Ambições, Interesses.
<br>
<a class="escape" href="http://www.blogger.com">Friend</a>
<a class="escape" href="http://www.blogger.com">Friend</a>
<a class="escape" href="http://www.blogger.com">Friend</a>
<a class="escape" href="http://www.blogger.com">Friend</a>
<a class="escape" href="http://www.blogger.com">Friend</a>
<a class="escape" href="http://www.blogger.com">Friend</a>
<a class="escape" href="http://www.blogger.com">Friend</a>
<a class="escape" href="http://www.blogger.com">Friend</a>
<a class="escape" href="http://www.blogger.com">Friend</a>
<a class="escape" href="http://www.blogger.com">Friend</a>
<br>
<div style="background:#FCFCFC; color:#424242; border:1px solid #f2f2f2; padding:3;">
Layout by <a href="www.saraaicha.blogs.sapo.pt">ROCKSTAR101</a><a href="http://www.blogskins.com/me/16thday">16thday</a> ©
</td>
<td width="500" valign="top">
<div align="right"><div style="border-bottom:3px solid #f2f2f2;"><span style="-webkit-border-top-left-radius:8; -webkit-border-top-right-radius:8; -moz-border-radius:8 8 0 0;
font-size:9pt; font-family:georgia; padding:3 10 0 10; background:#f2f2f2;">
<a class="stalks" href="mailto:YOUEMAILHERE"title="Email">You know</a>
<a class="stalks" href="http://YOURFACEBOOKLINK"title="Facebook">you love</a>
<a class="stalks" href="http://YOURBLOGSKINLINK"title="Blogskins">me.</a></b></span></div></div>
<div id="form" style="border-bottom:4px solid #f2f2f2;">
<div id="photo">
<img src="http://i45.tinypic.com/egoklv.jpg" align="left" style="margin:3;"></div>
<span style="font-family:georgia; font-size:10pt; font-style:italic; color:#585858;">Isto aqui será um texto sobre ti.</span><br>
teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste
<br>
<center><embed allowfullscreen="true" allowscriptaccess="always" height="25" width="300" src="http://www.youtube.com/v/d-JCplvPSvo&hl=pt_BR&hl=pt_BR&fs=1&hl;autoplay=1"></embed><center>
</div>
</td></tr></table>
</body></html>
espero que gostes , se estiver algo mal diz que eu mudo na boa (:
Sábado, 5 de Junho de 2010


O layout é entregue com css. Não tem barra lateral mas tem uma parte no topo dos posts que serve como barra. Reserva este layout comentando este post 40 vezes incluindo o teu nome, o nome do teu blog e o seu url.