tutorial

segunda-feira, 17 de setembro de 2012

nuvem no cabeçalho

ya estando ahi buscamos este codigo </head>

cuando lo encuentres pega este codigo justo abajo de el

<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.js' type='text/javascript'/>

<div id='wrapper'>
<div id='content'>
<div id='cloud1'><img src='http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/nube2.png'/></div>
<div id='cloud2'><img src='http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/nube2.png'/></div>
<div id='cloud3'><img src='http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/nube3.png'/></div>
<div id='cloud4'><img src='http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/nube1.png'/></div>
</div>
</div>
<script type='text/javascript'>
$(document).ready(function() {
setTimeout("animation()",300);
});

function animation(){
cloud1();
cloud2();
cloud3();
cloud4();
}

function cloud1(){
$("#cloud1").animate({left:"+=80%"},50000).animate({left:"-0px"}, 0)
setTimeout("cloud1()",30000);
}
function cloud2(){
$("#cloud2").animate({left:"+=70%"},40000).animate({left:"-0px"}, 0)
setTimeout("cloud2()",20000);
}
function cloud3(){
$("#cloud3").animate({left:"+=70%"},60000).animate({left:"-0px"}, 0)
setTimeout("cloud3()",20000);
}
function cloud4(){
$("#cloud4").animate({left:"+=70%"},75000).animate({left:"-0px"}, 0)
setTimeout("cloud4()",75000);
}

</script>

asi quedaria:

Despues busca ]]></b:skin

y pega este codigo justo arriba de el

#cloud1{ position:absolute; top:10px; left: 0px; z-index:10; }
#cloud2{ position:absolute; top:200px; left: 0px; z-index:10; }
#cloud3{ position:absolute; top:320px; left: 0px; z-index:10; }
#cloud4{ position:absolute; top:150px; left: 0px; z-index:10; }

quedando asi:

Da vista Previa y guarda

Aqui algunas nubecitas de colores

http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/nuberosa2.png
http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/nuberosa.png
http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/nuberosa3.png

http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/nubeazul3.png
http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/nubeazul2.png
http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/nubeazul.png

http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/nube3.png
http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/nube2.png
http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/nube1.png

http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/nubemorado3.png
http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/nubemorado2.png
http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/nubemorado1.png

http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/nubeblanca.png
http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/nubeblanc3.png
http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/nubeblac2.png

http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/nubeamarilla3.png
http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/nubeamarilla2.png
http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/nubeamarilla1.png

como notita dire que puedes hacer tu misma una imagen y ponersela ya sean corazoncitos o estrellitas

cabeçalho pelo html

Tutorial :
1) procure pela tag : .tabs-inner { precionando ctrl + f
2)logo abaixo de: padding: 0; colé o seguinte.

background: url(endereço da imagem aqui) no-repeat;
background-position:center;
padding-top: 340px;

Entendendo:
background: url(endereço da imagem aqui) no-repeat; (Coloque o endereço da imagem do cabeçalho)
background-position:center; (para que a imagem fique completamente centralizada.)
padding-top: 340px; (para que a imagem apareça completamente no cabeçalho, autere o valor, e vá visualizando e quanfo ficar legal salve.)

sábado, 15 de setembro de 2012

Imagens ao lado dos links

Vá em design >> Editar HTML e marque a opção "Expandir modelos de widgets"...

Título do Post

Pressione Ctrl + F do seu teclado e procure por:

data:post.link'><data:post.title/></a>

logo abaixo desse tem: <b:else/>

então do lado dele você vai colocar o código abaixo:

<img src='URL DA SUA IMAGEM' style='vertical-align: middle;'/>

Substitua a url da imagem e pronto.

Marcadores

Pressione CTRL + F e procure por:

<b:if cond='data:post.labels'>

ao lado direito dele cole o código abaixo:

<img src='URL DA SUA IMAGEM' style='border:0px;'/>

Substitua a url da imagem e pronto.

Postado Por

Pressione Ctrl + F e procure por:

<b:if cond='data:top.showAuthor'>

ao lado direito dele cole o código abaixo:

<img src='URL DA SUA IMAGEM' style='border:0px;'/>

Substitua a url da imagem e pronto.

Comentários

Pressione Ctrl + F e procure por:

post-comment-link'>

Em baixo dele cole o seguinte código:

<img src='URL DA SUA IMAGEM' style='border:0px;'/>

Substitua a url da imagem e pronto.

Lembrando gente que o legal é colocar um mini gif então fica a dica de alguns blogs legais para isso:

quarta-feira, 12 de setembro de 2012

2 backgrounds

1°) Vá em modelo > Editar HTML.
2°) Aperte Ctrl+F e procure por body { Você irá encontrar um código assim:

body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
}

3°) Apague tudo e coloque no lugar este código:

body, html {
height: 300px;
margin: 0;
padding: 0; }

body {
font: $(body.font);
color: $(body.text.color);
background: url("URL do 1º background") repeat; }

html {
background: url("URL do 2º background") repeat; }

Altere o número em vermelho (300) pela altura em pixels do primeiro background. Depois é só substituir as urls das duas imagens nos locais indicados.
Gostaram? Esperem que ainda não acabou! Fiz três conjutos de backgrounds para vocês usarem nesse tuto. Peguem a vontade, mas quando usarem dediquem um espacinho do seu blog para por os créditos ao cherry bomb. ;)

Conjunto 1

Conjunto 2

Conjunto 3

terça-feira, 11 de setembro de 2012

IMAGENS DOS POSTS EM FADE

Tutorial.

1. No Blogger, vá em Design> Editar HTML.
2. Tecle Ctrl F e procure por:

]]></b:skin>

3. Antes dessa tag, cole o código abaixo:

.main img {
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;
-webkit-transition-duration: .70s;
}
.main img:hover {
filter:alpha(opacity=45);
-moz-opacity:0.45;
opacity:0.45;
-webkit-transition-duration: .70s;
}

4. Salve.

Se quiser uma transição mais lenta ou mais rápida, edite o valor em negrito.

TODAS AS IMAGENS DO BLOG DO MESMO TAMANHO

1. Vá em Editar HTML >> Prosseguir:
2. Utilizando o Ctrl +F ou F3, procure por:

]]></b:skin>

Acima do código encontrado, cole:

.post img { max-width: 400px; height: auto;

3. Altere o 400px, pelo número que preferir.

sidebar

O tutorial é bastante simples, basta colar o código do estilo que mais lhe agrade, acima da tag:

]]></b:skin>

No seu HTML (Modelo > Editar HTML > Prosseguir) . Você pode apertar CTRL+F para buscar.

Escolha o seu estilo abaixo:

.sidebar h2{
text-align:center;
background: #DDA0DD;
padding: 5px;
font-size: 18px;
color: #fff;
width: 180px; /* Altere de acordo com a largura da sua coluna*/
height: 25px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-transition: 0.5s;
text-shadow: 1px 1px 0 #ccc;
}
.sidebar h2:hover{
text-align: center;
background: #DA70D6;
padding: 5px;
font-size: 18px;
color: #fff;
width: 180px; /* Altere de acordo com a largura da sua coluna*/
height: 25px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-transition: 0.5s;
text-shadow: 1px 1px 0 #ccc;
}

.sidebar h2{
text-align:center;
border-bottom: dashed 1px #ec92c6;
font-size: 18px;
color: #000;
width: 180px; /* Altere de acordo com a largura da sua coluna*/
height: 10px;
text-shadow: 1px 1px 0 #ccc;
}

.sidebar h2 {
text-align: center;
background:#8DEEEE;
padding: 8px;
font-size: 18px;
color:#528B8B;
border: outset #79CDCD;
width: 180px; /* Altere de acordo com a largura da sua coluna*/
height: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}

BY:http://girlson-line.blogspot.com.br

.sidebar h2 {
background: #E6E6FA;
color: #9370DB;
border-bottom: 2px solid #9370DB;
font-weight: normal;
text-align: center;
font-family: tahoma;
-webkit-border-radius: 10px;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius: 10px;
-moz-border-radius-bottomleft: 0;
border-radius: 10px;
border-bottom-left-radius: 0;
}

Para mudar a cor do fundo aprenda, está assim (exemplo:)

Background: #E6E6FA

A cor do fundo é o #E6E6FA (exemplo) para mudar a cor, você precisa ir na tabela de cores e ver a cor que quer.

Depois, mude tudo:

.sidebar h2 {

background: (a cor do fundo)

font-family: (a fonte, exemplos: Comic Sans MS ou etc..);

color: (cor da letra);

font-size: (tamanho da letra);

font-weight: (negrito, itálico, ou, até mesmo normal,rs!);

text-transform: uppercase;

border-bottom: 1px solid (<esperssura da borda) #F0F8FF(<cor da borda);

text-align: center;

text-shadow:#fff (cor da sombra) 0px 0px 1px < larguras da sombra);

border-radius: 10px;

}

BY:http://portblogcute.blogspot.com.br

.sidebar h2{

text-align:center;

border-bottom: dashed 1px #ec92c6;

font-size: 18px;

color: #000;

width: 180px; /* Altere de acordo com a largura da sua coluna*/

height: 10px;

text-shadow: 1px 1px 0 #ccc;

}

.sidebar h2 {

text-align: center;

background:#8DEEEE;

padding: 8px;

font-size: 18px;

color:#528B8B;

border: outset #79CDCD;

width: 180px; /* Altere de acordo com a largura da sua coluna*/

height: 20px;

-webkit-border-radius: 20px;

-moz-border-radius: 20px;

border-radius: 20px;

}

Título do Gadget

.sidebar h2 {
text-align: center;
background-color: #FF69B4; ---/*cor de fundo */
width: 200px;
height: 15px;
color: #F5F5DC; ---/* cor da fonte do título */
font-family: impact; ---/* fonte do título */
font-size:16px; ---/* tamanho da fonte */
text-shadow:0 1px 1px #FFFF00;
-moz-border-radius: 10px; /* Para Firefox */-webkit-border-radius: 10px; /*Para Safari e Chrome */border-radius: 10px; /* Para Opera 10.5+*/}

Título do Gadget

.sidebar h2 {
text-align: center;
background-color: #8B8B83; ---/*cor de fundo */
width: 200px;
height: 15px;
color: #FFF5EE; ---/* cor da fonte do título */
font-family: impact; ---/* fonte do título */
font-size:16px; ---/* tamanho da fonte */
text-shadow:0 4px 4px #000000;
-moz-border-radius-bottomright: 10px;-moz-border-radius-topright: 10px;-webkit-border-bottom-left-radius: 10px;-webkit-border-top-right-radius: 10px;

Título do Gadget

.sidebar h2 {
text-align: center;
background-color: #7FFF00; ---/*cor de fundo */
border-left: 7px solid #FF1493;
width: 200px;
height: 15px;
color:#FFFFFF; ---/* cor da fonte do título */
font-family: impact; ---/* fonte do título */
font-size:16px; ---/* tamanho da fonte */
text-shadow:0 1px 1px #FFFFFF;

Título do Gadget

.sidebar h2 {
text-align: center;
background-color: #DEB887 ; ---/*cor de fundo */
border-left: 1px dashed #8B4513;
width: 200px;
height: 15px;
color:#b03060; ---/* cor da fonte do título */
font-family: impact; ---/* fonte do título */
font-size:16px; ---/* tamanho da fonte */
text-shadow:0 1px 1px #FFFFFF;

BY:http://fashionscream.blogspot.com.br

siderbar

TÍTULO DO GADGET

.sidebar h2 {
background-color: #f9f9f9; ---/* cor do fundo */
border-radius: 20px;
border: 1px dotted #ccc; ---/* expressura, tipo e cor da borda */
color: #33cccc; ---/* cor da fonte do título */
font-size: 12px; ---/* tamanho da fonte do título */
font-weight: bold;
padding: 10px; ---/* margem interna */
text-align: center; ---/* alinhamento do título */
text-transform: uppercase;
}

título do gadget

.sidebar h2 {
-moz-border-radius-bottomright: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
color: #ffffff; ---/* cor da fonte do título */
background-color: #33cccc; ---/* cor do fundo */
font-size: 14px; ---/* tamanho da fonte do título */
font-family: georgia; ---/* fonte do título */
font-style: italic;
padding: 5px; ---/* margem interna */
text-align: center; ---/* alinhamento do título */
text-transform: lowercase;
}

Título do Gadget

.sidebar h2 {
background-color: #000; ---/* cor do fundo */
border-radius: 30px;
border: 2px solid #ccc; ---/* espressura, tipo e cor da bora */
color: #fff; ---/* cor da fonte do título */
font-family: georgia; ---/* fonte do título */
font-size: 15px; ---/* tamanho da fonte do título */
font-style: italic;
padding-bottom: 7px; ---/* margem interna de baixo */
padding-left: 7px; ---/* margem interna da esquerda */
padding-right: 20px; ---/* margem interna da direita */
padding-top: 7px; ---/* margem interna do topo */
text-align: right; ---/* alinhamento do título */
-webkit-transition:0.4s;
}

.sidebar h2:hover {
background: #ccc; ---/* cor do fundo ao passar o mouse */
color: #000; ---/* cor da fonte do título ao passar o mouse */
-webkit-transition: 0.4s;
}

estilos sidebar

ESTILO 1

<style>
/*Inicio título dos gadgets*/
.sidebar h2 {
font-family: Verdana;
font-size: 14px;
text-transform: uppercase;
font-weight: normal;
text-align: right;
color: #A71BDE; /*Cor da fonte*/
background: #EAE4ED; /*Cor do fundo*/
padding-right: 5px;
border-radius: 15px;
border-top: 3px solid #D1CBD4; /*Cor da borda de cima*/
border-right: 2px solid #D1CBD4; /*Cor da borda da direita*/
margin-bottom: 5px;
/* Estilos para titulo dos gadgets por www.bombadecereja.tk Não retire os créditos */ }
</style>

Estilo 2

<style>
/*Inicio Titulo dos gadgets*/
.sidebar h2 {
font-family: Georgia;
font-style: italic;
font-size: 14px;
font-weight: bold;
text-align: left;
color: #BAE0E8; /*Cor da fonte*/
border-left: 10px solid #FF78D6; /*Cor da barrinha lateral*/
padding-left: 5px;
margin-bottom: 5px;
/*Estilo para titulo dos gadgets por www.bombadecereja.tk Não retire os créditos*/}
</style>

Estilo 3

<style>
/*Inicio Titulo dos gadgets*/
.sidebar h2 {
font-family: Verdana;
font-size: 14px;
text-align: left;
color: #40250A; /*Cor da fonte*/
font-weight: normal;
background: #FFCCDF url('http://img194.imageshack.us/img194/4015/miniheart.png') no-repeat left top; /*Cor de fundo e imagem do topo*/
padding-left: 12px;
margin-bottom: 5px;
border-top: 3px solid #FA3497; /*Borda do topo*/
/*Estilo para titulo dos gadgets por www.bombadecereja.tk Não retire os créditos*/}
</style>

Estilo 4

<style>
/*Inicio Titulo dos gadgets*/
.sidebar h2 {
font-family: Georgia;
font-style: italic;
font-size: 14px;
font-weight: bold;
text-align: left;
color: #40250A; /*Cor da fonte*/
background: url('http://img194.imageshack.us/img194/4015/miniheart.png') no-repeat left top; /*imagem do topo*/
padding-left: 12px;
margin-bottom: 5px;
/*Estilo para titulo dos gadgets por www.bombadecereja.tk Não retire os créditos*/}
</style>

Esses vocês vão fazer de outra maneira, basta colar o código do estilo que mais lhe agrade, acima da tag:

]]></b:skin> no seu HTML (Modelo > Editar HTML > Prosseguir) . Você pode apertar CTRL+F para buscar.

Escolha o seu estilo abaixo:

.sidebar h2 {
text-align: center;
background:#8DEEEE;
padding: 8px;
font-size: 18px;
color:#528B8B;
border: outset #79CDCD;
width: 180px; /* Altere de acordo com a largura da sua coluna*/
height: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}

.sidebar h2{
text-align:center;
border-bottom: dashed 1px #ec92c6;
font-size: 18px;
color: #000;
width: 180px; /* Altere de acordo com a largura da sua coluna*/
height: 10px;
text-shadow: 1px 1px 0 #ccc;
}

.sidebar h2{

text-align:center;

background: #DDA0DD;

padding: 5px;

font-size: 18px;

color: #fff;

width: 180px; /* Altere de acordo com a largura da sua coluna*/

height: 25px;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

-webkit-transition: 0.5s;

text-shadow: 1px 1px 0 #ccc;

}

.sidebar h2:hover{

text-align: center;

background: #DA70D6;

padding: 5px;

font-size: 18px;

color: #fff;

width: 180px; /* Altere de acordo com a largura da sua coluna*/

height: 25px;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

-webkit-transition: 0.5s;

text-shadow: 1px 1px 0 #ccc;

}

.sidebar h2 {

background: #f5f5f5;

border-bottom: 3px double #40E0D0;

font-family: arial;

font-style: italic;

font-size: 10px;

font-weight: normal;

text-align: right;

text-shadow:#fff 0px 0px 1px;
}

.sidebar h2 {

background: #000;
font-family: arial;
color: #fff;
font-size: 10pt;
font-weight: normal;
text-transform: uppercase;
border-bottom: 1px solid #F0F8FF;
text-align: center;
text-shadow:#fff 0px 0px 1px;
border-radius: 10px;
}

.sidebar h2 {

background: #7AC5CD;

color: #fff;

font-weight: normal;

text-align: center;

font-family: century gothic;

-webkit-border-bottom-right-radius: 10px;

-webkit-border-bottom-left-radius: 10px;

-moz-border-radius-bottomright: 10px;

-moz-border-radius-bottomleft: 10px;

border-bottom-right-radius: 10px;

border-bottom-left-radius: 10px;

}

.sidebar h2 {

background: #E6E6FA;

color: #9370DB;

border-bottom: 2px solid #9370DB;

font-weight: normal;

text-align: center;

font-family: tahoma;

-webkit-border-radius: 10px;

-webkit-border-bottom-left-radius: 0;

-moz-border-radius: 10px;

-moz-border-radius-bottomleft: 0;

border-radius: 10px;

border-bottom-left-radius: 0;

}

.sidebar h2 {

background: #DDF7F7;

border-right: 3px solid #33CCCC;

color: #000;

font-family: tahoma;

font-weight: normal;

font-size: 11px;

text-align: right;

text-transform: lowercase;

padding-right: 2px;

}

Créditos ao Cherry Bomb