Anonymous:

Karineeee!Como é que vc fez essas nuvens passarem!Fiquei apaixonada!Ensina pra gente depois?Obrigada e que Deus lhe abençoe! :)

Ei… então… é feito por css.
Eu montei a imagem das nuvens no photoshop, e fiz funcionar por css.
Vou passar o código que estou usando, mas CREDITE!
Depois elaboro um tutorial mais formal :)

 ~ Coloque esse código no seu css (abaixo da tag <style>)

/******* nuvens por: karinefernandes e sasdelli | tumblr.com */

#clouds{position:fixed;background:url(http://linkdaimagem.png) repeat-x;top:-10px;left:-9999px;bottom:0;right:0;height:100%; }

#clouds2{position:fixed;top:-10px;left:-9999px;bottom:0;right:0;
background:url(http://linkdaimagem.png) repeat-x 0 0;height:100%; z-index: -10; }

body:hover #clouds2{left:9999px;-webkit-transition:left 1500s linear;-moz-transition:left 1500s linear;-0-transition:left 1500s linear;transition:left 1500s linear; }

~ Agora coloque esse código abaixo da tag <body> 

<div id=”clouds2”></div>

Se lhe foi útil, credite :)

 Postado em 12/06/2012 51 notes
Como colocar botão de TOP!

Pra quem usa paginação infinita, como essa aqui no meu tumblr, esse tutorial será bem útil. Esse botão de top! além de ser algo prático, facilita a navegação pela página. Então vamos lá.


01
) Cole esse código, no ínicio do seu html, abaixo da tag <head>.

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script> <script type=”text/javascript” src=”http://LINK_GERADO_AQUI”></script> 

02) Agora, pegue esse código aqui, e cole no bloco de notas. Feito isso, procure bem no início desse código o endereço de uma imagem. Para facilitar a localização, aperte CTRL+F e digite na caixinha ttop. Esse é o link do botão de top. Se quiser mudar por um outro, troque esse link, pelo link da imagem que você quer. Salve normalmente. 

03) Agora abra um site de hospedagem. Recomendo o Upload Static File, aqui do tumblr mesmo. E procure o código que você acabou de salvar. Em seguida será gerado um link, pegue esse link e leve até aquele primeiro código (vide item 01). E onde está escrito LINK_GERADO_AQUI, coloque o que você acabou de hospedar. Prontinho ;) Lembrando que o botão de top que está aí é o meu. Eu não tirei porque é difícil encontrar essas imagens. Então, por favor, se continuar com ele, credite.

Tutorial criado e desenvolvido por Karine Fernandes


 Postado em 29/08/2011 30 notes
Como fazer menu pop-up

Finalmente aqui está o tutorial tão esperado, rs. 
E como a maioria dos tutoriais que coloco aqui são fáceis de fazer, esse não é diferente. Parece ser um bicho de sete cabeças, mas vocês verão que não é bem assim. É realmente bem chatinho de fazer, mas não é impossível. Só requer bastante atenção! O tutorial foi traduzido e simplificado por mim, portanto quando usar, credite o site original (se encontra no final do tuto) e meu tumblr! Então vamos lá.

1) Vamos começar pelo script principal, que permite o funcionamento do menu.
Pegue esse código aqui, e coloque no início do html, antes da tag </head>. Geralmente, antes do início do seu css!

Na página em que abrir o código, aperte CTRL + F, e na caixinha que aparecer, coloque: http://www.sohtanaka.com. A partir daí, começa o endereço da imagem close, ou seja, aquele X que fica no canto do menu. Essa é uma imagem, padrão, mas você pode criar a sua, hospedar e substituir esse endereço.

2) Vamos agora ao css:
Clique aqui, para pegar o código que permite personalizar o menu, que você deve colocar em seu css. Agora é com você, personalize à seu gosto, cor da borda, etc. 

3) A parte maios fácil já passou, rs. Agora ATENÇÃO! Segue abaixo, o código do link que direciona ao menu:

<a href=”#?w=500” rel=”popup_name” class=”poplight”>Sobre mim</a> 

Coloque ele onde você quer que apareça.
Por exemplo, se você quer que o menu apareça em baixo do banner, coloque o código abaixo do código do banner. 

• Entendendo esse código:

href=”#?w=500” -> especifica a largura do pop-up.
rel=”popup_name" -> É onde você irá colocar o nome da página a abrir o pop-up. 

4) Esse código abaixo, você vai colocar no próprio html. Ele é o código onde fica o conteúdo da página a ser aberta: 

<div id=”popup_name" class="popup_block">
Conteúdo da página aqui.
</div>


Nesse código, você irá substituir apenas onde está popup_name, pelo nome que você escolheu para a página. Por exemplo: about. Lembrando que o nome que você colocou aí tem que ser respectivo ao nome que você colocou no código anterior.

Para entender, de um modo simples, irá ficar assim, por exemplo:

1º código:
<a href=”#?w=500” rel=”about class=”poplight”>Sobre mim</a> 

2º código:
<div id=”about" class="popup_block"> Conteúdo da página aqui.</div>

Veja que o nome em class e rel são os mesmos. Faça esse mesmo procedimento quantas vezes quiser, ou seja, respectivamente ao número de links que você quer no menu!

NOTA
: Se você usa um menu personalizado, de caixinha, como esse aqui,

Acrescente <span class=”nome_da_class_do_menu”> ao código, não esquecendo de fechar com </span>. E faça a alteração necessária. Um exemplo de como irá ficar:

<a href=”#?w=500” rel=”popup_name” class=”poplight”>
<span class=”nome_da_class_do_menu”>Sobre mim</span></a>


DICA: Não acrescente conteúdos muito longos ao menu, como followers, etc.
Pois ele pode ocupar toda a página, não possibilitando assim a sua visualização completa.

(c) Original / Traduzido por Karine Fernandes.
Se lhe foi útil, credite!
 


 Postado em 24/04/2011 263 notes
Colocando imagem de topo

Muitas pessoas me perguntaram, como colocar uma imagem no topo da página, como essa aqui. Então resolvi ensinar, e é algo bem simples veja só.

1) Coloque esse código em seu css.

/* topo by karinefernandes.tumblr.com */
.topo { position: fixed; top: -5px; background-image:url(http://linkdaimagemaqui.com); padding:70px; width: 100%; margin-left : -5px; z-index: 1;}

2) Coloque isso, abaixo da tag <body> e de preferência, antes do conteúdo da sua sidebar.

<div class=”topo"></div>

E pronto! Viram como é simples? Agora, faça a alteração necessária no primeiro código, como colocar o link da imagem. Lembrando que em padding é como se fosse o height, ou seja, a altura. Mude o valor, de acordo com o tamanho da sua imagem de topo. É tudo na base do chute ;)

Dica: Se você fizer uma imagem de topo, com a largura (width) 1024, irá sobrar um espaço em um monitor de resolução (widht) 1366. Portanto, sugiro que faça uma imagem de topo maior, para ficar proporcional em ambas resoluções.

Tutorial criado e desenvolvido por Karine Fernandes.
Se lhe foi útil, credite!


 Postado em 24/04/2011 23 notes
Tema melhor visualizado também no IE.

Estava conversando com a Pri, e ela me perguntou como faço para que meus temas fiquem melhor visualizados também no Internet Explorer. Eu confesso que não tinha a mínima ideia de como fazer isso, rs, era tudo sorte mesmo! Mas como sou uma pessoa muito curiosa, fiquei intrigada com isso e procurei uma resposta pra isso, e é algo muito simples, veja só:
No início do html do tema, você pode perceber que começa com a tag <html> 
É só substituir essa tag por: 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head profile=”http://gmpg.org/xfn/11”> 

E voilá! Ele ficará certinho também no IE :)
* Lembrando que isso melhora 90%, alguns scripts, como opacidade nas imagens, e outros não funcionam corretamente, mas isso varia ok?

É isso, espero que ajude! 

Tutorial desenvolvido por Karine Fernandes.


 Postado em 12/04/2011 14 notes
Como mudar o botão de follow de lugar…

Talvez seja uma coisa boba, mas para alguns é bem útil. Pra mim por exemplo, teve uma utilidade grande. Sou uma pessoa SUPER detalhista, e o botão de follow estava me incomodando ali no cantinho direito. Descobri que é possível mudá-lo de lugar; seja para o lado esquerdo ou para baixo.

1) Antes de mais nada, é necessário ter o código do botão de follow. Muitos temas, ou até mesmo a maioria, não tem esse código visível no html, mas você pode adquirir AQUI

2) Pegando o código, e colocando ele no lugar indicado, você deve criar uma div, no seu css. Para facilitar, vou colocar uma base aqui, mas você pode modificar de acordo com seu gosto:

.follow {width: 170px; position: fixed; float: left; margin-top: 0px;}

 
Entendendo a div: 

* widht: define a posição do botão, mais para a esquerda ou mais para a direita.
* position: absolute -> o botão se movimenta junto com a página;
               fixed -> permanece fixo na página (como minha sidebar);
* float: left para a esquerda e right para a direita.
* margin-top: quanto maior o valor, mais para baixo o botão vai ficar.


É basicamente tudo no chute! Essa base que eu já deixei, tem valores certos que deixam o botão no lado esquerdo, em cima e fixo na página.

3) Agora na frente do código do botão, que você pegou no início do tutorial, coloque isso: <div class=”follow”> e no final do código do botão, feche a tag, com </div>.

É uma coisa bobinha, mas pra quem é detalhista como eu, ajuda muito :) Você pode colocar esse botão de follow no final da sua página, em baixo da sidebar, enfim, onde preferir! Beijos, Deus abençoe *u*

Esse tutorial foi criado e desenvolvido por Karine Fernandes, se lhe for util, credite!


 Postado em 24/03/2011 35 notes
Código para colocar botão de follow em themes adaptados.

Oi! Finalmente eu consegui descobrir qual é o código dos botões que ficam no canto da página, de FOLLOW/DASHBOARD

Exemplo:  
Acho bem útil para themes que são adaptados do blogskins…
Em algumas vezes eles aparecem em lugares escondidos ou até mesmo nem aparecem… Portanto, irei disponibilizar esse código aqui, caso aconteça esse mesmo imprevisto com você! 

Clique aqui para pegar o código.

Tutorial de como colocar: Primeiro, quando abrir a página com o código, aperte CTRL+F, e na caixinha que se abrir, coloque o seguinte: NOME_DO_SEU_TUMBLR_AQUI. E pronto :)
Agora, vá no seu html e coloque o código bem lá no início, abaixo da tag <head>

Prontinho! Peço que por favor, se esse tutorial lhe foi útil, credite :D
Qualquer coisa, mande uma ask; - Karine Fernandes


 Postado em 30/01/2011 92 notes


Página 1 de 1 /