Discover Top Posts Tagged with #passo-html

Avisa que está rolando um MEGA RECOMENDO? Vem você também.

testando essa askinha linda

testado []

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

#bru #passo-html

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

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}

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}

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.

#SIDEBAR #COMO FAZER SIDEBAR #DAI #PASSO-HTML

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

#askrapida #ask #milenna #passo-html

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

#notes #estilos #estilos de notes #dai #passo-html #html #js #css

Trocamos o theme

Trocamos o theme aqui do passo, gostaram? Venham dizer o que acharam ♥♥

#new #passo-html #themes passo-html

Teste preview de cmo ai ficar o estilo de pergunta. Bem cute né? <3

Teste preview de como vai ficar a resposta. Tô morta com tanta fofura <3

#passo-html #ask

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.

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

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}

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}

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.

#SIDEBAR #COMO FAZER SIDEBAR #DAI #PASSO-HTML

#passo-html

Trending Tags

Recently Viewed Tags

#passo-html