29 de fev de 2012

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:
EXborder-solid: 1px;

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

28 de fev de 2012

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>

27 de fev de 2012

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



26 de fev de 2012

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.

25 de fev de 2012

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(http://4.bp.blogspot.com/-DKk_k-6MLm4/T0LA2pZCgxI/AAAAAAAAHuE/OD2EX_c6b9o/s1600/13.png)"});
});
});
$(document).ready(function(){
$("#bgcolor2").click(function(){
$("body").css({"background":"url(http://2.bp.blogspot.com/-sbF9JfKATmk/T0LAzoYDH2I/AAAAAAAAHts/q07FWEQLJuU/s1600/-+%2528460%2529.gif)"});
});
});
$(document).ready(function(){
$("#bgcolor3").click(function(){
$("body").css({"background":"url(http://4.bp.blogspot.com/-3-dY09jeU9A/T0LA96M2JaI/AAAAAAAAHvE/XDFTtFuUF0w/s1600/FotoFlexer_Photo.jpg)"});
});
});
</script>
<center><a href="javascript:void(O)" id='bgcolor1' title="Normal"><img src="http://4.bp.blogspot.com/-DKk_k-6MLm4/T0LA2pZCgxI/AAAAAAAAHuE/OD2EX_c6b9o/s1600/13.png" /></a>
<a href="javascript:void(O)" id='bgcolor2' title="Título Aqui"><img src="http://2.bp.blogspot.com/-sbF9JfKATmk/T0LAzoYDH2I/AAAAAAAAHts/q07FWEQLJuU/s1600/-+%2528460%2529.gif" /></a>
<a href="javascript:void(O)" id='bgcolor3' title="Título Aqui"><img src="http://4.bp.blogspot.com/-3-dY09jeU9A/T0LA96M2JaI/AAAAAAAAHvE/XDFTtFuUF0w/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

24 de fev de 2012

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