segunda-feira, 4 de abril de 2016

New Blockquote blogger 2016

new-blockquote-for-blogger-2016


Hoje vamos compartilhar um novo design em blockquote para Blogger para que serve isso afinal, bem isso serve para que possamos mostrar em algo em nosso artigo é como uma mensagem de alerta e cai muito bem em Blogger esse é um layout combinado com 4 tipos de cores onde cada vez que o visitante visita o artigo ele muda de cor para adicionar isso siga os passos.


Adicionando Blockquote no Blogger: 

Faça login no Blogger então vá no menu modelo então >> editar >>HTML/JavaScript 
com as teclas combinadas CTRL+F busque por: ]]></b:skin> logo acima disso copie e cole o seguinte código.

<style type="text/css">
/* lisenci code for info dialog boxes
type: modified blockquote
Crédit saabatblogg */
.info-box_one,
.info-box_two,
.info-box_three,
.info-box_four {
  border-radius: 1em;
  color: #fafafa;
  max-width: 32em;
  margin: 5% auto;
  padding: 2em 15px 15px;
  position: relative;
  width: 95%;}

.info-box_one:before,
.info-box_two:before,
.info-box_three:before,
.info-box_four:before {
  background: #222;
  content: attr(data-title);
  left: 50%;padding: 0 1em;
  position: absolute;
  text-transform: uppercase;
  top: -0.6em;text-align: center;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);}

.info-box_one em {color:#9ceefe;font:bold italic 19px/normal Georgia;}
.info-box_two em {color:#ff9999;font:bold italic 19px/normal Georgia;}
.info-box_three em {color:#baffad;font:bold italic 19px/normal Georgia;}
.info-box_four em {color:#ffff99;font:bold italic 19px/normal Georgia;}

//text box style (1)
.info-box_one {
  border: 0.2em solid #37ddfd;
  box-shadow: inset 0 0 0.4em #05d5fc, 0 0 0.4em #05d5fc;}

.info-box_one:before {
  border-left: 0.2em solid #37ddfd;
  border-right: 0.2em solid #37ddfd;
  color: #9ceefe;
  text-shadow: 0 0 0.4em #05d5fc;}

//text box style (2)
.info-box_two {
  border: 0.2em solid #ff3333;
  box-shadow: inset 0 0 0.4em red, 0 0 0.4em red;}

.info-box_two:before {
  border-left: 0.2em solid #ff3333;
  border-right: 0.2em solid #ff3333;
  color: #ff9999;
  text-shadow: 0 0 0.4em red;}

//text box style (3)
.info-box_three {
  border: 0.2em solid #64ff47;
  box-shadow: inset 0 0 0.4em #39FF14, 0 0 0.4em #39FF14;}

.info-box_three:before {
  border-left: 0.2em solid #64ff47;
  border-right: 0.2em solid #64ff47;
  color: #baffad;
  text-shadow: 0 0 0.4em #39FF14;}

//text box style (4)
.info-box_four {
  border: 0.2em solid #ffff33;
  box-shadow: inset 0 0 0.4em yellow, 0 0 0.4em yellow;}

.info-box_four:before {
  border-left: 0.2em solid #ffff33;
  border-right: 0.2em solid #ffff33;
  color: #ffff99;
  text-shadow: 0 0 0.4em yellow;}
</style>

Então salve o modelo

Quando for publicar o artigo e desejar uma Blockquote copie o seguinte código. clique na aba html cole e escreva o que deseja salve e veja o resultado.


<p data-title="Informations Text" class="info-box_one">
<em>INFO:</em> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla commodi tempore voluptatem earum modi suscipit ipsa aspernatur autem amet harum unde assumenda nisi ex consequatur similique cupiditate facere ut nihil velit quos perspiciatis. Repudiandae neque vel aliquam odio doloribus labore.</p>

<p data-title="Informations Text" class="info-box_two">
<em>INFO:</em> Insert your text in here</p>

<p data-title="Informations Text" class="info-box_three">
<em>INFO:</em> Insert your text in here</p>

<p data-title="Informations Text" class="info-box_four">
<em>INFO:</em> Insert your text in here</p>




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