other
http://static.tumblr.com/rksp1t7/qEIn46fem/fjallaone-regular.otf
Wishlist 2.0
Wishlist 2.0
Vou ensinar vocês a fazerem, esse tipo de wishlist
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
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>:
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.) :
----------------------------------------------------------------------------------------------------------------------------------
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<div id="myslideshow"></div>
----------------------------------------------------------------------------------------------------------------------------------
MENU BUCKS ~
Eu não tinha um nome melhor pra dar pois é/ OASPDOASPDOAPOSD, enfim ele e super simples e só depende do hover.
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
0 comentários: