Tutorial: perfil do blog

sexta-feira, fevereiro 17, 2012

Mais um tutorial para vocês!!! Hoje vou ensinar como fazer um perfil igual o meu, para felicidade de vocês. E o mais importante: esse tutorial é bem simples.


Vá em Design > Editar HTML > Aperte CTRL + F e procure por: ]]></b:skin>

Cole antes dele o código abaixo:

#sidebar #perfil { display: block; padding: 10px 10px 10px 10px; --/*espaçamento/margem da 'caixa'*/ background-color: #fff0f3; --/*cor do fundo*/ border-radius: 6px; --/*borda arredondada, quanto maior o px mais redonda*/ box-shadow: 0 0 1em #ff93aa; --/*sombra da 'caixa' do perfil*/ } Salve e ainda na aba Design vá em Elementos da página.

Clique em adicionar um Gadget > Html/JavaScript e cole:

<div id="perfil"> Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto </div>
Substitua a palavra 'texto' pelo o que você quer que apareça no seu pefil. Diga seu nome, personalidade, o que gosta e o que não gosta.

Caso queira adicionar uma imagem sua adicione o código depois de <div id="perfil">

<img src="LINKDASUAFOTO" class="alignright"/>
Substitua o LINKDASUAFOTO. Troque alignright por alignleft caso queira que sua imagem se posicione no canto esquerdo, e vice versa. NÃO retire as aspas!

Obs: Para adicionar os ícones das redes sociais, veja este tutorial. Se não sabe como hospedar imagens, clique aqui.

Leia Também

28 comentários

  1. O seu perfil é fofo, hihi
    http://perfeitateen.blogspot.com/

    ResponderExcluir
  2. Você manda muito bem, Jaque! Ótimo tutorial, esse perfil é super fofo...
    Beijo e ótima sexta-feira pra vc, bom carnaval!
     Just Carol

    ResponderExcluir
  3. Adorei Jaque, adorei o tutorial,bjos

    http://toquaseprontaprasair.blogspot.com/

    ResponderExcluir
  4. Seu perfil e lindo, pena que o meu ja ta pronto e ta mais ou menos do jeito q eu quero

    ResponderExcluir
  5. Amei jaque, estou fazendo um lay novo e vou usar sem dúvidas rs
    Bjocas
    TDiaryofteens.blogspot.com

    ResponderExcluir
  6. É a primeira vez que eu visito o seu blog e adorei ele. Super atualizado, sem contar que o layout é lindo demais.
    Beijos, Ana.

    ResponderExcluir
  7. own, adorei :b!!! toda vez que venho no seu blog e vejo alguma dica de HTML fico vontade de mudar meu layout!! hahahaha
    lindo post como sempre!!!
    bjs!! :m

    ResponderExcluir
  8. adorei o tuto sua linda :)

    http://whatisbrubs.blogspot.com

    ResponderExcluir
  9. adorei a codificação, super facil e leve. acho que usarei no proximo lay do icif que ja ta sendo feito1 ;)

    beeeijos, te espero lá ;)
    http://www.itcrazy-itfashion.com.br/

    ResponderExcluir
  10. Muito legal o seu blog,
    passei para conhece-lo.
    Beijos e bom carnaval.

    ResponderExcluir
  11. Obrigado pela visita,
    volte sempre.
    beijão.

    ResponderExcluir
  12. Ótimo tutorial! Faz toda a diferença para quem está começando a blogar e de repente encontra uma explicação simples de como faz algo bonitinho e que valoriza o blog!! Parabéns Jaque, super digno esse post! Você sumiu lá do #ADS, espero vê-la mais vezes por lá!! Beijos querida blogueira!


    Antes de Sonhar

    ResponderExcluir
  13. No meu nem deu KKKKK
    Seguindo, segue tmb? http://gradientgirls.blogspot.com/

    ResponderExcluir
  14. vou usar esse tuto no meu próximo lay, fica com certeza mto lindo, já ia te perguntar como vc fez kkkk <3 aahh, ta tendo um concurso super legal lá no blog, ele é bem diferente, *-* com o tema fotografia, que vai acontecer em várias epocas do ano, a nossa intenção é trazer um pouco da fotografia para os blogs, e a foto não precisa ser necessariamente sua passa lá e confere?

    www.blogmundodamoda.com

    ResponderExcluir
  15. Coisa inda esse teu blog *-*
    Queria pegar lay free que vc fez, mas já vi que algumas pessoas tem igual, aí fica chato né?! Mas tô pensando seriamente em usá-lo rsrsrs
    biejos

    ResponderExcluir
  16. Sua liiinda, eu super queria esse tuto e você feez :m Viiva, ainda nao sei se vou fazer meesmo um perfil (WHAT? :q ) mas se eu fizer, vai ficar lindo igual ao seu *-*
    http://thebluberryon.blogspot.com/

    ResponderExcluir
  17. Ah que legal, vou tentar colocar no meu proximo layout!

    ResponderExcluir
  18. muito bunitinhuu o teu perfil...
    :u

    ResponderExcluir
  19. Eu deveria ter lido isso antes, super sofri para fazer isso no meu, o jeito que tu passou é tão simples.

    ResponderExcluir
  20. nossa tu ta me ajudando muito <3

    ResponderExcluir
  21. Ótimo tutorial, muito bem explicado e o que é mais importante, dá certinho...muito obrigada seu blog é lindo..=]

    ResponderExcluir
  22. Adorei esse tutorial, me ajudou bastante!
    Beijos,
    www.jubarrosmoda.blogspot.com

    ResponderExcluir
  23. Adorei o blog! Super fofo!
    Beijinhos

    ResponderExcluir
  24. Isso aqui sempre me ajuda♥

    entaodeixaflorir.blogspot.com.br/

    ResponderExcluir
  25. olá meu nome é regiane, e estou contando a dificuldade que passei pra criar meu perfil e como seu blog me ajudou, deixando o link do seu blog la, pra quem quiser os códigos, muito obrigada pela ajuda, beijos e abraços !! abusandocompouco.blogspot.com.br

    ResponderExcluir

Os comentários desse blog são moderados, portanto só serão publicados após aprovação. Comentários com propagandas, divulgações e comentários pedindo para seguir não serão aprovados. Deixe o link do seu blog caso queira que eu retribua algo. Obrigada.

Instagram

Subscribe