Caixa de códigos personalizada

16 de mar de 2012


Oi oi gente! Hoje vim ensinar vocês a fazerem um "blockquote extra" só que especialmente para os códigos. É muito útil caso você poste bastante tutoriais e mais útil ainda se esses tutos tiverem códigos longos, uma vez que há barra de rolagem (que dá pra retirar se quiser) Quero também creditar o Mundo Blogger pelo tutorial. Vejam do que estou falando:


Vá até "design" >>"editar html", (não clique em "expandir modelos de widgets") e procure por ]]></b:skin> 
Logo acima cole:

/*topo da caixa*/
pre{
background:#XXXXXX url(ENDEREÇO-DO-TOPO) no-repeat scroll left top;
padding-top:25px;
}

/*caixa dos códigos*/
code{
overflow:auto;  /* barra de rolagem*/
background:#XXXXXX url(ENDEREÇO-DA-IMAGEM) ;  /* edite cor ou imagem de fundo*/
border:1px solid #XXXXXX;  /* edite cor e tipo de borda */
color:#XXXXXX;  /* cor da fonte*/
font-size:80%;  /* tamanho da fonte */
height:100px; /* edite a altura máxima da caixa*/
display:block;
white-space:pre;
text-align:left;
word-wrap:break-word;
padding:0 10px 5px 20px;
}

Visualize  e se estiver tudo certo salve as modificações.

- Para por uma imagem no topo da caixa (como na minha) coloque a url da sua imagem onde está escrito: "ENDEREÇO-DO-TOPO".

 - Se for utilizar uma imagem para que ela ocupe todo o topo acima da caixa de código, conforme está no meu exemplo, você vai precisar saber a largura da sua caixa, pra isso, coloque uma cor qualquer na caixa, e depois veja esse mini tutorial aqui pra descobrir a largura.

- Onde tiver #XXXXXX coloque o código da cor de sua preferência. Se for usar uma imagem no lugar da cor não precisa alterar esse código.

- No código, o trecho destacado em roxo "pre{" é o local onde você deve configurar a imagem do topo. E o trecho destacado em rosa "code{" é onde você vai personalizar o estilo da caixa, onde ficarão os códigos. 

- Notem que em "code" eu determinei que a caixa tenha uma barra de rolagem, que aparecerá automaticamente, apenas se altura da caixa ultrapassar os 100px. Se você quiser, edite a altura máxima da caixa. Se você não quiser barra de rolagem, simplesmente apague este trecho do código.

- Se quiser acrescentar uma imagem ao plano de fundo da caixa, coloque a url da sua imagem onde está "ENDEREÇO-DA-IMAGEM", no trecho "code".


Agora, sempre que for usar a caixa, você deverá incluir a seguinte tag para ligar o código da caixa ao post. Para isso, no modo "Editar HTML" da postagem, você deve inserir os trechos com os códigos que irá exibir na sua postagem , entre as tags, desta forma: 



<pre><code>

insira seus códigos aqui

</pre></code>

E então? Curtiram o tutorial de hoje? Beijos,  fiquem com Deus :*

36 comentários:

  1. Amei a dica, fica muito lindo o resultado!!*-*
    http://blog-mudancas.blogspot.com/

    ResponderExcluir
  2. bem legaal o tutorial !! Bjs, by: Stardolleiras

    ResponderExcluir
  3. oi, eu ja te adimiro mt com seu blog MAIS SABE A POSTAGEM E VC FEZ esse:
    http://goimagines.blogspot.com/2011/12/big-tutorial-criando-um-layout-sweet.html

    esse blog TE PLAGIOU:
    http://sweet-giirl-oficial.blogspot.com/2012/03/big-tutorial-como-fazer-um-layout.html#more


    eu ja comentei la para ela dar os creditos e HOJE!

    ResponderExcluir
  4. ñ se preucupe mais ela ja deu os creditos!

    ResponderExcluir
  5. Oi flor , vc faz templates Free???
    Beijokas
    cupcakederendas.blogspot.com

    ResponderExcluir
  6. Que show flor ameii concerteza vou usar lá no blog o resultado é muito lindo =]
    Beizos->Sundae Dreams<-

    ResponderExcluir
  7. Seu blog é lindo e o tutorial é ótimo.

    Estou seguindo (:
    Beijo

    ResponderExcluir
  8. Fica lindo o resultado, amei!^^
    Beijos
    muore.blogspot.com

    ResponderExcluir
  9. Anonimo: Muito obrigado por avisar, já tomei as devidas providências. Mesmo que ela tenha dado os créditos não está certo copiar o post inteiro, ela podia pelo menos ter escrito com as palavras dela. Pedi pra ela excluir o post :) Mesmo assim obrigado!

    ResponderExcluir
  10. Adorei, vc me fez lembrar que eu publiquei um template inteiro quase e o code tá enorme kkk vou colocar a barra de rolagem :)

    ResponderExcluir
  11. Fica ótimo o resultado :)
    Seguindo aqui ,adorei o blog. Se puder seguir o meu,agradeço ^^
    http://pepper-of-rock.blogspot.com

    ResponderExcluir
  12. olá, aqui é anonimo dnv hihihi e dnd sabe.. sou contra plagio, so vim falar q o seu blog esta completamente LINDO eu vi os design e vc sempre fui mt criativa! mais quero falar q eu tenho um blog e a lista de seguidores SUMIU e sempre quando eu tento por dnv aparece assim: CORRIJA OS ERROS vc pode falar como concertar se saber? se vc quiser ver o meu blog fala ok? assim eu comendo aqui dnv com o link!

    ResponderExcluir
  13. muito útil o tutorial :)
    beijos
    http://www.deliirantes.blogspot.com

    ResponderExcluir
  14. quando eu vi aqui no blog a caixa de codigo fiquei super curiosa, fico feliz de ver que você dividi tudo que conhece hihi!

    amei o tuto!
    www.devaneiosdeumagarota.com

    ResponderExcluir
  15. Anny vou usar hihi no próximo porque dá muito trabalho! Beijos

    Anny meu blog foi hackado me ajuda a conseguir meus 90 seguidores dinovo?
    http://worldlivegirls.blogspot.com.br/#

    ResponderExcluir
  16. Oi,
    Respondendo seu cometário :
    Obrigado, então como faz o layout de upload, pois esse é o meu primeiro, se spouber como faz o layout de upload responda no meu blog explicando. Obrigado.

    http://sweet-giirl-oficial.blogspot.com.br/

    ResponderExcluir
  17. Anônimo: Se der manda o link do seu blog pra mim ver, é melhor! E não precisa comentar em anônimo, eu não mordo kkk Beijos :*

    ResponderExcluir
  18. Obrigado mesmo mesmo mesmo. Agora posso fazer milhares de templates! Obrigado, Obrigadooooooooooooooo!Vc é demais! Estou seguindo se quiser ( SE QUISER ) segui o meu também.

    http://sweet-giirl-oficial.blogspot.com.br/

    ResponderExcluir
  19. Não consegui fazer a caixinha!

    ResponderExcluir
  20. tava vendo uns blogs e vi o seu e de cara Amei esse blog é muito original nunca vi um assim (até agora) e as dica são ótimas não é seu aniversário mais parabéns hehehehehe
    http://coisasque-eu-gosto.blogspot.com http://masrebeldesnomundo.blogspot.com http://diversidades-deumaadolescente.blogspot.com
    tô esperando uma visitinha sua bjs *-*

    ResponderExcluir
  21. Oi eu amei de paixão seu blog é super fofo e o conteúdo encantador
    Que post super divo,é dificil encontrar posts escritos com tanto talento!
    visita?
    www.yesteens2.blogspot.com

    bjuh

    ResponderExcluir
  22. o tutorial é realmente ótimo, super útil usar para blogs que postam tutoriais, pois quando o código é muito grande a barra de rolagem é ótima para não deixar o post tão comprido.

    Flor, estava pensando em fazer um blog de encomendas de layout para blogger. Mais como não tenho tanto tempo assim, pensei que poderíamos fazer parceria, cada uma ajuda a outra. Se gostar da ideia me manda um email ou me add no msn: carol_ribeiro_sc@hotmail.com

    Bjos linda!
    www.garotascomplicadas.com

    ResponderExcluir
  23. Querida tem uma tag pra você lá no blog, da uma passadinha lá...

    Beijinhos
    Fer>> garotasrosachock.blogspot.com

    ResponderExcluir
  24. Adorei você ter ensinado isso, é um ótimo tutorial! Mesmo assim, só colocarei quando a preguiça não predominar K'

    World-cutest.tk

    ResponderExcluir
  25. Adorei e com certeza vou fazer no meu blog (:
    e quanto a entrevista, Muito Obrigado pela oportunidade eu que "gosti" muito, haha
    E pode me chamar de Gui sim, HAHA
    Beiijos

    http://meninoironia.blogspot.com.br/

    ResponderExcluir
  26. ooi flor, seu blog é muito fofo *-* aceita afiliação?

    ResponderExcluir
  27. aain que massa esse tutorial, mt legal, gostei

    ResponderExcluir
  28. Flor amei <3 muito legal mesmo !

    Estou seguindo aqui , poderia retribuir ?

    beijos,
    www.blog-algodaodoce.com

    ResponderExcluir
  29. Oii flor,adorei a postagem,o tutorial é ótimo,estou te seguindo segue de volta??http://teenagestarblog.blogspot.com.br/

    ResponderExcluir
  30. Amei eu estava doida pra aprender fazer isso, adoro os tutoriais daqui sempre otimos, perfeitos e bem explicados.


    Ta rolando no Perfeitinha o sorteio de um dominio .com corre e participa no www.perfeitinhablog.com

    ResponderExcluir
  31. Flor adorei seu blog, já estou te seguindo, entre no meu blog também e me segue:
    http://perfectgirl-vivi.blogspot.com.br/

    Beijinhos!!

    ResponderExcluir
  32. Muito obrigada,me ajudou muito rs'


    http://www.estrambotices.blogspot.com/
    http://www.insondavel.blogspot.com/

    ResponderExcluir
  33. amei o tutorial. Ótima dica ;)
    Tem um selinho pra você lá no blog, da um passadinha lá, sempre venho aqui procurar uns tutorias, e resolvi agradecer colocando teu link lá. Beijos ♥ . JéssicaKatariny!

    http://pequennos-detalhes.blogspot.com.br/

    ResponderExcluir

- Comentários do tipo "seguindo, segue de volta" "lindo o blog, seguindo, retribui?" Serão ignorados se não tiverem uma opinião sobre o post em si.
- Não aceitamos mais selinhos e tags, sorry!
- Leia a página "FAQ" e outras páginas internas antes de perguntar qualquer coisa.
- Sua opinião é sempre bem vinda. Mas seja educado!

© Go Imagine - 2014. Todos os direitos reservados.