Menu Lovely

Olha a paçoca!
Tá mais pra um tutorial, mas tudo bem.
O tutorial que eu trouxe dou os créditos ao TTHY. Apenas tranformei pro blogger.
O preview do menu está aqui.
Gostou? Então siga os passos!

1) Vá a Editar HTML e procure por:

]]></b:skin>

2) Acima do código, cole:  *Não modifique nada alem de larguras e cores.

.lovely {
float: center;
width: 110px;
margin-left: 10px;
display: inline-block;
line-height: 18px;
color: #999;
font-family: 'Archivo Narrow', sans-serif;
font-size: 9px;
margin-bottom: 14px;
background: #000000;
overflow: hidden;
padding: 5px;
-webkit-box-shadow: 0px 0px 6px #463b51;
-moz-box-shadow: 0px 0px 6px #463b51;
box-shadow: 0px 0px 6px #463b51;
}
.lovely a {
text-transform: uppercase;
display: block;
background: #000000;
padding: 5px;
margin-bottom: 1px;
border-left: solid 4px  #47e9bd;
color: #fff;
webkit-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;}
.lovely a:hover {
margin-left: -5px;
margin-right: -5px;
webkit-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;
color: #47e9bd;
border-left: solid 4px  #000000;}

3) Em um gadget de HTML, cole e modifique.

<div class="lovely">
<a href="LINK">POSTAGEM</a>
<a href="LINK">POSTAGEM</a>
<a href="LINK">POSTAGEM</a>
<a href="LINK">POSTAGEM</a>
<a href="LINK">POSTAGEM</a>
</div>

Pronto! É bem simples, não? Gostaram? Comentem!

Efeito Road

Bem, quem aqui gosta de chocolate? o/ Eu gosto por que ele é chocolatoso, e vocês?
Chega de ser boba impossível.
E olha a novidade, eu firstei no KW! Tão orgulhosa de mim! Chaca:

Well, eu, trouxe um efeito para afiliados, fica melhor como sister, mas serve afiliados também! O preview é esse, e o efeito pode ser visto no primeiro gadget, com as fotos do Sexy Styles U.U
O único defeito é que não inclui tooltip... Gostaram? Se sim, acompanhe!

1) Crie um gadget de HTML. Nele cole:

<marquee direction="LEFT" behavior="ALTERNATE"><a href="LINK"><img src="IMAGEM" /></a> <a href="LINK"><img src="IMAGEM" /></a> <a href="LINK"><img src="IMAGEM" /></a> <a href="LINK"><img src="IMAGEM" /></a> <a href="LINK"><img src="IMAGEM" /></a></marquee><br/>

2) Modifique as partes em verde de acordo com o que se pede.


É mais simples que fazer brigadeiro. Nem precisa mecher  no HTML do blog inteiro, então é fácil. Espero que tenham gostado! Comentem!

Tutorial: Hover no fundo de Imagens

Hey! A essas horas da noite e eu postando, me senti muito culpada por não postar a quantidade correta :P

Então, já viram aqueles blogs, que quando você passa o mouse por cima de uma imagem, o fundo dela muda? Então, trouxe um tuto explicando como fazer! Aqui está o preview (na imagem da postagem). Vejam como o png da banda fica opaco e o fundo se move. Vou ensinar!

1) Vá a Modelo > Editar HTML.

2) Procure por:

]]></b:skin>

3) Acima do código cole:

a img {
-moz-transition-property: background-position, border, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-moz-transition-duration: 1s;
-webkit-transition-property: background-position, border, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-webkit-transition-duration: 1s;
-o-transition-property: background-position, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-o-transition-duration: 1s;
background: url(http://pt.upphotos.net/wallpapers/2013/02/Fundo-Textura-Pattern-Cora%C3%A7%C3%A3o-485x728.jpg);
padding: 3px;
}
a:hover img {
-moz-transition-property: background-position, border, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-moz-transition-duration: 1s;
-webkit-transition-property: background-position, border, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-webkit-transition-duration: 1s;
-o-transition-property: background-position, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-o-transition-duration: 1s;
background-position: bottom;
-webkit-filter: grayscale(0%);
box-shadow: 0px 0px 30px #fff;
}
.post img {-moz-transition-property: background-position, border, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-moz-transition-duration: 1s;
-webkit-transition-property: background-position, border, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-webkit-transition-duration: 1s;
-o-transition-property: background-position, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-o-transition-duration: 1s;
background: url(http://pt.upphotos.net/wallpapers/2013/02/Fundo-Textura-Pattern-Cora%C3%A7%C3%A3o-485x728.jpg);
padding: 4px;
box-shadow: 0px 0px 10px #fff;
}
.post img:hover {
-moz-transition-property: background-position, border, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-moz-transition-duration: 1s;
-webkit-transition-property: background-position, border, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-webkit-transition-duration: 1s;
-o-transition-property: background-position, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-o-transition-duration: 1s;
background-position: bottom;
-webkit-filter: grayscale(0%);
opacity:.50;
filter: alpha(opacity=50);
box-shadow: 0px 0px 5px #fff;
}

O código é extenso, pois está incluida a opção de a primeira foto da postagem ter um fundo diferente. As partes em vermelho são os URL's do background.

BONUS!

Trouxe poucos backs pra vocês usarem neste tuto, ok?

1o:

Gostaram? Comentem!

Backgrounds diferenntes

Well, party People!

Tenho nada pra dizer, apenas que já sou faixa verde =)

Trouxe um tuto de como por dois backs no blog, como no KW. Óbvio, não estou copiando ele, mas só estou citando como exemplo!

1°) Vá em modelo > Editar HTML.

2°) Aperte Ctrl+F e procure por body { Você irá encontrar um código assim:

body {  font: $(body.font);  color: $(body.text.color);  background: $(body.background);}

 3°) Apague tudo e coloque no lugar este código:

body, html { height: 300px; margin: 0; padding: 0;  }
body { font: $(body.font);color: $(body.text.color);background: url("URL do 1º background") repeat; }
html { background: url("URL do 2º background") repeat; }

Altere o número em vermelho (300) pela altura em pixels do primeiro background. Depois é só substituir as urls das duas imagens nos locais indicados.

Gostaram? 

Tutorial: PSD colorido

Jubis, Jubas, Jabas, quam robou minha charada?
Sério, tinha uma charada em  mente, mas... esqueci.
Então, hoje tenho karate, até enjoei, é na segunda, quarta, sexta e teve até no sabado e domigo! Não dá né?
Então, trouxe um tutorial que 'da uma cara original ao blog, é o psd colorido. O tutorial eu peguei do BTKW.

Para começar,abra no photoshop qualquer foto,selecione as cores.A primeira tem que ser escura ...

...e a segunda ou você deixa branca mesmo ou colocar uma outra cor mais clara.

Agora vá em Camada●Nova camada de ajuste●Mapa de degradê...

Quando aparecer uma caixa,clique em ok.Não altere nada.

O degradê será aplicado à imagem,é só clicar ok de novo.Se ela ficar muito escura você pode clicar dentro da caixa de cor e ir dando brilho e modificando à seu gosto.Clique ok de novo.

Para salvar o  psd,dê ctrl+shift+s e renomeio-o a seu gosto.Atenção!Não mude o formato,senão não dará para aplicar à outras fotos mais tarde.

●Como aplica?

Para usar em outras fotos,abra o psd e a imagem no ps.Selecione a ferramenta mover ou a tecla de atalho v

Clique na imagem do psd e arraste-a para a imagem que você quer aplicar o efeito.

Imediatamente o efeito é aplicado.Depois é só dar ctrl+shift+e depois ctrl+shift+se renomei e salve a imagem no formato png.Pronto.

Resultado:

Tutorial: Disponibilizar algo para download direto

Jujubas do meu caramelo!
Pra quebrar a onda de goodies, fontes e cabeçalhos, trouxe um tutorial de com disponibilizar um download direto, como o daqui, você clica e aparece no PC. Na verdade, é bem simples, mas tem muita gente que não sabe.

Primeiro, tem uns requisitos básicos para hospedar o treco que você quer:
 Tem que ter uma conta no tumblr. Tã Tã Tã!
Simples eu sei.

1) Em uma nova página, acese:

http://www.tumblr.com/themes/upload_static_file

2) Escolha o arquivo e aperte upload file.

3) Vai aparecer de baixo um link. Copie ele e cole onde for disponibilizar!

Eu disse que era simples! Próximo tuto vai ser sobre o blokquote!

Efeito Roundness para Afiliados

Hey, sexy cupcakes!

Já acostumaram né? Espero que sim!

Well, hoje a aula de piano foi legal, mas a senhora insiste em teimar que eu tenho que cortar as unhas? Deixa elas assim, poxa eu tenho unhas enormes e bonitas, qual é o problema deu ter elas assim? Quanta genta não pode ter unha larga? Poxa :(

De resto tudo bem. No colégio indicaram pra eu ver Atividade Paranormal 4, dizem que é a única Atividade Paranormal que não é doidinha e idiota. O que vocês acham dela?

Hoje trouxe um tuto pra vocês, é um efeito para elite de afiliados, ou coisas do gênero. Preview aqui (primeiro gadget > nome Efeito Round)

Siga os passos.

1) Vá a Modelo > Editar HTML.

2) Procure por:

]]></b:skin>

3) Acima da tag cole o seguinte código sem modificar nada além das cores:

.UNNAMED{
OPACITY: 0.6;
-WEBKIT-TRANSITION: 0.5S;
OUTLINE: 1PX SOLID #D9D9D9;
OUTLINE-OFFSET: 0PX;
-WEBKIT-TRANSITION-DURATION: .40S;
}
.UNNAMED:HOVER {
OPACITY: 1.7;
OUTLINE: 1PX SOLID #FFF;
OUTLINE-OFFSET: -50PX;
-WEBKIT-TRANSITION-DURATION: .40S;
BORDER-RADIUS: 35PX;
} 

4) Em um novo gadget de HTML, cole o seguinte:

 <center><a href="LINKDOBLOG" title="NOMEDOBLOG"><img src="IMAGEM" class="UNNAMED" /></a><a href="LINKDOBLOG" title="NOMEDOBLOG"><img src="IMAGEM" class="UNNAMED" /></a> <a/></a></center>
</div>

Só! Simples e fácil. Se tiver qualquer dúvida pode comentar, que eu tento ajudar!

Modelo Editável: Tooltip

Hey, People!

Vou contar nada da minha vida porque vocês são um bando de curiosos que só ficam fuçando a vida dos outros u.u

Brincadeira, bem continuo no seminário de Karatê, mas é o último dia, amnhã já volto pros meus poucos friorentos. Alguém aqui aceita afiliados ou troca de seguir?

Trouxe um tuto sobre a tooltip, mensagenzinha de quando passa o mouse sobre algum lugar, o menu por exemplo. É um modelo editável, mas lembrem, creditem :3

1) Vá a Modelo > Editar HTML.

2) Clique na primeira flechinha, aperte ctrl +F, busque por <head> e cole:

<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/3173073/GothicDarkness/qTip.js' type='text/JavaScript'/>

3) Agore aperte ctrl + F de novo e busque por:

]]></b:skin>

4) Cole o seguinte modelo e edite como quizer.

@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
div#qTip {
margin:2px;
padding: 5px 9px;
border-right-width: 1px;
border-bottom-width: 1px;
display: none;
color:#fff;
background: #9bb3bc;
box-shadow: inset 0 0 20px #5ea0b9, 0 0 10px #ccc;
font-family: silkscreen;
font-size: 8px;
no-repeat 5%;
text-align: left;
position: absolute;
z-index: 1000;
opacity: 1.0;
text-transform: uppercase;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
}

Listo! ~Não liga pro espanhol não, viu?

Dúvidas? Requests? Comentem!

Efeito Gray para Afiliados

Hey Darlings!

Bom, eu estou tendo que programar as postagens, pois agora estou provavelmente lutando karate. Sou multiuso U.U

Então se seu comentário não entrar automáticamente, espere, que depois que eu chegar, vou checar todos e responder também <3

Trouxe outro tuto de efeito para afiliados. Ainda fou descubrir um geito de por isso nas imagens em geral... (PREVIEW)      Let's Go!

1) Vá a Modelo > Editar HTML.

2) Procure por:

]]></b:skin>

3) Acima da tag cole:

.efeitopisca1{
border: 1px solid #E1E1E1;
padding: 2px;
width: 60px;
-webkit-filter: saturate(100%);
-moz-filter: saturate(100%);
-o-filter: saturate(100%);
-ms-filter: saturate(100%);
-webkit-transition-duration: .60s;
}
.efeitopisca1:hover{
-webkit-filter: saturate(0%);
-moz-filter: saturate(0%);
-o-filter: saturate(0%);
-ms-filter: saturate(0%);
-webkit-transition-duration: .60s;
} 

4) Em um gadget de HTML cole o seguinte codigo e faça as alterações necessárias.

<center><a href="LINK" title="NOME"><img src="IMAGEM" class="efeitopisca1" /></a> <a href="LINK" title="NOME"><img src="IMAGEM" class="efeitopisca1" /></a> <a href="LINK" title="NOME"><img src="IMAGEM" class="efeitopisca1" /></a></center> 

Se precisar de mais imagens no gadget so adicione mais codigos.

Gostou? Dúvidas? Comente!

Efeito Elite

Well, trouxe efeito para afiliados pra vocês se enjoarem! Bua ha ha ha ha!

Então, depois de desabafar com vocês espero que gostem, não vou dizer nada, oks? Talvez na próxima!

(PREVIEW) Siga os passos!

1) Vá a Modelo > Editar HTML.

2) Procure por:

]]></b:skin>

3) Acima da tag cole:

.elite{ -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; width:auto; -webkit-transition-duration: 1.20s;box-shadow: 2px 1px 2px #909090;}
.elite:hover{-webkit-transform: rotate(360deg);}

4) Em um gadget de HTML cole o seguinte codigo e faça as alterações necessárias.

<center><a href="Link do Blog" title="Título do Blog"><img src="IMAGEM" class="elite"/></a>
<a href="Link do Blog" title="Título do Blog"><img src="IMAGEM" class="elite"/></a>
<a href="Link do Blog" title="Título do Blog"><img src="IMAGEM" class="elite"/></a>
<a href="Link do Blog" title="Título do Blog"><img src="IMAGEM" class="elite"/></a></center>

Se precisar de mais imagens no gadget so adicione mais codigos.

Gostou? Dúvidas? Comente!

Ilustrações- Estilo KW (Coreanas)

Hey people! Lá vem a louco com outro nome

Hoje demorei pra postar porque quando minha escola acaba tenho aula extracurricular de desenho. Mas não é desenho tipo mangá, não é desenho com giz profissional, tinta, lapis graduado, carvão e giz branco. Tenho uma foto de um aqui, é um retrato feito com giz colorido, vejam:

PS: Eu desenho muito mal, eu sei.

Bem, depois disso tudo, estou participando de um concurso de biologia, mas não com esse desenho, é um de arara, com a mesma técnica. Torçam por mim!
Voltando, eu tinha até uma postagem pronta nos racunhos,mas demorei pra postar por que bloquearam o computador da biblioteca de tal maneira que se digitar "Blogger", a janela do Chrome fecha sozinha. Mas bem, aqui estamos! Trouxe ilustrações no estilo que usamos aqui no blog, mas a do blog eu pego do Kawaii World (créditos <3). Trouxe poucas, mas servem :3
Só mais tarde eu posto o segundo tuto ou goodie, ok?

Gostaram?

Seleção Colorida

Hey Darlings!

Acho que a cada dia vou chamar vocês de um jeito diferente ~.~

O primeiro tuto do dia! Depois já sabem que vai ser algum goodie. Qual vocês querem? Avatar? Bases? Paletas de Cores? Podem escolher! Depois vou contar mais sobre meu dia.

O tuto de hoje é sobre a seleção colorida. Nos temos aqui no blog, é tipo quando você vai copiar um código no Blokquote por exemplo, e é colorido.

Prontos? Go!

1)  Vá a Modelo > Editar HTML.

2) Busque por

]]></b:skin>

3) Cole o seguinte código acima do outro:

::-moz-selection {
background:#915a86; /*Cor do seu Fundo*/
color:#ffffff; /*Cor da sua Fonte*/
}
::selection {
background:#915a86;/*Cor do seu Fundo*/
color:#ffffff; /*Cor da sua Fonte*/
}

4) Modifique a seu gosto.


Gostaram? Sei que é bem simples, mas fica lindo no lay.
Tem dúvidas? Pedidos? Qualquer coisa, comenta!

Menu Breaking Free

Hey Cherries!

To aprendendo francês, mas o problema é que só sei falar petit. Vô me ferrar

Então, estou trazendo o segundo tuto do dia. Talvez amanhã eu traiga um tutorial de como aplicar tooltip... Agora vou ensenhar a aplicar outro menu de sidebar. Sabem, eu tinha um blog antes mas deu xabu no HTML dele e aconteceu que puf! Não funciona mais. Mas eu tinha um blog de preview dele e vou usar pra cá. Ele é feinho mas é so pra vocês terem uma noção do que se trata cada menu.

O nome desse menu se originou de quando eu soube que não tinha aula e me senti livre. Irônico não? OK, o peview é esse daqui, está no primeiro gadget. Comecemos!

1) Vá para Modelo > Editar HTML.

2) Aperte ctrl + F e procure por:

]]></b:skin>

3) Em cima  desse código, cole o seguinte faça as modificações de acordo com a legenda.

.menu3 {background: #eee; font-family:Pf Arma Five; font-size:8px; text-transform: uppercase; color: #262626;
text-align: center; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out;
padding:2px 0px 2px 10px; opacity: 1;margin-bottom:4px; border-right:12px solid #121212; border-left:12px solid #121212; }
.menu3:hover { border-right:2px solid #000; border-left:2px solid #000;  }
.menu3 a { color: #262626;  }
.menu3 a:hover { color: #fff;}
.gallery { list-style: none; margin: 1px auto; padding: 0; width: 502px; font-size: 0; } .gallery li{ display: inline-block; *display: inline; zoom: 1; width: 160px; height: 160px; margin: 1px; transition: all .3s ease; } .gallery:hover li:not(:hover){ -webkit-filter: blur(2px) grayscale(1); opacity: .7; }
.hbri {background-image: url(http://static.tumblr.com/no9dwxu/i5Emfzdv1/brilhoilove.png);
background-repeat: no-repeat;
background-position: -250px -250px;
position: absolute;
left: -5px;
top: 0px;
width: 76px;
height: 76px}
.hbri:hover {background-position: 20px -20px;
-webkit-transition:All 0.9s ease-in-out; -moz-transition:All 0.9s ease-in-out; -o-transition:All 0.9s ease-in-out;}
.pbri {position: relative;
float: left;
margin-left: 18px;
margin-top: 10px;
width: 78px;
height: 78px;
margin-bottom: 1px;
margin-right: 1px;}

PS: As palavras em AMARELO são parte da barrinha preta que se afasta e vai pra margem, a parte em LILÁS, é a parte cinza, onde está escrito. NÃO MUDE A PARTE EM VERMELHO.

4) Em um gadget de HTML cole o seguinte código e modifique com os links e o nome da página.

<div class="menu3"><a href="SEU LINK">Nome da Page </a></div>

Entenderam tudo? Deu certo? Tem dúvidas? Qualquer coisa envia um comentário!

Cursores diferentes no Blog

Hello, cupcakes!

Alguém aqui gosta de aula de matemáticas? Eu não. A professora também não ajuda em nada. Se não saber a matéria antes que ela apresente-a para você, dane-se, tirou zero em um dos critérios. Alguém quer que eu poste algo? Tutorial, Goodies...? Podem pedir pelos comentários!

Ninguém recomendou filmes pra mim... Bom, acho que ninguém tem um bom pra dizer. Noite passada vi um chamado Terror em Amityville. É excelente. Chega de falar de mim, vamos ao que interessa. Ou seja, trouxe um tutorial pra vocês. É bem simples, não tem como dar errado.

Aqui vocês vão aprender como mudar o cursor do blog, tanto o normal, como quando passa em um link, como em alguns blogs. Sigua os passos:

1) Crie um gadget em layout de Código de HTML.

2) Cole o código a seguir e substitua os URL'S pelo link do seu cursor.

<style>HTML,BODY, form, input {cursor: url("URL_CURSOR_NORMAL"), auto;}</style>
<style>A:hover{cursor:
url("URL_CURSOR_NO_LINK"), auto;}</style>

Depois eu vou disponibilizar cursores, mas por enquanto,  usem o do Free Cursors 4U, tem uns bem cutes e outros que dão pro gosto de qualquer um!

Barra de Rolagem Colorida

Hey, Cherries.

Estou postando o segundo tuto, para completar um bom número de postagens diárias. Perguntinha simples: Qual é seu filme de terror favorito? Sério, viciei em filmes assim U.U
Ainda mais de noite, eu pego o PC, ponho no Netflix e fico vendo os filmes. Recomendam algum? Pra vocês, sugiro O Decenso, é muito bom!
Bem, vamos agora ver a barra de rolagem! É um detalhe super cute que vai com qualquer blog! Para usar ele, sigua os passos.

1) Vá em Design, depois em Editar HTML, dê Ctrl+F e procure por:

]]></b:skin>

2) E ANTES dele, cole:

*{
scrollbar-face-color:#FF69B4;
scrollbar-highlight-color:#FF69B4;scrollbar-3dlight-color:#343434;scrollbar-darkshadow-color:#343434;scrollbar-shadow-color:#FF69B4;scrollbar-arrow-color:#343434;scrollbar-track-color:#343434;}::-webkit-scrollbar {width: 12px; height: 4px; background:#343434; }::-webkit-scrollbar-thumb { background: #FF69B4; } 

3) Visualize, se estiver tudo certinho, salve.


Observação: Os códigos destacados em roxo representam a cor da barra, e os destacados em verde representa a cor de fundo. Se quiser, você pode mudar as cores, basta substituir os códigos destacados. Essa tabela tem várias cores. Não funciona no Firefox.

Menu Wish

Hello, cherries!

Bom, apresentação: Me chamo Beatriz e sou nova na blogosfera. Eu tinha um blog que ninguém acessava, chamado Wild Cake, mas um dia fiz uma modificação no HTML dele e estragou... :( mas, voltei com o WN. Tenho bastante vontade de postar tutos, goodies e etc. Espero que vocês gostem dos meus materiais :3

O Tuto de hoje é de um menu daqueles de sidebar. (PREVIEW) Siga os passos:

1) Vá a Modelo e clique em Editar HTML.

2) Aperte CTRL+F e procure por

]]></b:skin>

3)Assima desse código cole o seguinte:

.wish3 {-webkit-box-shadow: 0 0 1em #eee;
background: #fff; font: normal 10px &#8216;tahoma&#8217;;
padding: 0px; color: #a0a0a0 ;
text-align: center; margin: 1px; padding-bottom: 2px;padding-top: 2px;
border-radius: 0px;
border-left:1px solid #c40759;
border-right:1px solid #c40759;
-webkit-transition-duration: .90s;}
.wish3:hover { -moz-box-shadow: 0 0 1em #eee; -webkit-box-shadow: 0 0 1em #eee; box-shadow: 0 0 1em #eee;
border-left:25px solid #c40759;
border-right:25px solid #c40759;
filter:alpha(opacity=100);}

4) Modifique as cores ao seu gosto.

5) Vá a Layout e crie um gadget de HTML.

6) Nele, cole o seguinte código, modificando de acordo com o que está escrito.

<div class="wish3">
<a href="URL DA PÁGINA">Nome da Página</a></div>

7) Se precisar, multiplique o código quantas vezes quiser para criar mais caixinhas de link.

Se tiverem alguma dúvida é só comentar!