Onde encontro fontes?

Oie!

Gente, fontes boas é difícil de achar, principalmente quando quer repaginar.Com esse intuito vim mostrar a vocês onde eu baixo as minhas fontes.Os sites são gratuitos e tem  download rápido.

Fontes Grátis

NetFontes

Para quem não sabe vou ensinar a baixar fontes em ambos.

Fontes Grátis

->Escolha uma das categorias

->Escolha a fonte

->Clique em Download

*O download inicia-rá automaticamente.

*O bot de download se encontra embaixo.

NetFontes

->Escola uma das categorias

*Tem dois tipos de categorias tanto na barra lateral quanto na parte de cima do site.

->Escolha a fonte

->Clique em Download

*O download inicia-rá automaticamente.

*O botão de download é encontrado ao lado. 

Aviso:
->Os prêmios do concurso de natal será publicados na segunda-feira.

É bem simples, não?

Beijos *Babi*

Seleção de texto colorida

Oie!

Gente hoje trouxe um tutorial(n é de minha autoria)que eu resolvi trazer pois eu acabei de personalizar no blog e acho legal os leitores saberem quais códigos usamos para personalizar o layout.

Esse tutorial é do blog Jackie Dream *-*créditos*-*

Pra que serve o código?

O código é para você deixar a seleção de um texto no seu blog bonitinha, não aquele azul horrível(!Minha opinião!).

Dê um Ctrl+F e procure por <b:skin> que provavelmente estará na linha 13.

Logo depois disso: > cole:

*::-moz-selection {

background:#FFE4E1;  /*---Cor de fundo--*/

color:#FFFFFF;   /*--cor da fonte--*/

}

*::selection {

background:#FFE4E1;/*---Cor de fundo--*/

color:#FFFFFF;  /*--cor da fonte--*/

}

Se colocar esse código ficará uma seleção igual a do blog(esse)

Caso mude lembre-se a cor do fundo deve ser colocada com a mesma cor, e para personalizar acesse essa tabela de cores.

Gostou?Beijinho *Babi*

Como deixar a barra lateral transparente

Oieeee!

Gente no outro dia vim com um tutorial de como deixar as guias com fundo transparente, mas hoje trago como deixar a barra lateral, totalmente transparente.

Eu encontrei o tutorial no blog Just Debee mas eu modifiquei para ficar totalmente transparente.

Entre em Modelo>>Editar HTML>>Crtl+F(teclas do teclado)>>Procure por:

 .main-inner .fauxcolumn-right-outer .fauxcolumn-inner { - Coluna direita.main-inner .fauxcolumn-left-outer .fauxcolumn-inner { - Coluna esquerda

Cole abaixo do código, isso:

filter:alpha(opacity=40); -moz-opacity:0.0; opacity:0.0;

Quer modificar? aqui fica a dica!

moz-opacity:0.0-Aumente o zero vermelho para ela ir ficando cinza(meio-transparente)

opacity:0.0-Aumente o zero vermelho para ela ir ficando cinza(meio-transparente)

Gostou?Comente!

OBS.:A competição de comentários desse mês foi encerrada, amanhã sai o resultado.

Beijos *Babi*

Como personalizar:"página não encontrada"

Oie!

Gente realmente é uma chatice quando estamos em algum blog e vamos para uma página que não é encontrada, depois não sabemos o que fazer, então eu resolvi deixar um recado para os leitores que forem direcionados para uma página não encontrada é assim:

Infelizmente a página que está procurando não existe!Se for algum link importante favor comentar ou responder a página Contato com essa informação, continue aproveitando o que o blog pode te dar de melhor(tirando isso)Beijos *Babi*

Deixei tudo que queria dizer avisei também que era para me avisar em qual link clicou assim pode arrumar.

Gostaria de personalizar a sua mensagem?

É bem simples vá em:

Configurações>>Preferências de pesquisa>>Erros e redirecionamentos>>"Página não encontrada" personalizada>>Editar

Agora no quadradinho que abriu coloque toda a sua mensagem, não copie a minha!

Já sabia como fazer?Te ajudou?Comente!

Beijos *Babi*

Fundo transparente nas guias!

Oie!

Hoje trago a vcs mais um tutorial de minha autoria!Com o tempo vai dando certo, não é?

OBS.: Vocês viram a página contato?Já enviaram o formulário?

Vamos ao tutorial...

Sabe quando você quer deixar as páginas(guias)com fundo transparente e ele fica um cinza bem clarinho(odeio isso)?Então agora vcs vão descobrir como deixar transparente mesmo.

Ele novamente se encontra no código </b:skin da linha 13.

Expanda o código, clicando na flechinha do lado de 13(nº da linha)

Agora procure por: /* Tabs

E aí?Te ajudou?Comente!

Beijos *Babi*

Sem sublinhar os links!

OIIIII!

Como o blog estava muito tempo sem turoriais resolvi trazer um de minha autoria.

Sabe aquele sublinhado(horrível !Minha opinião!) nos links, eu descobri como tirar é simples mas precisa de paciência.

Como o HTML do blogger mudou(post aqui)antes vou dar um ponto de referência.

1-Procure por: </b:skin>

Provavelmente estará na linha 13.

2-Clique na flechinha ao lado do nº da linha.

3-Agora procure por: text-decoration

4-Ao lado dos text-decoration que tiverem : underline apaque.Assim:

Gostou?Já tinha visto o tutorial?

Comente.

beijos

Tutorial cabeçalho transparente-Parte II

POST ATUALIZADO

Oi!

Hoje vamos a parte II do tutorial.

Se quiser ver a parte 1 acesse www

No final da parte I o meu ficou assim:

->Eu modifiquei cor e fonte.

Agora vamos a parte 2.

Para a parte dois vamos ter duas dicas:

->Inspire-se em outros cabeçalhos

->Mude!

Criar um cabeçalho muitas vezes é a parte mais difícil do lay, por isso é muito importante se inspirar em outros cabeçalhos.Lembrando se inspirar não é plagiar.

Exemplo:

Foi inspirado nesse cabeçalho:

www

Nesse exemplo o cabeçalho ficou parecido,mas cores e brushes ficaram diferentes.

Cuide também o cabeçalho em que vai se inspirar, pois não se inspire em cabeçalhos que já vê em todo tipo de blog e também todo vez que mudar o cabeçalho também mude o cabeçalho a ser inspirado.

Aqui embaixo tem dois exemplos de cabeçalhos diferentes:

A mudança do tipo de cabeçalho muitas vezes são influenciadas pelos leitores.

Gente agora com essas dicas acho que fica fácil pra criar um cabeçalho.

Logo irei publicar um pacotão com brushes que eu criar e auxiliares. 

Beijos *Babi*

Tutorial cabeçalho transparente-Parte I

POST ATUALIZADO

Oie!

Gente hoje vou ensinar a fazer um cabeçalho transparente, igual ao do blog. Nesse post irei ensinar apenas como deixa transparente para não ficar longo, depois faço outro para desing.

Para fazer esse cabeçalho você precisará de Photoscape ou PhotoFiltre, lembrando que o PhotoFiltre você poderá escolher o tamanho de sua imagem.

Vamos lá?

Se quiser usar o Photoscape deverá salvar uma imagem como essa:

Vá no Photoscape e abra a imagem.

Depois digite o nome do seu blog.

Agora modifique a cor e a fonte.

Lembre sempre quanto maior a harmonia entre o cabeçalho e o blog melhor.

PhotoFiltre

Abra o PhotoFiltre e clique em novo(ctrl+n) faça as modificações de acordo com a imagem:

Abrirá uma imagem quadriculada, isso quer dizer que aquela imagem é transparente.

Gostou?A parte II já vem!

Beijos *Babi*

Como deixar o comentário a ser aprovado-26/01

Oi meus *broshes*!

Hoje vou ensinar um tutu de minha autoria não sei se algum blog já postou 

esse tutu eu consegui ele fazendo o novo template para o blog descobri muitas coisas

uma delas foi esse tutu clique em leia mais

Para quem não entendeu é isso:

->Quando tu vai comentar e aparece uma mensagem numa caixinha* amarela

dizendo mais ou menos:Seu comentário estará visivel depois de ser aprovado.

E outra esse tutu não e de HTML!

Primeiro vá em configurações>Postagens e comentários>Moderaçõa de comentários>Sempre>

Daí vai aparecer uma caixinha embaixo que em cima tá escrito Solicitações de moderação de e-mail para

Coloque seu e-mail na caixinha>Salvar configurações(bem em cimada página).

Por hoje é só!

Mudando a área dos comentários

Oi gente hoje trago um tutu que achei no blog Go  imagines, e personalizei do meu jeito clique em leia mais para ver o código.

Cole o código antes de ]]></b:skin>
Visualização:

/**=========== AREA GERAL DOS COMMENTS ===========**/ .comments{ width: 95% !important; /* largura da caixa de postagem, se sair pra fora do post diminua*/ margin:0 auto; font-style: normal !important; font-size: 12px !important; font-family: verdana !important; background: url(http://i.imgur.com/XB2Tq.png) !important; /* fundo dos comentários - se desejar coloque outro background (trocando a url) */ border-radius: 10px; /* bordas arredondadas no fundo- se não quiser apague essa linha */ } /**== HEADING DOS COMMENTS (1 comentario, 2 comentários...) ==**/ .comments h3,.comments h4{ width: 98%; padding: 7px; margin: 10px 0 !important; color: #EE82EE !important; /* cor da fonte */ text-align: center; /* alinhamento */ font-family:'Dancing Script' !important; /* fonte - se preferir troque */ font-size: 37px !important; /* tamanho do texto - se preferir troque */ } /**= BLOCO DOS COMMENTS (engloba: botões, avatar, data, icone...) =**/ .comments .comment-block { position:static !important; /* mantém o avatar na frente do bloco - não mude */ background: #fff; /* cor do fundo da caixinha dos comentários */ margin-left: 23px; padding: 0 15px 0 23px; border-top: 15px #FF80BC solid; /* borda encima da caixinha de comentário */ border-radius: 5px; /* bordas arredondadas */ } .comments .comments-content .comment { padding:20px 10px !important; margin-bottom:15px !important } /* estilos para o nome do autor do comentário */ .comments .comments-content .user a{ font-style:normal; border:0; color: #CD96CD !important; /* cor da fonte do nome de quem comenta */ letter-spacing: 1px; font-family:'Dancing Script'; /* fonte do nome de quem comenta */ font-size: 26px; /* tamanho da fonte */ text-shadow:1 1px #aaa; /* sombra na fonte do nome */ background: transparent; padding: 4px 36px; margin-left:-31px !important; border-bottom-right-radius:10px; margin-top:-2px } .comments .comments-content .user{ font-style:normal; border:0; color: #FF80BC !important; letter-spacing:1px; font-family:'Dancing Script'; font-size: 26px; text-shadow: 0 1px #aaa; background: transparent; padding: 4px 36px; margin-left: 11px !important; border-bottom-right-radius:10px;margin-top:-2px } /*Nome do autor do comentário hover*/ .comments .comments-content .user a:hover { text-decoration:none !important; color: #A1DBE4 !important; /* cor do nome do autor do comentário quando passa o mouse */ } /* estilo da data */ .comments .comments-content .datetime a{ background: none !important; font-family: times new roman; /* fonte - mude se desejar */ float: right; /* posicionamento */ font-size: 12px; /* tamanho da fonte da data */ color: #fff !important; /* cor da data */ border:0 !important; margin-top: -15px; /*aumente/diminua o nº para mover a data – negativo sobe e positivo desce*/ } /* estilo do avatar */ .avatar-image-container { min-width: 60px; /* determina um mínimo de largura */ min-height: 60px; /* determina um mínimo de altura */ padding:0 !important; margin-left: 30px!important; /*aumente/diminua o nº para mover o avatar p/ os lados */ margin-top: 20px !important; /*aumente/diminua o nº para mover p/ cima/baixo */ position: absolute !important; overflow: hidden !important; background: #fff; } .avatar-image-container img { border: 3px #EAEAEA solid; /* borda do avatar */ margin:0; max-height: 48px; min-height: 48px; max-width: 48px; min-width: 48px; } /**=========== TEXTO DO COMENTÁRIO ===========**/ .comments p{ font-size: 14px !important; /* tamanho da fonte do comentário */ font-family: Times new roman !important; */ fonte do comentário */ text-shadow: 0 1px #eee !important; /* sombra na fonte */ padding-left: 55px !important; padding-bottom: 20px; color: #E0FFFF !important /* cor do texto */ } /**=========== BOTAO – RESPONDER ===========**/ /* botão responder do segundo nível */ .comments .continue a { background: #00FFFF !important; /* cor do fundo */ color: #fff !important; /* cor da fonte */ float: right; /* posicionamento */ padding: 8px !important; height: 10px !important; line-height: 15px !important; margin-top: -35px !important; } /* botão responder do primeiro nível, mais estilos para o botão do segundo nível */ .comments .comment .comment-actions a,.comments .continue a { font-size: 11px !important; float: right; height: 10px !important; /* altura do botão */ color: #fff !important; /* cor da fonte */ padding: 6px; border: 0 !important; line-height: 10px; margin: 5px; margin-left: 40px; font-family: helvetica; /* fonte - mude se desejar*/ text-shadow: 0 0; border-radius: .5em; /* bordas arredondadas */ background: #CD96CD; /* cor do fundo */ font-weight: 800; } /* botão hover*/ .comments .comment .comment-actions a:hover { text-decoration:none !important; background: #FF80BC; /* cor do fundo do botão hover */ } /* estilos para bloco de respostas */ .comments .comment-thread.inline-thread { background-color: transparent !important; margin-top: 40px; padding: 0.5em 1em; border-radius: 5px; /* bordas arredondadas – apague a linha se não quiser */ } .comments .comments-content .comment-replies { margin-top:1em; margin-left:56px !important } .comments .continue {border-top:0 !important} .comments .thread-toggle,.icon.blog-author {display:none !important} /**======= Fim []=======**/

Também tem um outro modelo se você preferir:

/**=========== AREA GERAL DOS COMMENTS ===========**/ .comments{ width: 95% !important; /* largura da caixa de postagem, se sair pra fora do post diminua*/ margin:0 auto; font-style: normal !important; font-size: 12px !important; font-family: verdana !important; background: url(http://i.imgur.com/ShBeO.png) !important; /* fundo dos comentários - se desejar coloque outro background (trocando a url) */ border-radius: 10px; /* bordas arredondadas no fundo- se não quiser apague essa linha */ } /**== HEADING DOS COMMENTS (1 comentario, 2 comentários...) ==**/ .comments h3,.comments h4{ width: 98%; padding: 7px; margin: 10px 0 !important; color: #87CEEB !important; /* cor da fonte */ text-align: center; /* alinhamento */ font-family:'Dancing Script' !important; /* fonte - se preferir troque */ font-size: 37px !important; /* tamanho do texto - se preferir troque */ } /**= BLOCO DOS COMMENTS (engloba: botões, avatar, data, icone...) =**/ .comments .comment-block { position:static !important; /* mantém o avatar na frente do bloco - não mude */ background: #FFF0F5; /* cor do fundo da caixinha dos comentários */ margin-left: 23px; padding: 0 15px 0 23px; border-top: 15px #FF80BC solid; /* borda encima da caixinha de comentário */ border-radius: 5px; /* bordas arredondadas */ } .comments .comments-content .comment { padding:20px 10px !important; margin-bottom:15px !important } /* estilos para o nome do autor do comentário */ .comments .comments-content .user a{ font-style:normal; border:0; color: #FF69B4 !important; /* cor da fonte do nome de quem comenta */ letter-spacing: 1px; font-family:'Dancing Script'; /* fonte do nome de quem comenta */ font-size: 26px; /* tamanho da fonte */ text-shadow:1 1px #aaa; /* sombra na fonte do nome */ background: transparent; padding: 4px 36px; margin-left:-31px !important; border-bottom-right-radius:10px; margin-top:-2px } .comments .comments-content .user{ font-style:normal; border:0; color: #FF80BC !important; letter-spacing:1px; font-family:'Dancing Script'; font-size: 26px; text-shadow: 0 1px #aaa; background: transparent; padding: 4px 36px; margin-left: 11px !important; border-bottom-right-radius:10px;margin-top:-2px } /*Nome do autor do comentário hover*/ .comments .comments-content .user a:hover { text-decoration:none !important; color: #FF1493 !important; /* cor do nome do autor do comentário quando passa o mouse */ } /* estilo da data */ .comments .comments-content .datetime a{ background: none !important; font-family: times new roman; /* fonte - mude se desejar */ float: right; /* posicionamento */ font-size: 12px; /* tamanho da fonte da data */ color: #FFC0CB !important; /* cor da data */ border:0 !important; margin-top: -15px; /*aumente/diminua o nº para mover a data – negativo sobe e positivo desce*/ } /* estilo do avatar */ .avatar-image-container { min-width: 60px; /* determina um mínimo de largura */ min-height: 60px; /* determina um mínimo de altura */ padding:0 !important; margin-left: 30px!important; /*aumente/diminua o nº para mover o avatar p/ os lados */ margin-top: 20px !important; /*aumente/diminua o nº para mover p/ cima/baixo */ position: absolute !important; overflow: hidden !important; background: #fff; } .avatar-image-container img { border: 3px #EAEAEA solid; /* borda do avatar */ margin:0; max-height: 48px; min-height: 48px; max-width: 48px; min-width: 48px; } /**=========== TEXTO DO COMENTÁRIO ===========**/ .comments p{ font-size: 14px !important; /* tamanho da fonte do comentário */ font-family: Times new roman !important; */ fonte do comentário */ text-shadow: 0 1px #eee !important; /* sombra na fonte */ padding-left: 55px !important; padding-bottom: 20px; color: #EE82EE !important /* cor do texto */ } /**=========== BOTAO – RESPONDER ===========**/ /* botão responder do segundo nível */ .comments .continue a { background: #87CEEB !important; /* cor do fundo */ color: #fff !important; /* cor da fonte */ float: right; /* posicionamento */ padding: 8px !important; height: 10px !important; line-height: 15px !important; margin-top: -35px !important; } /* botão responder do primeiro nível, mais estilos para o botão do segundo nível */ .comments .comment .comment-actions a,.comments .continue a { font-size: 11px !important; float: right; height: 10px !important; /* altura do botão */ color: #fff !important; /* cor da fonte */ padding: 6px; border: 0 !important; line-height: 10px; margin: 5px; margin-left: 40px; font-family: helvetica; /* fonte - mude se desejar*/ text-shadow: 0 0; border-radius: .5em; /* bordas arredondadas */ background: #87CEEB; /* cor do fundo */ font-weight: 800; } /* botão hover*/ .comments .comment .comment-actions a:hover { text-decoration:none !important; background: #87CEEB; /* cor do fundo do botão hover */ } /* estilos para bloco de respostas */ .comments .comment-thread.inline-thread { background-color: transparent !important; margin-top: 40px; padding: 0.5em 1em; border-radius: 5px; /* bordas arredondadas – apague a linha se não quiser */ } .comments .comments-content .comment-replies { margin-top:1em; margin-left:56px !important } .comments .continue {border-top:0 !important} .comments .thread-toggle,.icon.blog-author {display:none !important} /**======= Fim [] =======**/

Gostou, comente!

Sem bordas brancas!

Oi galerinha!

Hoje vou ensinar um tutorial de *minha autoria* que é como tirar essas bordinhas:

(imagem:Maniacas por BG)

Vá no seu HTML>F3>pesquise por .post-body {

Daí vai aparecer mais ou menos assim:

.post-body{

  position: relative;

}

  background: $(image.background.color);

  border: 1px solid $(image.border.color);

Daí em border: 1px troque o 1 por 0.

Não sei se isso funciona em outros modelos mas no meu funcionou.

Modelo:Espetacular Ltda.

Espero ter ajudado!

Widget do Istagram no seu blog

Oi gente!

Hoje vou explicar colocar um widget do Istagram igual ao que tem no blog.

É só clicar em leia mais

Clique em powered by BadgePlz.

Que você vai ser direcionado para uma página tipo essa:

Substitua as palavras abaixo por:

kevin>seu nome de usuário

f2f2f2>Fundo que você quer escolha por aki

cccccc>A cor da borda escolha por aki

ffffff>A cor da borda da foto escolha por aki

Yes>Substitua por No se não quer suas informações apenas fotos.

E clique em Generate abaixo estará a sua imagem se você tiver gostado 

selecione o código da caixinha abaixo de Badge Code 

E cole no gadget de HTML e pronto.

Gostou, funcionou comente!

Caixa de código

Oi gurias e guris!

Hoje vou ensinar a colocar essa caixinha no blog:

Essa caixinha branca SEM PERSONALIZAÇÃO

Clique em leia mais para conferir um post inspirado em Jackie Dream

Se você quiser colocar na barra lateral:

Layout>>Adicionar um gadget>>Selecione o tipo HTML/javascript

E cole:

<textarea style="COLOR: rgb(0,0,0); BACKGROUND-COLOR: #ffffff" rows="3" cols="20">ESCREVA AQUI O SEU TEXTO</textarea>

Se quiser colocar nas postagens abra a aba HTML e cole no final:

<textarea style="COLOR: rgb(0,0,0); BACKGROUND-COLOR: #ffffff" rows="3" cols="20">ESCREVA AQUI O SEU TEXTO</textarea>

E o mesmo código!

Então vamos editar:

Onde está escrito ESCREVA AQUI O SEU TEXTO escreva o que quiser eu escrevi:

Essa caixinha branca SEM PERSONALIZAÇÃO

Muito fácil não é?

Beijocas

Mensagem ao entrar no blog

Oi galera!

Hoje vou ensinar como colocar mensagem ao entrar no blog.

Créditos:Jackie Dream

Isso é bom para quanto tem um aviso por exemplo:Estou viajando ou uma simples mensagem de boas vindas.

Vá em Layout>>Adicionar um Gadget>>Escolha o tipo HTML/JAVA SCRIPT>>E cole:

<script>alert('AQUI SUA MENSAGEM');</script>

Não esqueça de substituir AQUI SUA MENSAGEM pela sua mensagem.

Beijinhos é isso!

Não esqueçam de ser afiliados!

Leia mais

Post atualizado

Oi minhas fofurinhas!

Hoje vou ensinar um tutu que deixa o blog bem mais organizado(eu acho)

Que é o tal de leia mais...

Se você ainda não descobriu o que é olhem só:

O tutorial vai ser dividido em duas partes:

*Colocando no post*

*Personalizando*

Primeiro:Colocando

Se vc ainda não tiver modificado algo dessa área do blog.Vai aparecer na post um Mais informações>>

Para modificar isso:

Agora vá em Layout>Postagens do blog>

E onde está o retângulo preto coloque a sua mensagem a minha é Leia mais...

Fácil, né?

Segundo:Personalizar

F3>>E procure por: <data:post.jumpText/>

Daí apague(substitua) esse código por:

<img src='URL da sua IMAGEM'/>

E substitua o trecho de Azul

Pelo URL da sua imagem

Como pegar o URL da imagem.Clique com o botão direito e clique em Copiar URL da imagem.

Aqui tem algumas de exemplo:

TODAS DE MINHA AUTORIA

Créditos:Jackie Dream

Bye

Seta para o topo da página

Oi minhas ovelhas!

Vou ensinar como colocar uma seta para o topo da página.

Como essa do blog:

O tutu do blog eu não me lembro de qual blog foi.

Então como no My Candy Space tinha esse tutu vou passar para vcs!

Clique em leia mais...

Vá no seu HTML>E selecione 

Dê um F3 e na caixinha que aparecer coloque esse código:

</body> 

E então cole o código abaixo acima da tag(</body> ):

<div style='float:right;'>

<a href='#'>

<img src='URL-DA-SUA-IMAGEM' style='display:scroll; position:fixed; bottom:5px; right:5px;' title='MENSAGEM'/>

</a>

</div>

Agora vamos entender o código:

URL DA SUA IMAGEM>Clique com o botão direito na imagem que quiser e selecione copiar 

URL da imagem daí coloque o URL nessa parte do código.

MENSAGEM>Escreva algum recado para quando colocar o cursor em cima vai aparecer.

Por exemplo:Voltar ao topo,Subir,Subindo ou conforme a imagem que usar.

 Aqui tem algumas de minha autoria:

Elas são de fundo transparente então não tem preocupação.

E isso,BEIJOS