Menu folhinha

Oiii !!!

Hoje eu estava dando uma passadinha no Bomba de Glitter (www) e vi o tutorial de um menu super fofo.

O Nome dele é o Menu de Folhinha (Já informei no título do post).

Olhem o resultado dele:

Essa imagem pertence á: WWW.

Então, vamos aprender ?!

Enjoy ~~

Vá no seu HTML --> F3 --> Procure por ]]></b:skin> --> Logo acima dele coloque o seguinte código:

/*---Início do Menu com Efeito by Bomba de Glitter---*/
bdg {
font-family: tahoma; /* Fonte do Menu */
width: 17%; /* Tamanho do Menu */
float: left;
background:#8EE5EE; /* Cor do fundo do Menu */
padding: 5px;
text-align: center;
margin: 2px;
-webkit-border-radius: 9px 0px 9px 0px; /* Pontinhas da Borda - não modifique se quiser o formato igual ao meu */
-webkit-transition-duration: .80s; /* Duração do Efeito - não modifique se quiser o efeito igual ao meu */
font-size: 08pt; /* Tamanho da fonte */
color: #fff; /* Cor da fonte */
}
bdg:hover {
font-family: tahoma; /* Fonte do Menu quando passa o mouse */
width: 17%; /* Tamanho do Menu quando passa o mouse */
float: left;
background:#FF69B4; /* Cor do fundo do Menu quando passa o mouse */
padding: 5px;
text-align: center;
margin: 2px;
-webkit-border-radius: 0px 9px 0px 9px; /* Pontinhas da Borda - não modifique se quiser o formato igual ao meu */
-webkit-transition-duration: .80s; /* Duração do Efeito - não modifique se quiser o efeito igual ao meu */
font-size: 08pt; /* Tamanho da fonte do Menu quando passa o mouse */
color: #fff; /* Cor da fonte do Menu quando passa o mouse */
}
/*---Fim do Menu com Efeito by Bomba de Glitter---*/

Depois de ter colado o código, modifique como quiser, todas instruções estão no código, por tanto não tire nenhuma parte do código, principalmente os que estão 'não modifique se quiser um efeito igual ao meu' não esqueçam que não fui eu que escrevi essa parte do código por tanto não fui eu que escrevi 'não modifique se quiser um efeito igual ao meu'. Se caso quiser que o menu fique maior aumente o width para 20% e altere o tamanho da letra. Para colocar na sidebar, coloque:

<a href="Link"><bdg>Nome</bdg></a>

 Depois é só salvar e testar!

Obs. Como eu já tinha informado o menu não nos pertence e sim ao Bomba de Glitter

Passo a Passo : Make simples !

Gente, hoje trago á vocês uma make mega simples, mais que não deixa de ser linda, você vai fazer essa make com seus dedos ! Tá vendo né ? o nível de dificuldade ? kakakakakaka ! Okay, vamos as pics, que elas ensinam trudoooo ! 

Primeiramente, prepara tua pele, pega o corretivo, bota nas olheiras, nas espinhas, põe pó, etc !
     2: Os produtos em creme ou mousse são realmente mais fáceis de se espalhar, mais se não tiver, usa o   qual tu tiver, que irá dar o mesmo resultado, aqui usaram sombra verde cintilante, em toda a  pálpebra.

1:Ilumine o cantinho interno do olho, e com o indicador faça o movimento de bate e espalha. 

2: Depois passe o blush, pode ser com sua mão, ou seus dedos, aí você escolhe !  

5 : Dê batidinhas com o dedo anelar, espalhando iluminador em pó logo a baixo do olho. O dedo mindinho ajuda a aplicar o produto no canto interno dos olhos, de levinho !

6 :  Hidrate os lábios antes de passar o batom. O truque: faça biquinho e bata levemente com o dedo sujo de produto para dar uma corzinha. Simples, espero que tenham gostado, X O X O 

 

tutorial- 3 modelos de Blockquote diferentes ;)

Oii!

Trouxe um tutorial bem legal hj é bem util espero que goste credito Things to help you

Vou mostra 3 tipos diferentes de personalizar seu blockquote, mas possui any modelos..

Blockquote 1- Ficará assim:

Cole isso antes de </style>:

blockquote{
background: #FFE4E1; /**cor do fundo**/
border-right: 3px solid #FF1493; /**cor do traço da direita**/
color: #FF1493; /** cor das palavras **/
font-family: tahoma; /**fonte**/
font-weight: normal;
font-size: 11px; /**tamanho das palavras**/
text-align: right;
padding: 3px;
}

Blockquote 2- Exemplo:

Cole isso antes de </style>:

blockquote {
background: #F0FFF0; /**cor do fundo**/
border: 1px solid #00FF00; /**cor da borda**/
color: #00FF00; /** cor das palavras **/
font-family: tahoma; /**fonte**/
font-weight: normal;
font-size: 11px; /**tamanho das palavras**/
text-align: right;
padding: 7px;
border-radius: 25px;
}

Blockquote 3- Ficará assim:

Cole isso antes de </style>:

blockquote {
background: #E6E6FA; /**cor do fundo**/
border-bottom: 3px solid #0000FF; /**cor da borda embaixo**/
color: #0000FF; /** cor das palavras **/
font-family: tahoma; /**fonte**/
font-weight: normal;
font-size: 11px; /**tamanho das palavras**/
text-align: right;
padding: 3px;
border-radius: 25px;
}

Espero que tenham gostado!<3

Kissus,

Aline 

Bom, é isso e desculpe se esqueci de explicar algo. Lembrando que os códigos não são meus porém credite pelo tuto

imagem hover diferente! :D

Oiiii

Trouxe um tutorial de imagem hover diferente, os creditos vao ao HTML my love, é lindo vc vão adoooorar e é super facil de fazer.

»> Visualize o efeito aqui «<

Comece colando esse código no seu css (antes de </style>):

a.nowandthen{position:relative;display: block;overflow:hidden;cursor: pointer;}

a.nowandthen img{position:absolute;-moz-transition: all 0.5s ease;-webkit-transition: all 0.5s ease;-o-transition: all 0.5s ease;-ms-transition: all 0.5s ease;transition: all 0.5s ease;z-index: 2;}
a.nowandthen img:nth-of-type(2){z-index: 1;}
a.nowandthen:hover img:nth-of-type(1){clip: rect(0,0,0px,0);opacity: 0;}
a.nowandthen.alt{width: LARGURA DA IMAGEMpx;height: ALTURA DA IMAGEMpx;}


a.nowandthen.alt img{clip: rect(0,LARGURA DA IMAGEMpx, ALTURA DA IMAGEMpx,0);}

;}
a.nowandthen.alt:hover img:nth-of-type(1){clip: rect(0,0, ALTURA DA IMAGEMpx,0
)

Entenda o código: onde está escrito LARGURA DA IMAGEM e ALTURA DA IMAGEM vc deve trocar pelo valores da sua imagem, cuidado para não apagar algo importante. As imagens devem ter o mesmo valor. Depois cole o seguinte código onde quer que apreça:

Código aqui 

Espero que tenham entendido ok! 

Kissus,

Aline

Efeito Fade

Oiii trouxe um tutorial muito legal para vcs se chama efeito Fade o credito vai para o Cherry Bomb! Já pediu alguma postagem dica ou perguntas não então vai no menu é clique o peça para pedir ou perguntar o que quizer viu! ;D. Veja o efeito aqui, é só passar o mouse em cima das imagens.

- Cole o seguinte código, acima de ]]></b:skin>

.fade{
-webkit-transition: 0s linear;
-webkit-transition: opacity 0.5s linear;
-webkit-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;
background-color: #eee; /* Cor da borda */
padding: 3px;
}
.fade:hover {
background-color: #87CEEB; /* Cor da borda hover */
padding: 3px;
}

E esse código onde você quer que apareça:

 <a href="LINK" title="NOME"><img class="fade" src="URL DA IMAGEM" /></a>

É isso aí c:

Gadgets Status

 */postagem programa/*

Hello hj vim trazer outro tuto de um gadget chamado"Stats" que mostra quantos visitantes estão no blog, quantos comentários já foram feitos e quantas postagens já foram publicadas. o credito vai para o blog Cherry Bomb. O resultado será parecido com esse:

Para instalar é só colocar um o código abaixo em um gadget de HTML/Javascript:

<style>
/*Gagdet Status por www.cherry-liah.blogspot.com*/
.stats {
border-bottom: 1px dotted #000;width: 180px;
}
</style>
<div class="stats"><img src="http://i45.tinypic.com/2cnz79i.jpg"/><script style="text/javascript">
function numberOfPosts(json) {
document.write('Posts: <i>' + json.feed.openSearch$totalResults.$t + '</i><br>');
}</script>
<script src="URL_SEU_BLOG/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script></div>
<div class="stats"><img src="http://i45.tinypic.com/17y71f.jpg"/><script style="text/javascript">function numberOfComments(json) {
document.write('Comentários: <i>' + json.feed.openSearch$totalResults.$t + '</i><br>');
}</script>
<script src="URL_SEU_BLOG/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></div>
<div class="stats"><img src="http://i46.tinypic.com/okwuaq.jpg"/><script language="JavaScript" type="text/javascript" src="http://www.usuariosonline.org/ver.php?domain=URL_SEU_BLOG" charset="ISO-8859-1"></script> usuários online</a>
</div>

O que você vai modificar é:

O que está desta cor é o estilo da borda entre uma linha e outra, você pode alterar ou deixar como está;
O que está desta cor é a imagem que aparece ao lado de cada item. Você pode substituir pela url da imagem que desejar, de preferência no tamanho 16x16 pixels. Você pode achar vários aqui;
E o que está dessa cor você vai substituir pelo link do seu blog com o http:// na frente. Por exemplo: <script src="http://princessofjeans.blogspot.com/feeds/(...)

Depois é só salvar o gadget. 

Kissus, 
Aline

Tutorial-Titulo de Postagem colorida

*/postagem programada\*

Hello hoje eu trouxe um tutorial do blog Poison HTML q é de como colocar o titulo da postagem colorido! não sei se vcs sabe mais é legal saber né! a postagem ta sendo programada não pq eu desisti do blog, nunca eu vo desistir amo ser blogueira, mas pq exatamente agr estarei na edc. Fisica e eu queria deixar alguma coisa para vcs ook!
Vamos a postagem:
Quando você for colocar o título do post, cole esse código:

<span style="color: #COR;">Palavra1</span> <span style="color:#COR;">Palavra2</span> <span style="color: #Cor;">Palavra
3</span>

Aonde está em negrito, você coloca a cor em códigos, claro. E onde está em itálico a palavra que você quer que fique com aquela cor. E assim vai indo, até todas as palavras ficarem coloridas.

É super fácil, fiz esse tutorial rápido . Espero que gostem c: 

Kissus,

Aline

Menu giratorio!

 Olá flowers

hj eu trago um tuto para vcs

Super fofo e diferente de muitos menus redondos que giram que a gente já viu por ai nos blogs da vida..

Vamos conferir o modelo?

Live Prewiew Aqui

Primeiramente vá até no modelo do blogger e em seguida em editar Html,

Depois dê Ctrl F e procure por:

]]></b:skin>

Depois que achar acima dele cole o seguinte código:

/*** Menu Onders by: Gustavo (escritordapaz) - CrazyHTML ***/

.menuonders {width:53px; height:52px; border-radius:50px 50px 50px 50px; background:#98F5FF; color:#FFF; border:5px solid #FF69B4; text-align:center; font-family:'Tahoma'; font-size:12px; float:left; -webkit-transition-duration:.99s;}

.menuonders:hover {background:#FF69B4; color:#FFF; border:5px solid #98F5FF; -webkit-transform:rotate(360deg); -webkit-transition-duration:.99s;}

Salve vá em layout e adicione o gadget html java script,

feito isso cole dentro o restante dos códigos:

<div class="menuonders"><br><a href="Link">Nome</a></div>

<div class="menuonders"><br><a href="Link">Nome/a></div>

<div class="menuonders"><br><a href="Link">Nome</a></div

Salve e veja o resultado, eu particularmente amo esse menu, eu achei em um tumblr de um menino,  o nome dele é Gustavo e o tumblr dele é o  Crazy HTML!

Lembrando que vocês podem mudar as cores das bordas, dos links,  do fundo do menu o tamanho das bordas, e o tamanho do menu aumentar ou diminuir, e lembrando se quiser mais link é só copiar quantas vezes você quiser a div dos links..

Beijos meus amores.. espero que tenham gostado desse tuto.. 

kissud *-*

Efeito Levite

Olá não postei muita coisa de manhã por que acordei Tarde hihi! Só avisando que essa postagem é programada e nesse horario estou na escola!

Bom como o nome do efeito já disse levite Vcs já devem imaginar vejam no link preview

| Live Preview | Aprenda logo abaixo |

Vá em modelo editar HTML e depois procure por: ]]></b:skin> usando o seu Ctrl+F

Depois cole acima dessa tag esse código:

.levite {
-moz-transition:all 1s ease;
-webkit-transition:all 1s ease;
-o-transition:all 1s ease;
-ms-transition:all 1s ease;
transition:all 1s ease;
transform: translate(-2px, -127px);
border:solid 2px #d6c7d6;
}
.levite:hover{
border:solid 2px #d6c7d6;
-moz-transform:scale(2);
-webkit-transform:scale(2);
-o-transform:scale(2);
-ms-transform:scale(2);
transform:scale(2);
z-index:2;
-moz-box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3);
box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3);
-webkit-transform: translate(-2px, -127px);
-moz-transform: translate(-2px, -127px);
-o-transform: translate(-2px, -127px);
-ms-transform: translate(-2px, -127px);
}

Não precisa mudar NADA apenas o que está em negrito que é a cor da borda mude se quiser ou pode tirar ela é do seu critério! 

Depois vá em adicionar Gadget e clique em HTML/JavaScript e cole o seguinte código:

<a href="LINK"><img src="Link DA IMAGEM" height="60px" width="60px" class="levite" /></a>

Mude se QUISER o que está em negrito para o tamanho da imagem por exemplo (150x150) e assim por diante! 

So avisando que agr a gente tem caixinha de ask então fassa seu pedido! qualquer coisa desde coisas da Vida até Tutoriais!

Bjo de Luz

Mini tutorial efeito preto e branco

Oii meus cupcakes de batata doce isso existe? ,hoje vou ensina-los a fazer um efeito que fica lindo que eu achei lá no Tumblr de HTML chamado Single Themes,então créditos totais a ele,Ok? ele é bem simples é ótimo para imagens para posts,a imagem fica normal, mas quando passa o mouse as cores vão mudando para preto e branco... veja o preview aqui,agora vamos deixar de enrolação e vamos ao tuto...

Primeiro procure por ]]></b:skin> e acima cole:

.pb {-webkit-transition-duration: .90s;}
.pb:hover {-webkit-transition-duration: .90s;-webkit-filter: grayscale(100%);}

e isso aonde for usar:

<img class="pb" src="LINK DA IMAGEM" />

Fácil,Né? espero que tenham gostad

bjo de luz