tutorial

sexta-feira, 27 de setembro de 2013

Arrendondar as bordas da imagem

O Tutorial de hoje é bem simples, mas que dá um toque a mais no blog.

Aprendi no blog Sem Normalidade

Vá em Design > Editar HTML > tecle CRTL + F e procure por:

.post-body {

Vai ter algo parecido com isso: (em alguns blogs podem ser diferentes)

.post-body {

line-height: 1.4;

position: relative;

}

Abaixo do } cole esse código:

.post img {

-moz-border-radius: 8px;

-webkit-boder-radius: 8px;

border-radius: 8px;

}

centralizar post

Primeiro vá em

Design > Editar HTML e procurar por:
.post-title {

E abaixo dessa tag, acrescente isso:
text-align: center;

sidebar

Título aqui

.sidebar h2 {
background: #0f0f0f;
-webkit-border-radius: 0px 40px 40px 0px;
padding: 5px 0px 0px 18px;
border-top: 5px solid #de576a;
height: 25px;
margin-bottom: 15px;
color: #fff;
}

Título aqui

.sidebar h2 {
background: #8470ff;
-webkit-border-radius: 40px 0px 40px 0px;
padding: 5px 0px 0px 18px;
border-top: 5px solid #de576a;
height: 25px;
margin-bottom: 15px;
color: #fff;
}

Título aqui

.sidebar h2 {
background: #00C5CD;
-webkit-border-radius: 40px;
padding: 5px 0px 0px 18px;
border-right: 5px solid #de576a;
height: 25px;
margin-bottom: 15px;
color: #fff;
}

Título aqui

.sidebar h2 {
background: #FFC0CB;
-webkit-border-radius: 40px;
padding: 5px 0px 0px 18px;
border-right: 5px solid #D02090;
border-left: 5px solid #D02090;
height: 25px;
margin-bottom: 15px;
color: #000;
}

<div class="faixatopsfs"> <a href="LINK" title="Ao passar o mouse">Nome</a> <a href="LINK" title="Ao passar o mouse">Nome</a> <a href="LINK" title="Ao passar o mouse">Nome</a> <a href="LINK" title="Ao passar o mouse">Nome</a> <a href="LINK" title="Ao passar o mouse">Nome</a> <a href="LINK" title="Ao passar o mouse">Nome</a> <a href="LINK" title="Ao passar o mouse">Nome</a></div>

Edite o que quiser.
se aparecer um aviso de que a tag <div> não pode ficar e blá blá blá,recorte e cole acima de <head>
Depois pesquise por

]]></b:skin>

e acima dela cole:

/*** Menu Faixa Tops Fs by Fernanda Summers do summerscomicsworld.blogspot.com não remova os créditos***/ .faixatopsfs{background-color:#COR DA FAIXA; text-align: center; font-family: Channel;font-size: 11px; padding: 2px; word-spacing: 7px; } .faixatopsfs a { color: #COR DA LETRA; text-align: center; text-decoration:none; -webkit-transition-duration: 1s;} .faixatopsfs a:hover { color: #COR DA LETRA AO PASSAR O MOUSE; background-color: #COR DA FAIXA AO PASSAR O MOUSE; padding: 2px; } /*** Menu Faixa Tops Fs by Fernanda Summers do summerscomicsworld.blogspot.com não remova os créditos***/

Espero que tenham gostado!

Titulos Postagem

Modelo 1:

Código:

.sidebar .widget {
border-right: 5px solid #8000FF;
border-left: 5px solid #8000FF;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 10px;
padding-bottom: 20px;
margin: 0px 0;
Background: #ffffff;
margin-top:41px;
padding:11px;
box-shadow: inset #8000FF 1px 2px 3px 1px #8000FF;
-webkit-transition-duration: .7s;
}
.sidebar .widget:hover {
border-right: 2px solid #8000FF;
border-left: 2px solid #8000FF;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 10px;
padding-bottom: 20px;
margin: 0px 0;
Background: #ffffff;
margin-top:41px;
padding:11px;
box-shadow: inset #8000FF 1px 2px 3px 1px #8000FF;
}

Modelo 2:

Código:

.sidebar .widget {
border-left: 2px dashed #FF80C0;
-webkit-border-radius: 0px;
border-radius: 0px;
padding-bottom: 20px;
margin: 0px 0;
Background: #ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHRnwkiEa8HNIGp7F12uNhB2WSKSdVKtm2Y6fV7dvLJaPrS1oDtHRohcUtoGeStqHIMmcffCHC9idX-BPQmz4CRXFQ30Yg_jUxuDuWlIlNZbtoa8Y_HvznsBDYm-u4GuAuTwd04JoD20mh/s1600/cora%C3%A7%C3%B5es.png)no-repeat bottom left;
margin-top:41px;
padding:11px;
}

Modelo 3:

Código:

.sidebar .widget {
border-bottom: 4px solid #FF80C0;
border-top: 10px solid #FF80C0;
-webkit-border-radius: 0px;
border-radius: 0px;
padding-bottom: 20px;
margin: 0px 0;
Background: #ffffff;
margin-top:41px;
padding:11px;
}

Modelo 4:

Código:

.sidebar .widget {
border-right: 4px double #FF80C0;
border-bottom: 4px solid #FF80C0;
box-shadow: 2px 4px 8px #000000;
-webkit-border-radius: 0px;
border-radius: 0px;
padding-bottom: 20px;
margin: 0px 0;
Background: #ffffff;
margin-top:41px;
padding:11px;
}

Modelo 5:

Código:

.sidebar .widget {
-webkit-border-radius: 0px;
border-radius: 0px;
outline: 3px dotted #ffffff;
padding-bottom: 20px;
margin: 0px 0;
Background: #ffffff;
margin-top:41px;
padding:11px;
}

Modelo 6:

Código:

.sidebar .widget {
-webkit-border-radius: 0px;
border-radius: 40px;
border: 3px groove #FF0080;
box-shadow: inset #FF0080 3px 2px 10px #FF0080;
padding-bottom: 20px;
margin: 0px 0;
Background: #ffffff;
padding:11px;
}

Modelo 7:

Código:

.sidebar .widget {
-webkit-border-radius: 0px;
border-radius: 40px 0px 0px;
border: 3px groove #FF0080;
box-shadow: inset #FF0080 3px 2px 10px #FF0080;
padding-bottom: 20px;
margin: 0px 0;
Background: #ffffff;
margin-top:41px;
padding:11px;
}

Modelo 8:

Código:

.sidebar .widget {
-webkit-border-radius: 0px;
border-radius: 60px 60px 0px 0px;
border: 3px groove #DCB9FF;
padding-bottom: 20px;
margin: 0px 0;
Background: #ffffff;
margin-top:41px;
padding:11px;
}

Modelo 9:

Código:

.sidebar .widget {
-webkit-border-radius: 0px;
border-bottom: 3px dashed #DCB9FF;
padding-bottom: 20px;
margin: 0px 0;
Background: #ffffff;
margin-top:41px;
padding:11px;
}
.sidebar h2 {
text-align:center;
background: #DCB9FF;
padding: 5px;
display:block;
box-shadow: inset 2px 2px 40px #B76FFF;
float:center;
margin-top:-38px;
}
.sidebar .widget:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}

Modelo 10:

Código:

.sidebar .widget {
-webkit-border-radius: 0px;
border-bottom: 5px solid #FF8080;
padding-bottom: 20px;
margin: 0px 0;
Background: #ffffff;
margin-top:41px;
padding:11px;
}
.sidebar h2 {
background:#FF8080 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-BonUJSOUSwyPgiHH-VQifyAoEV44vlxHgI4zNaEmIxkaXXg97igtFVSz_-o65NTOY9iiz5EdWO1Rvx8QuDb12D2jFN4A7iFUdPxzQJyzZjgsMBCvHC30cZP-P6OZXjrAp_4_U-X8ou4Q/s1600/s2.png)no-repeat left;
padding: 5px;
box-shadow: inset #FF2B95 2px 2px 2px #FF2B95;
padding-left: 0px;
-webkit-transition-duration: 3s;
}
.sidebar h2:hover {
background:#FF8080 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-BonUJSOUSwyPgiHH-VQifyAoEV44vlxHgI4zNaEmIxkaXXg97igtFVSz_-o65NTOY9iiz5EdWO1Rvx8QuDb12D2jFN4A7iFUdPxzQJyzZjgsMBCvHC30cZP-P6OZXjrAp_4_U-X8ou4Q/s1600/s2.png)no-repeat left;
border-radius: 0px;
padding-left: 50px;
}
.sidebar .widget:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}

terça-feira, 24 de setembro de 2013

quarta-feira, 18 de setembro de 2013

Post personalizados

O resultado do primeiro é esse aqui.

Adicione um HTML/JAVASCRIPT e cole o seguinte código.

Ps: recomendo que crie em baixo dos post, assim não ficará uma faixinha a mais na sua sidebar.

<style>

/** CANDY POSTS DIVIDIDOS INICIO **/

@font-face {font-family:'Salsa';font-weight:400;src:url('http://themes.googleusercontent.com/static/fonts/salsa/v3/A4KcPjUX7Ams2Jqasy0vzQ.woff') format('woff')}

.main-inner .column-center-outer {

background:transparent none !important;

_background-image: none;

}

/** post **/

.date-outer{

background:#fff;/* cor do bg */

margin-bottom:20px; /* espaço entre os posts */

padding:15px !important; /* espaço interno */

border-radius:0 0 15px 15px; /* arredondamento */

border-top:15px #fee solid; /* borda no topo */

}

.date-outer img{max-width:99% !important} /* a imagem do post nunca vai "pular" rs */

/** data do post **/

.date-header{

width:35px;/** largura **/

height:50px;/** altura **/

overflow:hidden;

margin-bottom:-80px;/** desce **/

margin-left:-50px;/** margin pra esquerda **/

text-align:center;/** alinha o texto **/

padding:10px 5px;/** espaço interno **/

background:url(http://3.bp.blogspot.com/-XkS0xqFlrwQ/T6nO1NlqBYI/AAAAAAAAgVM/nsGRyRqpiGY/s1600/data.png)no-repeat; /** bg **/

font:normal 10px verdana !important;

color:#fff !important;/** cor da fonte **/

font-weight:400;/** afina a fonte **/

}

/** título do post **/

h3.post-title a, h3.post-title{

font: normal 25px Salsa; /** font **/

color: #f9b !important; /** cor **/

text-shadow:0 1px #eee; /** sombra **/

margin-left:5px !important;/** margin do titulo em relação a data **/

}

/** CANDY POSTS DIVIDIDOS FIM by Candylland [www.candylland.net] **/

</style>

<style>

/** CANDY POSTS DIVIDIDOS INICIO **/

@font-face {font-family:'Salsa';font-weight:400;src:url('http://themes.googleusercontent.com/static/fonts/salsa/v3/A4KcPjUX7Ams2Jqasy0vzQ.woff') format('woff')}

.main-inner .column-center-outer {

background:transparent none !important;

_background-image: none;

}

/** post **/

.date-outer{

background:#fff;/* cor do bg */

margin-bottom:20px; /* espaço entre os posts */

padding:15px !important; /* espaço interno */

border-radius:0 0 15px 15px; /* arredondamento */

border-top:15px #87cecc solid; /* borda no topo */

}

.date-outer img{max-width:99% !important} /* a imagem do post nunca vai "pular" rs */

/** data do post **/

.date-header{

width:35px;/** largura **/

height:50px;/** altura **/

overflow:hidden;

margin-bottom:-80px;/** desce **/

margin-left:-50px;/** margin pra esquerda **/

text-align:center;/** alinha o texto **/

padding:10px 5px;/** espaço interno **/

background:url(http://4.bp.blogspot.com/-WIQd_0_T2JM/T6nTFERaHXI/AAAAAAAAgVY/yhEw6DwFfm0/s1600/data.png)no-repeat; /** bg **/

font:normal 10px verdana !important;

color:#fff !important;/** cor da fonte **/

font-weight:400;/** afina a fonte **/

}

/** título do post **/

h3.post-title a, h3.post-title{

font: normal 25px Salsa; /** font **/

color: #87cecc !important; /** cor **/

text-shadow:0 1px #eee; /** sombra **/

margin-left:5px !important;/** margin do titulo em relação a data **/

}

/** CANDY POSTS DIVIDIDOS FIM by Candylland [www.candylland.net] **/

</style>

<style>

/** CANDY POSTS DIVIDIDOS INICIO **/

@font-face {font-family:'Salsa';font-weight:400;src:url('http://themes.googleusercontent.com/static/fonts/salsa/v3/A4KcPjUX7Ams2Jqasy0vzQ.woff') format('woff')}

.main-inner .column-center-outer {

background:transparent none !important;

_background-image: none;

}

/** post **/

.date-outer{

background:#fff;/* cor do bg */

margin-bottom:20px; /* espaço entre os posts */

padding:15px !important; /* espaço interno */

border-radius:0 0 15px 15px; /* arredondamento */

border-top:15px #777 solid; /* borda no topo */

}

.date-outer img{max-width:99% !important} /* a imagem do post nunca vai "pular" rs */

/** data do post **/

.date-header{

width:35px;/** largura **/

height:50px;/** altura **/

overflow:hidden;

margin-bottom:-80px;/** desce **/

margin-left:-50px;/** margin pra esquerda **/

text-align:center;/** alinha o texto **/

padding:10px 5px;/** espaço interno **/

background:url(http://2.bp.blogspot.com/-BSk8dIX4Vow/T6nUfo1WRgI/AAAAAAAAgVg/v6pHaYUUPGA/s1600/data1.png)no-repeat; /** bg **/

font:normal 10px verdana !important;

color:#fff !important;/** cor da fonte **/

font-weight:400;/** afina a fonte **/

}

/** título do post **/

h3.post-title a, h3.post-title{

font: normal 25px Salsa; /** font **/

color: #999 !important; /** cor **/

text-shadow:0 1px #eee; /** sombra **/

margin-left:5px !important;/** margin do titulo em relação a data **/

}

/** CANDY POSTS DIVIDIDOS FIM by Candylland [www.candylland.net] **/

</style>

segunda-feira, 9 de setembro de 2013

espaço rodapé

O código só foi testado no modelo Travel.
1 - Vá em Design > Editar HTML > Ctrl + F e pesquise por :

.footer-inner {

Você deve ter achado algo parecido com isso :

background: transparent $(footer.background.gradient) repeat scroll top center;

2 - Substitua todo este trecho pelo seguinte código :

margin: -40px;

3 - Entendo esse código : O número 40 define o tamanho do espaço, quanto maior o número, mais o espaço é retirado. Quanto menor o número, mais o espaço é adicionado.

postagem cute

Aperte F3 e Procure por /* posts
Depois de ter achado, apague todo o código até /* comments -----------------
Cole este código abaixo de /* posts

h3.post-title {
margin-top: 20px;
}

h3.post-title a {
font-family: 'Verdana'; /* Fonte do título do post */
font-size: 26px; /* Tamanho da fonte */
color: #D2B48C; /* Cor da fonte do título do post */
}

h3.post-title a:hover {
color: #fff; /* Cor do título do post hover */
background-color: #D2B48C; /* Cor de fundo do título do post em hover */
text-decoration: ;
}

.main-inner .column-center-outer {
border-top: solid 6px #D2B48C; /* Borda do topo da área do post */
border-bottom: solid 6px #D2B48C; /* Borda do footer da área da postagem */
-webkit-border-bottom-left-radius: 0px; /* Bordas arredondadas */
-moz-border-radius-bottomleft: 0px; /* Bordas arredondadas */
border-bottom-left-radius: 0px; /* Bordas arredondadas */
background: #ffffff none repeat scroll top left;
_background-image: none;
border-radius: 0px; /* Bordas arredondadas */
box-shadow: inset 0 0 20px #9C9C9C, 0 0 3px #EEE8CD; /* Sombra interna da área de postagem */
}
.post-body {
line-height: 1.4;
position: relative;
}

.post-header {
border-top: dotted 1px #d9d9d9; /* Linha abaixo do título do post */
margin: 0 0 1em;

line-height: 1.6;
}

.post-footer {
margin: .5em 0;
line-height: 1.6;
}

#blog-pager {
font-size: 140%;
}

Edite como quiser, visualize se gostou e salve!

segunda-feira, 22 de outubro de 2012

Post Resumidos

Vamos aprender a instalar o resumo automático no Blogger:
1) Faça login no Blogger, entre em “Modelo” do seu blog.

2) Clique em “Editar modelo” (está no final da página).
Caso não apareça essa opção, use o Blogger in Draft.

3) Marque a opção “Expandir modelos de widgets” e procure (Ctrl + f) por:

</head>

4) Cole o seguinte código ANTES do código encontrado:

<!-- Resumo automático -->
<script type='text/javascript'>
summary_noimg = 330;
summary_img = 300;
img_thumb_height = 100;
img_thumb_width = 100;
</script>

<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){ 
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<"); 
for(var i=0;i<s.length;i++){ 
if(s[i].indexOf(">")!=-1){ 
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); 
} 
} 
strx =  s.join(""); 
}
chop = (chop < strx.length-1) ? chop : strx.length-2; 
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; 
strx = strx.substring(0,chop-1); 
return strx+' [...]'; 
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<!-- Fim resumo automático -->

Configure o resumo:
summary_noimg = Número de caracteres do resumo caso não tenha imagem na postagem;
summary_img = Número de caracteres do resumo caso tenha imagem na postagem;
img_thumb_height = Altura da imagem em px;
img_thumb_width = Largura da imagem em px.

5) Agora procure por:

<data:post.body/>

6) Substitua o código encontrado por:

<!-- Resumo automático -->

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

<data:post.body/> 

<b:else/>

<p><b:if cond='data:blog.pageType != &quot;item&quot;'>

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb

(&quot;summary<data:post.id/>&quot;);</script>

<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Leia mais...</a>

</span></b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if></p>

</b:if>

<!-- Fim resumo automático -->

Leia mais... = Texto do link para continuar lendo a postagem. Pode ser editado.

7) Clique em "Visualizar". Se as postagens estão resumidas clique em “Salvar Modelo”.

quinta-feira, 27 de setembro de 2012

zoo nas imagens

1. Abra “Design” e clique em “Editar HTML”do seu blog e clique em "Expandir modelos de widgets".

2. Depois da um Ctrl+f e procure por:

]]></b:skin>

3. Cole em cima dessa tag esse codigo a baixo:

-----------------------------------------------------------------------------------

/*--Zoom-Imagens-- */
a:hover img {
transform: translate(0px, -4px);
-moz-transform: scale(1.1) translate(0px, -4px);
-webkit-transform: scale(1.1) translate(0px, -4px);
-ms-zoom: 1.1;
opacity: 1 !important;
-moz-opacity: 1 !important;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
transition: all 0.2s ease;
}

-----------------------------------------------------------------------------------

4º Clique em "Salvar modelo" e pronto!

sábado, 22 de setembro de 2012

comentarios 2

O codigo está pronto, vc só precisa copiar e colar no seu template acima da tag b:skin
E outra: tem tudo explicadinho em cada seletor pra vcs que quizerem editar ok?
DICA: clique em copiar no canto direito do código, irá abrir um pop-up com o codigo sem os numeros !

Estilo 1 (rosinha):

/**======================================================================
AREA GERAL DOS COMMENTS 
========================================================================**/

.comments{
width:99% !important; /* TAMANHO DA AREA DOS COMMENTS - se passar da coluna diminua */
margin:0 auto;
font-style:normal !important;
font-size:12px !important; /* TAMANHO DO TEXTO - se ficar pequeno, aumente os pixels */
font-family:verdana !important; /* FONT DO TEXTO - se preferir troque */
background:#fff url(http://3.bp.blogspot.com/-yZ-IF2a2ssk/TydQ9v08H9I/AAAAAAAAA6w/DYf0cwgfPxQ/s1600/humidor-pink.gif) /* IMAGEN DO FUNDO */
}


/**=======================================================================
HEADING DOS COMMENTS (1 comentario, 2 comentários...)
========================================================================**/

.comments h4{
width:98%;
padding:7px;
margin-bottom:10px;
background:#fee; /* COR DO FUNDO - se preferir troque */
color:#f9b; /* COR DO TEXTO - se preferir troque */
font-family:courier new !important;/* FONT-FAMILY - se preferir troque */
font-size:20px ; /* TAMANHO DO TEXTO - se preferir troque */
box-shadow:0 2px 3px #faa /* EFEITO SOMBRA */
}

/** ==================================================================
BLOCO DOS COMMENTS (engloba: botões, avatar, data, icone ...) 
====================================================================**/

.comments .comment-block {
position:static !important; /* MANTÉM O AVATAR NA FRENTE DO BLOCO - NÃO MUDE */
background:#fee !important; /* COR DO FUNDO */
padding:0.5em 1em;
border-radius:5px !important;
border:1px #fff solid !important;
box-shadow:inset 0 1px 3px #faa !important /* EFEITO FUNDO REBAIXADO*/
}

.comments .comments-content .comment {
padding:20px 10px !important;
margin-bottom:15px !important
}

/* estilos para o nome do autor do comentário */
.comments .comments-content .user a{
font-style:normal;
border:0;margin-left:10px;
color:#ff1499;
text-shadow:0 1px #ccc;
border-bottom:2px #fff dotted;
font-family:consolas;
background:none;
padding-left:0
}

/* estilo da data */
.comments .comments-content .datetime a{
background:none;
float:right;
font-size:9px;
color:#DF6699;
opacity:0.5
}

/* estilo do avatar */
.avatar-image-container {
min-width:60px; /* determina um minimo de largura */
min-height:60px; /* determina um minimo de altura */
border:5px #fee solid; /* borda */
border-radius:60px; /* arredondamento */
padding:0 !important;
box-shadow:0 0 3px #faa; /* sombra */
margin-left:6px !important;
margin-top:-1px !important;
background:#fff;
overflow:hidden /* hack para evitar serrilhado na imagem */
}

.avatar-image-container img {
opacity:0.7; /* opacidade */
margin:0;
display:block;
max-height:60px;
min-height:60px;
max-width:60px;
min-width:60px;
padding:0;
border-radius:60px; /* arredondamento */
overflow:hidden;
border:0 !important;
overflow:hidden /* hack para evitar serrilhado na imagem */
}



/** ==================================================================
TEXTO DO COMENTÁRIO 
====================================================================**/

.comments blockquote{
background:transparent !important;
border:0 !important;
font-style:normal !important;
font-size:12px !important;
font-family:courier new !important;
text-shadow:0 1px #fff !important;
padding-left:20px !important;
color:#777
}

/** ==================================================================
BOTÕES - RESPONDER, EXCLUIR
====================================================================**/

/* botao responder do segundo nível */
.comments .continue a {
float:right;
padding:2px 4px!important;
height:23px;line-height:23px !important;
margin-top:-45px !important;
text-shadow:0 0 none !important
}

/* botao responder do primeiro nível, mais estilos para o botao do segundo nível */
.comments .comment .comment-actions a,.comments .continue a {
font-size:11px !important;
color:#fff !important;
padding:3px 6px;
border:0 !important;
line-height:30px;
margin:5px;
margin-left:10px;
font-family:helvetica;
text-shadow: 0 1px 1px rgba(0,0,0,.3) !important;
border-radius: .5em;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
background: #f895c2;
background: -webkit-gradient(linear, left top, left bottom, from(#feb1d3), to(#f171ab))!important;
background: -moz-linear-gradient(top, #feb1d3, #f171ab)!important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3', endColorstr='#f171ab')!important
}

/* botao hover*/
.comments .comment .comment-actions a:hover,.comments .comments-content .user a:hover {
text-decoration:none !important;
padding:6px
}

/* botao excluir */
.comments .comment .item-control a{
background:#d8c3f3;
background: -webkit-gradient(linear, left top, left bottom, from(#f3e8f6), to(#d8c3f3)) !important;
background: -moz-linear-gradient(top,#f3e8f6,#d8c3f3) !important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3e8f6', endColorstr='#d8c3f3') !important
}

/* estilos para bloco de respostas */
.comments .comment-thread.inline-thread {
background-color:transparent !important
}

.comments .comments-content .comment-replies {
margin-top:1em;
margin-left:56px !important
}

.comments .continue {
border-top:0 !important
}

.comments .thread-toggle,.icon.blog-author {display:none !important}

/** ==================================================================
BONUS - estilos para formatação do texto dos comments
====================================================================**/

.comments .comments-content a{background:#fee url(http://lh3.ggpht.com/_NZJzdRm10Y0/TTSFb1rPnWI/AAAAAAAAAFM/1kbIuCoul8A/s800/th_minisetas.gif)no-repeat left;color:#DF6699;padding-left:15px;padding-right:3px;border:1px #fff dashed;font-weight:400}
.comments .comments-content em{background:#fee;font:normal 12px 'segoe script';color:#ff1490}
.comments .comments-content strong{background:#fff;font:normal 12px 'consolas';color:#000;display:block; border:1px #eee dashed}
.comments .comments-content b{font-weight:800;color:#DF6699;text-shadow:0 1px #ccc}


/** ==================================================================
Fim [by Gizaa// http://candylland.blogspot.com]
====================================================================**/

Estilo 2 (verdinho neutro)

/**======================================================================
AREA GERAL DOS COMMENTS 
========================================================================**/

.comments{
width:99% !important; /* TAMANHO DA AREA DOS COMMENTS - se passar da coluna diminua */
margin:0 auto;
font-style:normal !important;
font-size:12px !important; /* TAMANHO DO TEXTO - se ficar pequeno, aumente os pixels */
font-family:verdana !important; /* FONT DO TEXTO - se preferir troque */
background:#fff url(http://3.bp.blogspot.com/-r7k1UMxgyc8/TydQ-FIjOQI/AAAAAAAAA64/xH3qT6Wg_e0/s1600/light-tile.gif) /* IMAGEN DO FUNDO */
}


/**=======================================================================
HEADING DOS COMMENTS (1 comentario, 2 comentários...)
========================================================================**/

.comments h4{
width:98%;
padding:7px;
margin-bottom:10px;
background:rgb(222,222,210); /* COR DO FUNDO - se preferir troque */
color:#fff; /* COR DO TEXTO - se preferir troque */
font-family:segoe print !important;/* FONT-FAMILY - se preferir troque */
font-size:20px ; /* TAMANHO DO TEXTO - se preferir troque */
box-shadow:0 2px 3px #ccc /* EFEITO SOMBRA */
}

/** ==================================================================
BLOCO DOS COMMENTS (engloba: botões, avatar, data, icone ...) 
====================================================================**/

.comments .comment-block {
position:static !important; /* MANTÉM O AVATAR NA FRENTE DO BLOCO - NÃO MUDE */
background:#fff !important; /* COR DO FUNDO */
padding:0.5em 1em;
border-radius:5px !important;
box-shadow:inset 0 1px 3px #ccc !important /* EFEITO FUNDO REBAIXADO*/
}

.comments .comments-content .comment {
padding:20px 10px !important;
margin-bottom:15px !important
}

/* estilos para o nome do autor do comentário */
.comments .comments-content .user a{
font-style:normal;
border:0;margin-left:10px;
color:#777 !important;
text-shadow:0 1px #ccc;
font-family:segoe print;
background:none;
padding-left:0
}

/* estilo da data */
.comments .comments-content .datetime a{
background:none;
float:right;
font-size:9px;
color:#ddd;
}

/* estilo do avatar */
.avatar-image-container {
min-width:60px; /* determina um minimo de largura */
min-height:60px; /* determina um minimo de altura */
border:5px rgb(222,222,210) solid; /* borda */
border-radius:60px; /* arredondamento */
padding:0 !important;
box-shadow:0 0 3px #ccc; /* sombra */
margin-left:6px !important;
margin-top:-1px !important;
background:#fff;
overflow:hidden /* hack para evitar serrilhado na imagem */
}

.avatar-image-container img {
opacity:0.7; /* opacidade */
margin:0;
display:block;
max-height:60px;
min-height:60px;
max-width:60px;
min-width:60px;
padding:0;
border-radius:60px; /* arredondamento */
overflow:hidden;
border:0 !important;
overflow:hidden /* hack para evitar serrilhado na imagem */
}



/** ==================================================================
TEXTO DO COMENTÁRIO 
====================================================================**/

.comments blockquote{
background:transparent !important;
border:0 !important;
font-style:normal !important;
font-size:12px !important;
font-family:courier new !important;
text-shadow:0 1px #ddd !important;
padding-left:20px !important;
color:#777
}

/** ==================================================================
BOTÕES - RESPONDER, EXCLUIR
====================================================================**/

/* botao responder do segundo nível */
.comments .continue a {
float:right;
padding:2px 4px!important;
height:23px;line-height:23px !important;
margin-top:-45px !important;
text-shadow:0 0 none !important
}

/* botao responder do primeiro nível, mais estilos para o botao do segundo nível */
.comments .comment .comment-actions a,.comments .continue a {
font-size:11px !important;
color:#fff !important;
padding:3px 6px;
border:0 !important;
line-height:30px;
margin:5px;
margin-left:10px;
font-family:helvetica;
text-shadow: 0 1px 1px rgba(0,0,0,.3) !important;
border-radius: .5em;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
background: #f895c2;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(rgb(222,222,210)))!important;
background: -moz-linear-gradient(top, #eee, rgb(222,222,210))!important;
}

/* botao hover*/
.comments .comment .comment-actions a:hover,.comments .comments-content .user a:hover {
text-decoration:none !important;
padding:6px
}

/* botao excluir */
.comments .comment .item-control a{
background:#d8c3f3;
background: -webkit-gradient(linear, left top, left bottom, from(#aaa), to(#eee)) !important;
background: -moz-linear-gradient(top,#aaa,#eee) !important;
}

/* estilos para bloco de respostas */
.comments .comment-thread.inline-thread {
background-color:transparent !important
}

.comments .comments-content .comment-replies {
margin-top:1em;
margin-left:56px !important
}

.comments .continue {
border-top:0 !important
}

.comments .thread-toggle,.icon.blog-author {display:none !important}

/** ==================================================================
BONUS - estilos para formatação do texto dos comments
====================================================================**/

.comments .comments-content a{background:#fee url(http://lh3.ggpht.com/_NZJzdRm10Y0/TTSFb1rPnWI/AAAAAAAAAFM/1kbIuCoul8A/s800/th_minisetas.gif)no-repeat left;color:#DF6699;padding-left:15px;padding-right:3px;border:1px #fff dashed;font-weight:400}
.comments .comments-content em{background:#fee;font:normal 12px 'segoe script';color:#ff1490}
.comments .comments-content strong{background:#fff;font:normal 12px 'consolas';color:#000;display:block; border:1px #eee dashed}
.comments .comments-content b{font-weight:800;color:#DF6699;text-shadow:0 1px #ccc}


/** ==================================================================
Fim [by Gizaa// http://candylland.blogspot.com]
====================================================================**/

Estilo 3 (bordô luxo):

/**======================================================================
AREA GERAL DOS COMMENTS 
========================================================================**/

.comments{
width:99% !important; /* TAMANHO DA AREA DOS COMMENTS - se passar da coluna diminua */
margin:0 auto;
font-style:normal !important;
font-size:12px !important; /* TAMANHO DO TEXTO - se ficar pequeno, aumente os pixels */
font-family:verdana !important; /* FONT DO TEXTO - se preferir troque */
background:#fff url(http://1.bp.blogspot.com/-7XpmDqbqhHE/TydQ_dlpkXI/AAAAAAAAA7I/WpYaxNGD4gg/s1600/plum-thatch.gif) /* IMAGEN DO FUNDO */
}


/**=======================================================================
HEADING DOS COMMENTS (1 comentario, 2 comentários...)
========================================================================**/

.comments h4{
width:98%;
padding:7px;
margin-bottom:10px;
background:rgb(139,48,93); /* COR DO FUNDO - se preferir troque */
color:#fff; /* COR DO TEXTO - se preferir troque */
font-family:segoe print !important;/* FONT-FAMILY - se preferir troque */
font-size:20px ; /* TAMANHO DO TEXTO - se preferir troque */
box-shadow:0 2px 3px #333 /* EFEITO SOMBRA */
}

/** ==================================================================
BLOCO DOS COMMENTS (engloba: botões, avatar, data, icone ...) 
====================================================================**/

.comments .comment-block {
position:static !important; /* MANTÉM O AVATAR NA FRENTE DO BLOCO - NÃO MUDE */
background:rgb(139,48,93) !important; /* COR DO FUNDO */
padding:0.5em 1em;
border-radius:5px !important;
box-shadow:inset 0 1px 4px #333 !important /* EFEITO FUNDO REBAIXADO*/
}

.comments .comments-content .comment {
padding:20px 10px !important;
margin-bottom:15px !important
}

/* estilos para o nome do autor do comentário */
.comments .comments-content .user a{
font-style:normal;
border:0;margin-left:10px;
color:#fff !important;
text-shadow:0 1px #333;
font-family:segoe print;
background:none;
padding-left:0
}

/* estilo da data */
.comments .comments-content .datetime a{
background:none;
float:right;
font-size:9px;
color:#000;
}

/* estilo do avatar */
.avatar-image-container {
min-width:60px; /* determina um minimo de largura */
min-height:60px; /* determina um minimo de altura */
border:5px rgb(139,48,93) solid; /* borda */
border-radius:35px/10px; /* arredondamento */
padding:0 !important;
box-shadow:0 0 3px #333; /* sombra */
margin-left:6px !important;
margin-top:-1px !important;
background:rgb(139,48,93);
overflow:hidden /* hack para evitar serrilhado na imagem */
}

.avatar-image-container img {
opacity:0.8; /* opacidade */
margin:0;
display:block;
max-height:60px;
min-height:60px;
max-width:60px;
min-width:60px;
padding:0;
border-radius:35px/10px; /* arredondamento */
overflow:hidden;
border:0 !important;
overflow:hidden /* hack para evitar serrilhado na imagem */
}



/** ==================================================================
TEXTO DO COMENTÁRIO 
====================================================================**/

.comments blockquote{
background:transparent !important;
border:0 !important;
font-style:normal !important;
font-size:12px !important;
font-family:courier new !important;
text-shadow:0 0 !important;
padding-left:20px !important;
color:#fff
}

/** ==================================================================
BOTÕES - RESPONDER, EXCLUIR
====================================================================**/

/* botao responder do segundo nível */
.comments .continue a {
float:right;
padding:2px 4px!important;
height:23px;line-height:23px !important;
margin-top:-45px !important;
text-shadow:0 0 none !important
}

/* botao responder do primeiro nível, mais estilos para o botao do segundo nível */
.comments .comment .comment-actions a,.comments .continue a {
font-size:11px !important;
color:#fff !important;
padding:3px 6px;
border:0 !important;
line-height:30px;
margin:5px;
margin-left:10px;
font-family:helvetica;
text-shadow: 0 1px 1px rgba(0,0,0,.3) !important;
border-radius: .5em;
box-shadow: 0 1px 2px #333;
background: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#999), to(#000))!important;
background: -moz-linear-gradient(top, #999, #000)!important;
}

/* botao hover*/
.comments .comment .comment-actions a:hover,.comments .comments-content .user a:hover {
text-decoration:none !important;
padding:6px
}

/* botao excluir */
.comments .comment .item-control a{
background:#999;
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#777)) !important;
background: -moz-linear-gradient(top,#000,#777) !important;
}

/* estilos para bloco de respostas */
.comments .comment-thread.inline-thread {
background-color:transparent !important
}

.comments .comments-content .comment-replies {
margin-top:1em;
margin-left:56px !important
}

.comments .continue {
border-top:0 !important
}

.comments .thread-toggle,.icon.blog-author {display:none !important}

/** ==================================================================
BONUS - estilos para formatação do texto dos comments
====================================================================**/

.comments .comments-content a{background:#fee url(http://lh3.ggpht.com/_NZJzdRm10Y0/TTSFb1rPnWI/AAAAAAAAAFM/1kbIuCoul8A/s800/th_minisetas.gif)no-repeat left;color:#DF6699;padding-left:15px;padding-right:3px;border:1px #fff dashed;font-weight:400}
.comments .comments-content em{background:#fee;font:normal 12px 'segoe script';color:#ff1490}
.comments .comments-content strong{background:#fff;font:normal 12px 'consolas';color:#000;display:block; border:1px #eee dashed}
.comments .comments-content b{font-weight:800;color:#DF6699;text-shadow:0 1px #ccc}


/** ==================================================================
Fim [by Gizaa// http://candylland.blogspot.com]
====================================================================**/

Estilo 3 (kawaii)

/**======================================================================
AREA GERAL DOS COMMENTS 
========================================================================**/
@font-face {font-family:'Fugaz One';font-style:normal;font-weight:400;src:local('Fugaz One'),local('FugazOne-Regular'), url('http://themes.googleusercontent.com/static/fonts/fugazone/v3/foh--NswBHNPbRHy7yEyyD8E0i7KZn-EPnyo3HZu7kw.woff') format('woff')}

.comments{
width:99% !important; /* TAMANHO DA AREA DOS COMMENTS - se passar da coluna diminua */
margin:0 auto;
font-style:normal !important;
font-size:12px !important; /* TAMANHO DO TEXTO - se ficar pequeno, aumente os pixels */
font-family:verdana !important; /* FONT DO TEXTO - se preferir troque */
background:#fff url(http://3.bp.blogspot.com/-KTD55xZPLr4/Tyd5MeQGd_I/AAAAAAAAA7w/h4lrLTr-HwA/s1600/7659611_keOzA.gif) /* IMAGEN DO FUNDO */
}


/**=======================================================================
HEADING DOS COMMENTS (1 comentario, 2 comentários...)
========================================================================**/

.comments h4{
width:98%;
padding:7px;
margin-bottom:10px;
background:#ffe; /* COR DO FUNDO - se preferir troque */
color:#f9b; /* COR DO TEXTO - se preferir troque */
font-family:'Fugaz One' !important;/* FONT-FAMILY - se preferir troque */
font-size:20px ; /* TAMANHO DO TEXTO - se preferir troque */
text-shadow:0 1px #fff;
box-shadow:0 2px 3px #ccc /* EFEITO SOMBRA */
}

/** ==================================================================
BLOCO DOS COMMENTS (engloba: botões, avatar, data, icone ...) 
====================================================================**/

.comments .comment-block {
position:static !important; /* MANTÉM O AVATAR NA FRENTE DO BLOCO - NÃO MUDE */
background:#fde !important; /* COR DO FUNDO */
padding:0.5em 1em;
border-radius:5px !important;
box-shadow:inset 0 1px 4px #aaa !important /* EFEITO FUNDO REBAIXADO*/
}

.comments .comments-content .comment {
padding:20px 10px !important;
margin-bottom:15px !important
}

/* estilos para o nome do autor do comentário */
.comments .comments-content .user a{
font-style:normal;
border:0;margin-left:10px;
color:#f7b !important;
text-shadow:0 1px #fff;
font-family:'Fugaz One';
background:none;
padding-left:0
}

/* estilo da data */
.comments .comments-content .datetime a{
background:none;
float:right;
font-size:9px;
color:#fff;
}

/* estilo do avatar */
.avatar-image-container {
min-width:60px; /* determina um minimo de largura */
min-height:60px; /* determina um minimo de altura */
border:5px #f7b solid; /* borda */
border-radius:35px/10px; /* arredondamento */
padding:0 !important;
box-shadow:0 0 3px #ccc; /* sombra */
margin-left:6px !important;
margin-top:-1px !important;
background:#fff;
overflow:hidden /* hack para evitar serrilhado na imagem */
}

.avatar-image-container img {
opacity:0.8; /* opacidade */
margin:0;
display:block;
max-height:60px;
min-height:60px;
max-width:60px;
min-width:60px;
padding:0 !important;
border-radius:35px/10px; /* arredondamento */
overflow:hidden;
border:0 !important;
overflow:hidden /* hack para evitar serrilhado na imagem */
}



/** ==================================================================
TEXTO DO COMENTÁRIO 
====================================================================**/

.comments blockquote{
background:transparent !important;
border:0 !important;
font-style:normal !important;
font-size:12px !important;
font-family:courier new !important;
text-shadow:0 0 !important;
padding-left:20px !important;
color:#777
}

/** ==================================================================
BOTÕES - RESPONDER, EXCLUIR
====================================================================**/

/* botao responder do segundo nível */
.comments .continue a {
float:right;
padding:2px 4px!important;
height:23px;line-height:23px !important;
margin-top:-45px !important;
text-shadow:0 0 none !important
}

/* botao responder do primeiro nível, mais estilos para o botao do segundo nível */
.comments .comment .comment-actions a,.comments .continue a {
font-size:11px !important;
color:#777 !important;
padding:3px 6px;
border:0 !important;
line-height:30px;
margin:5px;
margin-left:10px;
font-family:helvetica;
text-shadow: 0 1px #fff !important;
border-radius: .5em;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
background: #ffe;
background: -webkit-gradient(linear, left top, left bottom, from(#ffe), to(#ff1))!important;
background: -moz-linear-gradient(top, #ffe, #ff1)!important;
}

/* botao hover*/
.comments .comment .comment-actions a:hover,.comments .comments-content .user a:hover {
text-decoration:none !important;
padding:6px
}

/* botao excluir */
.comments .comment .item-control a{
color:#fff !important;
background:#f9e;
background: -webkit-gradient(linear, left top, left bottom, from(#f7a), to(#f9e)) !important;
background: -moz-linear-gradient(top,#f7a,#f9e) !important;
}

/* estilos para bloco de respostas */
.comments .comment-thread.inline-thread {
background-color:transparent !important
}

.comments .comments-content .comment-replies {
margin-top:1em;
margin-left:56px !important
}

.comments .continue {
border-top:0 !important
}

.comments .thread-toggle,.icon.blog-author {display:none !important}

/** ==================================================================
BONUS - estilos para formatação do texto dos comments
====================================================================**/

.comments .comments-content a{background:#fee url(http://lh3.ggpht.com/_NZJzdRm10Y0/TTSFb1rPnWI/AAAAAAAAAFM/1kbIuCoul8A/s800/th_minisetas.gif)no-repeat left;color:#DF6699;padding-left:15px;padding-right:3px;border:1px #fff dashed;font-weight:400}
.comments .comments-content em{background:#fee;font:normal 12px 'segoe script';color:#ff1490}
.comments .comments-content strong{background:#fff;font:normal 12px 'consolas';color:#000;display:block; border:1px #eee dashed}
.comments .comments-content b{font-weight:800;color:#DF6699;text-shadow:0 1px #ccc}


/** ==================================================================
Fim [by Gizaa// http://candylland.blogspot.com]
====================================================================**/

tutorial

sexta-feira, 27 de setembro de 2013

Arredondar imagem

Arrendondar as bordas da imagem

centralizar post

Barrinhas para sidebar

sidebar

Menu

Titulos Postagem

terça-feira, 24 de setembro de 2013

link-me

quarta-feira, 18 de setembro de 2013

Post personalizados

segunda-feira, 9 de setembro de 2013

espaço rodapé

postagem cute

segunda-feira, 22 de outubro de 2012

Post Resumidos

quinta-feira, 27 de setembro de 2012

zoo nas imagens

sábado, 22 de setembro de 2012

comentarios 2