Barras laterais ao lado do cabeçalho

Com esse novo layout lindo não tem como eu esquecer de postar.Hoje eu trouxe mais um tutorial, que cada vez mais blogs estão usando, é deixar a barra lateral ao lado do cabeçalho, eu acho bem legal, e nem é muito difícil, só precisa mesmo de um pouquinho de atenção.Bem, antes de mexer no HTML do seu blog salve o seu layout e não salve as alterações antes de visualizar e ver se ficou do seu gosto.

1.Vá em design, depois em editar HTML e procure por:

.main-inner .column-left-outer {

(Obs: Se a sua coluna for a direita mude o que esta em negrito para right)

Devera ficar assim:

.main-inner .column-left-outer {
width: $(main.column.left.width);
right: 100%;
margin-left: -$(main.column.left.width);
}

Centralizando título de Post e Gadget

Finalmente eu voltei - tava com saudade de postar aqui - bem, hoje eu trouxe um tutorial bem fácil, tanto de executar quanto de entender, embora muitas pessoas usem existe sempre algumas pessoas malucas para saber como centralizar o título de post e gadgets - espero que você seja uma delas kkk.
Bem, continuem lendo e tratem de comentar

Retire o espaço entre a coluna e a postagem

Oi gente, todos devem ter percebido que eu to sumido #fato, mais dessa vez não por falta de tempo e sim por que esses dias eu me matei de divulgar o sorteio e la vem a recompensa teve mais de 300 inscrições o que me deixa muito feliz para dizer que o novo design esta chegando (todos gritam ARRIBA).Mais hoje eu trago um tutorial bem fácil e simples que aprendi no Perfect Match de como tirar aquele espaço que tem entre coluna lateral e a postagem, é gosto de cada um usar:

Como saber se seu blog/site esta com virus?

Acho que todos nós blogueiros nos preocupamos se o nosso blog é seguro, por isso eu achei um dica bem utiu no NERDSferas , que é usado o Google Safe Browsing Tool. Já testei aqui no Gn e podem ficar tranquilos que não há nenhum virus.Clique em continuar lendo, para saber mais !

Como substituir os links, início, postagens mais antigas e postagens mais recentes por uma imagem

Desculpem-me por estar postando muito tarde, mas eu estava sem internet até agora - pelo menos ela ainda voltou em tempo.Hoje eu vou ensinar - a quem não sabe - a como substituir os links, início, postagens recentes e postagens antigas por uma imagem.Bom, sem mais conversas, vamos ao post.:

Ganhei um concurso + Como hospedar imagens

 

Oi povo, antes de tudo quero avisar que ganhei o concurso do blog Perfetinha e quero muito agradecer a todos vocês que votaram em mim.E como eu ja havia falado, que ia ter uma surpresinha eu irei divulgar os blogs que votaram por uma semana nos finais de cada post !

Muitos blogueiros já vieram pedi a minha ajuda para hospedar uma imagem, e pra facilitar a vida de vocês vou ensinar nesse tutorial um jeito bem simples.

Primeiro de tudo recomendo que hospede sempre as imagens no ImageShack ou no Blogger (não recomendo usar o tinypic pois as vezes o link quebra e fica aquela coisa feia). Vamos começar hospedando no ImageShack:

Como colocar blockquote no blog

Oi gente, hoje eu venho com um tutorial que muitos blogueiros utilizam, de como colocar o blockquote (é uma citação, mais utilizada em tutoriais e avisos) não é nada dificil mais requer atenção:

1. Vá em design, depois em editar Html, de um Ctrl + F e procure por:

]]></b:skin>

2. Acima dele cole o seguinte código:

.post blockquote {
margin: 1em 13px;
background: #E6E9EB;   /*cor do fundo do blockquote*/
border: 1px solid #c2c2c2;   /*cor da borda*/
border-left: 7px solid #5FBAEC;   /*cor da borda*/
padding: 10px;   /*espaçamento do texto*/
font-size: 12px;   /*tamanho da fonte*/
font-family: tahoma;   /*tipo da fonte*/
color: #000000;   /*cor da fonte*/
}

 Neste código já da pra você ter uma ideia de como personaliza-lo, então pra ficar mais fácil utilize essa tabela de cores.

3.Para utilizar o blockquote é só escrever, seleciona-lo e dar um clique no simbolo das aspas:

Clique na imagem para amplia-la  

Espero que tenham gosto do tutorial, em breve tem mais !

Beijos

Personalizando a data da postagem

Hooy, hoje venho ensinar a vocês a personalizar a data da postagem.Esse tutorial foi pedido pela Mariana do blog Girl Teen.É muito simples ;p


1. Vá em designer, depois editar HTML e de um Ctrl + f, procure por:

.main-inner h2.date-header {

2.Vocês vão encontrar um código mais ou menos assim:

.main-inner h2.date-header {
font: georgia;
color:#090707;
margin-right: -100px;
background: #FFFFFF;
float: left;
font-size: 17px;
padding: 4px;
}
.main-inner h2.date-header:hover {
background: #DB7093;
}

3.Apague o e cole este no lugar:

.main-inner h2.date-header {
float: right;
background: #FFFFFF;
color: #333;
font-family: Tahoma, Tahoma;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
} 

Agora é só modificar do jeito que você quiser. beijos

Mini gif no titulo do post

Hooy gente, acordei meio animado hoje, deve ser porque eu dormi com o fone de ouvido rsrsrs.Penultimo dia do ano de 2011, acho que todos devem estar bem felizes, só eu mesmo que to meio assim esquisito deve ser porque cada vez que o dia vai passando as férias vão diminuido, mais nao quero falar disso, vamos ao tutorial bem simples que eu achei: Como colocar o mini gif no titulo dos posts (muitas pessoas nao gostam como eu, mais eu vou ajudar as que curtem e nao sabem como colocar).

1.Escolha uma imagem, pode ser nesse site que eu encontrei : http://evelyns-place.com.br/mini-gifs/
2. Logo após vá em Design, editar Html.
3. Clique na opção Expandir modelos do widget

4.De um Ctrl + f , e procure por:

data:post.link'><data:post.title/></a>

5.Você vai encontrar o seguinte código:

:        <b:else/>

6.Cole ao lado:

<img src='Url do Gif ' style='vertical-align: middle;'/>

Somente muda o que esta em azul pelo link do mini gif.

espero que tenham gostado do tutorial , um ótimo ano novo a todos !
                     

Diminua o tamanho da imagem sem programa editor

 Oi gente , eu ja  sei até o que vocês vão dizer "Nossa faz tempo que você nao postar um tuto heim?" shuahsuah, perdão é que eu nao estou tendo tempo e ainda por cima tutos tem que ser bem mais elaborados do que os posts, o que dificuta muito para mim.Mas vou fazer o que puder para postar um toda semana *--*

Novamente como no outro tuto passado eu retirei do meu blog preferido de tutoriais o Menina Nerd (então devidos créditos a esse blog)
Vocês ja devem ter percebido como é ruim quando colocamos uma imagem na coluna lateral do blog e ela passa da dimenção.Hoje vamos aprender como diminuir uma imagem sem programa editor:

Exemplo a imagem do concurso de férias realizado pelos blogs Salada de Frutas Br e The Fashion Wonderland

1.Após colar o código da imagem gadget, adicione:

width="180"

antes de /> , desse jeito:

Agora é só modifcar o numero ("180") para diminuir a imagem.
Gostaram do tutorial ?
beijos

Barra de rolagem colorida

Oi pessoas . Hoje vou postar o meu primeiro tutorial eeeeeeh rsrs! Ja havia perguntado a vocês qual tutorial deveria ser o primeiro aqui no Gn,poucos responderam mais ouve repetições então o escolhido é a barra de rolagem colorida .

Antes de tudo vamos dar os devidos créditos a Menina Nerd, que é um blog perfeito!
Então vamos começar:

1. Vá em designe, depois editar HTML, de um CTRL + F ou F3 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; }

  OBS :Os códigos destacados em roxo representam a cor da barra, e os destacados em vermelho 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.

Espero que tenhãm gostado

 beijo beijo