Cortininhas no Blog

 Oiiw Pessoal , To procurando pessoas para Postar sobre outros assunto no meu blog , no Momento estou postando mais sobre tutoriais , então peço desculpas aos Leitores ... Se Puderem deixem assuntos nos comentários para que eu poça Postar aqui ...
    Bem , como Prometido , Vamos ao tutorial ! Créditos Totais à Pink Pimenta , Poor que fooi láh que eu achei esse tutorial Lindo ! Vamos láh !

  Faça Login no seu blog , vá até Design e adicione um novo Gadget HTML JavaScript .
 Resumindo ... ( Login>Design>Gadget>HTML JavaScript )

Feito isso , Adicione os Seguintes códigos de sua Preferencia:

Esquerdo (left)

<div style=" background-image: url('LINKDOPATTERN'); top: 0px; left: 0px; width: 50px; height: 100%; z-index: 100; position: fixed;"></div>

Em cima (top)

<div style=" background-image: url('LINKDOPATTERN'); top: 0px; left: 0px; width: 100%; height: 50px; z-index: 100; position: fixed;"></div>

Em baixo (bottom)

<div style=" background-image: url('LINKDOPATTERN'); bottom: 0px; left: 0px; width: 100%; height: 15px; z-index: 100; position: fixed;"></div>

Direito (right)

<div style=" background-image: url('LINKDOPATTERN'); top: 0px; right: 0px; width: 50px; height: 100%; z-index: 100; position: fixed;"></div>

 

   

  

 

Éh isso aí Pessoal !  Bejuuux

@Thiiiaguinho_M

Leia mais...

Como colocar Sombra nos Título dos Post

Oiiw Gentii s2s2 , Vamoos ao Tutorial de Hoje  :)  Bem simples , Fácil , e fica muito Bonito ...

Dê Ctrl + F e procure por: h3.post-title a {

Você vai achar algo como:

h3.post-title a {
  font: $(post.title.font);
  color: $(post.title.text.color);
}

Depois de todas essas linhas, mas antes da }, cole o seguinte código: text-shadow: 0px 0px 5px #000;

Ficando desse jeito:

h3.post-title a {
  font: $(post.title.font);
  color: $(post.title.text.color);
text-shadow: 0px 0px 5px #000;
}

Modifique como quiser, visualize e salve. Pronto! Gostaram do tutorial?  Bejuuux  s2s2   o/

Leia mais...

Botão " Leia Mais " ou " Continue Lendo "

Olá pessoal, resolvi utilizar o recurso do blogger de mostrar as postagens

resumidas na página inicial com um botão para continuar lendo, é bom

para quem quer aproveitar bem os espaços do seu blog e deixar mais

organizado.

Tem muitos metodos de se fazer o "Leia mais", mas eu recomendo o proprio recurso do blogger, pois é mais compatível e muito mais leve.
Vamos começar...

Como fazer um botão de "Leia mais..."?

Eu gosto de facilidade, nada de muito trabalho, então o programa que eu recomendo para editar imagens é o PhotoScape, se vc não tem este programa clique aqui para fazer o download, e instale ele em seucomputador.

1º Procure alguma imagem para colocar no seu botão, depois abra ela no PhotoScape e vá se familiarizando com o programa.

Como eu fiz o botão aqui do qualo:

   

2º Feito o botão, salve em seu computador, e agora vamos hospedar nainternet. Para isto entre no http://imageshack.us/, este é um site onde podemos hospedar imagens gratuitamente, clique em Browse:



3º Na janela que se abre selecione o imagem do seu botão e clique em"Abrir" e depois em "Carregar agora";

4ºDepois de terminar de carregar, copie o endereço dentro da linha "Link direto", este é o endereço de sua imagem;

5º Cole o endereço de sua imagem em um documento de Bloco de notas ou deixe a página do ImageShack aberta;

Ativar o recurso "Leia mais" no blogger

1º Acesse sua conta no blogger e vá em "Configurações", na aba"básico" na parte de baixo da página em "Configurações Globais", veja se esta marcada a opção "Editor atualizado", se não estiver marque e clique em "Salvar configurações";

2º Agora clique em "Postagem" veja se já aparecem as novas ferramentas:



3º Escreva uma postagem de teste, e logo abaixo do paragrafo que vc quer que apareça na página inicial, vc clique no botão indicado na imagem acima. Repare que aparece uma linha cinza, é neste ponto que aparecerá o "Leia mais";

4º Poste e veja na PÁGINA INICIAL se apareceu a opção "Mais informações>>", se não apareceu é porque não está ativado em seu template (templates antigos), então vamos ativar:

O recurso do LEIA MAIS não aparece, veja como fazer:

1º Faça um BACKUP de seu modelo de template;

2º Vá em "Design" e em "Editar HTML", marque a opção "Expandir modelos de widgets";

3º Aperte "Ctrl + f" e procure pelo código abaixo:

<data:post.body/>

4º Logo abaixo cole este código:

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

<div class='jump-link'>

<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>

</div>

</b:if >

5º Pronto agora já irá aparecer.

Como colocar imagem no lugar de "Mais informações>>"

1º Em "Design" e "Editar HTML" com a opção "Expandir modelos de widgets" marcada, aperte "Ctrl + F" e procure pelo código:

<data:post.jumpText/>

e troque por:

<img src='endereço da sua imagem'/>

Substitua a parte vermelho pelo endereço do seu botão, aquele que hospedamos no começo do tutorial.

ou se preferir colocar imagem e texto substitua por:

<img src='endereço da imagem' style='vertical-align:middle;border:0'/>Leia mais...

É isso ai pessoal, salve e faça isto nas postagem que vc quiser.

Não esqueçam de comentar!

Leia mais...

Como Colocar um Botão de Voltar ao Topo

Hoooý Foofoo(a)s , Então ... Eu Percebi que muitas Pessoas tem dúvida de como colocar o botão:

" Voltar ao Topo " E Com uma Imagem , E esse foi a maneira mais Fácil e simples que eu encontrei , Então Vamos Lá !

Para que serve: Para que o Usuário/Leitor possa volta ao Topo Rapidamente sem que tenha que ficar rolando a barra de rolagem de sua tela .

• Vá em Design - Adicionar um Gadget - HTML/JavaScript e copie esse código:

URL da imagem" /> <center><a style="display:scroll;position:fixed;bottom:50px;right:50px;" href="#" title="Voltar ao Topo do site"><img src="URL da imagem" /></a> <a href="URL do blog"> <span ></span></a></center>

As partes Destacadas em vermelho , são as partes onde você deve edita-las .

Para você achar o URL de sua imagem , Depende de onde você irá pega-la , se for pega-la da Internet mesmo , basta você clicar com o Botão direito do seu Mause , depois " Copiar URL da Imagem " Se for fazer Upload da imagem direto do seu computador , sugiro que procure um site de Hospedagem , ou Vá até um blog de Testes , Poste a Imagem , e pegue o URL Dela .

Deixo aqui algumas Imagens :

È isso aí ! Espero que tenha ajudado , e que tenham gostado ! Bejuux .

Leia mais...

Personalize a footer das postagens facilmente

Oiiw Gentii , Trouxe um tutorial para vocês Bem fácil e legal , fica lindo no seu blog , Bem pra quem não sabe Footer é o que fica em baixo de suas postagens , Vamos ao tutorial:

Vá em design -> Editar html -> Dê um CTRL + F e procure por: .post-footer {

Quando encontrar substitua todo o código que vem junto com ele e acrescente esse:

.post-footer {

margin: .5em 0;

line-height: 1.6;

background-color: #FFE4E1;

border-top: 1px dashed #696969;

font-weight: bold;

}

#FFE4E1 É a cor do fundo, você pode encontrar mais cores nesta tabela

#696969 É a cor da borda, se não quiser borda, basta apagar todo esse código.

Leia mais...

Como colocar um favicon no blog

Olá Pessoal ,Vim aqui postar uma dica bem simples e Fácil , Mas que melhora a aparência do blog , então vamos la ...

Vá até o seu Painel>>> Designer>>> Elementos da Página então logo em cima da Navbar tem um quadradinho escrito:

Favicon , daí você clica em [ Editar ] Logo irá abrir uma janelinha , clique em escolher arquivo , então você escolhe alguma imagem ou Gif do seu gosto , seleciona .

Pronto !

Esse Tutorial é bem simples , mas é legal .

Leia mais...

Como mudar a cor da Navbar

Olá pessoal , muita gente vem me pedindo para ensinar como mudar a cor da Navbar , então deixo aqui para vocês para que seu blog fique do seu jeito .

1° - Procure Por:

]]></b:skin>

2° - Achou? Então, em cima dele você coloca o código:

#navbar-iframe{background-color: #FFFAFA; float: bottom-page;}

Onde tem o código em rosa, coloque a cor que quiser para "pintar" sua navbar.

Bjuuux

Leia mais...