#sidebar tutorial

PORTUGUÊS

Okay, demorei mas voltei. E voltei com o tutorial final. Eu sei que eu disse que iria ter três partes, mas eu não vejo o porque disso. Então vamos logo ao tutorial. Detalhe: leia o primeiro tutorial, porque muitas coisas que eu não vou explicar aqui é porque eu já expliquei lá, clique aqui para ir direto para a parte 1.

CSS

Como criar um título:

Certo. Vamos começar com o título. A div você já conhece, então vamos conhecer os demais códigos que serão usados para o título.

Cole esse código antes de </style>:

#title {font-family:times; font-size:15px; color:#000000; font-weight:bold; text-align:center; margin-top:10px;}

font-family - este código serve para mudarmos a fonte do texto, ou seja, com ele podemos usar e abusar das fontes. Aqui você aprende a mudar as fontes com o google fonts.

font-size - este código serve para definir o tamanho da sua fonte.

color - este código serve para definir a cor da fonte qualquer elemento, seja ele caixa de post, sidebar e etc. Você pode vir nesse site e selecionar a cor que você quiser, e copiar o código da cor e colar depois de color. exemplo: color: #eeeeee;

font-weight -  este código serve para especificar o peso ou a intensidade da fonte (ex.: negrito). Códigos base para usar:

font-weight: normal; (a letra ficará normal) font-weight: bold; (a letra ficará em negrito)

text-align - este código serve para definir se seu texto irá ficar todo alinhado para a direita, esquerda, centro, ou todo em uma linha reta. Os códigos são esses:

text-align: right; (direita) text-align: left; (esquerda) text-align: center; (centro) text-align: justify; (linha reta)

margin-top - este código serve para determinar o quão afastado da margem de cima essa caixa estará.

Como criar um menu:

O css do menu é muito mais fácil do que o html, mas vou ajudar vocês nessas, não há motivo para desespero.

Cole esse código antes de </style>:

#links {margin-left:0px; margin-top:0px text-align:center;}

Vamos às explicações. As divs vocês já sabem como usar, vou explicar pra que serve esses códigos que colocamos dentro delas:

margin-left - este código serve para determinar o quão afastado da margem esquerda essa caixa estará. A numeração sempre será dada em pixels e sempre dentro de : ; (exemplo margin-left:30px;)

margin-top - este código serve para determinar o quão afastado da margem de cima essa caixa estará.

text-align - este código serve para definir se seu texto irá ficar todo alinhado para a direita, centro, ou todo em uma linha reta. Os códigos são esses:

text-align: right; (direita) text-align: left; (esquerda) text-align: center; (centro) text-align: justify; (linha reta)

Certo, agora entra algo novo. Como configurar os links no css. Se queremos configurar os links de alguma div, sempre colocamos a letra a depois da mesma, exemplo:

#links a {}

Entenderam? Então vamos à aplicação:

#links a {color:#000000; font-size:14px; text-align:center; margin:10px;}

color - este código serve para definir a cor da fonte qualquer elemento, seja ele caixa de post, sidebar e etc. Você pode vir nesse site e selecionar a cor que você quiser, e copiar o código da cor e colar depois de color. exemplo: color: #eeeeee;

font-size - este código serve para definir o tamanho da sua fonte. 

text-align - este código serve para definir se seu texto irá ficar todo alinhado para a direita, centro, ou todo em uma linha reta. Os códigos são esses:

text-align: right; (direita) text-align: left; (esquerda) text-align: center; (centro) text-align: justify; (linha reta)

margin - este código serve para determinar o quão afastado da margem da sua box o elemento estará. 

Como criar uma descrição:

Cole esse código antes de </style>:

#desc {margin-top:0px;   margin-left:0px; padding:5px; font-size:14px; color:#000000; text-align:justify;}

margin-top - este código serve para determinar o quão afastado da margem de cima essa caixa estará.

margin-left - este código serve para determinar o quão afastado da margem esquerda essa caixa estará. A numeração sempre será dada em pixels e sempre dentro de : ; (exemplo margin-left:30px;)

padding - este código serve para espaçar os elementos da caixa da margem. Exemplo de um padding grande, e pequeno.

font-size - este código serve para definir o tamanho da sua fonte.

color - este código serve para definir a cor da fonte qualquer elemento, seja ele caixa de post, sidebar e etc. Você pode vir nesse site e selecionar a cor que você quiser, e copiar o código da cor e colar depois de color. exemplo: color: #eeeeee;

text-align - este código serve para definir se seu texto irá ficar todo alinhado para a direita, centro, ou todo em uma linha reta. Os códigos são esses:

text-align: right; (direita) text-align: left; (esquerda) text-align: center; (centro) text-align: justify; (linha reta)

Seu código final deve ficar assim:

#title {font-family:times; font-size:15px; color:#000000; font-weight:bold; text-align:center; margin-top:10px;}

#links {margin-left:0px; margin-top:0px text-align:center;}

#links a {color:#000000; font-size:14px; text-align:center; margin:10px;}

#desc {margin-top:0px;   margin-left:0px; padding:5px; font-size:14px; color:#000000; text-align:justify;}

HTML

O html do título, é bem fácil, porque você só tem que abrir uma div e fechá-la, e entre a abertura e o fechamento, colocar o seu título, assim:

<div id=“title”> I have a duty of care; </div>

Novamente, não explicarei detalhadamente coisas que já expliquei na parte 1 desse tutorial, então, se não leu o outro, LEIA.

<div id=“links”> <a href=“”> link </a> <a href=“”> link </a> <a href=“”> link </a> </div>

Esse é o código dos links. Vamos por partes.

Lembra que eu falei que se abrir uma div TEM que fechar?? Então, qualquer elemento que você abrir, você tem que fechar. Não seria diferente com os links. O <a href=“”> indica que aquilo é um link e o sinal de igual e as aspas determina qual link será acionado ao ser clicado. Exemplo, se você quiser que ao ser clicado, o link te direcione para o google, colocaremos o link do google dentro das aspas, exemplo:

<a href=“www.google.com/”>

Bem fácil né? Vamos para a outra parte. 

Percebeu que após o código <a href=“”> está escrito link? Pois bem, esse será o texto que aparecerá no seu link, ele quem irá aparecer para ser clicado, já o link, ficará embutido nesta palavra, você pode mudar pra qual quiser. Agora só falta a ultima parte que é a </a>, que é um fechamento para esse elemento, repetindo, SEMPRE que abrir um elemento, FECHE, ou irá desconfigurar todo o theme.

O html da descrição é no mesmo esquema do título, você só tem que abrir uma div e fechá-la, e entre a abertura e o fechamento, colocar sua descrição, assim:

<div id=“desc”> Para o amor, um banco de praça já basta. Ou ficar na frente de um portão. Ou uma xícara de café. Amor mesmo é um filme de baixo orçamento. </div>

Seu código final deve ficar assim:

<div id=“title”> I have a duty of care; </div>

<div id=“links”> <a href=“”> link </a> <a href=“”> link </a> <a href=“”> link </a> </div>

<div id=“desc”> Para o amor, um banco de praça já basta. Ou ficar na frente de um portão. Ou uma xícara de café. Amor mesmo é um filme de baixo orçamento. </div>

Sua sidebar deve estar mais ou menos assim.

É isto pessoal, espero que esse tutorial ajude vocês. Qualquer dúvida só me mandar uma ask. E POR FAVOR DÊ LIKE/REBLOG NESSE POST PARA EU SABER QUE VOCÊS GOSTARAM NO TUTORIAL E QUE EU POSSA ESTAR REPRODUZINDO MAIS E MAIS.

ENGLISH

Okay, I’m late, but I’m back. And I came back with the final tutorial. I know I said there’d be three parts, but I don’t see why there are three parts. So let’s just go to the tutorial. Detail: Read the first tutorial, because there are many things I will not explain here because I have already explained there, click here to go straight to Part 1.

CSS

How to create a title:

Right. Let’s start with the title. The div you already know, so let’s get to know the other codes that will be used for the title.

Paste this code before </style>:

#title {font-family:times; font-size:15px; color:#000000; text-align:center; font-weight:bold; margin-top:10px;}

font-family - this code is used to change the font of the text, ie with it we can use and abuse of the fonts. Here you learn how to change fonts with Google fonts.

font-size - this code is used to set the size of your font.

color - this code is used to set the font color any element, be it: post box, sidebar and etc. You can go on this site and select the color you want, and copy the color code and paste after color. Example: color: #eeeeee;

font-weight - this code is used to specify the weight or intensity of the font (ex: bold). Base codes to use:

font-weight: normal; (The letter will be normal) font-weight: bold; (The letter will be bold)

text-align - this code is used to set whether your text will get all aligned to the right, center, or all in a straight line. The codes are these:

text-align: right;  text-align: left;  text-align: center;  text-align: justify; (Straight line)

margin-top - this code is used to determine how far from the top margin this box will be.

How to create a menu:

The CSS of the menu is much easier than the HTML, but I will help you in these, there is no reason for despair.

Paste This code before </style>:

#links {margin-left: 0px; margin-top: 0px text-align: center;}

Let’s go to explanations. The divs you already know how to use, I will explain what these codes we put inside them:

margin-left - this code is used to determine how far from the left margin this box will be.

margin-top - this code is used to determine how far from the top margin this box will be.

text-align - this code is used to set whether your text will get all aligned to the right, center, or all in a straight line. The codes are these:

text-align: right; text-align: left; text-align: center; text-align: justify; (Straight line)

Okay, now something new comes in. How to configure the links in CSS. If we want to configure the links of some div, we always put the letter a after the div, example:

#links a {}

Understand? So let’s go to the codes:

#links a {color: #000000; font-size: 14px; text-align: center; margin: 10px;}

color - this code is used to set the font color any element, be it: post box, sidebar and etc. You can go on this site and select the color you want, and copy the color code and paste after color. Example: color: #eeeeee;

font-size - this code is used to set the size of your font.

text-align - this code is used to set whether your text will get all aligned to the right, center, or all in a straight line. The codes are these:

text-align: right; text-align: left; text-align: center; text-align: justify; (Straight line)

margin - this code is used to determine how far away from the margin of your box the element will be.

Your final code should be like this:

#title {font-family:times; font-size:15px; color:#000000; font-weight:bold; text-align:center; margin-top:10px;}

#links {margin-left:0px; margin-top:0px text-align:center;}

#links a {color:#000000; font-size:14px; text-align:center; margin:10px;}

#desc {margin-top:0px;   margin-left:0px; padding:5px; font-size:14px; color:#000000; text-align:justify;}

HTML

The title HTML, it’s pretty easy, because you just have to open a div and close it, and between opening and closing, put your title, like this:

<div id=“title”> I have a duty of care; </div>

Again, I will not explain in detail things I have explained in Part 1 of this tutorial, so if you have not read the other, READ.

<div id=“links”> <a href=“”> link </a> <a href=“”> link </a> <a href=“”> link </a> </div>

That’s the code for the links. Let’s go for parts.

Remember I told you that if I open a div HAVE to close?? So any element you open, you have to close. It would Not be different with the links. <a href=“”>indicates that it is a link and the equal sign and quotation marks determine which link will be triggered when clicked. Example, if you want, that when clicked, the link directs you to Google, we will put the Google link within the quotation marks, example:

<a href=“www.google.com/”>

Pretty easy, huh? Let’s go to the other side.

Did you Notice that after the code <a href=“”> is written link? Well, this will be the text that appears on your link, it will appear to be clicked, but the link, will be embedded in this word, you can change to which word you want. Now It is only missing the last part that is </a>, which is a closing for this element, repeating, whenever you open an element, close, or will unconfigure the entire theme.

The description HTML is in the same title scheme, you just have to open a div and close it, and between the opening and closing, put your description, like this:

<div id=“desc”> Para o amor, um banco de praça já basta. Ou ficar na frente de um portão. Ou uma xícara de café. Amor mesmo é um filme de baixo orçamento. </div>

Your final code should be like this:

<div id=“title”> I have a duty of care; </div>

<div id=“links”> <a href=“”> link </a> <a href=“”> link </a> <a href=“”> link </a> </div>

<div id=“desc”> Para o amor, um banco de praça já basta. Ou ficar na frente de um portão. Ou uma xícara de café. Amor mesmo é um filme de baixo orçamento. </div>

Your sidebar should look like this.

so basically go to your theme, edit theme and all that fun stuff. click your html and scroll down till you see: 

now youre gonna replace the  with this code.

Now save all the gifs you want (to add more gifs keep adding new rows with this: myimages[3]=”image6.gif” just make sure you change the number in the [#]

Next youre going to upload the gifs to this website http://www.tumblr.com/themes/upload_static_file

Step 1. Open your image.

Step 2. Crop it to the size the theme gives for the sidebar. I'm doing 200 px by 750 px, so I'm setting my crop size to those numbers and then dragging the area up so that the width I want of the image is in the bottom.

Step 3. Double click the image layer (Background) to make it "Layer 0". The lock next to the layer should go away.

Step 4. Create a new layer and drag it to the bottom.

Step 5. Use the erase tool to get rid of the top of the image. It's easiest to use a smaller brush with 0% hardness toward the bottom and then increase the size and hardness once you get further away from the subject.

Step 6. Sharpen it and add a PSD if you want.

Step 7. Save the image as a .png file. That's it! Even if the background of your image isn't white, if you set the sidebar background to a similar colour, it will blend right in.

open up photoshop > file > new and make sure the canvas is 500x185 so it looks like

then open up your pngs make sure you have two PNGs, its's be better if they are large, it'll look nicer.

drag one of the PNGs to the left side and the other to the right, kind of cut their faces off like so;

then choose your gif(s). I just use one big one, it looks prettier in my opinion, but you can use more than one.

go to your gif and click this button

and a little menu should pop up, click on the one that says 'Select All Frames'

'

all your frames should be selected now click on the one that says 'Flatten Frames Into Layers'

after that go to select > all layers > then go to layer > group layers and your layers should be all in a group labeled "Group 1"

go back to your canvas and make an animation clicking "Create Frame Animation"

okay now create as many frames as your gifs has, for example my gif has 12 frames, so i'll make 12 frames on my canvas by clicking this button 12 times

after that, make sure you have it set to 'forever'

go back to your gif, copy all the frames then go back to your canvas and select all the 12 frames, then click 'Paste Over Selection'

fix the gif however you want and then drag the "Group 1" folder all the way to the bottom so its under the pngs like;

then add your gradient, text, texture etc and voila, you're done! my result was

so, see all the underlined names? that’s what you need to change! change those to whatever you want and it’s done. but you have to change them in all parts of the code for it to work! so, search for the css part too:

there’s a lot more to it, but you get the point…

you’ll also need to change the margins, so they won’t be on top of each other, but yeah, that’s all you need to do :)

well, to start off you need to pick two good screencaps, hopefully within a few frames of each other such as these:

if you want to make a full sidebar such as mine, there needs to be a single color that you can blend into it (like the sky, etc) to make it large enough (notice there's only one color in the background of these screencaps, that is why it blends so well into my blog)

the top of the person's head should have at least a little space above it so it doesn't get cut off

finding workable caps is actually probably the hardest part

after that, put both screencaps on one canvas, and set the layer on top to screen and adjust:

after that, you need to make the top layer a mask with this tool

and then use a black to transparent gradient to change the opacity until it looks something like this

after that, you need to make sure the image is the same width as the theme's sidebar (mine is 370px)

and then you change the canvas size to however tall you want it to be (mine is set at 690px so it is probably cut off by screens with higher resolution, but it looks fine on my computer)

so now it should look like this

usually i merge the two layers after this is done

next, you need to use the eyedropper tool to get the color of the background onto your canvas thing (idk what it's called omfg)

make a new layer and then use a gradient (foreground to transparent) to color it:

after this, add your psds/color it (i usually color my own graphics but psds are good when you have trouble)

and it should be done

i wanted mine to be the same color as the background of my image so i used the eyedropper tool again to see what the hex was for it