Anotações de Bloco CSS para post Blogger

- 12:05:00

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.




.


EmoticonEmoticon

 

Start typing and press Enter to search