Apenas o tempo..

2012-12-24T01:15:00.000-02:00

Tudo que é bom acaba, e todos que são bons se vão..pra mim o mundo acabou em novembro, nada será com antes, agora só tenho as lembranças de meu melhor amigo, que são infinitas.. Não consigo pensar em nada e minha inspiração virou pó, não tenho ânimo pra levantar de manhã e nem falar com ninguém, por isso com a ajuda de amigos e pessoas que gosto muito, tenho certeza que vou me recuperar..vou viajar esse final de ano pra tentar amenizar a dor que estou sentindo, que parece que nunca vai passar..é uma dor que apenas o tempo pode curar.

Agradeço ao meu pai, meu melhor amigo, pelo que sou hoje..e não me arrependo de ter largado tudo pra ficar ao lado dele quando ele mais precisou..

Blog em Hiatus

Enfeitar link: Linha ondulada

2012-11-26T22:55:00.000-02:00

Oiie gente hoje foi dia de faxina 'canina' aqui em casa, siiiiim dei banho nas minhas filhas *-* elas ja estavam fedorenas e encardidas coitadas rsrs, quem tem cachorro (que detesta banho) em casa, sabe como é divertido \o/ ~~amoo~~.. Olha que eu trouxe xuxuzinhos uma dica bem bacana e simples para quem gosta de usar efeites de linha nos links, além das linhas tradicionais que vou postar, tem a linha ondulada *-* que é bem bonitinha :3 é essa aqui óh

coloque isso no link que deseja 'enfeitar' sempre dentro das chaves { }

   text-decoration: underline;
   color:#f22;
-moz-text-decoration-color: #000;
-moz-text-decoration-line: underline;
-moz-text-decoration-style: dashed;

No exemplo acima onde diz: underline pode ser substituido por:

    text-decoration: none → retira o sublinhado;
    text-decoration: underline → coloca sublinhado;
    text-decoration: overline → coloca a linha no topo do texto;
    text-decoration: underline overline → linha no topo e em baixo do link;
    text-decoration: line-through → coloca a linha no meio do texto.

Exemplos de style, onde diz: dashed no exemplo acima, pode-se usar:

-moz-text-decoration-style: dashed
-moz-text-decoration-style: dotted
-moz-text-decoration-style: solid
-moz-text-decoration-style: double
-moz-text-decoration-style: wavy olha que lindinha *-*

Onde diz: color:#f22; é a cor do texto/link
Onde diz: -moz-text-decoration-color: #000; é a cor da linha

Extras:

text-decoration:blink; → O texto pisca.
letter-spacing:3px; → espaço entre as letras
line-height:2; → altura entre linhas

Se eu ajudei, e vocês usarem.. gostaria de receber os créditos ^^

Bah! Eu quero

2012-11-22T21:38:00.000-02:00

Bah! Eu quero é uma tag que criei onde vou mostrar para vocês minha lista de sonhos de consumo *o* sim a tal de wishlist, o que me faz dizer Bah! eu quero (pai compra pra mim) siiiim, algumas bugigangas totalmente desnecessárias, mas que eu gostaria de ter em casa *-*
Antes de sair para comemorar o aniver da minha prima, vou postar o primeiro item da minha lista
♥ Começando com minha listinha de bugigangas apresento pra vocês a câmera mais vendida do Brasil, a maravilhosa camera Tekpix..ráaaaa to brincando, nem de graça eu ia querer uma geringonça dessas :P
Eu babei pela Domo Toaster, uma torradeira ~~superfouufa~~ do domo kun..ei amigos queridos lindos #voquere de natal hehe parece de brinquedo né?! essa fofura eu achei no amazon.com/Domo Toaster (quem sabe no dia em que eu deixar de ser tão mão de vaca eu compre umas dessas aí..)

Gente não estou conseguindo comentar em alguns blogs, diz que tem que ser membro..mesmo depois de eu logar continua aparecendo a mesma mensagem :( se alguém souber o que posso fazer me avisem, se não..não posso retribuir os comentários

Já chegou o disco voador

2012-11-17T13:27:00.000-02:00

Voltei wiiiiii..Preparem os bolinhos de chuva que eu cheguei pra tomar café ♥

Siim chegou o disco voador o// agora diretamente de Júpiter, saudades *-* achei que nem sabia mais digitar de tanto tempo que fiquei longe do pc e sem net..foi o típico "catando milho" no teclado rsrs..mas agora tenho net em casa novamente *-* aproveitei e mudei.. pois é, nesse tempo que fiquei sem net T.T me distraí lendo livros, pintei meu quarto, ganhei uma maquina de costura ♥ ainda estou aprendendo..eu assisti todas séries e filmes favoritos..cláaaaaassicos..agora deixei o blog exatamente do jeito que queria :) mudou o nome, achei necessário pra deixar meu blog mais meu entendem, vocês podem achar feio, besta e sem sentido ou sei lá, mas pra mim esse nome foi como acertar na mega-sena wiiii..

Ah aos antigos leitores do Bad Reputation eu aviso talvez eu continue postando goodies de vez em quando, mas vou falar dos meus gostos e das bobagens que me mantem nesse mundo de chimangos e maragatos :B
todos posts anteriores permanecem, não apagarei nenhum..não vou jogar trabalho fora né :) só os seguidores que o blogger piroquiou e apagou todos já eram 530 xuxuzinhos :( mas tudo bem blogger..sim, te perdoo T.T

- Os parceiros e afiliados do BR vou começar tudo de novo, pois perdi os links ok..
- Se quiser esclarecer dúvidas que corroem seu cerebrozinho lindo e cheio de graça..leiam a F.A.Q :)

Background's

2012-06-20T13:35:00.002-03:00

Hoje passo aqui rapinho p/ trazer alguns backgrounds variados espero que gostem e usem :) trouxe também aquele que usei no lay anterior e que muita gente me pediu :) ..hoje é isso aee..tchau vou trabalhar T.T

Ah um aviso..tem xuxuzinhos me perguntando e pedindo se faço lay..Não faço não amores :B

Alguns xuxuzinhos me perguntaram onde achei o bg do lay anterior..eu que fiz especialmente para aquele tema e hoje disponibilizo a vocês, mas peço que se usarem de os créditos

Tema Toeto

créditos: ♥ ♥ e outros editados por mim

Gadgets diferentes

2012-06-16T13:03:00.002-03:00

A Ellen e a Samantha me pediram o tuto de como deixar a sidebar assim como a minha, com cada gadget diferente do outro, vou dar o código e o resto é com vocês ^-^ vocês vão ver que é a coisa mais fácil do mundo, sério muitos devem pensar que devem ser aqueles tutoriais com códigos gigantes, mas não é não :) Por hoje é isso bom find p/ vocês e até quarta-feira

Vocês perceberam que cada gadget é diferente, pode-se usar formas, cores e backgrounds..

Vá em design ~ Editar HTML ~ Marque a opção Expandir modelos

Aperte Ctrl F e procure por ~~o nome do gadget~~ que deseja personalizar, veja a imagem:
No caso eu quero personalizar o meu gadget welcome..apertei Ctrl f e procurei por welcome

Identifique o numero do widget id..que no meu caso o meu gadget welcome era HTML4 e faça o seguinte:

Procure por ]]></b:skin>

e acima dele cole:

#HTML4 { código da personalização aqui }

dentro da chave você coloca o que quiser, por exemplo:

#HTML4 {

border: solid 1px #000; Se você quiser borda no widget

background: url(URL DO BG AQUI) repeat; Se quiser background de fundo no widget

background: #000; Se quiser apenas cor de fundo no widget

box-shadow: inset 0 0 15px #ccc, 0 0 3px #aaa; Se quiser sombra no widget

border-radius:10px; Se quiser arredondar

}

É super fácil, não tem mistério, agora é só usar o mesmo processo em todos gadgets que queira personalizar, procure pelo nome identifique o id e personalize ^-^

Obs: Para personalizar o gadget de seguidores o código usado é: #Followers1 { personalização}

Mais Tutoriais:

Separar os widgets

Centralizar título

Colocar gif no título do gadget

Personalizar o Tooltip

2012-06-15T20:38:00.002-03:00

Xuxuzinhos como prometi trouxe p/ vocês um tuto de como personalizar o Tooltip (what?) é aquele balãozinho que aparece quando passamos o mouse no link Passe o mouse viram

Não é difícil e cada um pode personalizar de acordo com seu gosto e com o estilo do blog :)

Vá em design ~ Editar html ~ Ctrl F procure por /body

E cole acima:

código a ser personalizado:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script language='JavaScript' src='http://dl.dropbox.com/u/35546279/qTip_pinkskulldesign.com_.js' type='text/JavaScript'/>

<style>

div#qTip{

margin:17px 0;

padding:3px 5px 3px 22px; /*modifique se precisar ajustar o mini gif*/

display:none;

background:#fff /*Cor de fundo do Tooltip*/ url(url do mini gif)no-repeat 5%;

text-align:left;

font-family: 'arial'; /*modifique a fonte se quiser*/

font-size:12px; /*tamanho da fonte*/

z-index:1000;

position:absolute;

color:#000; /*Cor da letra que quiser*/

border:#ccc solid 1px; /*Cor e estilo da borda que quiser*/

border-radius:10px /*Se quiser arredondar o balãozinho*/

}

</style>

Não mexa no que esta destacado em azul, apenas o que esta em rosa ok

Para aparecer nos seus links use:

<a href='URL' title='Descrição do link'>Nome do link</a>

Brushes de animais fofos

2012-06-14T12:43:00.002-03:00

Oii xuxuzinhos :) Não, eu não exclui o blog! quem tentou acessar o BR viu que o blog estava ~~fechado~~ né..
peço desculpas por não avisar que ia fechar, mas é que tive um problema com o html e o blogger e seus bugs também não ajudam, tive que futricar nele p/ arrumar
morecos agradeço a todos vocês pelos avisos de que o cabeçalho foi plagiado..é eu já tinha visto

E claro, agradeço aos bugs do blogger as vezes o lay antigo volta e algumas letras somem mas logo as coisas voltam ao normal rsrs

Agora sim, Trouxe p/ vocês alguns brushes de bichinhos fofuias espero que vocês gostem

#No fim da tarde eu volto p/ responder comentários e mostro como personalizar o tooltip a pedidos
aquele balãozinho que aparece ao passar o mouse.. passe o mouse aqui

Eu que retirei o fundo das imagens e editei se for usar estas imagens peço que credite

Diminuir espaço do Footer/Rodapé

2012-06-08T13:32:00.002-03:00

Aii xuxuzinhos óh eu teclando de uma ~~lan house~~ T.T achei que nem existiam mais, mas p/ minha sorte achei uma perto de onde trabalho \o/ semana que vem vão colocar internet no serviço *-* daí vou poder atualizar o blog :)
Esse tuto foi o que consegui fazer no pouco tempo que tenho na lan, vou mostrar como diminuir o espaço vazio do footer ou rodapé como quiser chamar :) é um tuto bem curtinho e fácil.

Vá em design Editar HTML Ctrl F e procure por: .footer-inner {

Apague o código destacado na imagem acima e coloque antes de fechar a chave o seguinte:

margin: -50px;

Modifique como quiser o espaço, em quanto maior o numero menor o espaço fica ok!

Se caso não encontrar o código (como acontece em alguns Templates) procure por: Widgets
e cole abaixo dele o código:

.footer-inner {
margin: -50px;
}

É só isso, visualize e quando tiver do jeito que você quer, salve

Imagem com efeito giratório #2

2012-05-29T12:38:00.002-03:00

Aiin estava com saudades da minha plantação de xuxu mais linda das galaxias :) Bah demorei p/ aparecer né?! pois é, realmente não consegui passar aqui, estou trabalhando mais que burro de carga rsrsrs
Mas hoje tenho o dia livre (wiiiiiiiiiiiiiiii) e postarei um tuto simples, vocês lembram que já postei sobre efeito giratório em imagem? aquele bonitinho que a maioria usava nos afiliados, se não lembram vejam aqui .. hoje vou postar o efeito giratório também, mas não igual o outro ~~lógiiico muié~~ espero que gostem :)

Vá em Design Editar HTML Ctrl F e procure por ]]></b:skin>

Cole acima de ]]></b:skin> este código:

Efeito 1:

.rotate{
width:auto;
border-radius:5px;
border: 4px double #ff73da;
-webkit-transition-duration: 1.00s;
-moz-transition-duration: 1.00s;
transition-duration: 1.00s;}

.rotate:hover{
width:auto;
-webkit-transform: rotateY(-360deg);
border: 4px solid #ff73da;
-webkit-transition-duration: 1.00s;
-moz-transition-duration: 1.00s;
transition-duration: 1.00s;}

Imagem gira para o lado =>

Efeito 2:

.rotate{
width:auto;
border: 4px solid #ff73da;
-webkit-transition-duration: 1.00s;
-moz-transition-duration: 1.00s;
transition-duration: 1.00s;}
.rotate:hover{
width:auto;
border: dashed 4px #ff73da;
-webkit-transform: rotatex(-360deg);
-webkit-transition-duration: 1.00s;
-moz-transition-duration: 1.00s;
transition-duration: 1.00s;}

Imagem gira para cima ^

Depois de escolher o estilo Salve!!
Modifique como quiser o que esta destacado em rosa

Obs: Agora para que o código funcione coloque onde você quiser que apareça esse efeito o seguinte código:

Se quiser por link na imagem:

<a href="URL"> <img src="LINK DA IMAGEM" class="rotate"></a>

Se não quiser link na imagem:

<img src="LINK DA IMAGEM" class="rotate">

Nesse post tem estilos de bordas : \o/
Aqui tem as cores : \o/

Espero que tenham gostado é simples, mais é bacaninha o efeito!

Png de Ilustrações

2012-05-20T18:55:00.002-03:00

Faz muito tempo que não trago png de ilustrações né..eu tinha essas há milênios junto com aqueles que já postei, só que são tantas pastas dentro de pastas que esqueci que existia esses aqui *o* hoje dei um jeitinho na bagunça do meu pc e vou postar o que achei p/ não esquecer de novo hihihi e enquanto faço uma pipoca diliça aproveito meu resto de domingo p/ assistir Harry Potter e as Relíquias da Morte, ~~é né, pq acho só eu que não assistiu esse filme ainda.~~
Espero que vocês gostem dos png's..Tchauzim agora vou-me p/ tumba, bjuuuu

As 5 ultimas são do Seu Photoscape Perfeito
outras eu mesma tirei o fundo e bla bla por isso

Negrito, Itálico, Sublinhado e Riscado

2012-05-15T12:51:00.002-03:00

Todos vocês já viram em vários blogs esse tuto..Negrito, Itálico e Sublinhado automático, mais nos que eu vi não tinha como personalizar o ~~Riscado~~..pois aqui tem (wiiiiiiiiiii) e tem efeito hover também, se quiser aprender como faz é só continuar lendo meus xuxuzinhos de cerca preferidos.

Agradeço por todos os recadinhos e sejam bem-vindos os novos seguidores :)
Ah muita gente me perguntou onde peguei as imagens do post anterior..a maioria foi desse tumblr Kpop & Ulzzang

Vá em Design Editar HTML Ctrl F e procure por: ]]></b:skin>
ao encontrar..Cole este código acima dele:

b {color: #ff78a0; text-decoration: none;} /* Estilo negrito */

i {color: #80c3ff; text-decoration: none;} /* Estilo itálico */

u {color: #ffca85; text-decoration: none;

border-bottom: 1px dashed #ffca85;} /* Estilo sublinhado */

s, strike { color: #99aaff; cursor: normal; } /*~~Estilo Riscado~~*/

Pode usar com efeito hover olha só:

b {color: #ff219f; text-decoration: none;} /* Estilo do negrito */

b:hover { cursor: crosshair; color: #000;}

i {color: #d6aef5; text-decoration: none;} /* Estilo do itálico */

i:hover { cursor: crosshair; color: #000;}

u {color: #6dd2f7; text-decoration: none;

border-bottom: 1px dashed #6dd2f7;} /* Estilo do sublinhado */

u:hover {cursor: crosshair ; color: #000;

border-bottom: dashed 1px #000; text-decoration: none; }

Edite como quiser:

Tabela de cores aqui

Alguns ponteiros do mouse:

Crosshair (cruz)
Default (seta)
E-resize (seta que aponta à direita)
Help (ponto de interrogação)
Move (cruz com setas nas extremidades)
N-resize (seta que aponta para cima)
Pointer (mão)

Se não quiser seta diferente basta colocar None onde diz Crosshair no código
Estilos de borda: (nome da borda esta em rosa)

border: 2px outset #ff5e9f

border: 3px inset #FFFF99

border: 4px ridge #46c74e

border: 3px groove #eded58

border: 4px double #FF0000

border: 1px solid #ed574c

border: 2px dashed #6a55ed

border: 2px dotted #919191

Imagens para post

2012-05-11T16:18:00.002-03:00

Oiii meus xuxuzinhos ^-^ depois de meia hora consegui logar =/ a internet tah uma 'coisa' desde ontem, não abria nenhuma página nem o ~~Google~~..só dando uma passadinha rápida aqui hoje, aproveitando que a net deu uma melhoradinha eu trouxe algumas imagens p/ vocês enfeitarem seus posts, espero que vocês gostem e usem..Agora já vou saindo tenho que comprar um presente pra minha mamis ano passado não comprei nada p/ ela *o*

bjuuu e Bom Find pro cês e um Feliz dia das Mães (~~domingo~~) p/ todas as mamães divas desse Brasil zil zil

As imagens estão todas em tamanho original :)

Créditos: tumblr

Autor, Tags e Coments abaixo do título

2012-05-08T12:44:00.002-03:00

Hoje vou postar um tuto bem conhecido por vocês (ou não), nossa amiga Anjinha Nati (~~é assim que esta o nick dela~~) esta com dificuldade de encontrar, Ela queria saber: como colocar Postado por e tals em baixo do título do post ? por isso.. Seus problemas acabaram \o/ eu fiz o tuto p/ tu que até minha prima entendeu..e saiba que ela tem 'dificuldades do tamanho do Godzilla' com essas coisas de computador/internet como ela mesmo diz rsrs..

Vá em Design Editar HTML Marque: Expandir modelos

Ctrl f e procure por: post-footer-line (é onde estão os códigos)

Recomendo que use o bloco de notas pois vamos recortar os códigos e colar em outra parte do Html,

Importante: Preste atenção e recorte sempre desde <span class= até </span> como eu destaquei em rosa, ao contrario vai dar erro no html

Os códigos à serem recortados são:

Código do autor do post

<span class='post-author vcard'>

<b:if cond='data:top.showAuthor'>

<data:top.authorLabel/>

<b:if cond='data:post.authorProfileUrl'>

<span class='fn'>

<a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>

<data:post.author/>

</a>

</span>

<b:else/>

<span class='fn'><data:post.author/></span>

</b:if>

</b:if>

</span>

Código dos comentários

<span class='post-comment-link'>

<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:blog.pageType != "static_page"'>

<b:if cond='data:post.allowComments'>

<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>

</b:if>

</b:if>

</b:if>

</span>

Código dos marcadores

<span class='post-labels'>

<b:if cond='data:post.labels'>

<data:postLabelsLabel/>

<b:loop values='data:post.labels' var='label'>

<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>

</b:loop>

</b:if>

</span>

Para não errar cada código que recorto eu vizualizo p/ ver se não deu erro no html e se copiei certinho, assim não preciso apagar todo código caso algo dê errado.:)

Depois de recortá-los aperte Ctrl F novamente e procure por: <div class='post-header-line-1'/>

e abaixo desse trecho cole os códigos recortados, automaticamente ficarão lado à lado, mas caso você queira deixar uma a baixo do outro, basta colocar <br/> depois de cada </span>

Vai ficar assim:

Se quiser colocar aquela borda como a que eu uso:

Exemplo:

É só apertar Ctrl f e procurar por: .post-header {
Antes de fechar a chave cole o seguinte código:

text-align:center; /*Centraliza o texto*/
border-top: dotted 1px #ddd;
border-bottom: dotted 1px #ddd;

Se por acaso do destino (rsrs) não encontrar esse código cole depois de fechar a chave de h3.post-title

.post-header {

text-align:center;

border-top: dotted 1px #ddd;
border-bottom: dotted 1px #ddd;

padding: 3px; /*Espaço palavra e linha*/

margin: 8px; /*Margem da linha com o post*/

line-height: 10px; /*tamanho (altura) da linha (borda)*/

}

Assim:

Se quiser alterar o tamanho da fonte, adicione antes de fechar a chave do .post-header {

font-size:12px; /*Tamanho que quiser*/

E se quiser colocar aquela barrinha divisória é só acrescentar | no fim do </span> dos códigos.

Estilos de borda aqui: aqui

Tabela de Cores aqui

Obs: Testado no template Travel (viagem) e Watermark (espetacular)

Menu BR ( + bônus )

2012-05-05T21:28:00.002-03:00

Hoje à tarde a Luuh me pediu p/ ensinar como fazer o menu igual ao meu (vocês viram a Lua que linda que esta?!) se vocês também curtiram o menu tanto quanto eu e a Luuh façam bom proveito do tuto então
(OMG! Começou o Kamen Rider Black Rx ♥-♥)

Vou mostrar exatamente o código usado aqui :)

Vá em Design Editar HTML Ctrl f e procure por: ]]></b:skin>

agora que achou é só colar acima o código:

/*-----Início do Menu Bad Reputation-----*/

kbr {

background:#eee; /* Cor de fundo do Menu */

width: 20%; /* Tamanho do Menu (Largura) */

text-align: center;

font-size: 8px; /* Tamanho da fonte */

color: #000; /* Cor da fonte */

letter-spacing:1px; /* Espaço entre as letras */

padding: 4px;

margin: 2px;

float: left;

-moz-border-radius: 25px 10px / 10px 25px;

border-radius: 25px 10px / 10px 25px;

-webkit-transition-duration: .90s; /* Tempo do Efeito */

}

kbr:hover {

background:#000; /* Cor do fundo do Menu ao passar o mouse */

width: 20%; /* Tamanho do Menu ao passar o mouse */

text-align: center;

font-size: 8px; /* Tamanho da fonte ao passar o mouse */

color: #fff; /* Cor da fonte ao passar o mouse */

letter-spacing:1px; /* Espaço entre as letras */

padding: 4px;

margin: 2px;

float: left;

-moz-border-radius: 10px 25px / 25px 10px;

border-radius: 10px 25px / 25px 10px;

-webkit-transition-duration: .90s; /* Tempo do Efeito */

}

/*-----Fim do Menu Bad Reputation-----*/

Modificando as partes destacadas

Tabela de Cores aqui

Para o menu funcionar adicione um Gadget HTML/JavaScript e cole o seguinte:

<a href="URL"><kbr>Nome</kbr></a>
<a href="URL"><kbr>Nome</kbr></a>
<a href="URL"><kbr>Nome</kbr></a>
<a href="URL"><kbr>Nome</kbr></a>

Se quiser mudar a fonte do menu é só adicionar no código antes de fechar a chave:

font-family: arial; /*Nome da fonte que quiser*/

E se quiserem fiz um menu bônus, veja a imagem:

O código deste menu é:

/*-----Início do Menu Bad Reputation-----*/
kbr {
background: #ff0080; /* Cor do fundo do Menu */
width: 20%; /* Tamanho do Menu (largura) */
text-align: center;
font-size: 9px; /* Tamanho da fonte */
color: #fff; /* Cor da fonte */
letter-spacing:1px; /* espaço entre as letras*/
padding: 4px;
margin: 2px;
float: left;
-moz-border-radius: 30px 10px / 10px 30px;
border-radius: 30px 10px / 10px 30px;
-webkit-transition-duration: .90s; /* Duração do Efeito */
box-shadow: inset 0 0 3px #aaa, 0 0 5px #606060; /* Cor da sombra */
}
kbr:hover {
background: #a203ff; /* Cor do fundo do Menu ao passar mouse */
width: 20%; /* Tamanho do Menu ao passar mouse */
text-align: center;
font-size: 9px; /* Tamanho da fonte ao passar mouse */
color: #fff; /* Cor da fonte ao passar mouse */
letter-spacing:1px;
padding: 4px;
margin: 2px;
float: left;
-moz-border-radius: 10px 30px / 30px 10px;
border-radius: 10px 30px / 30px 10px;
-webkit-transition-duration: .90s; /* Duração do Efeito */
box-shadow: inset 0 0 3px #aaa, 0 0 5px #606060; /* Cor da Sombra */
}
/*-----Fim do Menu Bad Reputation-----*/

Menu feito por mim

Gif no título do Gadget

2012-05-03T20:24:00.002-03:00

Xuxuzinhos o tuto que trago hoje é simples e fácil, vou ensinar como colocar gifs nos títulos dos gadgets, como mostra a imagem abaixo, pode colocar diferentes gifs em cada título..ou se quiser destacar algum gadget coloque um gif que fica bem bonitinho quer aprender? continue lendo

Imagem de Exemplo:

Enjoei do antigo lay :B esse não tive muito tempo p/ fazer por isso ficou meio mais ou menos, assim..feeeeio não acho que ficou..mais podia ser melhor né?!

O tema do Lay não precisa de apresentações né?! A maioria de vocês gosta ou já ouviu falar de Vocaloid..

(What?) saiba mais aqui

aiin acho tão bonitinha essa música da Luka ouça a música inspiradora do novo Lay

Pode ser colocado diferentes gifs nos títulos dos gadgets, como fazer isso? é o que vou ensinar..agooora

Vá em Design Editar HTML Marque: Expandir modelos

Ctrl F e procure por: <h2 class='title'>

Veja na imagem onde fica o nome (título) do gadget

Cole o código: <img src='URLDOGIF'/> entre <h2 class='title'> e <data:title/>

Deve ficar assim:

Coloque gifs nos gadgets que quiser procurando pelo nome de cada um, como mostrei na imagem

Veja alguns gifs aqui e aqui

É só isso.. visualize se tiver tudo ok, salve!

Menu Deslizante

2012-05-01T23:24:00.002-03:00

Oiii meus xuxuzinhos marcianos tudo 'bão' com vocês? tomara que sim né, pq eu to ótima wiiiiiiiiiiiiiii
esse tuto que vou postar do menu eu vi no Cherry Bomb, gostei e comecei a usar aqui no blog :) não ocupa espaço e é tri supimpa

Ah..à pedido: Concurso rolando no blog Da Cabeça aos Pés participe clicando aqui

Vamos começar então?

#Normal: conteúdo do menu oculto

#Ao Clicar: Conteúdo aparece

Vá em Design > Editar HTML > aperte Ctrl F e pesquise por: <head>
abaixo da tag cole esse código

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>

<script src='http://static.tumblr.com/ghoye6x/xBmloszst/colpaso.js' type='text/javascript'>

</script>

<script type='text/javascript'>

animatedcollapse.addDiv('jason', 'fade=1,height=80px')

animatedcollapse.addDiv('kelly', 'fade=1,height=100px')

animatedcollapse.addDiv('michael', 'fade=1,height=120px')

animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets')

animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets,persist=1,hide=1')

animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1')

animatedcollapse.addDiv('lion', 'fade=0,speed=400,group=pets,persist=1,hide=1')

animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted

//$: Access to jQuery

//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID

//state: "block" or "none", depending on state

}

animatedcollapse.init()

</script>

Visualize se tiver tudo ok, Salve!
Para o código funcionar vá em design > Adicionar um gadget > HTML/Javascript cole o seguinte código no Gadget ou onde você quer que apareça o menu

<center><a href="#" rel="toggle[rabbit]" data-openimage="collapse.jpg" data-closedimage="expand.jpg">Título 1</a> |
<a href="#" rel="toggle[dog]" data-openimage="collapse.jpg" data-closedimage="expand.jpg">Título 2</a> |
<a href="#" rel="toggle[cat]" data-openimage="collapse.jpg" data-closedimage="expand.jpg">Título 3</a></center>
<div id="rabbit" style="display:none">
Conteúdo do menu deslizante 1</div>
<div id="dog" style="display:none">
Conteúdo do menu deslizante 2</div>
<div id="cat" style="display:none">
Conteúdo do menu deslizante 3</div>

Pronto é só isso :)

Menu Cute

2012-04-26T22:37:00.002-03:00

Não, não é aquele menu que muda o gif ao passar o mouse..mais é cute também
olhe as imagens de exemplo, ele pode ser editado de acordo com o gosto de cada um..pode-se mudar a fonte do menu, tamanho e cores...

Menu Normal (cores)

Ao passar o mouse (muda cor do menu)

Ei xuxu quer aprender a fazer esse menu? Continue lendo

Vá em Design Editar HTML Ctrl F e procure por: ]]></b:skin>

acima dessa tag cole o código:

Deixei nas cores de cada menu..como das imagens de exemplo p/ entenderem melhor :B

#nav{
color:#A8DEE7; */Cor da fonte*/
display: block;
padding-bottom: 1px;
font-weight:bold;
text-decoration:none;
line-height:15px;
vertical-align:middle;
width: 100%;
font-size:9px;
font-family: Tahoma;
margin-bottom: 2px;
background-color:#E3FBFF; */Cor do Menu*/
border-top:1px solid #E3FBFF; */Cor do Menu iguais*/
border-left:1px solid #E3FBFF;
border-right:1px solid #E3FBFF;
border-bottom:1px solid #E3FBFF;
padding:0px;}

#nav:hover{
color:#a1f78f; */Cor da fonte ao passar o mouse*/
display: block;
padding-bottom: 1px;
font-weight:bold;
text-decoration:none;
line-height:15px;
vertical-align:middle;
width: 100%;
font-size:9px;
font-family: Tahoma;
margin-bottom: 2px;
background-color:#ceffc7; */Cor do menu ao passar o mouse*/
border-top:1px solid #ceffc7;
border-left:1px solid #ceffc7;
border-right:1px solid #ceffc7;
border-bottom:1px solid #ceffc7;
padding:0px;}

#nav2{
color:#FFADD6; */Cor da fonte*/
display: block;
padding-bottom: 1px;
font-weight:bold;
text-decoration:none;
line-height:15px;
vertical-align:middle;
width: 100%;
margin-bottom: 2px;
font-size:9px;
font-family: Tahoma;
background-color:#FFEFF7; */Cor do Menu*/
border-top:1px solid #FFEFF7;
border-left:1px solid #FFEFF7;
border-right:1px solid #FFEFF7;
border-bottom:1px solid #FFEFF7;
padding:0px;}

#nav2:hover{
color:#a1f78f; */Cor da fonte ao passar o mouse*/
display: block;
padding-bottom: 1px;
font-weight:bold;
text-decoration:none;
line-height:15px;
vertical-align:middle;
width: 100%;
font-size:9px;
font-family: Tahoma;
margin-bottom: 2px;
background-color:#ceffc7; */Cor do menu ao passar o mouse*/
border-top:1px solid #ceffc7;
border-left:1px solid #ceffc7;
border-right:1px solid #ceffc7;
border-bottom:1px solid #ceffc7;
padding:0px;}

#nav3{
color:#b5abe7; */Cor da fonte*/
display: block;

padding-bottom: 1px;
font-weight:bold;
text-decoration:none;
line-height:15px;
vertical-align:middle;
width: 100%;
font-size:9px;
font-family: Tahoma;
margin-bottom: 2px;
background-color:#f1e3ff; */Cor do Menu*/
border-top:1px solid #f1e3ff;
border-left:1px solid #f1e3ff;
border-right:1px solid #f1e3ff;
border-bottom:1px solid #f1e3ff;
padding:0px;}

#nav3:hover{
color:#a1f78f; */Cor da fonte ao passar o mouse*/
display: block;
padding-bottom: 1px;
font-weight:bold;
text-decoration:none;
line-height:15px;
vertical-align:middle;
width: 100%;
margin-bottom: 2px;
font-size:9px;
font-family: Tahoma;
background-color:#ceffc7; */Cor do menu ao passar o mouse*/
border-top:1px solid #ceffc7;
border-left:1px solid #ceffc7;
border-right:1px solid #ceffc7;
border-bottom:1px solid #ceffc7;
padding:0px;}

Visualize, Se tiver tudinho ok, Salve!

Agora p/ que o menu apareça basta Adicionar um Gadget HTML/JavaScript e colar ou cole onde quiser que apareça:

<div id="nav"><a title="descrição do link" href="URL DA PAGINA">Pagina a</a> – bla bla bla</div>

<div id="nav2"><a title="descrição do link" href="URL DA PAGINA">Pagina b</a> – bla bla bla</div>

<div id="nav3"><a title="descrição do link" href="URL DA PAGINA">Pagina c</a> – bla bla bla</div>

Edite do jeito que quiser
tabela de cores aqui

vi esse código no dannykitty.com

Gifs/Mini Gifs

2012-04-25T23:43:00.002-03:00

Xuuuuxuzinhos vou dar uma passadinha rápida aqui hoje, trouxe alguns mini gifs p/ vocês enfeitarem seus bloguitos amanhã venho cedo do serviço e vou poder postar um tuto de menu beem bacaninha 'pro cês'

é só continuar lendo p/ ver os mini gifs lindinhos espero que gostem tchauu 'inté' amanhã :)

Quer Mais? Tem aqui!

Créditos: (♥1) (♥2) e google imagens

Personalizar Marcadores (ícone)

2012-04-23T16:07:00.002-03:00

Oiiii meus xuxus no post anterior eu mostrei como dividir os marcadores e hoje vou ensinar a personalizar o ícone, aquele • que muita gente acha feio que fica em frente a tag vou mostrar como retirar aquele "pontinho" como mudar o estilo e como colocar gif a La-chan que pediu então eis o tuto xuxu..acho que foi isso que ela pediu (foi o que entendi rsrs)

Vá em Design Editar HTML Ctrl F e procure por: ]]></b:skin>

ao encontrar cole esse código acima dessa tag

.sidebar ul li {

list-style: none;

vertical-align: top;

padding: 2;

margin-left: 5px;

}

"none" significa retirar o ícone • das tags, ficara sem nada na frente..

mais pode ser personalizada

Coloque o estilo que quiser no lugar do none..basta substituir pelo nome que esta abaixo de cada imagem

disc url(link da imagem)

square

circle

Para adicionar linha pontilhada abaixo do link das tags adicione o código antes de fechar a chave }

border-bottom : 1px dashed #000;

Tabela de Cores Aqui

Se você utiliza o código do post anterior é só colar abaixo :)

Fica assim óh:

#Label1 ul li{

float: left;

width: 45%;

}

.sidebar ul li {

list-style: none;

vertical-align: top;

padding: 2;

margin-left: 5px;

}

Visualize se tiver certinho Salve (se repassar credite)

Dividir Marcadores (lista)

2012-04-19T23:50:00.002-03:00

Esse é mais um tuto super fácil e perfeito p/ quem usa os marcadores em lista as vezes são tantas tags que a lista fica gigante..e nem todo mundo gosta do resultado né então vou ensinar a dividi-las

Exemplo:

continue lendo e saiba como fazer

Esse é mais um daquele tutos "sem mistério" super fácil e qualquer um pode fazer que não tem erro!

Vá em Design Editar HTML aperte Ctrl F e procure por: ]]></b:skin>

acima dessa tag cole:

#Label1 ul li{

float: left;

width: 45%;

}

Visualize se tiver tudo ok, salve

Se quiser dividir em 3 colunas é só diminuir o numero da % eu testei com 33% e ficou certinho

Barra de Rolagem (imagem / cor)

2012-04-18T23:13:00.002-03:00

Oie xuxuzinhos da minha vida bah hoje eu descobri que meu pai é mais tri do que eu pensava ^-^ o véio além de curtir Raul Seixas , Cazuza e Johnny Cash que eu já achava triiii *-* descobri que ele gosta de Jaspion e ontem peguei ele assistindo Pokémon rsrs \o/ ele ainda começou a usar um all star vermelho que era do meu irmão *-* bah até me emocionei rsrs vou ver se carrego ele pro AnimeXtreme em Junho!!

(detalhe meu xuxuzinho tem 60 anos já)

tah tah tah..vou postar um tuto "barbada"..eu vou postar como deixar a barra de rolagem colorida e como usar background ao invés de cor

Vá em design > Editar HTML > Aperte Ctrl+F e procure por ]]></b:skin>
Cole o código acima de ]]></b:skin>

/*** Rolagem da Vertical da Página ***/
::-webkit-scrollbar-thumb:vertical {
background: #ff0f72; /*Cor da barrinha que se move*/
border: 1px solid #bgh; /*Coloque borda se quiser*/
height:50px;

border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;

}
/*** Rolagem da Horizontal da Página***/
::-webkit-scrollbar-thumb:horizontal {
background-color:#ff0f72; /*Cor da barrinha que se move*/
border: 1px solid #bgh; /*Coloque borda se quiser*/
height:10px;

border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;

}
/*** Parte fixa da rolagem (fundo que não se move) ***/
::-webkit-scrollbar {
height:10px;
width:15px; /*Largura da barra de rolagem*/
background: #000000; /*Cor da parte fixa, que fica no mundo*/
border: 1px solid #bgh; /*Coloque borda se quiser*/
}

Se quiser colocar background ao invés de cor substitua background: #000; por background: url(URL DA IMAGEM);

Se quiser a barra móvel mais quadrada apague ou diminua os px de:
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;

Personalize do jeito que quiser :)

Post com os estilos de bordas veja aqui
Tabela de cores aqui

*Código do Cherry Bomb eu só acrescentei "background: url(URL DA IMAGEM); " na barra que eu uso :)

Dividir texto/postagem

2012-04-16T00:10:00.002-03:00

Como é bom ter um vizinho desempregado rsrs vou explicar..é que meu vizinho que arrumou meu pc e como ele 'tah pobre' num tem dinheiro p/ sair arrumou meu pc ontem mesmo (guri ligeiro).. Ah vou postar hoje um código bem simples que muitas vezes é bem útil e deixa tudo mais organizado o tuto é de como dividir o texto da postagem em colunas

Exemplo:

Eu, filho do carbono e do amoníaco,
Monstro de escuridão e rutilância,
Sofro, desde a epigênese da infância,
A influência má dos signos do zodíaco.

Profundissimamente hipocondríaco,
Este ambiente me causa repugnância…
Sobe-me à boca uma ânsia análoga à ânsia

Que escapa da boca de um cardíaco!
Já o verme este operário das ruínas

Que o sangue podre das carnificinas

Come, e à vida em geral declara guerra,

Anda a espreitar meus olhos para roê-los,

E há de deixar-me apenas os cabelos,

Na frialidade inorgânica da terra!

Aproveitei a oportunidade e usei como exemplo 'Psicologia de um Vencido' meu poema preferido de um dos meus poetas Divos Augusto dos Anjos..absolutamente incrível!

Como eu disse o código é simples é só colar onde você quiser que apareça o texto assim :)

Esse é o código:

<div align="left" style="float:left;width:50%">
Conteúdo do lado esquerdo aqui</div>
<div align="right" style="float:right;width:50%">
Conteúdo do lado direito aqui</div>

Simples né?! Ah o código você coloca no post mesmo :)

-----------------------------------

Pode dividir também em três *o* olha só como fica:

Exemplo:

A um Carneiro Morto

Misericordiosíssímo carneiro

Esquartejado, a maldição de Pio

Décimo caia em teu algoz sombrio

E em todo aquele que for seu herdeiro!

Maldito seja o mercador vadio

Que te vender as carnes por dinheiro,

Pois, tua lã aquece o mundo inteiro

E guarda as carnes dos que estão com frio! (...)

A Obsessão Do Sangue

Acordou, vendo sangue... - Horrível! O osso

Frontal em fogo... Ia talvez morrer,

Disse. olhou-se no espelho. Era tão moço,

Ah! certamente não podia ser!

Levantou-se. E eis que viu, antes do almoço,

Na mão dos açougueiros, a escorrer

Fita rubra de sangue muito grosso,

A carne que ele havia de comer! (...)

O Coveiro
Uma tarde de abril suave e pura
Visitava eu somente ao derradeiro
Lar; tinha ido ver a sepultura
De um ente caro, amigo verdadeiro.
Lá encontrei um pálido coveiro
Com a cabeça para o chão pendida;
Eu senti a minh'alma entristecida
E interroguei-o: "Eterno companheiro
Da morte, que matou-te o coração?"
Ele apontou para uma cruz no chão,
Ali jazia o seu amor primeiro!
Depois, tomando a enxada gravemente,
Balbuciou, sorrindo tristemente: -
"Ai! Foi por isso que me fiz coveiro!"

Esse é o código:

<div style="float:left;padding:2px;text-align:center">Conteúdo da esquerda</div><div style="float:right;padding:2px;text-align:center">Conteúdo da direita</div><div style="clear:both;padding:2px;text-align:center">Conteúdo de baixo</div>

E aqui aproveitei e usei como exemplos mais trechos de poemas/sonetos do Augusto dos Anjos postei os meus preferidos todos muito lindos p/ quem os entende!

Ah e esse código pode ser usado para imagens e videos ao invés de textos

Fácil né?! espero que tenham gostado :) bjinhus

Sidebar BR

2012-04-09T23:43:00.002-03:00

Oii xuxuzinhos vou ensinar a fazer a sidebar igual a do blog alguns xuxus galopantes já tinham me pedido mais esqueci rsrs Mas também queria lembrar que hoje 09/04/2012 o meu Divo *-* faria 100 anos *o*
quem é ele? é o Amácio Mazzaropi, ah gente eu assisto os filmes dele até hoje..lembro que eu via com meu vô ♥
(que já se foi T-T) Sério..vocês aíi da nova geração talvez nem conheçam e se assistir nem gostem pq não tem nenhum efeito especial, ele não voa e não sai laser dos olhos..quem gosta de simplicidade e quer conhecer um mestre do cinema brasileiro..eu indico os filmes do Mazzaropi (: com certeza vão dar boas risadas eu adoro tenho só 19 dos 32 filmes dele *-*

o ator, diretor e produtor de cinema Amácio Mazzaropi completaria 100 anos nesta segunda (9/4). Nascido em São Paulo, em 9 de abril de 1912, o maior ícone de massas do cinema brasileiro arrastou multidões às salas de exibição e imortalizou a figura do jeca, o caipira destrambelhado e esperto, quase sempre em choque com a modernidade (...) pipocamoderna.com.br

Agora continue lendo e veja o tuto da sidebar ^^

Bah Guris e Gurias é tri barbada ^-^ é só ir em:

Design Adicionar um Gadget HTML/JavaScript

Cola o seguinte código:

<style>

/**SIDEBAR BAD REPUTATION**/

.sidebar .widget {

box-shadow: inset 0 0 10px #eee, 0 0 2px #dbdbdb;

-webkit-border-top-right-radius: 20px;

-moz-border-radius-topright: 20px;

border-top-right-radius: 20px;

-webkit-border-bottom-right-radius: 20px;

-moz-border-radius-bottomright: 20px;

border-bottom-right-radius: 20px;

-webkit-border-bottom-left-radius: 20px;

-moz-border-radius-bottomleft: 20px;

border-bottom-right-radius: 20px;

width:100% !important;

background:#fff; /** COR DO FUNDO DO GADGET **/

margin:33px 0 !important;

padding:10px;

border-top:2px solid #ebebeb;

border-right: 2px solid #ebebeb;

border-left: 2px solid #ffd6eb;

border-bottom: 2px solid #ebebeb;

}

.sidebar .widget h2 {

text-align: center;

box-shadow: inset 0 0 10px #eee, 0 0 2px #dbdbdb;

border-left:2px solid #ffd6eb; /** COR DA BORDA DE CIMA **/;

border-top:2px solid #ebebeb; /** COR DA BORDA DE CIMA **/;

border-right:2px solid #ebebeb; /** COR DA BORDA DE CIMA **/;

background: #ebf9ff; /** COR DO FUNDO DA ÁREA DO TITULO **/

text-shadow:0 1px #ccc/** SOMBRA DO TITULO **/;

color:#ff94c9/** COR DO TITULO **/;

font-size:15px /** TAMANHO DO TITULO **/;

margin-top:-35px /** MARGIN **/;

margin-left:-12px /** MARGIN **/;

margin-bottom:5px /** MARGIN **/;

padding:3px;

width:40%;

overflow:hidden

-webkit-border-top-right-radius: 20px;

-moz-border-radius-topright: 20px;

border-top-right-radius: 20px;

-webkit-border-top-left-radius: 20px;

-moz-border-radius-topleft: 20px;

border-top-left-radius: 20px;}

.sidebar .widget:first-child {

margin-top: 0;

}

/** FIM DA SIDEBAR BAD REPUTATION [bad-reputation-13.blogspot.com.br]**/

</style>

Se quer a sidebar igual a do blog não modifique nada, apenas ajuste as margens

Mas se não quer igual modifique à vontade
Não esqueça:

Se Reblogar Credite!

Adicionar Cursores

2012-04-08T23:38:00.002-03:00

Xuxuzinhos hoje eu trouxe cursores p/ vocês (heeeeee) é é eu disse que voltava segunda..mais já é quase segunda hehe e não estou com sono e depois de encher até os ouvidos com chocolate caseiro (brigadu tia loka do armazem) então espero que vocês gostem coloquei 3 códigos.. o que muda o cursor ao passar o mouse//o que não muda// e como colocar créditos no código dos cursores feitos por vocês

Postei alguns cursores também *o* mais ainda não fiz nenhum..por preguiça rsrs

Para usar esses cursores é só copiar a URL da imagem e ir em design adicionar um gadget Html/JavaScript cola o código e pronto :)
Muda o cursor ao passar em cima de link

<style type="text/css">HTML,BODY{cursor: url('URL DO CURSOR1'), url('URL DO CURSOR1') ,auto;}A:hover{cursor: url('URL DO CURSOR2') , url('URL DO CURSOR2') ,auto;}</style>

Apenas um cursor e com créditos no código

<style type="text/css">body {cursor:url(URL DO CURSOR),default}</style><a href="LINK DO SEU BLOG">NOME DO SEU BLOG</a>

Apenas um cursor (não muda ao passar em cima de link)

<style> body, a, a:hover { cursor:url('URL DO CURSOR'), auto }</style>

Alguns cursores (estáticos):

{{ Karine•in•Júpiter }}

Apenas o tempo..

Enfeitar link: Linha ondulada

Bah! Eu quero

Já chegou o disco voador

Background's

Gadgets diferentes

Personalizar o Tooltip

Brushes de animais fofos

Diminuir espaço do Footer/Rodapé

Imagem com efeito giratório #2

Png de Ilustrações

Negrito, Itálico, Sublinhado e Riscado

Imagens para post

Autor, Tags e Coments abaixo do título

Menu BR ( + bônus )

Gif no título do Gadget

Menu Deslizante

Menu Cute

Gifs/Mini Gifs

Personalizar Marcadores (ícone)

Dividir Marcadores (lista)

Barra de Rolagem (imagem / cor)

Dividir texto/postagem

Sidebar BR

Adicionar Cursores