Oi lindonas , tudo bem ? Eu to bem mais morrendo de calor ( com esse calor todo to começando a acreditar no fim do mundo #Pirogeralné? 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
-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
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
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
Adoorei a parte |||, eu apareci na foto dos comentarios *u* uhuuuuuuu
ResponderExcluirbeijoos
kkkkkkkkkkk beijinhoos ♥
ExcluirMuito boa as dicas florzinha!!
ResponderExcluirbeijo beijo
http://leiidedeborah.blogspot.com.br/
Obrigada anjo beijos ♥
ExcluirNossa! Estou amando esse tutorial.
ResponderExcluirNo 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!
Haha linda, faz mesmo , espero que esteja entendo a minha " maravilhosa " explicação kk beijinhos anjinha ♥
ExcluirOlá flor!!
ResponderExcluiramei sua visita e o comentario lá no meu cantinho!!
---------------------------------
Tutorial muito útil adorei ^-^
seu blog é perfeito estou seguindo!
BEIJOS!
rarosej.blogspot.com.br
Que bom que gostou , sempre que poder estarei la , ooun obrigada pelo carinho , com certeza é muito útil mesmo !! ♥
ExcluirAdorei o tutorial ><
ResponderExcluirMas muito dificil pra minha pouca inteligencia :c
IASJDIOAJSOIDJASIODJIOAJDASJI.
Obg pelos elogios no meu blog ♥
http://theworldoflena.blogspot.com.br/
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 ♥
ExcluirOi 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
ResponderExcluirAh e eu adorei os tutoriais, tudo muito bem explicado *o*
Beijos
http://monalisasumavielle.blogspot.com.br/
Ooi linda , ah sim obrigada vou te colocar aqui também , que isso linda é eu que me sinto honrada :) beijoos ♥
ExcluirLegal o post!
ResponderExcluirJá fiz um parecido no meu blog uma vez é bem legal!
bjoos
estilo você-perfil
Com certeza , beijinhos ♥
ExcluirLinda 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.
ResponderExcluiro link é esse : http://my-doce-kawaii.blogspot.com.br/2012/12/tutorial-area-da-postagem-gif-na-sidebar.html .
Kissus ♥
Ata linda , obrigada mesmo viu amei beijinhos ♥
Excluir