sábado, 12 de novembro de 2016

Anotações de Bloco CSS para post Blogger


Anotações de bloco CSS para post Blogger


Ola hoje vamos apresentar anotações de bloco CSS para Blogger, as pessoas podem perguntar para que isso serve exatamente? bem isso é para embelezar nosso blog e também manter o leitor conectado em uma  determinada anotação importante seja isso uma notificação uma alerta avisos isso é muito util e vai ser adicionado ao corpo da postagem do Blogger onde desejar aplicar seja no inicio no fim ou no meio da postagem siga os passos abaixo para adicionar isso a seu template.

css notification blogger post 2017

Para adicionar isso no Template do Blogger siga os passos:

Faça login no Blogger então va no menu modelo 
editar HTML então com as teclas combinadas CTRL+F busque por:

]]> </ b: skin>  logo acima disso copie e cole o seguinte código: 


/* CSS  */
.info, .tips, .warning {
 line-height: 22px;
 min-height: 38px;
 padding: 10px 12px 12px 68px;
 margin: 5px 0;
}
.info {
 background: #67809F url('http://2.bp.blogspot.com/-3rcGQ-VAKb8/UlA4L72c6wI/AAAAAAAAFtY/f__fkV_xBsQ/s1600/info.png') no-repeat 12px 8px;
 color: #222
}
.tips {
 background: #049372 url('http://2.bp.blogspot.com/-_Y9kuQODeBs/UlA4LwDUkhI/AAAAAAAAFtk/Rm0QwoddGLw/s1600/tips.png') no-repeat 12px 8px;
 color: #fff;
}
.warning {
 background: #e74c3c url('http://2.bp.blogspot.com/-rgsBmdJYFkM/UlA4LyWCrqI/AAAAAAAAFtc/suIf3IwnpgE/s1600/warning.png') no-repeat 12px 8px;
 color: #fff;
}

Salve o template. 

Agora quando desejar inserir uma anotação siga os passos, na postagem do Blog clique na aba HTML ao lado de escrever e copie o código que deseja abaixo então cole.


Para Info copie e cole esse código:

<div class="info">
Aqui você pode escrever o que desejar.
</div>

<div class="tips">
Aqui você pode escrever o que desejar.
</div>


<div class="warning">
Aqui você pode escrever o que desejar.
</div>

Ou pode utilizar a tag simples: 

<p class="info">
Aqui você pode escrever o que desejar.
</p>

Simples assim seu Blogger agora tem notificações, continue conosco para o próximo post.




NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner