publicidade
publicidade
publicidade
publicidade
publicidade
publicidade
publicidade

Emoctions nos comentarios das postagens

#Ezio
 image
Aew' povo
Vou ensinar aqui hoje um truque muito simples,para colocar Smiles ou Emoticons, como queiram chamar nos comentários e, apesar de chamadas de “firulas infantis” por muitos, pra mim são carinhos ou expressões que “economizam” muitas palavras (e digitação kkk) quando queremos compartilhar nossas emoções. Só isso!  Vou ensinar como eu coloquei aqui no meu,vamos lá:



…
Pode parecer muito comprido, mas é muito simples. Só copiar e colar.

Faça login ► Clique na opção “Design” depois em “Editar HTML”

Vamos instalar o CSS. Procure pela tal ]]></b:skin> e cole o seguinte código ANTES/ACIMA dela.

/*
* jQuery CSSEmoticons plugin 0.2.8
*
* Copyright (c) 2010 Steve Schwartz (JangoSteve)
*
* Dual licensed under the MIT and GPL licenses:
*   http://www.opensource.org/licenses/mit-license.php
*   http://www.gnu.org/licenses/gpl.html
*
* Date: Sun Sep 20 10:00:00 2010 -0500
*/
/* Basic styles for emoticons */
span.css-emoticon {
  font-family: "Trebuchet MS"; /* seems to give the best and most consistent emoticon appearance */
  font-size: 0.65em;
  font-weight: bold;
  color: #000000;
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  width: 1.54em; /* note that this is a multiple of this span's font-size, not containing text font-size */
  height: 1.54em; /* so, relative to containing text, width and height are 0.9 x 1.6 = 1.44em */
  text-align: center;
  padding: 0;
  line-height: 1.34em;
  -moz-border-radius: 1.54em;
  -webkit-border-radius: 1.54em;
  border-radius: 1.54em;
  -moz-box-shadow: 1px -1px 2px rgba(0,0,0,0.5);
  -webkit-box-shadow: 1px -1px 2px rgba(0,0,0,0.5);
  box-shadow: 1px -1px 2px rgba(0,0,0,0.5);
  border: 1px solid rgba(0,0,0,0.25);
  background-color: #ffcc00;
  background-image: -webkit-gradient(
    linear,
    right top,
    left top,
    color-stop(0.41, rgb(255,204,0)),
    color-stop(0.56, rgb(255,221,85)),
    color-stop(1, rgb(255,238,170))
  );
  background-image: -moz-linear-gradient(
    center right,
    rgb(255,204,0) 41%,
    rgb(255,221,85) 56%,
    rgb(255,238,170) 100%
  );
  -webkit-transition-property:color, background, transform; 
  -webkit-transition-duration: 1s, 1s; 
  -webkit-transition-timing-function: linear, ease-in;
}
/* Styles for two-character emoticons that need more letter-spacing for proportionality */
span.css-emoticon.spaced-emoticon {
  padding-left: 0.2em;
  width: 1.34em;
  letter-spacing: 0.2em;
}
/* This is a dirty dirty hack, because webkit doesn't properly do the padding+width=total-width as it should
   I think the width of the border may be throwing things off, because it's more noticable for small icons */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  span.css-emoticon.spaced-emoticon {
    width: 1.4em;
  }
}
/* Styles for emoticons that need to have smaller characters to fit inside the circle */
span.css-emoticon.small-emoticon {
  font-size: 0.55em;
  width: 1.82em;
  height: 1.82em;
  line-height: 1.72em;
  -moz-border-radius: 1.82em;
  -webkit-border-radius: 1.82em;
  border-radius: 1.82em;
}
span.css-emoticon.small-emoticon.spaced-emoticon {
  padding-left: 0;
  width: 1.82em;
  letter-spacing: 0.1em;
}
/* Styles for additional colors */
span.css-emoticon.red-emoticon {
  background-color: #eb0542;
  background-image: -webkit-gradient(
    linear,
    right top,
    left top,
    color-stop(0.41, rgb(235,5,66)),
    color-stop(0.56, rgb(235,38,90)),
    color-stop(1, rgb(250,55,110))
  );
  background-image: -moz-linear-gradient(
    center right,
    rgb(235,5,66) 41%,
    rgb(235,38,90) 56%,
    rgb(250,55,110) 100%
  );
}
span.css-emoticon.pink-emoticon {
  background-color: #ff8fd4;
  background-image: -webkit-gradient(
    linear,
    right top,
    left top,
    color-stop(0.41, rgb(255,143,212)),
    color-stop(0.56, rgb(255,153,216)),
    color-stop(1,    rgb(255,173,225))
  );
  background-image: -moz-linear-gradient(
    center right,
    rgb(255,143,212) 41%,
    rgb(255,153,216) 56%,
    rgb(255,173,225) 100%
  );
}
/* styles for emoticons that need no rotation, like O_o */
span.css-emoticon.no-rotate {
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  font-size: 0.45em;
  width: 2.2em;
  height: 2.2em;
  line-height: 1.9em;
  -moz-border-radius: 2.2em;
  -webkit-border-radius: 2.2em;
  border-radius: 2.2em;
  background-image: -webkit-gradient(
    linear,
    right bottom,
    right top,
    color-stop(0.41, rgb(255,204,0)),
    color-stop(0.56, rgb(255,221,85)),
    color-stop(1, rgb(255,238,170))
  );
  background-image: -moz-linear-gradient(
    center bottom,
    rgb(255,204,0) 41%,
    rgb(255,221,85) 56%,
    rgb(255,238,170) 100%
  );
}
span.css-emoticon.no-rotate.red-emoticon {
  background-image: -webkit-gradient(
    linear,
    right bottom,
    right top,
    color-stop(0.41, rgb(235,5,66)),
    color-stop(0.56, rgb(235,38,90)),
    color-stop(1, rgb(250,55,110))
  );
  background-image: -moz-linear-gradient(
    center bottom,
    rgb(235,5,66) 41%,
    rgb(235,38,90) 56%,
    rgb(250,55,110) 100%
  );
}
span.css-emoticon.no-rotate.pink-emoticon {
  background-image: -webkit-gradient(
    linear,
    right bottom,
    right top,
    color-stop(0.41, rgb(255,143,212)),
    color-stop(0.56, rgb(255,153,216)),
    color-stop(1,    rgb(255,173,225))
  );
  background-image: -moz-linear-gradient(
    center bottom,
    rgb(255,143,212) 41%,
    rgb(255,153,216) 56%,
    rgb(255,173,225) 100%
  );
}
/* Styles for emoticons that need to be rotated counter-clockwise, like <3 */
span.css-emoticon.counter-rotated {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -moz-box-shadow: -1px 1px 2px rgba(0,0,0,0.5);
  -webkit-box-shadow: -1px 1px 2px rgba(0,0,0,0.5);
  box-shadow: -1px 1px 2px rgba(0,0,0,0.5);
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0.41, rgb(255,204,0)),
    color-stop(0.56, rgb(255,221,85)),
    color-stop(1, rgb(255,238,170))
  );
  background-image: -moz-linear-gradient(
    center left,
    rgb(255,204,0) 41%,
    rgb(255,221,85) 56%,
    rgb(255,238,170) 100%
  );
}
span.css-emoticon.counter-rotated.red-emoticon {
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0.41, rgb(235,5,66)),
    color-stop(0.56, rgb(235,38,90)),
    color-stop(1, rgb(250,55,110))
  );
  background-image: -moz-linear-gradient(
    center left,
    rgb(235,5,66) 41%,
    rgb(235,38,90) 56%,
    rgb(250,55,110) 100%
  );
}
span.css-emoticon.counter-rotated.pink-emoticon {
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0.41, rgb(255,143,212)),
    color-stop(0.56, rgb(255,153,216)),
    color-stop(1,    rgb(255,173,225))
  );
  background-image: -moz-linear-gradient(
    center left,
    rgb(255,143,212) 41%,
    rgb(255,153,216) 56%,
    rgb(255,173,225) 100%
  );
}
/* Styles for animated states */
span.css-emoticon.un-transformed-emoticon, span.css-emoticon.animated-emoticon:hover {
    /* font-size: inherit;
    font-weight: inherit;
    vertical-align: inherit;
    line-height: inherit;
    font-family: inherit; */
    letter-spacing: inherit;
    color: inherit;
    overflow: visible;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    background: none;
    background-image: none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    border-color: transparent;
}
Feito isso, procure pela tag </body> no final do documento XML .
Copie o código abaixo e cole ANTES / ACIMA  de </body>
<script src='http://dl.dropbox.com/u/684300/jquery.cssemoticons.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&#39;.comment-body p&#39;).emoticonize({
//delay: 800,
//animate: false,
//exclude: &#39;pre, code, .no-emoticons&#39;
});
})
</script>
Salve o template.
Copie o endereço abaixo, que são as imagens que eu editei para esse exemplo  e cole em um bloco de notas.
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlDwqXl0PAoa4WT8BAYI5fL63yAvBBKs4E2DrmXOmLsHtZri-P7LyqHGHAQjY2e-eUf73ixrOvV25g-FicUrOqAx6ccMVxm-4H61_aSAmWOtqWMwKTVOnCXknIsahAGFN8kFL0Qu7AFcI/s1600/Emoticons.png'/></img>
Volte a página “Editar HTML” , clique na opção “Expandir modelos de widgets” e procure pelo seguinte trecho:
<data:blogCommentMessage/></p>
Cole EXATAMENTE ABAIXO dele, o endereço das imagens que você copiou em seu bloco de notas.
Visualize e se estiver tudo bem, salve o template.

…
…
Detalhes importantes:
1 - No Internet Explorer (o IEca) que ainda não lê CSS3 (tadinho) os emoticons aparecerão quadradinhos, mas não perdem (muito) a graça, veja:
…
image
…
2- Aconselho que você salve a imagem dos emoticons e hospede no seu próprio blog, através da caixa de postagens como já ensinei AQUI
…
Emoticons
…
3- O mesmo conselho se aplica ao JQuery (script), que você deve hospedar  em seu site preferido (eu uso Dropbox) e pode baixar AQUI


Esse truque foi apresentado por Alfa Jango  (em inglês) e tem uma excelente página com demonstrações de todos os tipos de Emoticons possíveis de inserir. VEJA DEMO
Eu li e apliquei através do  PIZCOS BLOG (em espanhol)  e daí adaptei para vocês.
Espero que gostem!
0 comentários
,

Emoctions nos comentarios das postagens

#Ezio
 image
Aew' povo
Vou ensinar aqui hoje um truque muito simples,para colocar Smiles ou Emoticons, como queiram chamar nos comentários e, apesar de chamadas de “firulas infantis” por muitos, pra mim são carinhos ou expressões que “economizam” muitas palavras (e digitação kkk) quando queremos compartilhar nossas emoções. Só isso!  Vou ensinar como eu coloquei aqui no meu,vamos lá:



…
Pode parecer muito comprido, mas é muito simples. Só copiar e colar.

Faça login ► Clique na opção “Design” depois em “Editar HTML”

Vamos instalar o CSS. Procure pela tal ]]></b:skin> e cole o seguinte código ANTES/ACIMA dela.

/*
* jQuery CSSEmoticons plugin 0.2.8
*
* Copyright (c) 2010 Steve Schwartz (JangoSteve)
*
* Dual licensed under the MIT and GPL licenses:
*   http://www.opensource.org/licenses/mit-license.php
*   http://www.gnu.org/licenses/gpl.html
*
* Date: Sun Sep 20 10:00:00 2010 -0500
*/
/* Basic styles for emoticons */
span.css-emoticon {
  font-family: "Trebuchet MS"; /* seems to give the best and most consistent emoticon appearance */
  font-size: 0.65em;
  font-weight: bold;
  color: #000000;
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  width: 1.54em; /* note that this is a multiple of this span's font-size, not containing text font-size */
  height: 1.54em; /* so, relative to containing text, width and height are 0.9 x 1.6 = 1.44em */
  text-align: center;
  padding: 0;
  line-height: 1.34em;
  -moz-border-radius: 1.54em;
  -webkit-border-radius: 1.54em;
  border-radius: 1.54em;
  -moz-box-shadow: 1px -1px 2px rgba(0,0,0,0.5);
  -webkit-box-shadow: 1px -1px 2px rgba(0,0,0,0.5);
  box-shadow: 1px -1px 2px rgba(0,0,0,0.5);
  border: 1px solid rgba(0,0,0,0.25);
  background-color: #ffcc00;
  background-image: -webkit-gradient(
    linear,
    right top,
    left top,
    color-stop(0.41, rgb(255,204,0)),
    color-stop(0.56, rgb(255,221,85)),
    color-stop(1, rgb(255,238,170))
  );
  background-image: -moz-linear-gradient(
    center right,
    rgb(255,204,0) 41%,
    rgb(255,221,85) 56%,
    rgb(255,238,170) 100%
  );
  -webkit-transition-property:color, background, transform; 
  -webkit-transition-duration: 1s, 1s; 
  -webkit-transition-timing-function: linear, ease-in;
}
/* Styles for two-character emoticons that need more letter-spacing for proportionality */
span.css-emoticon.spaced-emoticon {
  padding-left: 0.2em;
  width: 1.34em;
  letter-spacing: 0.2em;
}
/* This is a dirty dirty hack, because webkit doesn't properly do the padding+width=total-width as it should
   I think the width of the border may be throwing things off, because it's more noticable for small icons */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  span.css-emoticon.spaced-emoticon {
    width: 1.4em;
  }
}
/* Styles for emoticons that need to have smaller characters to fit inside the circle */
span.css-emoticon.small-emoticon {
  font-size: 0.55em;
  width: 1.82em;
  height: 1.82em;
  line-height: 1.72em;
  -moz-border-radius: 1.82em;
  -webkit-border-radius: 1.82em;
  border-radius: 1.82em;
}
span.css-emoticon.small-emoticon.spaced-emoticon {
  padding-left: 0;
  width: 1.82em;
  letter-spacing: 0.1em;
}
/* Styles for additional colors */
span.css-emoticon.red-emoticon {
  background-color: #eb0542;
  background-image: -webkit-gradient(
    linear,
    right top,
    left top,
    color-stop(0.41, rgb(235,5,66)),
    color-stop(0.56, rgb(235,38,90)),
    color-stop(1, rgb(250,55,110))
  );
  background-image: -moz-linear-gradient(
    center right,
    rgb(235,5,66) 41%,
    rgb(235,38,90) 56%,
    rgb(250,55,110) 100%
  );
}
span.css-emoticon.pink-emoticon {
  background-color: #ff8fd4;
  background-image: -webkit-gradient(
    linear,
    right top,
    left top,
    color-stop(0.41, rgb(255,143,212)),
    color-stop(0.56, rgb(255,153,216)),
    color-stop(1,    rgb(255,173,225))
  );
  background-image: -moz-linear-gradient(
    center right,
    rgb(255,143,212) 41%,
    rgb(255,153,216) 56%,
    rgb(255,173,225) 100%
  );
}
/* styles for emoticons that need no rotation, like O_o */
span.css-emoticon.no-rotate {
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  font-size: 0.45em;
  width: 2.2em;
  height: 2.2em;
  line-height: 1.9em;
  -moz-border-radius: 2.2em;
  -webkit-border-radius: 2.2em;
  border-radius: 2.2em;
  background-image: -webkit-gradient(
    linear,
    right bottom,
    right top,
    color-stop(0.41, rgb(255,204,0)),
    color-stop(0.56, rgb(255,221,85)),
    color-stop(1, rgb(255,238,170))
  );
  background-image: -moz-linear-gradient(
    center bottom,
    rgb(255,204,0) 41%,
    rgb(255,221,85) 56%,
    rgb(255,238,170) 100%
  );
}
span.css-emoticon.no-rotate.red-emoticon {
  background-image: -webkit-gradient(
    linear,
    right bottom,
    right top,
    color-stop(0.41, rgb(235,5,66)),
    color-stop(0.56, rgb(235,38,90)),
    color-stop(1, rgb(250,55,110))
  );
  background-image: -moz-linear-gradient(
    center bottom,
    rgb(235,5,66) 41%,
    rgb(235,38,90) 56%,
    rgb(250,55,110) 100%
  );
}
span.css-emoticon.no-rotate.pink-emoticon {
  background-image: -webkit-gradient(
    linear,
    right bottom,
    right top,
    color-stop(0.41, rgb(255,143,212)),
    color-stop(0.56, rgb(255,153,216)),
    color-stop(1,    rgb(255,173,225))
  );
  background-image: -moz-linear-gradient(
    center bottom,
    rgb(255,143,212) 41%,
    rgb(255,153,216) 56%,
    rgb(255,173,225) 100%
  );
}
/* Styles for emoticons that need to be rotated counter-clockwise, like <3 */
span.css-emoticon.counter-rotated {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -moz-box-shadow: -1px 1px 2px rgba(0,0,0,0.5);
  -webkit-box-shadow: -1px 1px 2px rgba(0,0,0,0.5);
  box-shadow: -1px 1px 2px rgba(0,0,0,0.5);
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0.41, rgb(255,204,0)),
    color-stop(0.56, rgb(255,221,85)),
    color-stop(1, rgb(255,238,170))
  );
  background-image: -moz-linear-gradient(
    center left,
    rgb(255,204,0) 41%,
    rgb(255,221,85) 56%,
    rgb(255,238,170) 100%
  );
}
span.css-emoticon.counter-rotated.red-emoticon {
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0.41, rgb(235,5,66)),
    color-stop(0.56, rgb(235,38,90)),
    color-stop(1, rgb(250,55,110))
  );
  background-image: -moz-linear-gradient(
    center left,
    rgb(235,5,66) 41%,
    rgb(235,38,90) 56%,
    rgb(250,55,110) 100%
  );
}
span.css-emoticon.counter-rotated.pink-emoticon {
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0.41, rgb(255,143,212)),
    color-stop(0.56, rgb(255,153,216)),
    color-stop(1,    rgb(255,173,225))
  );
  background-image: -moz-linear-gradient(
    center left,
    rgb(255,143,212) 41%,
    rgb(255,153,216) 56%,
    rgb(255,173,225) 100%
  );
}
/* Styles for animated states */
span.css-emoticon.un-transformed-emoticon, span.css-emoticon.animated-emoticon:hover {
    /* font-size: inherit;
    font-weight: inherit;
    vertical-align: inherit;
    line-height: inherit;
    font-family: inherit; */
    letter-spacing: inherit;
    color: inherit;
    overflow: visible;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    background: none;
    background-image: none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    border-color: transparent;
}
Feito isso, procure pela tag </body> no final do documento XML .
Copie o código abaixo e cole ANTES / ACIMA  de </body>
<script src='http://dl.dropbox.com/u/684300/jquery.cssemoticons.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&#39;.comment-body p&#39;).emoticonize({
//delay: 800,
//animate: false,
//exclude: &#39;pre, code, .no-emoticons&#39;
});
})
</script>
Salve o template.
Copie o endereço abaixo, que são as imagens que eu editei para esse exemplo  e cole em um bloco de notas.
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlDwqXl0PAoa4WT8BAYI5fL63yAvBBKs4E2DrmXOmLsHtZri-P7LyqHGHAQjY2e-eUf73ixrOvV25g-FicUrOqAx6ccMVxm-4H61_aSAmWOtqWMwKTVOnCXknIsahAGFN8kFL0Qu7AFcI/s1600/Emoticons.png'/></img>
Volte a página “Editar HTML” , clique na opção “Expandir modelos de widgets” e procure pelo seguinte trecho:
<data:blogCommentMessage/></p>
Cole EXATAMENTE ABAIXO dele, o endereço das imagens que você copiou em seu bloco de notas.
Visualize e se estiver tudo bem, salve o template.

…
…
Detalhes importantes:
1 - No Internet Explorer (o IEca) que ainda não lê CSS3 (tadinho) os emoticons aparecerão quadradinhos, mas não perdem (muito) a graça, veja:
…
image
…
2- Aconselho que você salve a imagem dos emoticons e hospede no seu próprio blog, através da caixa de postagens como já ensinei AQUI
…
Emoticons
…
3- O mesmo conselho se aplica ao JQuery (script), que você deve hospedar  em seu site preferido (eu uso Dropbox) e pode baixar AQUI


Esse truque foi apresentado por Alfa Jango  (em inglês) e tem uma excelente página com demonstrações de todos os tipos de Emoticons possíveis de inserir. VEJA DEMO
Eu li e apliquei através do  PIZCOS BLOG (em espanhol)  e daí adaptei para vocês.
Espero que gostem!
0 comentários
, ,

Colocar Botão "Curtir" Do Facebook no Blogger

#Ezio
O J Miur do Vagabundia trouxe uma novidade bem interessante para divulgar postagens. O botão "Curtir" do Facebook que pode ser colocado nos posts ou direto na home do seu blog Blogger. Leia a matéria toda no Vagabundia.
Trecho traduzido: "Para aqueles que usam o Facebook, estão aparecendo devagar os métodos de  integração fácil entre blogs e sites. A empresa está em uma luta aberta para "morder" uma fatia de mercado que o Google agora domina."
O código para o botão é o seguinte:
<iframe expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=450&amp;height=60&amp;action=like&amp;font=tahoma&amp;colorscheme=dark&quot;' allowTransparency='true' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:60px'/>
 Há algumas coisas que podemos personalizar:
&amp;layout=standard define otipo de botão, pode-se mudar por button-count para simplifica-lo
&amp;show-faces=true mostra o avatar do usuario e eliminar-se colocando false
&amp;action=like é o texto a mostrar e pode ser substituido  por recommend
&amp;colorscheme=light é o desenho geral, a outra opção é dark
&amp;font=arial é ol tipo da letra opcional e pode ser tahoma, arial, lucida+grande, segoe+ui, trebuchet+ms, verdana
&amp;width=530 é a largura total en pixeles (530 o 450)
&amp;height=60 es la altura total en pixeles

Se quiser exibi-lo no rodapé das postagens faça o seguinte:

Login no Blogger ► opção "layout"  ► Editar HTML ►Clicae em "Expandir modelo de wdgets"

Procure pelo trecho <div class='post-footer-line post-footer-line-1'>

Cole o código ABAIXO do trecho

Para exibir ao lado do título da postagem procure pelo trecho <div class='post-header-line-1'/>

Cole o código ABAIXO do  trecho.

Se queremos exibi-lo em nossa página (pode-se  usá-lo em qualquer página), o código é o mesmo e apenas definir a URL correta, substituindo data:post.url pelo endereço do nosso blog e, neste caso, devemos mudar os símbolos //: (barra dois pontos) por seus  equivalentes - % 3A% 2F:
0 comentários
, ,

Pack de incones

#Ezio
imageO site  ElegantThemes Blog (Templates Wordpress) oferece um pacote com 42 ícones em 64×64 em formatos PNG e PSD. Lindos e elegantes mesmo! Estes ícones não têm restrições. Fique a vontade para usa-los como quiser. Redistribuir, revender, usar em seus layouts... O autor só pede que ao divulga-los em seu blog, direcione o link para download direto no site.



image
Façam o download direto no site elegantthemes.com.
0 comentários
,

Pack de incones

#Ezio
imageO site  ElegantThemes Blog (Templates Wordpress) oferece um pacote com 42 ícones em 64×64 em formatos PNG e PSD. Lindos e elegantes mesmo! Estes ícones não têm restrições. Fique a vontade para usa-los como quiser. Redistribuir, revender, usar em seus layouts... O autor só pede que ao divulga-los em seu blog, direcione o link para download direto no site.



image
Façam o download direto no site elegantthemes.com.
0 comentários
,

Pack de incones do Twitter

#Ezio

twitter02
O Site Webdesigner Depot oferece gratuitamente um conjunto de 50 ícones Twitter  para você usar em seu blog/site.
O Pacote traz os ícones em formato Ai e PNG (transparente),  no tamanho 256 × 256 px.

Abaixo você tem uma visualização completa de todos os ícones incluídos no pacote.









previews
 Download 4sahred
Direto do site: Webdesigner Depot
0 comentários
, ,

Pack de incones do Twitter

#Ezio

twitter02
O Site Webdesigner Depot oferece gratuitamente um conjunto de 50 ícones Twitter  para você usar em seu blog/site.
O Pacote traz os ícones em formato Ai e PNG (transparente),  no tamanho 256 × 256 px.
Abaixo você tem uma visualização completa de todos os ícones incluídos no pacote.









previews
 Download 4sahred
Direto do site: Webdesigner Depot
0 comentários
,

Tabela de cores

#Ezio
imagePara mudar as cores seja das letras, fundo, bordas, etc.. de um blog ou site é importante conhecer os códigos correspondentes e ter sempre a mão uma paleta ou catálogo de cores. Quem trabalha com editores  de imagem tipo Photofiltre, PSPS, Photoshop, etc... já sabe como pegar o código das cores. Para quem não usa editores, vou compartilhar uma tabela com várias opções interessantes para que você possa fazer as mudanças que queira.
O Blogger tem uma página onde se pode mudar cores e fontes dos templates, mas nem sempre nos contentamos com a paleta oferecida por ser muito limitada. Muita gente também usa templates externos, não originais do Blogger, que tem as cores pre-estabelecidas e não permitem a mudança na página de fontes e cores, então fazemos as alterações dentro do documento CSS/HTML.
Espero que gostem!

Cores - Seus Nomes e Códigos

 

NOME DA COR CÓDIGO COR
Black #000000  
Grey0 #150517  
Grey18 #250517  
Grey21 #2B1B17  
Grey23 #302217  
Grey24 #302226  
Grey25 #342826  
Grey26 #34282C  
Grey27 #382D2C  
Grey28 #3b3131  
Grey29 #3E3535  
Grey30 #413839  
Grey31 #41383C  
Grey32 #463E3F  
Grey34 #4A4344  
Grey35 #4C4646  
Grey36 #4E4848  
Grey37 #504A4B  
Grey38 #544E4F  
Grey39 #565051  
Grey40 #595454  
Grey41 #5C5858  
Grey42 #5F5A59  
Grey43 #625D5D  
Grey44 #646060  
Grey45 #666362  
Grey46 #696565  
Grey47 #6D6968  
Grey48 #6E6A6B  
Grey49 #726E6D  
Grey50 #747170  
Grey #736F6E  
Slate Grey4 #616D7E  
Slate Grey #657383  
Light Steel Blue4 #646D7E  
Light Slate Grey #6D7B8D  
Cadet Blue4 #4C787E  
Dark Slate Grey4 #4C7D7E  
Thistle4 #806D7E  
Medium Slate Blue #5E5A80  
Medium Purple4 #4E387E  
Midnight Blue #151B54  
Dark Slate Blue #2B3856  
Dark Slate Grey #25383C  
Dim Grey #463E41  
Cornflower Blue #151B8D  
Royal Blue4 #15317E  
Slate Blue4 #342D7E  
Royal Blue #2B60DE  
Royal Blue1 #306EFF  
Royal Blue2 #2B65EC  
Royal Blue3 #2554C7  
Deep Sky Blue #3BB9FF  
Deep Sky Blue2 #38ACEC  
Slate Blue #357EC7  
Deep Sky Blue3 #3090C7  
Deep Sky Blue4 #25587E  
Dodger Blue #1589FF  
Dodger Blue2 #157DEC  
Dodger Blue3 #1569C7  
Dodger Blue4 #153E7E  
Steel Blue4 #2B547E  
Steel Blue #4863A0  
Slate Blue2 #6960EC  
Violet #8D38C9  
Medium Purple3 #7A5DC7  
Medium Purple #8467D7  
Medium Purple2 #9172EC  
Medium Purple1 #9E7BFF  
Light Steel Blue #728FCE  
Steel Blue3 #488AC7  
Steel Blue2 #56A5EC  
Steel Blue1 #5CB3FF  
Sky Blue3 #659EC7  
Sky Blue4 #41627E  
Slate Blue #737CA1  
Slate Grey3 #98AFC7  
Violet Red #F6358A  
Violet Red2 #E4317F  
Deep Pink #F52887  
Deep Pink2 #E4287C  
Deep Pink3 #C12267  
Deep Pink4 #7D053F  
Medium Violet Red #CA226B  
Violet Red3 #C12869  
Firebrick #800517  
Violet Red4 #7D0541  
Maroon4 #7D0552  
Maroon #810541  
Maroon3 #C12283  
Maroon2 #E3319D  
Maroon1 #F535AA  
Magenta #FF00FF  
Magenta1 #F433FF  
Magenta2 #E238EC  
Magenta3 #C031C7  
Medium Orchid #B048B5  
Medium Orchid1 #D462FF  
Medium Orchid2 #C45AEC  
Medium Orchid3 #A74AC7  
Medium Orchid4 #6A287E  
Purple #8E35EF  
Purple1 #893BFF  
Purple2 #7F38EC  
Purple3 #6C2DC7  
Purple4 #461B7E  
Dark Orchid4 #571B7E  
Dark Orchid #7D1B7E  
Dark Violet #842DCE  
Dark Orchid3 #8B31C7  
Dark Orchid2 #A23BEC  
Dark Orchid1 #B041FF  
Plum4 #7E587E  
Pale Violet Red #D16587  
Pale Violet Red1 #F778A1  
Pale Violet Red2 #E56E94  
Pale Violet Red3 #C25A7C  
Pale Violet Red4 #7E354D  
Plum #B93B8F  
Plum1 #F9B7FF  
Plum2 #E6A9EC  
Plum3 #C38EC7  
Thistle #D2B9D3  
Thistle3 #C6AEC7  
Lavendar Blush2 #EBDDE2  
Lavendar Blush3 #C8BBBE  
Thistle2 #E9CFEC  
Thistle1 #FCDFFF  
Lavendar #E3E4FA  
Lavendar Blush #FDEEF4  
Light Steel Blue1 #C6DEFF  
Light Blue #ADDFFF  
Light Blue1 #BDEDFF  
Light Cyan #E0FFFF  
Slate Grey1 #C2DFFF  
Slate Grey2 #B4CFEC  
Light Steel Blue2 #B7CEEC  
Turquoise1 #52F3FF  
Cyan #00FFFF  
Cyan1 #57FEFF  
Cyan2 #50EBEC  
Turquoise2 #4EE2EC  
Medium Turquoise #48CCCD  
Turquoise #43C6DB  
Dark Slate Grey1 #9AFEFF  
Dark Slate Grey2 #8EEBEC  
Dark Slate Grey3 #78C7C7  
Cyan3 #46C7C7  
Turquoise3 #43BFC7  
Cadet Blue3 #77BFC7  
Pale Turquoise3 #92C7C7  
Light Blue2 #AFDCEC  
Dark Turquoise #3B9C9C  
Cyan4 #307D7E  
Light Sea Green #3EA99F  
Light Sky Blue #82CAFA  
Light Sky Blue2 #A0CFEC  
Light Sky Blue3 #87AFC7  
Sky Blue #82CAFF  
Sky Blue2 #B0E2FF  
Light Sky Blue4 #566D7E  
Sky Blue #6698FF  
Light Slate Blue #736AFF  
Light Cyan2 #CFECEC  
Light Cyan3 #AFC7C7  
Light Cyan4 #717D7D  
Light Blue3 #95B9C7  
Light Blue4 #5E767E  
Pale Turquoise4 #5E7D7E  
Dark Sea Green4 #617C58  
Medium Aquamarine #348781  
Medium Sea Green #306754  
Sea Green #4E8975  
Dark Green #254117  
Sea Green4 #387C44  
Forest Green #4E9258  
Medium Forest Green #347235  
Spring Green4 #347C2C  
Dark Olive Green4 #667C26  
Chartreuse4 #437C17  
Green4 #347C17  
Medium Spring Green #348017  
Spring Green #4AA02C  
Lime Green #41A317  
Spring Green #4AA02C  
Dark Sea Green #8BB381  
Dark Sea Green3 #99C68E  
Green3 #4CC417  
Chartreuse3 #6CC417  
Yellow Green #52D017  
Spring Green3 #4CC552  
Sea Green3 #54C571  
Spring Green2 #57E964  
Spring Green1 #5EFB6E  
Sea Green2 #64E986  
Sea Green1 #6AFB92  
Dark Sea Green2 #B5EAAA  
Dark Sea Green1 #C3FDB8  
Green #00FF00  
Lawn Green #87F717  
Green1 #5FFB17  
Green2 #59E817  
Chartreuse2 #7FE817  
Chartreuse #8AFB17  
Green Yellow #B1FB17  
Dark Olive Green1 #CCFB5D  
Dark Olive Green2 #BCE954  
Dark Olive Green3 #A0C544  
Yellow #FFFF00  
Yellow1 #FFFC17  
Khaki1 #FFF380  
Khaki2 #EDE275  
Goldenrod #EDDA74  
Gold2 #EAC117  
Gold1 #FDD017  
Goldenrod1 #FBB917  
Goldenrod2 #E9AB17  
Gold #D4A017  
Gold3 #C7A317  
Goldenrod3 #C68E17  
Dark Goldenrod #AF7817  
Khaki #ADA96E  
Khaki3 #C9BE62  
Khaki4 #827839  
Dark Goldenrod1 #FBB117  
Dark Goldenrod2 #E8A317  
Dark Goldenrod3 #C58917  
Sienna1 #F87431  
Sienna2 #E66C2C  
Dark Orange #F88017  
Dark Orange1 #F87217  
Dark Orange2 #E56717  
Dark Orange3 #C35617  
Sienna3 #C35817  
Sienna #8A4117  
Sienna4 #7E3517  
Indian Red4 #7E2217  
Dark Orange3 #7E3117  
Salmon4 #7E3817  
Dark Goldenrod4 #7F5217  
Gold4 #806517  
Goldenrod4 #805817  
Light Salmon4 #7F462C  
Chocolate #C85A17  
Coral3 #C34A2C  
Coral2 #E55B3C  
Coral #F76541  
Dark Salmon #E18B6B  
Salmon1 #F88158  
Salmon2 #E67451  
Salmon3 #C36241  
Light Salmon3 #C47451  
Light Salmon2 #E78A61  
Light Salmon #F9966B  
Sandy Brown #EE9A4D  
Hot Pink #F660AB  
Hot Pink1 #F665AB  
Hot Pink2 #E45E9D  
Hot Pink3 #C25283  
Hot Pink4 #7D2252  
Light Coral #E77471  
Indian Red1 #F75D59  
Indian Red2 #E55451  
Indian Red3 #C24641  
Red #FF0000  
Red1 #F62217  
Red2 #E41B17  
Firebrick1 #F62817  
Firebrick2 #E42217  
Firebrick3 #C11B17  
Pink #FAAFBE  
Rosy Brown1 #FBBBB9  
Rosy Brown2 #E8ADAA  
Pink2 #E7A1B0  
Light Pink #FAAFBA  
Light Pink1 #F9A7B0  
Light Pink2 #E799A3  
Pink3 #C48793  
Rosy Brown3 #C5908E  
Rosy Brown #B38481  
Light Pink3 #C48189  
Rosy Brown4 #7F5A58  
Light Pink4 #7F4E52  
Pink4 #7F525D  
Lavendar Blush4 #817679  
Light Goldenrod4 #817339  
Lemon Chiffon4 #827B60  
Lemon Chiffon3 #C9C299  
Light Goldenrod3 #C8B560  
Light Golden2 #ECD672  
Light Goldenrod #ECD872  
Light Goldenrod1 #FFE87C  
Lemon Chiffon2 #ECE5B6  
Lemon Chiffon #FFF8C6  
Light Goldenrod Yellow #FAF8CC  
 
0 comentários
,
Assinar: Postagens