Tutorial - Brilho Caindo do Mouse

Hey gente!
Hoje vim trazer um tutorial que uso quase sempre!
Este tutorial era de um blog que desapareceu e eu já nem me lembro do nome porque já desapareceu há uns 3 ou 4 anos....... ._.'

Tutorial - Menu Baby Girl

Oi minna! Vim começar com a ronda de tutoriais ahaha...

Antes de mais queria informar aos *homens* que o nome do menu não tem NADA a ver com ele, por isso também podem usa-lo. Aliás, gente, é o menu que eu coloquei no layout do Washington... Aproveitando para fazer publicidade (www), Wash, querido, deves-me um gelado/sorvete. u-u'

O nome do menu foi dado pela criadora (ou não) do código... Como eu já disse, com o desaparecimento de uma grande parte dos blogs de tutoriais eu resolvi colher os poucos que ainda encontro (ou guardei em word ahaha) para não serem perdidos... Então aqui está um que era do tão conhecido (e falecido) Kawaii World.

Tutorial - Mexendo as sidebars

Oi minna! Há algum tempinho que não trazia um tutorial neh?
Bom, desta vez trouxe um bem útil para quem gosta de ter o blog organizado... Eu já tenho este tutorial em word há algum tempo, mas sei que o aprendi num blog, blog esse que não sei como se chamava, e nunca mais vi............... #gomen
Whatever... Eu acho que este tutorial deve ser usado especialmente para layouts com duas sidebars/barras laterais.
Como está no momento, vejam o espaço pequenino que deixei entre sidebar e post:

Seleção de Texto Colorida

Hello gente bonita!
Hoje vim ensinar a colocar seleção de texto colorida no blog.
Sabe quando passa o mouse e fica assim?

Pois é, isso é seleção de texto colorida.
Então vamos ao tutorial!

Como colocar links dentro da imagem do cabeçalho

Oi gente!
Vim ensinar a colocar link's no cabeçalho!
É um pouquinho trabalhoso, por isso precisam estar com atenção, certo?
Vocês nem sabem como quase morro para fazer este tipo de tutoriais ._.'

Para terem uma base do que é, aqui está um design que eu fiz no blog uma vez e utilizei esta técnica de linkar o cabeçalho:

Tutorial - Menu em cortininha (Menu Tracks)

Ois ois ois! \0/
Lembram-se deste menu no Animes Espectaculares?

Foi quando a Camii-chan fez este excelente design pro meu bloguinho, qui fofi :3
Obigada mais uma vez Camii-chan >-<

Como retirar "Assinar: Postagem (Atom)"

Oi minna!
Vim ensinar como tirar essa coisa chata de "Assinar: Postagem (Atom)" que aparece no final das vossas postagens...

Vá a Design, Modelo, Editar HTML, dê um CTRL F e procure:
]]></b:skin>

Acima dessa tag, coloque:

.feed-links{display:none !important;}

Visualize e se tudo estiver bem, guarde.
E prontinho, bem simples, não é mesmo? ;)

Créditos:

Just Paradise

Como colocar "template free" no meu blog?

Oi gente! Antes de mais obrigada a todos aqueles que me deram os parabéns pela nova maninha no post anterior >-<'
Então, resolvi vir postar esse tutorial para ajudar várias pessoinhas que não sabem, ou têm preguiça de fazer layouts para os seus bloguinhos :3

Na verdade é bem simples, só precisam de estar com alguma atenção e seguir passo a passo, certo?
Vamos lá!

Como retirar o espaço entre Navbar e Cabeçalho

E pronto pessoinhas!! \0/
O ultimo dos 3 tutoriais de que falei hoje, aqui está ;)

Desta vez vim ensinar a retirar o espaço entre Navbar e Cabeçalho do blog.

Vão a "Design", depois a "Editar HTML", e procurem por:

/* Header

Depois aparecerá:

/* Header
----------------------------------------------- */
.header-inner.Header .titlewrapper,.header-inner .Header .descriptionwrapper { padding-left: 10px;padding-right: 10px;}

 O que está sublinhado, substituam por:

.header-inner {
margin-top: -45px;
}
.Header .titlewrapper,
.header-inner .Header .descriptionwrapper {
padding-left: 10px;
padding-right: 10px;
}

Depois cliquem em visualizar e se tudo estiver bom é só salvar e prontinho! ^^

Espero que seja util e que gostem deste tutorial.

Bjs!!

Créditos:

http://depois-da-primavera.blogspot.pt/

Centralizar titulo da Postagem e dos Gadgets

Olá olá outra vez pessoinhas do meu kokoro *-*
Vim trazer o segundo tutorial básico de hoje \0/
Então, este é para centralizar o titulo das postagens e os da sidebar.
Assim:

Visual que fiz para o aniversário da Biabia *-*

Então vamos ao tutorial...
Centralizar titulo da postagem:

Vá em Design, HTML e procure por h3.post-title {
E por baixo disso cole:

text-align: center;

----------

Agora o titulo dos gadgets:

Vá em Design, HTML e procure por .sidebar .widget h2 {
E á frente disso cole:

text-align: center;

E pronto, visualize e guarde, bem simples, não? ;)

Tutorial - Negrito Itálico Sublinhado e Riscado

Hellow! Gente hoje vou fazer 3 tutoriais meio básicos (pelo menos tentar postar os 3 hoje ^^') para deixar o vosso blog mais bonito...
Comecei por vir trazer um tuto bem fácil, simples e fofo.

Vamos editar:
Negrito
Itálico
Sublinhado
Riscado

E tornar tudo mais fácil de ler, principalmente as partes importantes que podem querer que chame mais á atenção aos leitores ou não. (Experimente ler apenas o texto que eu editei nessa frase)

Bom, depois deste exemplo, vamos lá começar com o tutorial...
Vá a Design >> Editar HTML >>  CTRL F (ou F3)
E procure por:

]]></b:skin>

E acima disso cole:

b{color: #DA70D6; text-decoration: none;} /* Estilo do negrito */
b:hover {color: #DA70D6; text-decoration: none;} /* Estilo hover do negrito */
i {color: #63B8FF; text-decoration: none;} /* Estilo do itálico */
i:hover {color: #63B8FF; text-decoration: none;} /* Estilo hover do itálico */
u {color: #1C1C1C; text-decoration: none; border-bottom: 1px dashed #7CFC00;} /* Estilo do sublinhado */
u:hover {color: #1C1C1C; text-decoration: none; border-bottom: 1px dashed #7CFC00;} /* Estilo hover do sublinhado */
strike {color: #009900; text-decoration: strike;  } /*estilo do riscado */
strike:hover {color: #FF00FF; text-decoration: strike;  } /*estilo hover do riscado */

Bom, e agora é só modificarem o que está a negrito, sendo as cores.
Se precisarem, podem usar esta tabela de cores: (www)
Se não quiserem efeito hover, em vez de colocar o codigo anterior, colem este:

b{color: #DA70D6; text-decoration: none;} /* Estilo do negrito */
i {color: #63B8FF; text-decoration: none;} /* Estilo do itálico */
u {color: #1C1C1C; text-decoration: none; border-bottom: 1px dashed #7CFC00;} /* Estilo do sublinhado */
strike {color: #009900; text-decoration: strike;  } /*estilo do riscado */  

E pronto, veja se tudo deu certo e guarde! ;)

Tutorial - Menu simples e pequeno

Oiis! Vim trazer-vos um menu. Desta vez ninguém mo pediu, posto aqui só porque é um dos meus preferidos e quando a Kaorii fecha por algum motivo temporariamente o KW blog dela, eu quase morro por causa deste *e outros, mas mais este* tutorial... (Por favor Kaorii, não me assustes outra vez x_x)
Então, os créditos são todos dela, ok?

O tipo de menu de que estou a falar é este:

Então vamos lá ao tutorial...
Vá ao Esquema e adicione uma mini aplicação e escolha HTML/Java Script.
E coloque lá isto:

<center>
<a class="menupequeno" href="LINK">NOME</a>
<a class="menupequeno" href="LINK">NOME</a>
<a class="menupequeno" href="LINK">NOME</a>
<a class="menupequeno" href="LINK">NOME</a>
</center>

Onde diz "LINK" coloquem o suposto "www.link-da-pagina-que-querem.com" e onde diz "NOME" coloquem o que querem que apareça, como "Home" ou "Parceria" ou algo do tipo...
Guardem.

Agora vão a editar HTML e procurem por ]]></b:skin>
E por cima disso cole isto:

@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
a.menupequeno {
background-color: #e6e6e6;
padding-top: 3px;
padding-bottom: 3px;
display: inline-block;
width: 40px;
font-size: 8px;
font-family: silkscreen;
text-transform:  uppercase;
text-align:center;
border: 1px solid #d1d1d1;
letter-spacing: 1px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
box-shadow: inset 0 0 5px #e3e6e7, 0 0 1px #b6b6b6;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
text-shadow: 0 1px 0 #ebebeb;
}
a.menupequeno:hover {
border: 1px solid #f994aa;
background-color: #ffc3d0;
text-decoration: none;
box-shadow: inset 0 0 0px #e3e6e7, 0 0 0px #b6b6b6;
text-shadow: 0 1px 0 #fbdae1;
opacity: 0.8;}

E pronto, mude as cores que é o que está a negrito, pré-visualize e veja se deu tudo certo no lugar onde colocou aquela mini aplicação, lembra-se? E se estiver tudo bem, guarde ;)

Prontinho, espero ter sido útil...

Kissus~

Tutorial - Subir área das Postagens

Oi minna!
Vou começar a pôr os nomes das pessoinhas a quem posto os tutoriais ahaha
Em auxilio da Eli eu vim postar um tutorial complicadito...
Pois é, parece que todos os blogs onde encontro, este tutorial falha!
Então fui descobrir num outro blog que já tinha usado isto noo design e depois de muita complicação percebi!  O problema estava em ter que se mexer em dois códigos e não apenas em um como dizia nos outros blogs ¬¬''

Vamos lá, vamos aprender a fazer isto:

Então vá a Design, depois Editar HTML, dê um CTRL F e procure por:

/* Tabs

Irá aparecer algo assim:

Apague o que está a verde!
Agora procure por:

/* Main

E vai aparecer algo assim:

E por baixo do que eu sublinhei a verde aqui, antes de } cole:

margin-top:-65px;

Pré-visualize e ajeite o tamanho -65px como achar que fica melhor.
Se usar crédite!! ;)

Menu Symmetry

Oii onigiris! *-*
Hoje vim trazer-vos um menu que eu ADOREI! É simples e fica muito fofi *-*
Bom os créditos é uma coisa engraçada... ora, encontrei o tuto no BC mas pelos vistos o tuto é do SP... E agora que a questão dos créditos está tratada, vamos ao tutorial!

O menu é este:

Coloquei exemplo em gif para que vissem o efeito hover.

Comece por ir a Design, Esquema e adicionar um HTML/Javascript e cole:

<a href="LINK 1" class="symmetry">NOME 1</a><br />
<a href="LINK 2" class="symmetry2">NOME 2</a><br />
<a href="LINK 3" class="symmetry">NOME 3</a><br />
<a href="LINK 4" class="symmetry2">NOME 4</a><br />
<a href="LINK 5" class="symmetry">NOME 5</a><br />

Agora dirijam-se ao HTML e dê um CTRL F e procure pôr:

]]></b:skin>

E acima disso cole o seguinte código:

.symmetry {
background-color:#ade977;
display: inline-block;
text-align: right;
color:#ee009d;
float: center;
margin:1px;
font-size: 9px;
font-family: tahoma;
text-transform:uppercase;
padding:1px;
height:10px;
width:200px;
box-shadow: 0 0px 0px #41d845;
z-index:100;
display:inline-block;
}
.symmetry:hover {
background-color:#76c53b;
-webkit-transition-duration: 0.8s;
}
.symmetry2 {
background-color:#ffc8e8;
display: inline-block;
text-align: center;
color:#ee009d;
float: center;
margin:1px;
font-size: 9px;
font-family: tahoma;
text-transform:uppercase;
padding:1px;
height:10px;
width:120px;
box-shadow: 0 0px 0px #ee009d;
z-index:100;
display:inline-block;
padding-left:50px;
}
.symmetry2:hover {
background-color:#ed51a9;
-webkit-transition-duration: 0.8s;
}

Básicamente só precisam de mudar o que está a verde...
Caso queiram modificar a cor da letra tem de ser em Design, Personalizar, e o tipo de letra da barra lateral/Sidebar...
E prontinho! Pré-visualize e veja se aparece tudo direitinho ;)

Como retirar papel de fundo do Modelo Viagem

Oie gente! 0/
Vocês sabem (se não sabem, aviso já) que todos os tutoriais que uso e que ponho aqui são usados e testados apenas no modelo Viagem do blog...
Bom, a questão é: No cabeçalho tem um fundo horrível!
Sigam as instruções do traçado roxo...

Vim ensinar aqui a tirar esse fundo... É bem simples!
Então vão em EDITAR HTML, apertem CTRL F e pesquisem por:

content-outer .content-cap-top {

E vai aparecer isto:

Apaguem tudo o que estiver a roxo. Com cuidado para não apagar nada que não devam...
Depois disso o blog vai aparecer sem fundo de postagem também, mas isso é só ir a PERSONALIZAR e mexer onde diz "fundo da mensagem":

Vai aparecer em transparente e só precisam de mudar para a cor que quiserem...
E pronto, tudo arranjado e preparado para começar o vosso próprio design de blog. ;)

Tutorial - Menu vertical com imagem ao lado

Oi meus cupcakes mordiveis! *w*
Há pessoas que ficaram um pouco curiosas com o menu que eu pus aqui no blog:

Bom, eu aprendi no Bunny Crazy (não, a dona não sou eu ahaha, já me vieram perguntar também) mas vou aqui ensinar-vos e pôr umas imagens como extra ;)

Então vamos lá, recomendo a começar por criar um novo gadget na barra lateral onde vai colocar o menu, e pôr lá este código:

<img src="LINK DA IMAGEM QUE FICA DE LADO" align="right" />
<div class="menu">
<a href="URL1">Link 1</a>
<a href="URL 2">Link 2</a>
<a href="URL 3">Link 3</a>
<a href="URL 4">Link 4</a>
<a href="URL 5">Link 5</a>
<a href="URL 6">Link 6</a>
<a href="URL 7">Link 7</a>
</div>

Obvio que só vão aparecer os codigo, agora vão a editar HTML, apertem CTRL + F e pesquisem por:

]]></b:skin>

Depois de encontrarem isso, coloquem a cima este código:

.menu a {
margin-right: 144px;
background: #f0d1ff; /* Cor da caixinha */
border-left: 4px double #9c37cb; /* Borda */
font-family: Palatino linotype; /* Fonte */
font-style: italic; /* Estilo da fonte */
text-transform:lowercase; /* Estilo da fonte - uppercase: maísculas e lowercase: minúsculas */
display: block; /* Exibir em bloco */
font-size: 10pt; /* Tamanho da fonte */
color: #e359f3; /* Cor do texto */
padding: 3px; /* Margem interna */
text-align: left; /* Alinhamente do texto */
margin-bottom: 1px;
}
.menu a:hover {
border-left: 6px solid #c252cf; /* Borda em hover */

Bom, o código está com as cores que eu pus aqui no blog, então modifiquem tudo ao vosso gosto.
Deixem-me dizer-vos que tal como a dona do Bunny Crazy usei uma imagem com o tamanho 132x173.
Pré visualizem e vejam se ficou bom ^^

E pronto, se for feito com atenção e cuidado tudo fica bem, certo...?
Qualquer dúvida perguntem ;)

E agora vamos ás imagens que eu fiz e editei para vocês usarem neste menu se quiserem

Asiáticas

   

Animes

   

VOCALOID

   

Espero que seja util ;)

Sirvam-se, e não esqueçam de creditar.

Tutorial - Subir Sidebar (Barra lateral)

Oie minna!! Pois é, pediram-me este tutorial já há um bom tempão =.='
Desculpem a demora, mas mais vale tarde que nunca, né? ^^'
Então vamos lá aprender a fazer isto á Sidebar:

É bem simples, praticamente já o sei de cor, só precisam de estar com atenção, certo?
Antes de mais deixem que eu diga, que o template mais certeiro de funcionar é o modelo travel/viagem.
Vamos lá então:

Design depois Editar HTML e depois CTRL + F
A seguir colem conforme a vossa Sidebar.

Sidebar direita:

.main-inner .column-right-outer {

Sidebar esquerda:

.main-inner .column-left-outer {

E depois é só por isto abaixo:

margin-top: -100px;

E modifiquem o -100 como quiserem... quando maior mais alta a sidebar ficará. Anconselho a pré-visualizar antes de salvar, ok? ;)
Qualquer dúvida perguntem ^^