Teste De Blouquote

Teste de Blouquete
Basouseira Basouseira Basouseira Basouseira Basouseira Basouseira Basouseira Basouseira Basouseira Basouseira Basouseira Basouseira Basouseira Basouseira Basouseira BasouseiraBasouseira Basouseira Basouseira Basouseira Basouseira Basouseira Basouseira BasouseiraBasouseira Basouseira Basouseira Basouseira Basouseira Basouseira Basouseira BasouseiraBasouseira Basouseira Basouseira Basouseira Basouseira Basouseira Basouseira BasouseiraBasouseira Basouseira Basouseira Basouseira Basouseira Basouseira Basouseira Basouseira

Leia Mais

Header Accio Materiais

Leia Mais

Menus Bombastic Design #2

MENU COME IN.

Live Preview.

Cole este código no seu CSS (antes de </style>) ARRUMANDO-O!

/** MENU COME IN - POR BOMBASTIC DESIGN **/

nav1 {
display: inline-block;
font-family: FONTE; 
font-size: TAMANHO_DA_LETRApx;
text-align: center; 
width: LARGURApx;
color: #COR_LETRA; 
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out; 
font-style: normal; 
background: #COR_FUNDO; 
padding:10px;
}

nav1:hover {
color: #COR_LETRA_HOVER;
-moz-box-shadow: inset 0 0 0px 25px #COR_FUNDO_HOVER;
-webkit-box-shadow: inset 0 0 5px 25px #COR_FUNDO_HOVER;
box-shadow: inset 0 0 0px 25px #COR_FUNDO_HOVER;
color: #LETRA_COR_HOVER;
}

Onde está (na parte hover) 25px pode ser que precise ser alterado. Se o seu menu for maior q o do preview (com largura 50px) o número precisará aumentar. Se o seu menu for menor, diminua o valor.

Agora cole isso onde deseja que o menu apareça:

<nav1>menu</nav1>

Lembre-se de colocar o link (<a href=”….) ou falso i-frame, depende de seu tumblr.

Se for links, assim ficará:

<a href="link_menu"><nav1>título_menu</a></nav1>

Se usar, credite!

Lembre-se do like, nos ajuda a saber o que vocês estão gostando ^^

(Pam)

Leia Mais

Menus Bombastic Design

MENU DROP DOWN FLIP.

• Live Preview.
• O código não foi feito por nós, somente adaptado e passado para o tutorial.
• Feito por Pamella.
• Dê like e credite, caso lhe seja útil.

Cole esse código no seu CSS.

/* NAVIGATION */
.navigation {
list-style: none;
padding: 0;
width: 250px;
height: 40px;
margin: 20px auto;
background: #COR_TITULO; /* onde está navigation no preview */
position: relative;
z-index: 100;
} .navigation, .navigation a.main { border-radius: 4px;
-webkit-border-radius: 4px; -moz-border-radius: 4px;
} .navigation:hover, .navigation:hover a.main { border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0;
} .navigation a.main {
display: block;
height: 40px;
font: bold 15px/40px FONTE, sans-serif;
text-align: center;
text-decoration: none;color: #COR_TITULO; /* onde está navigation no preview */
-webkit-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; position: relative;
z-index: 100;
} .navigation:hover a.main {
color: #COR_TITULO_HOVER;/* onde está navigation no preview */ background: #COR_FUNDO_HOVER;
/* onde está navigation no preview */
} .navigation li {
width: LARGURApx;
height: ALTURApx; background: #COR_FUNDO; font: normal 12px/40px FONTE, sans-serif !important;
color: #COR_LETRA; text-align: center;
margin: 0; -webkit-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;

-webkit-transform: perspective(350px) rotateX(-90deg);

-o-transform: perspective(350px) rotateX(-90deg);

transform: perspective(350px) rotateX(-90deg);

box-shadow: 0px 2px 10px rgba(0,0,0,0.05);

-webkit-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);

-moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
} .navigation li:nth-child(even) { background: #COR_FUNDO_1; } .navigation li:nth-child(odd) { background: #COR_FUNDO_2; } .navigation li.n1 {

-webkit-transition: 0.2s linear 0.8s;

-o-transition: 0.2s linear 0.8s;

transition: 0.2s linear 0.8s;
} .navigation li.n2 {
-webkit-transition: 0.2s linear 0.6s;

-o-transition: 0.2s linear 0.6s;

transition: 0.2s linear 0.6s;
} .navigation li.n3 {

-webkit-transition: 0.2s linear 0.4s;

-o-transition: 0.2s linear 0.4s;

transition: 0.2s linear 0.4s;
} .navigation li.n4 {
-webkit-transition:0.2s linear 0.2s;

-o-transition:0.2s linear 0.2s;
transition:0.2s linear 0.2s;
} .navigation li.n5 { border-radius: 0px 0px 4px 4px;

-webkit-transition: 0.2s linear 0s;

-o-transition: 0.2s linear 0s;

transition: 0.2s linear 0s;
} .navigation:hover li {

-webkit-transform: perspective(350px) rotateX(0deg);

-o-transform: perspective(350px) rotateX(0deg);

transform: perspective(350px) rotateX(0deg);

-webkit-transition:0.2s linear 0s; -o-transition:0.2s linear 0s;

transition:0.2s linear 0s;
} .navigation:hover .n2 {
-webkit-transition-delay: 0.2s;

-o-transition-delay: 0.2s;

transition-delay: 0.2s;
} .navigation:hover .n3 {
-webkit-transition-delay: 0.4s;

-o-transition-delay: 0.4s;

transition-delay: 0.4s;
} .navigation:hover .n4 {
transition-delay: 0.6s;

-o-transition-delay: 0.6s;

transition-delay: 0.6s;
} .navigation:hover .n5 {
-webkit-transition-delay: 0.8s;

-o-transition-delay: 0.8s;

transition-delay: 0.8s; }

Ajuste onde foi indicado.

Cole esse código onde quer que o menu apareça.

<ul class="navigation">
  
<a class="main" href="#url">Navigation</a>
  
<li class="n1"><a href="#">item #1</a></li>
 /* LEMBRE DE COLOCAR OS LINKS EM A HREF="LINK AQUI" */
<li class="n2"><a href="#">item #2</a></li>

<li class="n3"><a href="#">item #3</a></li>
 
<li class="n4"><a href="#">item #4</a></li>
 
<li class="n5"><a href="#">item #5</a></li>
</ul>

Créditos e likes são bem vindos.
Dúvidas? Passe em nossa askbox.

http://bombasticdesign.tumblr.com/post/78484963615

MENU FLIP.

• Live Preview.
• O código não foi feito por nós, somente adaptado e passado para o tutorial.
• Feito por Pamella.
• Dê like e credite, caso lhe seja útil.
  

Cole esse código no seu CSS,

@import url(http://weloveiconfonts.com/api/?family=entypo);

/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

@-webkit-keyframes flip {
  0%{-webkit-transform:rotateY(0deg);
  opacity:1;}
  100%{-webkit-transform:rotateY(95deg);
  opacity:0;}
}

@-moz-keyframes flip {
  0%{-webkit-transform:rotateY(0deg);
  opacity:1;}
  100%{-webkit-transform:rotateY(95deg);
  opacity:0;}
}

@-o-keyframes flip {
  0%{-webkit-transform:rotateY(0deg);
  opacity:1;}
  100%{-webkit-transform:rotateY(95deg);
  opacity:0;}
}

@keyframes flip {
  0%{-webkit-transform:rotateY(0deg);
  opacity:1;}
  100%{-webkit-transform:rotateY(95deg);
  opacity:0;}
}


ul {
  position:absolute;
  left:0;
  right:0;
  margin:50px auto;
  padding:0;
  
  width:200px;
  height:220px;
  list-style:none;
  -webkit-perspective:1000;
  -moz-perspective:1000;
  -o-perspective:1000;
  perspective:1000;
}

li {
  margin:2px 0;
  padding:0;
}

li a {
  display:block;
  height:18px;
  width:20px;
  background:#COR_MENU_FUNDO;
  color:#COR_LETRA;
  padding:8px 6px;
  text-decoration:none;
  text-align:center;
}
.menu {
  opacity:1;
  -webkit-transform:rotateY(0deg);
  -moz-transform:rotateY(0deg);
  -o-transform:rotateY(0deg);
  transform:rotateY(0deg);
  -webkit-transition:.3s;
  -moz-transition:.3s;
  -o-transition:.3s;
  transition:.3s;
}
li span {
  width:154px;
  float:left;
  text-align:center;
  background:#COR_MENU_FUNDO;
  color:#COR_LETRA;
  margin:-34px 34px;
  padding:8px 6px;
  transform-origin:0%;
  opacity:0;
  -webkit-transform:rotateY(95deg);
  -webkit-transition:.5s;
  -moz-transition:.5s;
  -o-transition:.5s;
  transition:.5s;
  -webkit-animation: flip 2s;
  -moz-animation: flip 2s;
  -o-animation: flip 2s;
  animation: flip 2s;
}

span[class='menu']{-webkit-animation:none;}
li:nth-child(2) span {
  -webkit-animation-delay:.5s;
  -moz-animation-delay:.5s;
  -o-animation-delay:.5s;
  animation-delay:.5s;}
li:nth-child(3) span {
  -webkit-animation-delay:.4s;
  -moz-animation-delay:.4s;
  -o-animation-delay:.4s;
  animation-delay:.4s;}
li:nth-child(4) span {
  -webkit-animation-delay:.3s;
  -moz-animation-delay:.3s;
  -o-animation-delay:.3s;
  animation-delay:.3s;}
li:nth-child(5) span {
  -webkit-animation-delay:.2s;
  -moz-animation-delay:.2s;
  -o-animation-delay:.2s;
  animation-delay:.2s;}
li:nth-child(6) span {
  -webkit-animation-delay:.1s;
  -moz-animation-delay:.1s;
  -o-animation-delay:.1s;
  animation-delay:.1s;}

li a:hover ~ span {
  opacity:1;
  -webkit-transform:rotateY(0deg);
  -moz-transform:rotateY(0deg);
  -o-transform:rotateY(0deg);
  transform:rotateY(0deg);
  -webkit-transition:.5s;
  -moz-transition:.5s;
  -o-transition:.5s;
  transition:.5s; 

} adapte as cores nas áreas indicadas. Sugiro que não se mexa em mais nada, porém fica a sua escolha. As cores são basicamente as das letras e do fundo do menu.

Agora cole esse código onde você quer que o menu apareça arrumando os links e seus respectivos títulos nas áreas indicadas.

 <ul>
        <li>
            <a class="entypo-menu" href="#"></a> <span class="menu">Menu</span>
        </li>

        <li>
            <a class="entypo-star" href="LINK_1"></a> <span>NOME_LINK_1</span>
        </li>

        <li>
            <a class="entypo-newspaper" href="LINK_2"></a> <span>NOME_LINK_2</span>
        </li>

        <li>
            <a class="entypo-location" href="LINK_3"></a> <span>NOME_LINK_3</span>
        </li>

        <li>
            <a class="entypo-link" href="LINK_4"></a> <span>NOME_LINK_4</span>
        </li>

        <li>
            <a class="entypo-help-circled" href="LINK_5"></a> <span>NOME_LINK_5</span>
        </li>
    </ul>

Pronto, está feito! Espero que gostem.

Deem like e credite, por favor.

Leia Mais

other

http://static.tumblr.com/rksp1t7/qEIn46fem/fjallaone-regular.otf

Wishlist 2.0

Vou ensinar vocês a fazerem, esse tipo de wishlist

DEMO

Primeiro cole isso no seu css (entre <style> e </style>):

/***Wishlit Simone(cerejadosundae)*/

menusm1 {background: #703A53; color: #ffffff; padding: 5px;  text-transform:uppercase; text-align: center;  display: inline-block;font-size:9px; font-family: consolas;; -webkit-transition-duration: .99s; }

menusm1:hover {opacity:0.8 }

.menusm2 {background: #d6d6d6;font-family: 'Play', sans-serif;  text-align:left;font-size: 11px;margin: 1px; color: #777;display: block; -webkit-transition-duration: .30s;}

.menusm2:hover {padding-left:5px;}

.menusm2 a{ color: #777;}

Costumize tudo o que achar necessário, lembrando que o menusm1 é a class da primeira parte da wishlist, aquela coloridinha, personalize do jeito que achar melhor.Depois cole isso, onde deseja que a wishlist apareça:

<div class="menusm2"><menusm1>Nome 1</menusm1> <a href="http://link">Nome 2</a></div>
<div class="menusm2"><menusm1>Nome 1</menusm1> <a href="http://link">Nome 2</a></div>
<div class="menusm2"><menusm1>Nome 1</menusm1> <a href="http://link">Nome 2</a></div>
<div class="menusm2"><menusm1>Nome 1</menusm1> <a href="http://link">Nome 2</a></div>
<div class="menusm2"><menusm1>Nome 1</menusm1> <a href="http://link">Nome 2</a></div>

Mude os nonmes e os links. Se for útil credite ao meu tumblr ou ao ilovethemes. (Simone -http://cerejadosundae.tumblr.com/)

Imagens hover

Vou ensinar para vocês como fazer aquelas imagens hover, que quando passa o mouse em cima ela muda, Visualize aqui

Primeiro cole esse código no seu css, antes de </style>

Código aqui, esse é o código das imagens, se quiseres mudar o tamanho terá, que mudar a margin-top do segundo código para a foto ficar certinha

Após colar esse código, cole esse outro onde deseja que as fotos apareçam

Código aqui

Substiua a url das fotos, eu não sei porque, mas nesse código que eu uso a primeiro foto é a segunda e a segunda é a primeira, então a foto que você colocar após imageside, será a que irá aparecer quando o mouse passar…

Espero que tenha sido útil, se usar dê like e credite ao meu tumblr {Simone}

Tutorial: Imagens em Slide/Passando. (Com ou sem link)

Sim, esse é o tutorial do slide que passa no meu theme :) Primeiramente eu quero que CREDITEM esse tutorial por que ninguém fez ele ainda, e eu demorei para achar, ok? Além de ser fácil, eu sei que muitos querem aprender e todo mundo tem direito claro, então eu estou aqui para ensinar para vocês. Façam bom proveito, e eu espero que entendam, por que é bem simples!
1. Cole isso no seu html, depois da tag <head>:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<style type="text/css">

#myslideshow{ /*sample CSS quinze for demo*/
border:TAMANHOBORDASEQUISERpx solid #COR BORDA SE QUISER;
}

</style>

2.0 Cole isso logo abaixo do código acima se você quer somente imagens, não imagens com links ( lembrando que todas as imagens devem ter as mesmas proporções E NÃO SE ESQUEÇA DE MUDAR O TAMANHO E A LARGURA ONDE ESTÁ EM NEGRITO):

 <script src="http://static.tumblr.com/ywlup7y/MWKlz5boa/slideshowbyquinze.js" type="text/javascript">

/***********************************************
* Translucent slideshow- (c) Dynamic Drive ( dynamicdrive.com/)
* Tutorial e códigos adaptados/hospedados por Sarah S ( quinzeparameianoite.tumblr.com )
* Não retire esses créditos.
***********************************************/

</script>

<script type="text/javascript">

var translideshow1=new translideshow({
    wrapperid: "myslideshow", //div do slideshow
    dimensions: [LARGURAIMAGEM, ALTURAIMAGEM], //tamanho não precisa por "px" somente o numero. Deve ter o tamanho das imagens.
    imagearray: [
        ["urlprimeiraimagem"], 
        ["urlsegundaimagem"],["urlterceiraimagem"],
        ["urlquartaimagem"],["urlquintaimagem"], 
 ["urlultimaimagem"] //jamais retire isso! se quiser acrescentar fotos, acrescente em cima, jamais em baixo
 ],
 displaymode: {type:'auto', pause:2000, cycles:80, pauseonmouseover:true},
 orientation: "h", //Coloque H para slide direita/esquerda e V para esquerda/direita
 persist: true, //continuar a partir do ultimo slide
 slideduration: 800 //duração de cada slide, escolha o numero ou deixe esse ( milisegundos )
})

</script>

2.1 Se você quer as imagens com links, cole esse código ao invés do código acima. Não muda quase nada, somente acrescenta o código dos links ok? ( lembre-se, esse é o com imagem e link e o acima do “2.0” é somente imagens.)

<script src="http://static.tumblr.com/ywlup7y/MWKlz5boa/slideshowbyquinze.js" type="text/javascript">

/***********************************************
* Translucent slideshow- (c) Dynamic Drive ( dynamicdrive.com/)
* Tutorial e códigos adaptados/hospedados por Sarah S ( quinzeparameianoite.tumblr.com )
* Não retire esses créditos.
***********************************************/

</script>

<script type="text/javascript">

var translideshow1=new translideshow({
    wrapperid: "myslideshow", //div do slideshow
    dimensions: [400, 500], //tamanho não precisa por "px" somente o numero. Deve ter o tamanho das imagens.
    imagearray: [
    ["URL DA FOTO", "LINKAQUI"], //url da foto no primeiro, link no segundo
["URL DA FOTO", "LINKAQUI"],
["URL DA FOTO", "LINKAQUI"],
["URL DA FOTO", "LINKAQUI"],
["URL DA FOTO", "LINKAQUI"], //jamais retire isso! se quiser acrescentar fotos, acrescente em cima, jamais em baixo
 ],
 displaymode: {type:'auto', pause:2000, cycles:80, pauseonmouseover:true},
 orientation: "h", //Coloque H para slide direita/esquerda e V para esquerda/direita
 persist: true, //continuar a partir do ultimo slide
 slideduration: 800 //duração de cada slide, escolha o numero ou deixe esse ( milisegundos )
})

</script

3. E por último e mais fácil, cole esse código onde quer que apareça (depois da div <body>) seu slide no theme ( exemplo, em baixo do about, em cima das navegações. Eu criei outra div para posicionar onde eu queria.) :

<div id="myslideshow"></div>

Espero que consigam utilizar esse tutorial, pois está tudo explicado aqui e nos códigos! E por favor, creditem a mim, mesmo que seja postado em outro tumblr. Obrigada! Caso o código estiver com erro, fale comigo na ask, mas devo lembrar que o código foi testado várias vezes. Se caso não funcionar, recoloque as aspas de todos os códigos :) Eu modifiquei um pouco esse script, pois ele tinha paginação. Beijos :D
----------------------------------------------------------------------------------------------------------------------------------

MENU BUCKS ~

Eu não tinha um nome melhor pra dar pois é/ OASPDOASPDOAPOSD, enfim ele e super simples e só depende do hover.

PREVIEW DO MENU

Bom viram como ele e simples e fofinho? Então pra fazer ele e super simples, achei ele em um site, então não adianta copiar ((:

Bom a primeira coisa e copiar o código a seguir e colar entre <style> e </style>

/*** menu bucks por fred ****/
.button {
  width: 200px;
  margin: 0px;display: inline-block; margin: 0 -50px 0 0;
}
.button a {
  display: block;
  height: 40px;
  width: 150px;
  color: #fff;
  font:bold 14px/40px helvetica, verdana, sans-serif;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  /*gradient*/  
  background: #67858f; text-shadow: 1px 1px 1px #799dab; 
 
}
.button a {
    -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;

}
.button p {
-webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;

  background: #555;
  display: block;
  height: 30px;
  width: 130px; 
  margin: -35px 0 0 10px;
  text-align: center;
  font: 12px/40px helvetica, verdana, sans-serif;
  color: #fff;


  position: absolute;
  z-index: -1;

  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
.button:hover .bottom {
  margin: -10px 0 0 10px;
}
.button:hover .top {
  margin: -80px 0 0 10px;
  line-height: 35px;
}
.button a:active {
background: #00b7ea; /* old browsers */
}
.button:active .bottom {
  margin: -20px 0 0 10px;
}
.button:active .top {
  margin: -70px 0 0 10px;
}

Não mecha nos códigos importantes pois você pode desconfigura-lo e ele não vai funcionar perfeitamente, bom só altere onde eu negritei ok? O código a seguir você vai colar aonde quer que o menu apareça 

<div class="button">
  <a href="/">home</a>
  <p class="bottom">pag. inicial</p>
</div>
<div class="button">
  <a href="/">contato</a>
  <p class="bottom">asked</p>
</div>
<div class="button">
  <a href="/">materiais</a>
  <p class="bottom">confira!</p>
</div>

Agora é só alterar o nome a descrição e o link, Pronto o menu esta pronto se tiver algum erro vem na ask ((: 

CREDITE SE USAR, MENU POR FRED

Leia Mais

Efeitos 2

Efeitos :: Crazy Opacity

••Visualize o efeito aqui.

© Unfe3ling Tutorials. Se lhe for útil dê like, se usar credite.

Obs: O que definirá o tamanho será os icons, o tamanho que usei nesse daí foi 100x100.

1). Cole o código abaixo onde deseja que o efeito apareça:

<a href="LINK-AQUI">

<img onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 0.5;" src="http://static.tumblr.com/m69m65e/KsVm7q575/cai_1.png" /></a>

<a href="LINK-AQUI">

<img onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 0.5;" src="http://static.tumblr.com/m69m65e/oi9m7q57a/cai_3.png" /></a>

<a href="LINK-AQUI">

<img onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 0.5;" src="http://static.tumblr.com/m69m65e/VVpm7q57i/cai2.png" /></a>

<br>

<img onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 0.5;" src="http://static.tumblr.com/m69m65e/KsVm7q575/cai_1.png" /></a>

<a href="LINK-AQUI">

<img onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 0.5;" src="http://static.tumblr.com/m69m65e/oi9m7q57a/cai_3.png" /></a>

<a href="LINK-AQUI">

<img onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 0.5;" src="http://static.tumblr.com/m69m65e/VVpm7q57i/cai2.png" /></a>

<br>

<img onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 0.5;" src="http://static.tumblr.com/m69m65e/KsVm7q575/cai_1.png" /></a>

<a href="LINK-AQUI">

<img onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 0.5;" src="http://static.tumblr.com/m69m65e/oi9m7q57a/cai_3.png" /></a>

<a href="LINK-AQUI">

<img onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 0.5;" src="http://static.tumblr.com/m69m65e/VVpm7q57i/cai2.png" /></a><br>

Mude os links e as imagens.

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

Wishlists :: Modelo II

••Visualize aqui os modelos.

© Unfe3ling Tutorials & Desenvolvimento. Se lhe for útil dê like, se usar credite.

Código CSS:

Abra este documento, escolha o modelo de wish que você deseja, copie o código e cole-o antes de </style>.

Código HTML:

Agora pegue o código abaixo da sua wish respectiva e cole-o onde desejar que ela fique:

Modelo 1:

<div class="menumw2"><a href="LINK">Wishlist #1</a></div>

Modelo 2:

<div class="menumw"><a href="LINK">Wishlist #2</a></div>

Modelo 3:

<div class="menumw3"><a href="LINK">Wishlist #3</a></div>

http://lugardohtml.tumblr.com/post/47466131152/wishlists-modelo-ii

Leia Mais

Outros

Menu de Pages - Tutorial

Olá gente, espero que estejam bem. 

Estou de novo aqui, apenas por um motivo: tédio. E até porque estou super passando mal, nem sei como fui à escola hoje, devido às olimpíadas, saí cedo graças à meu bom Deus @--@ Estou cheia de dor de cabeça e ainda resfriada, o pior é a tontura, você anda e parece se seu cérebro tá pulando :c 

Achei super legal o fato de vocês terem gostado do layout free de halloween, mesmo ele não tendo nadica de nada de halloween -.- e vi que pediram pelos comentários, um tutorial de como fazer aquele menu do topo, confesso que pensei em usar no próximo layout do A.N, mas por esses dias estou sem inspiração para terminar o layout, aí comecei a fazer outro modelo de layout para o próximo do A.N, não me decido. Então, hoje trouxe como fazer esse menu do topo: Prévia ~x

Cole acima de ]]></b:skin>:

.menudepages {
text-align: center;
position: fixed;
z-index: 1000000;
width: 100%;
top: 0; left: 0;
background: #c2bdc7;
height: 25px;
padding: 5px;
word-spacing: 10px;
}
.menudepages a{
color: #ccc8d0;
text-shadow: 1px 1px 0 #afa8b5;
font-family: "simple";
font-size: 20px;
-webkit-transition-duration: 1s;
}
.menudepages a:hover {
color: #d6d3d9;
text-shadow: 1px 1px 0 #a59eac;
}
@font-face {
font-family: "Simple";
src: url("http://static.tumblr.com/jxlyjkb/3LBmpn15n/bebasneue.otf");
font-weight: normal;
font-style: normal;
}

Agora, cole em um HTML // Javascript:

<div class="menudepages">
<a href="LINK-AQUI">NOME</a>
<a href="LINK-AQUI">NOME</a>
<a href="LINK-AQUI">NOME</a>
<a href="LINK-AQUI">NOME</a>
<a href="LINK-AQUI">NOME</a>
<a href="LINK-AQUI">NOME</a>
<a href="LINK-AQUI">NOME</a>
<a href="LINK-AQUI">NOME</a>
</div>

http://adolescentenerd.blogspot.com.br/2013/10/menu-de-pages-tutorial.html

Menu Up & Down + 1004 Seguidores?! ^0^

- Irei pensar em algo para recompensá-los pela meta ( >.< )

Yoo mutantes perfeitos (~'w')~

Estou super feliz pois quando entrei hoje no blog pude ver que estamos com 1004 seguidores, eu...fiquei super...FELIZ mesmo! Pois ontem, o dia inteiro, a internet não queria funcionar, então não pude fazer o post que me pediram sobre o menu que estamos usando, e consequentemente, não pude ver o número de choco seguidores. E quero agradecer também pelos elogios nos comentários do post anterior, irei retribuir todas as visitas quando puder.

Então, já que hoje a internet está funcionando (e tinha mesmo, pois estou fazendo um dever de história e tenho que pegar algumas cifras para amanhã) irei trazer o tutorial do Menu up & down, créditos ao Eu Amo HTML (www), nosso querido afiliado :)

Preview (www)

Acima de ]]></b:skin> cole:

.fade-isa {

font-family: trebuchet ms;

font-size: 11px;

padding: 5px;

background-color: #COR DO FUNDO (ROSA);

box-shadow: inset 0 0 20px #COR DA SOMBRA INTERNA (ROSA), 0 0 4px #ccc;

text-align: center;

width: TAMANHO DO MENUpx;

text-transform: uppercase;

word-spacing: 5px;

letter-spacing: 1px;

-webkit-transition-duration: .80s;}

.fade-isa a {

color: #COR DA FONTE;

text-align: center;

padding-top: 20px;

padding-bottom: 20px;

padding-left: 5px;

padding-right: 6px;

text-shadow: 2px 1px 1px #COR DA SOMBRA DO TEXTO;

-webkit-transition-duration: .80s;}

.fade-isa a:hover {

color: #COR DA FONTE AO PASSAR O MOUSE;

text-shadow: 2px 1px 1px #COR DA SOMBRA AO PASSAR MOUSE;

text-align: center;

padding-top: 5px;

padding-bottom:5px;

padding-left: 5px;

padding-right: 6px;

background-color: #COR DO QUADRADINHO (AZUL);

box-shadow: inset 0 0 20px #COR DA SOMBRA DO QUADRADINHO (AZUL), 0 0 4px #ccc;

-webkit-transition-duration: .80s;}

Configure as informações em maiúsculo e cole em um HTML / Javascript:

<div class="fade-isa">

<a href="LINK" title="Mensagem do Tooltip">Nome</a>

<a href="LINK" title="Mensagem do Tooltip">Nome</a>

<a href="LINK" title="Mensagem do Tooltip">Nome</a>

<a href="LINK" title="Mensagem do Tooltip">Nome</a>

<a href="LINK" title="Mensagem do Tooltip">Nome</a>

<a href="LINK" title="Mensagem do Tooltip">Nome</a>

<a href="LINK" title="Mensagem do Tooltip">Nome</a></div>

- O "Mensagem do Tooltip" é aonde ficará a mensagem do tooltip, se você não quiser que apareça tooltip, apague "title="Mensagem do Tooltip""

Lembrando novamente: Quem fez foi a Isa Souza do E.A.H (www)

 http://adolescentenerd.blogspot.com.br/2013/08/menu-up-down-1004-seguidores-0.html

Efeito 180 graus

hihi (www) - comecei a usar esse site hoje --'

Olá pandas, ah não, confundi, vocês são humanos mesmo '-'

Mais tudo bem com vocês? espero que sim, estou com uma preguiça hoje, só queria dormir, mais o pc é tão tentador >.<' e eu tenho que estudar pra R.P.M [não, não é uma banda ç.ç ] ~> Resolução de Problemas Matemáticos e para mim é só uma coisa ~> cha-ti-sse que me fer-ra na es-co-la '-' e o pior, acho que estou de recuperação nessa matéria, amanhã com certeza farei a recuperação, ninguém merece, todos na minha sala acharam difícil a prova, já tem matemática, pra quê R.P.M? O.o'

Hoje trouxe para vocês um tutorial de como fazer o efeito do 'nerd' lá no banner, não sei se perceberam, mais se você colocar o mouse acima do 'nerd', ele irá girar como no exemplo (www) 

Achei super fofo, pois ele gira devagar, deixando super kawaii.

Vamos aprender?

Adaptei um pouco os links pois peguei esse tutorial do tumblr (www).

Para começar, clique na setinha, e procure por ]]></b:skin> e cole acima:

.close {border-radius:5px;transition:All 3.0226s ease;

-webkit-transition:All 3.0226s ease;

-moz-transition:All 3.0226s ease;

-o-transition:All 3.0226s ease;

transform: rotate(4deg) scale() skew() translate(10px);

-webkit-transform: rotate(4deg) scale() skew() translate(10px);

-moz-transform: rotate(4deg) scale() skew() translate(10px);

-o-transform: rotate(4deg) scale() skew() translate(10px);

-ms-transform: rotate(4deg) scale() skew() translate(10px);}

.close:hover {transform: rotate(360deg) scale(1) skew(1deg) translate(0px);

-webkit-transform: rotate(180deg) scale(1) skew(1deg) translate(0px);

-moz-transform: rotate(180deg) scale(1) skew(1deg) translate(0px);

-o-transform: rotate(180deg) scale(1) skew(1deg) translate(0px);

-ms-transform: rotate(180deg) scale(1) skew(1deg) translate(0px);}

E para terminar, é só colar em um HTML // Javascript:

<img src="Imagem" class="close" />

Espero que tenham gostado, se algo não der certo, perguntem pelos comentários ^^'
Agora irei atualizar o chocomapa :3

http://adolescentenerd.blogspot.com.br/2013/07/efeito-180-graus.html

Leia Mais