Nov 23, 2018
Avisa que está rolando um MEGA RECOMENDO? Vem você também.
Loading...
seen from Malaysia
seen from United States
seen from Germany
seen from Canada
seen from Malaysia
seen from United States
seen from United States
seen from United States
seen from United States
seen from United States
seen from China
seen from China
seen from United States
seen from Malaysia
seen from China
seen from United States
seen from China
seen from Canada
seen from United States
seen from Malaysia
Avisa que está rolando um MEGA RECOMENDO? Vem você também.
Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.
Free to watch • No registration required • HD streaming
Estilos de link
Estilo 1
Código Css (<style>):
/** Estilo de link por Passo-html/Cavalhera **/ #ph-links a{color:#fff;} .ph-links {width:90px; margin:4px; text-align:center; display:inline-block; height:30px; line-height:30px; font-family:consolas; text-transform:uppercase; -moz-box-shadow:inset 0px 15px 0px #c7a5a5; -webkit-box-shadow:inset 0px 15px 0px #c7a5a5; box-shadow:inset 0px 15px 0px #c7a5a5; letter-spacing:1px; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; background:#b58888;} .ph-links:hover {background:; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -moz-box-shadow:inset 0px -15px 0px #c7a5a5; -webkit-box-shadow:inset 0px -15px 0px #c7a5a5; box-shadow:inset 0px -15px 0px #c7a5a5;} /** Estilo de link por Passo-html/Cavalhera **/
Código Html (<body>)
<div id="ph-links"> <a class="ph-links" href="LINK">Home</a> <a class="ph-links" href="LINK">Design</a> <a class="ph-links" href="LINK">Partnes</a> <a class="ph-links" href="LINK">Themes</a> </div>
Estilo 2
Código Css (<style>)
/** Estilo de link por Passo-html/Cavalhera **/ #ph-links {margin:50px;} #ph-links a{color:#fff;} .ph-links {width:90px; margin:4px; text-align:center; display:inline-block; height:30px; line-height:30px; font-family:consolas; text-transform:uppercase; -moz-box-shadow:inset -75px 0px 0px #c7a5a5; -webkit-box-shadow:inset -75px 0px 0px #c7a5a5; box-shadow:inset -75px 0px 0px #c7a5a5; letter-spacing:1px; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; background:#b58888;} .ph-links:hover {background:; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -moz-box-shadow:inset 75px 0px 0px #c7a5a5; -webkit-box-shadow:inset 75px 0px 0px #c7a5a5; box-shadow:inset 75px 0px 0px #c7a5a5;} /** Estilo de link por Passo-html/Cavalhera **/
Código Html (<body>)
<div id="ph-links2"> <a class="ph-links2" href="LINK">Home</a> <a class="ph-links2" href="LINK">Design</a> <a class="ph-links2" href="LINK">Partnes</a> <a class="ph-links2" href="LINK">Themes</a> </div>
Se usar, gostar, dê like.
Gabriela
Página de regras, simples e básica.
Preview - Download
Gabriela.
Criando uma ou mais Sidebar(es).
Para criar uma Sidebar é simples.
Voces primeiro tem que ter a noção básica de HTML e alguns comandos. Como margin-left, margin-top, os positions e width.
MINI DICIONÁRIO AQUI
margin-left: para definir se é mais para direita ou esquerda.
margin-top: para definir o quão distante ficará do topo da tela. Quanto maior o número mais distante do topo vai ficar.
position: fixed; relative; ou absolute;: é para definir se ele vai ficar fixado, relativo a outra div e em movimento ou em movimento e absoluto.
width: o tamanho em largura da sidebar.
OBS* Quando se coloca o position:relative; numa div o “margin-left”, “margin-top” e seus opostos não funcionam assim, eles só funcionam se colocados como apenas, top, left, bottom, right.
EXEMPLO DE SIDEBAR:
NO CSS
#sidebar {position:fixed; margin-left:30px; margin-top:100px; width:200px; }
Já expliquei todas as funções desses comandos e a partir daí vocês podem fazer como desejarem.
Podem por background, border, alterar os números e por aí vai.
NO <BODY> (depois da div de centralização)
<div id="sidebar"> AQUI DENTRO VAI TITULO, IMAGEM, DESCRIÇÃO, LINKS E O QUE MAIS VOCÊS QUISEREM </div>
COISAS QUE VÃO DENTRO DA SIDEBAR:
TITULO NO CSS:
Vocês pode fazer o titulo dessa maneira colocando a div com h3, assim:
#sidebar h3 {text-transform:uppercase; font-size:20px; text-align:center;}
E depois, arrumarem o tamanho da fonte, cor e etc.
PS* para deixar a cor do título de outra cor é só adicionar “color: #codigo da cor aqui” dentro da div. Tabela de cores aqui.
MINI DICIONÁRIO.
font-size:20px; é o tamanho da fonte; text-align: center; é para deixar o título alinhado no meio; também tem text-align:left; e text-align:right; text-transform:uppercase é para que as letras fiquem em maiúsculo
TITULO DENTRO DA DIV NO <BODY>
<div id="sidebar"> <h3>{title}</h3> </div>
IMAGEM NO CSS.
Vocês pode fazer a imagem dessa maneira colocando a div com img, assim:
#sidebar img { width:100px; }
E depois, arrumarem o tamanho, que é o width. Depois modifiquem como quiserem, deixando redonda, colocando efeitos e etc.
IMAGEM DENTRO DA DIV NO <BODY>
<div id="sidebar"> <h3>{title}</h3> <img src=“LINK DA IMAGEM AQUI’ /> </div>
LINKS NO CSS.
Vocês pode fazer dessa maneira colocando a div com a, assim:
#sidebar a { margin:5px; color:#aaa; font-size:11px; }
E depois, arrumarem o tamanho da fonte, cor e etc.
O hover se faz assim: (hover é quando passa o mouse sobre o link e etc)
#sidebar a:hover { color:#fedada; }
Depois vcs fazem o hover que desejarem. Eu apenas mudei a cor.
LINKS DENTRO DA DIV NO <BODY>
<div id="sidebar"> <h3>{title}</h3> <img src=“LINK DA IMAGEM AQUI’ />
<a href=“LINK AQUI”> NOME LINK 1 </a>
<a href=“LINK AQUI”> NOME LINK 2 </a>
<a href=“LINK AQUI”> NOME LINK 3 </a>
<a href=“LINK AQUI”> NOME LINK 4 </a> </div>
DESCRIÇÃO
Gente a descrição é bem simples, vcs apenas vão por {description} dentro da div e pronto, assim:
<div id="sidebar"> <h3>{title}</h3> <img src=“LINK DA IMAGEM AQUI’ />
{description}
<a href=“LINK AQUI”> NOME LINK 1 </a> <a href=“LINK AQUI”> NOME LINK 2 </a> <a href=“LINK AQUI”> NOME LINK 3 </a> <a href=“LINK AQUI”> NOME LINK 4 </a> </div>
E se quiserem customizar a fonte e etc é só ir na div principal e por lá, fonte, tamanho, cor e afins. Assim:
#sidebar {position:fixed; margin-left:30px; margin-top:100px; width:200px; font-family:verdana; font-size:11px; }
E ESTÁ FINALIZADA A SIDEBAR
SEGUNDA SIDEBAR
E AGORA PARA FAZER UMA SEGUNDA SIDEBAR É SIMPLES DEMAIS
Vcs vão fazer exatamente igual a outra, o que vai mudar é:
margin-left e o nome da div.
Então uma segunda sidebar ficaria assim:
#seg-sidebar {position:fixed; margin-left:200px; margin-top:100px; width:200px; font-family:verdana; font-size:11px; }
<div id="seg-sidebar"> <h3>{title}</h3> <img src=“LINK DA IMAGEM AQUI’ />
{description}
<a href=“LINK AQUI”> NOME LINK 1 </a> <a href=“LINK AQUI”> NOME LINK 2 </a> <a href=“LINK AQUI”> NOME LINK 3 </a> <a href=“LINK AQUI”> NOME LINK 4 </a> </div>
Viram que eu mudei apenas o margin-left e o nome da div.
VCS PODEM COLOCAR O NOME DA DIV DO QUE QUISEREM, E O VALOR DO MARGIN-LEFT COMO DESEJAREM.
Lembrando também que vcs não precisam colocar o titulo, a imagem, descrição e links na mesma ordem que eu. Alterem a vontade.
Essas são as principais noções básicas que vocês tem de ter para fazer um sidebar e qualquer coisa num theme.
TUTORIAL POR: DAI.
testando essa askinha linda
testado []
Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.
Free to watch • No registration required • HD streaming
Olá, somos um tumblr de themes, e de ajudinhas com HTML. Convidamos você para dar uma olhada e visitar sempre que quiser. Em breve themes p tumblr pessoal. Desculpa incomodar.
Opa, obrigada pelo convite! E desculpa pela demora para responder.♥
Ask rápida no theme
Veja aqui: [x]
Coloque esse código antes de </style>:
#tab11{margin-bottom:5px;padding:4px;height:16px;text-align:justify;overflow:hidden;margin-top:9px1px; letter-spacing:1px;font-size:10px;line-height:10px;z-index:0;-webkit-transition: all 0.7s ease-in-out;-moz-transition: all 0.7s ease-in-out;-o-transition: all 0.7s ease-in-out;} #tab11:hover{height:260px;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;} #container2{text-align:center;font-size:10px;text-transform:uppercase;position:fixed;font-family:pt sans;left:990px;top:145px;background-color:#; letter-spacing:1px;width:322px;z-index:9999;padding:8px; }
Coloque esse código depois de body:
<div id="container2"> <div id="tab11"> <div style="font-size:11px;color:#777; border-radius: 7px; font-family: pt sans; background:#ecf9fb;padding:6px"> <b> Ask me <3 (passe o mouse) </b></div> <div style="padding-top:1px; text-transform:none; opacity:.9; font-family: arial; font-size:10px; line-height:10px; text-align:center; color:#E49D98;background:#fff;"> <iframe frameborder="0" scrolling="no" width="100%" height="500px" src="https://www.tumblr.com/ask_form/SUA URL AQUI.tumblr.com" style="background-color:#f8f8f8; overflow:hidden;" id="ask_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]--> </div></div> </div></div>
Mude a cor e a posição do jeito que preferir.
Qualquer dúvida é só vir na ask! Bjs!
- Tutorial por Milenna.
Estilo de notes minimal #02
Se quiserem uma preview desse estilo de notes, é o mesmo desse theme meu. (clica)
1° Primeiro colem esse código antes de </style>
/*********** ESTILO DE NOTES POR @ARCAICAS DISPONÍVEL EM @PASSO-HTML. ************/ #dai-arcaicas {text-align:center;padding-top:5px;padding-bottom:5px;padding-left:10px;position:absolute;bottom:-70px;left:0px;width:calc(100% - 10px); border-top:1px solid #eaeaea} #dai-arcaicas a {display:inline-block;margin:0px 4px;letter-spacing:1px;text-transform:uppercase;top:-15px;background:#f7f7f7;padding:5px;font-size:8px;font-style:normal;position:relative;}
Coisas que vocês talvez terão de mudar:
top:-15px; - no #dai-arcaicas a coloque um número que fique certinho.
cor da borda no #dai-arcaicas.
e a cor do background no #dai-arcaicas a.
2° Segundo cole isso depois da div de custome dos seus posts:
{block:IndexPage} <div id="dai-arcaicas"><a href="{ReblogURL}" target="_blank">reblog</a> <a href="{Permalink}">{ShortDayOfWeek} às {24HourWithZero} {AmPm}</a> <a href="{Permalink}">{NoteCount}N</a></div> {/block:IndexPage}
Se usarem dê like ou avise, por favor! Disponível por: Dai, @arcaicas