Gif no título do post

Oi! Dreams, que eu amo tanto.

Vou ensinar a vocês, como colocar um gif ao lado do título da sua postagem, mais uma forma de decorar seu blog. Entenda...

Aqui no site Evelyns-place tem umonte de mini gifis para vocês.!!

Vá em Design → Editar HTML e marque a caixinha "Expandir modelo de windget"

Tecle CTRL+F ou F3 e procure por:

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

Quando você procurar, em baixo vai ter esse código aqui > <b:else/> , ao lado desse código código cole esse outro:

<img src=' URL DO GIF 'style='vertical-align: middle;'/>

Onde está em negrito, cole o link do seu gif, visualize e veja se está tudo certinho, então salve..

Gostou do tuto? Então comenta ^-^

Iamgem que gira ao passar o mouse

Olá meus amorecos, que dia feliz né?

Quando eu entra no blog, Cherry bomb, eu olhava os afiliados e percebia que quando eu passava o mouse em cima da imagem, ela girava, então eu achei super interessante, mas no blog não tinha o tutorial, então eu resolvi procurar, até que eu achei, então vou postar aqui, explicando com faz.

Vá em Design → Editar HTML e marque a caixinha "Expandir modelo de windget"

Tecle CTRL+F ou F3 e procure por:

body {

Quando achar, logo ao lado dele cole isso

.rotate{ -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; width:auto;-webkit-transition-duration: 1.20s;} .rotate:hover{-webkit-transform: rotate(360deg);} 

 Agora Add um Gadget, com esse codigo aqui:

 <img src="URL DA IMAGEM" class="rotate">

 Cole o link da imagem que você quer que rode e pronto.

Formas de bordas HTML

é nois :D

Vou ajudar vocês com algumas coisas em HTML, uma ajudinha básica mas que é bem vinda, para fazer modificar o seu HTML, de um jeito diferente do tutorial.

Vou mostra algumas coisas que agente geralmente gosta de mudar no HTML, que são as bordas, e a grossura das borda.

A espessura das bordas é definida pela propriedade border-width, que pode assumir os valores thin, medium, e thick (fina, média e grossa), ou um valor numérico em pixels.

 

Aqui são os tipos de bordas, que você modificar no seu HTML.

 Quando você for colocar borda em alguma coisa coloque tipo assim:

EX:  border-solid: 1px;

Agora você modificar a borda do seu blog, pode modificar aquela borda do tracejado, podem mudar tudo oque você quiser.

Como fazer seu própio cursor

Como prometido, vou ensinar a vocês, como fazer um cursor para seu blog.

Primeiro abra um programa de montagens que aceite fundo transparente, como (Photoshop, Photofiltre, Photoimpact).

Agora escolha um dessas setas para você colocar no cursor.

Aqui tem algumas para vocês.

Escolheu? Agora abra a seta que você quiser no seu programa de edições, eu vou usar o photofiltre

Agora escolha uma imagem, ou escreva as siglas do nome do seu blog, e coloque logo em baixo da seta como na imagem abaixo.

 Passo 1                                    Passo 2 

 Junte a imagem/Sigla a seta do seu cursor, retire o espaço e deixe só o cursor é a seta sem espaços, feito isso salve, agora hospede seu cursor em um site de hospedarem (Tinypic, photobucket, imgur)

Pegue o link da imagem e cole bem ali onde está escrito URL DO CURSOR.

 <style  type="text/css">body{cursor:url("LINK DO CURSOR"),default}</style>

Agora só aplicar no blog.

~ Aprendi no Blog The-Lovers.

Tag ~

Hoje o blgo ganhou uma tag do blog Perspective Teen

Uma tag diferente de todas as outras, eu adorei, muito obrigada por indicar o CD para repassar essa tag.

1 - Cantora Preferida

Miley Cyrus, Demi Lovato,

2 - O que mais gosto de fazer

Nada

3 - Comida:

Big Mac

4 - Um Livro:

O diario de Carl

5 - Uma Série:

ICarly.

Repassar para 5 blogs:

Bonequinha de Luxo

Be Teen

Teen Drem

Sundaes Dream

Pink Cookie

Cursores

Trouxe alguns cursores para vocês, mas tarde eu vou ensinar a como fazer o seu cursor próprio (só quando eu voltar da escola)

Cursores do site Cursores 4u

Primeiro, vou ensinar a como usar o cursor.

Vá em Design → Editar HTML → Add um Gadget, add esse seguinte gadget o HTML/JavaScript, e cole o codigo do seu cursor lá, salve e pronto.

 

Interface Antigas

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/others/oth-8/oth755.cur), progress;}</style><a href="http://www.cursors-4u.com/cursor/2012/01/02/cute-pink-kaoani.html" target="_blank" title="Cute Pink Kaoani"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Cute Pink" style="position:absolute; top: 0px; right: 0px;" /></a>

Interface Nova

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/others/oth-8/oth755.cur), progress;}</style><a href="http://www.cursors-4u.com/cursor/2012/01/02/cute-pink-kaoani.html" target="_blank" title="Cute Pink Kaoani"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Cute Pink " style="position:absolute; top: 0px; right: 0px;" /></a>

 Interface Antiga

 <style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/user/use-1/use175.ani), url(http://cur.cursors-4u.net/user/use-1/use175.png), progress;}</style><a href="http://www.cursors-4u.com/cursor/2011/02/06/blinking-domo.html" target="_blank" title="Blinking Domo"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Blinking Domo" style="position:absolute; top: 0px; right: 0px;" /></a>

 Interface Nova

 <style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/user/use-1/use175.ani) url(http://cur.cursors-4u.net/user/use-1/use175.png),, progress;}</style><a href="http://www.cursors-4u.com/cursor/2011/02/06/blinking-domo.html" target="_blank" title="Blinking Domo"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Blinking Domo" style="position:absolute; top: 0px; right: 0px;" /></a>

Interface Antiga

 <style type="text/css">body, a:hover {cursor: url(http://ani.cursors-4u.net/nature/nat-11/nat1034.ani), url(http://ani.cursors-4u.net/nature/nat-11/nat1034.gif), progress;}</style><a href="http://www.cursors-4u.com/cursor/2012/01/29/bobblehead-bunny.html" target="_blank" title="Bobblehead Bunny"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Bobblehead Bunny" style="position:absolute; top: 0px; right: 0px;" /></a>

 Interface Nova

 <style type="text/css">body, a:hover {cursor: url(http://ani.cursors-4u.net/nature/nat-11/nat1034.ani) url(http://ani.cursors-4u.net/nature/nat-11/nat1034.gif),, progress;}</style><a href="http://www.cursors-4u.com/cursor/2012/01/29/bobblehead-bunny.html" target="_blank" title="Bobblehead Bunny"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Bobblehead Bunny" style="position:absolute; top: 0px; right: 0px;" /></a>

 Interface Antiga

 <style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/others/oth-7/oth639.cur), progress;}</style><a href="http://www.cursors-4u.com/cursor/2011/11/07/black-moustache.html" target="_blank" title="Black Moustache"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Black Moustache" style="position:absolute; top: 0px; right: 0px;" /></a>

 Interface Nova

 <style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/others/oth-7/oth639.cur), progress;}</style><a href="http://www.cursors-4u.com/cursor/2011/11/07/black-moustache.html" target="_blank" title="Black Moustache"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Black Moustache" style="position:absolute; top: 0px; right: 0px;" /></a>

Pngs - Hatsune Miku

Trouxe alguns pngs, da anime Hatsune Miku, muita gente gosta dela né, ela é muito fofa.

Então Está aqui alguns pngs.

Comentários

Que isso novinho, que isso...

Agora os comentários, antes de ser publicado vão ser aprovados antes, isso é para eu ter certeza de que vi todos os comentários postados por vocês, e lembrando todos que comentam eu sempre procuro retribuir o comentário, eu visito o blog e leio a primeira postagem, e comento sobre a postagem.

Personalizando título dos gadget

- Oi Meu amores -

Vou mostrar uma nova maneira de personalizar o título dos gadget do seu blog, essa forma você pode deixa-la da maneira como você preferir, e sem falar que fica mais bonito.

Vá e Design → Editar HTML e marque a caixinha" expandir modelo de windget"

Tecle CTRL+F ou F3 e procure por:(Procure algo parecido com isso)

.footer-inner .widget h2,
.sidebar .widget h2 {
padding-bottom: .5em;

Quando achar, Cole esse outro código logo em baixo.

background: url(URL DA IMAGEM)no-repeat ;

Veja a largura da sua sidebar e faça uma imagem legal para coloca, onde está escrito URL DA IMAGEM você faz uma imagem do jeito que você desejar, hospede-a no (tinypic.imgur,photobucket) e cole o link da imagem ali.

Vizualise veja se está tudo certinho, então salve.

~ ~ Resultado ~ ~

Passatempo

Yoo ~.~

Saudades de vocês meus lindos , bom gente fiz um passa-tempo de qual você prefere para vocês

Ai vai amores :

                                                                    Qual vocês preferem ?

Personalizando título das postagens

Vou ensinar um outra forma de personalizar o título da postagem, eu mesma que criei o tutorial, espero que vocês gostem, alguns blogs de ajudaram com o HTML, que eu não sabia.
 Ele ficará desta forma:

Vá em Design → Editar HTML marque a caixinha "Expandir modelo de windget"
Tecle CTRL+F ou F3 e procure por:

 /* Posts

Quando achar, cole isso em baixo de h3.post-title {

text-align: center;
background-color: #F0F0F0; ---/*cor de fundo */
text-shadow:0 1px 1px #fff;
border-bottom: 3px solid #8FB8FF; ---/* cor da linha */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

 Visualize e veja se está tudo certinho, então Salve.

Mudado Background do blog em um clique

Hoje vou ensinar vocês, a deixar 3 background disponíveis no blog, caso o visitante queira mudar o background porque não gostou ou algo parecido.

Muito fácil e não precisa nem mecher no HTML.

Vá em Design → Add um gadget, e add o gadget HTML/JavaScript.

E logo lá cole esse seguinte código:

<style>
#estilo a img{
width:40px;
height:40px;
display:inline;
margin-right:10px;
margin-top:15px;
border: 2px solid #EEE;}
#estilo a:hover img{
border: 2px solid #bdebff;}
</style>
<div id="estilo">
<script src='http://code.jquery.com/jquery-1.6.2.min.js' type='text/javascript'></script>
<script>
$(document).ready(function(){
$("#bgcolor1").click(function(){
$("body").css({"background":"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBxaBM9JgoWactfez77PnPovo1Loo8YGFtBQrhHck6O4AbTF3acksHs8Y0AsXVW9yJ0Qhd9DS__wb5imLNf9oikqPMPkykfyzt-wN0Hq7OGp_Cuf_PE7Fd9Z8UTgQr-_Dpc-jVdbE6UGc/s1600/13.png)"});
});
});
$(document).ready(function(){
$("#bgcolor2").click(function(){
$("body").css({"background":"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja7Qlg1uldx3x4JPkSfmbDFQmLhZBtzBuPb8bAaf-HrbmzXRzo8xWeUgxPQM7EWcZw22VUJf_lB8kct3Af2_GY__deTOdQdlhx7ZFdWX8bxwsGy1Go13ZkKCY12ObJlS5J_PtFJiesI00/s1600/-+%2528460%2529.gif)"});
});
});
$(document).ready(function(){
$("#bgcolor3").click(function(){
$("body").css({"background":"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXsXgEJn7f_Uo-93rwWpme5vU-w7HTx28tYNnP3bv4O0RkWS7Uv72QpPuT9_0ijJXiIwun4qEGBFavM8ZFldWhc7hxLzBKbxvf5_hP_OjpxA4NQIxgVFPqtpD9aKqjzdYgm_euiV9kLiQ/s1600/FotoFlexer_Photo.jpg)"});
});
});
</script>
<center><a href="javascript:void(O)" id='bgcolor1' title="Normal"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBxaBM9JgoWactfez77PnPovo1Loo8YGFtBQrhHck6O4AbTF3acksHs8Y0AsXVW9yJ0Qhd9DS__wb5imLNf9oikqPMPkykfyzt-wN0Hq7OGp_Cuf_PE7Fd9Z8UTgQr-_Dpc-jVdbE6UGc/s1600/13.png" /></a>
<a href="javascript:void(O)" id='bgcolor2' title="Título Aqui"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja7Qlg1uldx3x4JPkSfmbDFQmLhZBtzBuPb8bAaf-HrbmzXRzo8xWeUgxPQM7EWcZw22VUJf_lB8kct3Af2_GY__deTOdQdlhx7ZFdWX8bxwsGy1Go13ZkKCY12ObJlS5J_PtFJiesI00/s1600/-+%2528460%2529.gif" /></a>
<a href="javascript:void(O)" id='bgcolor3' title="Título Aqui"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXsXgEJn7f_Uo-93rwWpme5vU-w7HTx28tYNnP3bv4O0RkWS7Uv72QpPuT9_0ijJXiIwun4qEGBFavM8ZFldWhc7hxLzBKbxvf5_hP_OjpxA4NQIxgVFPqtpD9aKqjzdYgm_euiV9kLiQ/s1600/FotoFlexer_Photo.jpg" /></a></center>
</div>

 Se for modificar os background, você tem que colocar os background em 2 lugares igual acontece com o URL azul,vermelho e amarelo, eles tem que se repetir.

Em itálico, é o título do background ao passar o mouse

Lilás é o estilo da borda sem passar o mouse;
Azul é o estilo da borda ao passar o mouse.

 

○ Créditos ao blog Placefame

Tutorial: Menu para sidebar

Me pediram na Cbox para ensinar como fazer essas paginas que tem aqui no blog.

Então vou ensinar ;).

Vá em Design → Editar HTML marque a caixinha "Expandir modelo de windget"

Tecle CTRL+F ou F3 e procure por:

]]>

Quando achar, cole esse link logo antes do codigo.

*menu por Liah - Cherry Bomb - credite sempre*/#menucb {
float: left;
display: line;
margin:1px;
background:#f2eee8; /*Cor de fundo */
width: 87px; /*Largura de cada link do menu */
height: 25px;
text-align:center;
font-size: 16px; /*Tamanho da fonte*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 1px 0px 9px #cccccc;
-webkit-box-shadow: 1px 0px 9px #cccccc;
box-shadow: 1px 0px 9px #cccccc;
text-shadow: 0px 1px 5px #cccccc;
-webkit-transition: color 0.7s ease-out;-moz-transition:
color 0.7s ease-out;transition: color 0.7s ease-out;
}
#menucb:hover {
background: #cfd9f6; /* Cor de funo quando passa o mouse*/
color: #fff; /*Cor do texto quando passa o mouse*/
}

Modifique as cores de acordo com o seu blog.

 Agora para aparecer no seu blog as paginas, vá em Design → Adicionar um gadget e add o HTML/JavaScript, cole esse codigo lá.

<a href='LINK' id='menucb'>TÍTULO DO LINK</a>

Cole o link da pagina, e o nome da pagina, e pronto ^-^.

Créditos ao blog Cherry Bomb

Png's Cute

Hoje eu trouxe alguns png cute, acho que bastante gente usa né, então aqui está.

Espero que vocês gostem ;)

Tutorial: Duas colunas com fundo diferente.

Oi! amores

Muita gente ainda tem duvidas de como colocar, duas barras laterais com fundo colorido lado a lado, então suas dúvidas acabaram hoje eu vou ensinar como fazer isso.

Vá em design → Design do modelo → Layout.

Escolha um modelo que tenha duas colunas.

Escolheu? agora clique em "aplicar ao blog"

Agora vá em Ajustar larguras e coloque a barra lateral em 400 (200px para cada coluna)

Agora vocês parecida da imagem de fundo como essa:

Hospede a imagem e pegue o link.

Agora vá em Design → Editar HTML marque a caixinha "Expandir modelo de windget"

Procure por:

        .main-inner .fauxcolumn-right-outer .fauxcolumn-inner {

Se a sua coluna for no lado esquerdo

Se ela for no lado direito procure por:

 .main-inner .fauxcolumn-left-outer .fauxcolumn-inner {

Vai aparecer algo mais ou menos assim:

 .main-inner .fauxcolumn-right-outer .fauxcolumn-inner {margin-right: $(content.padding);background:$(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;}

Substitua a parte em negrito por:

background: url("URL DA IMAGEM") repeat;

Agora cole o link da imagem que você hospedou.

Prontinho visualize veja se está tudo certinho, então salve.

Mais um Selinho

Aham-Aham o Capture Dream ganhou mais um selinho :)

Bom como eu e a Ruth falamos amamos ganhar selinho porque realmente sabemos que vocês sabem que o blog existe !

Amei o selinho !

As regras :

Falar quem repassou o blog que repassou foi : Garota Adocicada

E repassar para 8 blog's ( de preferencia ) Bom vou repassar pra 4

The Lovers

Meu mundo da moda

Garotas do NL

BE TEEN

Só beijoos !

Alguns Png's

Ain que lindo !

Oi oi gente ...

Bom fiz alguns Png's para vocês todos de moustaches

Ai vai :

Não reblogue ok ?

Apenas com permissão ... Ou uso próprio 

Beiijos meus dreams