Olá gatinhos, tudo bem? Sintam-se a vontade e sejam bem vindos ao meu cantinho, este bloguinho foi criado em julho de 2012 e até hoje é direcionado a área de html e css. E se desejarem algo não exitem e peçam pela ask! beijinhos, bye ♡

21.6.13

Área do rodapé igual ao do blog!

Olá algodões doces ^3^ tudo certinho? Super cansada, hoje estou muitoooo cansada mesmo..Teve vem pra rua aqui na minha cidade também e eu apoio pra valer! O único problema é que com a galera na rua ficamos sem transporte público, eu sai do meu trabalho ás 17:45 e consegui chegar em casa somente as 22:00! Uhum isso mesmo, só neste horário pois justamente onde fizeram a manifestação é onde a linha do meu ônibus passava, e com isso tive que pegar 3 ônibus em vez de apenas um para chegar na minha casa! Não querendo encher esse post com linguiça continuarei com o meu objetivo, afinal o que eu passei hoje não traz muita cultura pra vocês certo?

Mas apenas tentei expor a realidade do brasil, e o que a gente tem que passar para conseguir algo! Enfim falando sobre a minha área de footer, eu farei esse tuto pois alguém me pediu fazia um tempinho, mas só agora lembrei. É muito mais simples do que vocês imaginam, existem alguns tutoriais ensinando a por imagens e links na área do footer, mas o meu é os dois juntos, vocês podem usar a imagem ou apenas o link, ou ainda se quiser pode colocar os dois... O tutorial é bem simples mas mesmo assim requer atenção, qualquer errinho já não fica como está aqui no blog, então para quem não sabe muito de códigos html recomendo seguir bem certinho como irei mostrando ok?

Agora como de costume vá no modelo e em editar html, dê um Ctrl F e procure por .footer-inner {
abaixo dele cole o seguinte código:

/*Credit
---------------------------------------------------*/
#credit {
background: url(LINK IMAGEM AQUI); width: 1380px; margin-left: -20px; background-repeat: repeat; z-index: 1000; height: 240px; clear: both; font-size: 90%; color:  #COR DA FONTE; text-align: center; padding: 5px;
border-radius:2px; /*-------------Arredondamento da área--------*/
border-bottom: 4px solid #; /*---BORDAS EM VOLTA DO FUNDO---*/
border-top: 4px solid #;
border-right: 4px solid #;
border-left: 4px solid #;
box-shadow: inset 0 0 6px #e2e1e1, 0 0 1px #ccc;}
margin: 0px auto 10px;
padding: 0px;
width: 1200px;
height: 40px;
font-size:11px;
clear: both;
font-weight: normal;
text-align:center;
color:#fff;
}
#credit p {
margin: 0;
padding-top:50px;
}
#credit a,  .credit a:visited {
color:#COR DO LINK VISITADO;
text-decoration: none;
font-family: /*---fonte desejada---*/
font-size:11px;
}
#credit a:hover{
color: #COR DO LINK HOVER;
text-decoration: underline;
}

Parte importante para fazer o rodapé aparecer no tema, vá em editar html e dê um Ctrl F digite </body> e acima dele cole esse código aqui:

<div id='credit'>Escreva o que quiser aqui</div>

Agora vou explicar como vocês irão fazer para usar apenas a imagem ou os dois juntos! Na parte de cima está link da imagem ali é onde vocês irão por a imagem desejada, como podem ver eu sempre uso o mesmo tamanho, que no caso como está ali é a largura de 1380 por 240 de altura, mas vocês podem usar o tamanho que acharem necessário e que se encaixa com as larguras do seu tema. Para usar igual o modelo que está no blog, apenas coloque a imagem e nada mais, no resto não mexa.

Apenas deixe sem nada, agora se quer a imagem e ainda um link do seu blog junto, onde está cor da fonte abaixo a imagem coloque a cor desejada ali e em seguida se quiser borda em volta da imagem que colocou,  coloque as cores das bordas onde está bordas em volta do fundo, para terminar se quiser efeito hover no link que irá usar onde está cor do link visitado coloque a cor desejada e no hover também, o resto é muito simples, se quiserem mexer na altura na largura do link mexa onde está padding-top e no margin, se quiser alinhar a frase do link mexa onde está text-align: center; e se quiser mudar a imagem de lado, por exemplo: se quiser a imagem mais para a direita ou esquerda vai mudando nesse código aqui:  margin-left: -20px; é isso não tem erro, sei que o post ficou bem comprido mas é muito legal o resultado. Por hoje é isso amores, espero que usem e abusem do tuto >.<! Kissus da Roh Chan <3

15 comentários:

  1. Adorei o tutorial *-* Não sabia como personalizar o rodapé deste modo, e fica bem fofo *o*
    Adicionei o post aos favoritos, acho que me será útil no próximo layout ^^

    @catching--stars

    ResponderExcluir
    Respostas
    1. Opaaa muito obrigada e fico feliz em poder ajudar, que bom que o tuto foi útil ^^
      seu blog é maravilhoso ^3^... Kissus! b;)

      Excluir
  2. Pois.. eu entendo o que se esta a passar no Brasil!! E apoio!! O . <)b Go Go Brasil!!
    Mas chegar a casa com tanta hora depois de sair do trabalho.... :/

    o seu rodape é super cute!! >3< Obrigada pelo tuto Roh-Chan!! *---*

    Kissu ~♥ || Pankax&Pankadax

    ResponderExcluir
    Respostas
    1. Obrigada amore, ele fica bem fofo mesmo não é? E fico feliz em ajudar..
      Beijão amore e aceito afiliação sim! Beijocas..

      Excluir
    2. é sim *-* bem cute!
      Obrigada por aceitar afiliação Roh-Chan! :3

      Excluir
    3. imagina amor.. fico feliz em ser sua afiliada >.<

      Excluir
  3. Roh-Chan, aceita o Pankax como seu afiliado? *-*

    Kissu ~♥ || Pankax&Pankadax

    ResponderExcluir
  4. u__u', vou tentar usar no meu, adoro seu rodapé, é tão perfeito *OO*

    Beijos,

    Juu-Chan do Nescau com Nutella.

    ResponderExcluir
    Respostas
    1. Obrigada fofa usa mesmo... vai ficar super fofoo ^3^

      Excluir
  5. adorei... vou tenta usar no meu, só vou mudar as cores para combinar com o meu... O.O

    Beijos,

    Ana Beatriz do http://bibliotecadoce.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Ok amor, mas não as cores que vc tem que mudar e sim a imagem em geral ok? Kissu ;)

      Excluir
  6. Nossa que tuto ótimo, sempre tenho problemas ao tentar personalizar o rodapé dos meus layouts, mas dessa vez eu vou tentar por no próximo lay algo maneiro deste tipo!

    O UQN voltou com força total, passa lá e dá uma olhadinha nessa postagem!

    http://umaquasenerd1.blogspot.com/2013/06/o-que-realmente-esta-por-tras-dos.html

    ResponderExcluir
    Respostas
    1. já vi o seu post e amei, muito bem feito.. Kissus ;)

      Excluir
  7. Ah que lindo, sempre quis aprender a fazer esse rodape <33 fica tão lindo, provavelmente usarei no proximo layout. c:
    #IIRTW

    ResponderExcluir
  8. Ficou muuito lindo *-* o seu foi o único tutorial que funcionou, vlw <3

    ResponderExcluir

Olá meus amores, os comentários devem ser direcionados somente ao blog e não a vida pessoal de ninguém! Qualquer dúvida peça pela Ask que responderei o mais rápido possível. Anônimo não adianta vir xingar pelos comentários que antes de mesmo de pensar em me ofender eles serão excluídos! Não gosto de tags, se quiser fazer fique a vontade mas não irei retribuir, não curto seguindo segue de volta =/ mas posso seguir se gostar realmente do blog, não julgo por layout ou por seguidores, avalio o blog e como disse se eu curtir é claro que sigo, afiliações? Peça nos comentários pois se pedir em outro lugar no caso páginas é bem provável que eu não veja! Então meus lindos espero que curtam cada cantinho do meu bloguinho e voltem sempre! kissus (*^3^)

LAYOUT E CODIFICAÇÃO POR ROH A. RAMOS OS DIREITOS ESTÃO RESERVADOS | Tecnologia do Blogger © 2017