sexta-feira, 27 de setembro de 2013

Arredondar imagem

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;

Barrinhas para sidebar

 
 
 
  
 

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;
}

Menu


Muitos blogs utilizam aqueles menus no topo do blog.Resolvi trazer um.
Preview:

no editor procure por:

<head>

abaixo dela cole:

<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

link-me

<div align="center"><a href='http://www.dicasparablogs.com.br/' title='Dicas para Blogs'><img src="http://enderecodobanner.jpg" alt="Dicas para Blogs" width="150" height="70" /></a><div style="background-color:#FFF;border: solid 1px #000; overflow:auto; width:150px; height:70px;" onmouseover="this.select()">&lt;a href='http://www.dicasparablogs.com.br/' title='Dicas para Blogs'&gt;&lt;img src='http://enderecodobanner.jpg' alt='Dicas para Blogs' width=&quot;150&quot; height=&quot;70&quot;&gt;&lt;/a&gt;</div></div>

quarta-feira, 18 de setembro de 2013

Post personalizados


O resultado do primeiro é esse aqui.

 Candy Posts Separados  


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>

 Candy Posts Separados

<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>

 Candy Posts Separados

<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!