19 de dez. de 2012

Como fazer seu próprio template parte |||

               
Oi lindonas , tudo bem ? Eu to bem mais morrendo de calor ( com esse calor todo to começando a acreditar no fim do mundo #Pirogeral? kkk ) , bom hoje venho com a 3° parte de como criar um template , hoje vamos aprender a personalizar as seguintes coisas ; 

-Negrito Itálico Sublinhado Riscado 
-Blockquote 
-Post Footer
-Mudar o " nenhum comentário "
-Remover attribution 
-Remover "Assinar:Postagens (atom)"
-Comentários

Não pense que não é importante pois é uma das partes mais importantes do template , e que complementa tudo !
Então vamos lá começar pelo Negrito Itálico Sublinhado e riscado 

Editar HTML > F3 e procure por ;

body {

Após encontra cole o código abaixo , depois da chavinha , como mostra na imagem




/*formatação*/
b, strong, bold { color: #B23AEE; -webkit-transition-duration: .80s}
s, strike { color: #EE6AA7; -webkit-transition-duration: .80s}
u, underline { color:#CAFF70; border-bottom: 1px dashed #7FFF00; text-decoration: none; -webkit-transition-duration: .80s}
i, em, italic { color: #FF7F00; -webkit-transition-duration: .80s}
/*formatação hover*/
u:hover { color: #7FFF00; border-bottom: 1px solid #54FF9F; text-decoration: none; -webkit-transition-duration: .80s}
b:hover { color:#FFBBFF; -webkit-transition-duration: .80s}
s:hover { color: #FF3E96; -webkit-transition-duration: .80s}
i:hover { color: #FF4500; -webkit-transition-duration: .80s}

Resultado ;







OBS ; Esse código já estar personalizado do jeito que esta no meu www , mais você pode personaliza da forma que desejar , mude somente color: com esta tabela !


Agora vamos personalizar o blockquote 


F3 e Procure por ; 

]]></b:skin>

E acima cole o seguinte código ;

blockquote {
background: #F7F6F5; */ cor de fundo /* 
border: 1px solid #E6E2DF; */ borda */ 
color: #96928D; */ cor da fonte /* 
font-family: 'calibri', verdana; 
font-style: normal; */ estilo da fonte */ 
font-size: 14px; */ tamanho da fonte */
margin: 15px; */ margem entre a borda da area de postagem e a caixinha de blockquote /* 
padding: 15px; */ margem interna /*
text-align:justify;
-moz-border-radius: 10px; */ borda arredondada */
-webkit-border-radius: 10px; */ borda arredondada */
border-radius: 10px; */ borda arredondada */
}



Esse blockquote é esse modelo aqui, mais você pode ta trocando por outra , tem vários tutoriais ai pela net !

                                       Agora vamos personaliza a post footer

Vá em layout > Procure pelo Gadgets Postagens do blog , clique em editar abrirá uma janela , e procure por Mostra botões de compartilhamento e retire ele !

     Agora Procure por ;

]]></b:skin> 

e acima da tag cole o seguinte código 



.post-footer-line-1{
border-bottom: -1px solid #b1afa9
font-size:10px; 

}

.post-footer-line-2{

border-bottom: -1px solid #b1afa9
font-size:10px;
}


Entendendo o código 

-1px é a sua linha , aumenta se quiser ela mais grossa . Troque solid por dashed se quiser uma linha pontilhada  #b1afa9 é a cor .  

Resultado ;


Personalizar " nenhum comentário "

Layout > Postagem do blog > Editar > vai abrir uma janela , onde ta escrito 5 comentários , você troca a palavra comentários pela palavra que quiser , eu troquei a minha por recadinhos !

Remover Attriibution 

Editar HTML > f3 e procure por ;

<b:section class='foot' id='footer-3' showaddelement='

Na frente desse código você vai encontra "no" , você só vai modificar essa palavrinha ( no ) por yes , se já estiver yes ( que é meio difícil ) deixe do jeito que esta .



F3 de novo e procure por ;

<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>



Mude true por false , salve , e vá em layout > procure pelo Gadgets Attribution e o exclua


agora para fazer um Attribution personalizado , Adicionar HTML/javascript e cole o código abaixo fazendo as alterações necessárias 

<div align="center">© Design by <a href="O LINK DO SEU BLOG" target="_blank">Seu nome [Nome do seu blog]</a></div>

Resultado ; 




Prontinho !

Agora vamos remover  "Assinar:Postagens (atom)"

Editar HTML > "expandir modelo de widget "e procure por ; 

<b:include name=’feedLinks’/> 


após achar o delete !

Agora vamos personalizar os comentários igual aqui do blog :)


Então aqui eu vou deixar o link de onde eu tirei esse tutorial , por que os códigos são grandes e vai tomar muito espaço do post e vai demora muito a carregar ; Blog aqui

Mais antes de tudo remova o fundo cinza com esse tuto aqui ; blog aqui

O resultado vai ser mais o menos esse ;


Mais ai você vai mudar conforme quiser , esperam que tenha ajudado beijos amanhã volto com a 4° parte


















16 comentários:

  1. Adoorei a parte |||, eu apareci na foto dos comentarios *u* uhuuuuuuu

    beijoos

    ResponderExcluir
  2. Muito boa as dicas florzinha!!

    beijo beijo


    http://leiidedeborah.blogspot.com.br/

    ResponderExcluir
  3. Nossa! Estou amando esse tutorial.

    No momento eu estou fazendo em um blog de teste e quando eu aprender tudinho, vou fazer no meu blog de verdade.

    http://www.aerafeminina.com

    Bjos!

    ResponderExcluir
    Respostas
    1. Haha linda, faz mesmo , espero que esteja entendo a minha " maravilhosa " explicação kk beijinhos anjinha ♥

      Excluir
  4. Olá flor!!
    amei sua visita e o comentario lá no meu cantinho!!
    ---------------------------------
    Tutorial muito útil adorei ^-^
    seu blog é perfeito estou seguindo!

    BEIJOS!

    rarosej.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Que bom que gostou , sempre que poder estarei la , ooun obrigada pelo carinho , com certeza é muito útil mesmo !! ♥

      Excluir
  5. Adorei o tutorial ><
    Mas muito dificil pra minha pouca inteligencia :c
    IASJDIOAJSOIDJASIODJIOAJDASJI.
    Obg pelos elogios no meu blog ♥

    http://theworldoflena.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. kkkkkk não fala isso de você lindona , mais é só você ver a primeira parte e ir fazendo em um blog de teste , e ir fazendo passo por passo de vagar e com calma que você consegue anjinha !! beijinhos ♥

      Excluir
  6. Oi hanny, olha estou passando rapidinho para informa que eu aceito a sua afiliação sim, inclusive já te coloquei nos meus afiliados, muito obrigada pelo convite, fiquei me sentindo honrada =D
    Ah e eu adorei os tutoriais, tudo muito bem explicado *o*
    Beijos
    http://monalisasumavielle.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Ooi linda , ah sim obrigada vou te colocar aqui também , que isso linda é eu que me sinto honrada :) beijoos ♥

      Excluir
  7. Legal o post!
    Já fiz um parecido no meu blog uma vez é bem legal!
    bjoos
    estilo você-perfil

    ResponderExcluir
  8. Linda já coloquei o tutor de como por a barrinha e o gif na sidebar a não repare a última imagem é que meu print não tá pegando direito.
    o link é esse : http://my-doce-kawaii.blogspot.com.br/2012/12/tutorial-area-da-postagem-gif-na-sidebar.html .

    Kissus ♥

    ResponderExcluir