Brazilian Designer

Apenas mais um Tumblr de HTML & CSS

[braziliandesigner]

Caixa de frases aleatórias

Bom pessoal, depois de alguns dias sem postar nada, estou de volta para mais um tutorial.

(Clique nas imagens para ver melhor.)

Vou ensinar a fazer uma caixa de frases aleatórias, bem simples, mas ótima para quem tem blog de textos. Vamos ao tutorial?

Primeiro, importe a fonte 'Raleway':

<link href='http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>

Depois, vamos colocar o CSS:

/* Frases aleatórias por braziliandesigner.tumblr.com */ #phrases {float: left; position: relative; width: 280px; padding: 10px; background-color: #fff; margin: 5px; box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -webkit-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -moz-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -o-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px;} #phrases h1 {font-family: 'Raleway', sans-serif; font-size: 13px; text-transform: uppercase; color: #777; text-align: left; float: left; width: 100%; margin-top: -10px; padding: 10px 0px 10px 10px; text-align: center; font-weight: 700; background-image: url('http://static.tumblr.com/ho7bg63/256nc4ovq/text.png'); background-repeat: no-repeat; background-size: 12px; background-position: left 65px top 11px;} #phrases p {float: left; width: 100%; margin-top: 10px; font-family: 'Raleway', sans-serif; font-weight: 300; font-size: 13px; color: #999; text-align: center; line-height: 20px; transition: 0.8s all; -webkit-transition: 0.8s all; -moz-transition: 0.8s all; -o-transition: 0.8s all;} #phrases p:hover {opacity: 0.6;} #phrases .sep {position: relative; width: 280px; width: 240px; border-bottom: 1px solid #f5f5f5; margin: 25px auto 0px auto;} #phrases .sep div.center {position: absolute; width: 50px; border-bottom: 4px solid #777; margin: -2.5px auto 0px 95px;}

Agora, o código HTML e Javascript onde queremos que a caixa fique (normalmente, na sidebar):

<div id="phrases"> <h1>Frases aleatórias</h1> <div class="sep"><div class="center"></div></div> <script language="JavaScript"> phrases = new Array(4) phrases[0] = "<p>Coloque sua frase aqui.</p>" phrases[1] = "<p>Coloque sua frase aqui.</p>" phrases[2] = "<p>Coloque sua frase aqui.</p>" phrases[3] = "<p>Coloque sua frase aqui.</p>" phrases[4] = "<p>Coloque sua frase aqui.</p>" aleatorio = Math.random() * (phrases.length) aleatorio = Math.floor(aleatorio) document.write(phrases[aleatorio]) </script> </div>

Por últimos, vamos fazer algumas modificações:

Ajuste o margin na div #phrases;

Coloque suas frases nos locais indicados.

Dica: Caso queira adicionar mais frases - são 5 ao todo -, copie uma linha do código phrases e substitua o número (0, 1, 2, 3 ou 4) por um maior.

Se usar ou gostar, dê like.

[braziliandesigner]

Como colocar sidebar no theme

Vamos ensinar a colocar uma sidebar/barra lateral que, apesar de muito simples de fazer, as pessoas que não têm muito costume com CSS e HTML podem acabar desconfigurando todo o layout do seu theme.

Primeiro, vamos levar em conta que existem duas posições para ela: esquerda (left) e direita (right). Sabendo disso, usaremos o float para posicionar, sempre lembrando que a posição da sua sidebar deve ser diferente da do seu conteúdo, ou seja, float: left; para ela e float: right; para os posts.

Vejamos um exemplo simples de uma sidebar na esquerda:

#sidebar {float: left; position: relative; width: 300px; height: auto; margin: 0px;}

No caso de usar o exemplo acima, você não verá uma caixa ou algo parecido, apenas está definindo o tamanho do local onde seus widgets ficarão, ok?

Supondo que você talvez esteja procurando por uma sidebar fixa, vamos ao exemplo de código:

#sidebar {float: left; position: fixed; width: 300px; height: auto; margin: 0px;}

Agora, depois de adicionar nosso código ao style, vamos colocar o HTML acima da div dos posts:

<div id="sidebar"> <! Seu conteúdo aqui !> </div>

Depois de definir onde a sidebar ficará, é hora de colocar as coisas. Aqui no blog temos várias caixas de moderadores, parceiros e etc para colocar no seu theme.

Qualquer dúvida, pergunte na ask.

[braziliandesigner]

Caixa 'About & Menu'

Hoje ensinaremos a fazer a caixa 'About & Menu', uma caixa de perfil para falar sobre você/seu blog e com um menu.

(Clique nas imagens para ver melhor.)

Nas imagens acima é possível vê-la, bem como o menu que é aberto ao clicar no botão. Vamos ao tutorial?

Primeiro, importe a fonte 'Raleway':

<link href='http://fonts.googleapis.com/css?family=Raleway:400,900,800,700,600,500,300,200,100' rel='stylesheet' type='text/css'>

Importe também o Jquery e o código Javascript:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> jQuery.fn.toggleText = function(a,b) { return this.html(this.html().replace(new RegExp("("+a+"|"+b+")"),function(x){return(x==a)?b:a;})); } $(document).ready(function(){ $('.nav').before('<span><button></button></span>'); $('.nav').css('display', 'none') $('span', '#menu').click(function() { $(this).next().slideToggle('slow') .siblings('.nav:visible').slideToggle('fast'); // aqui começa o funcionamento do plugin $(this).toggleText('Revelar','Esconder') .siblings('span').next('.nav:visible').prev() .toggleText('Revelar','Esconder') }); }) </script>

Depois, o CSS:

/* Caixa 'About & Menu' por braziliandesigner.tumblr.com */ #sobre {float: left; position: relative; width: 300px; margin: 0px;} #sobre span.photo {float: left; position: relative; width: 40px; height: 40px; background-color: #eee; margin: 0px 10px 0px 0px; overflow: hidden; border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -moz-border-radius: 3px;} #sobre span.photo img {width: 40px;} #sobre h2 {font-family: 'Raleway', sans-serif; text-shadow: 1px 1px 0px rgba(0,0,0,0.1); font-size: 13px; text-transform: uppercase; color: #fff; line-height: 20px;} #sobre span.meta {font-family: 'Raleway', sans-serif; font-weight: 300; font-size: 13px; color: #fff; line-height: 20px; background-image: url('http://static.tumblr.com/ho7bg63/428nbe9fg/user_2.png'); background-size: 10px; background-position: center left; background-repeat: no-repeat; padding-left: 15px; text-shadow: 1px 1px 0px rgba(0,0,0,0.1);} #sobre span.meta a {font-weight: 600; text-decoration: none; color: #fff;} #sobre .header {float: left; position: relative; width: 280px; padding: 10px; margin: 0px 0px 5px 0px; background-image: url('linkdasuacapa'); background-color: #fff; width: 280px; padding: 9px 10px 9px 10px; box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -webkit-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -moz-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -o-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -moz-border-radius: 3px;} #sobre .header .capa {float: left; position: relative; width: 260px; padding: 10px; background-color: rgba(0,0,0,0.3); border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -moz-border-radius: 3px;} #sobre p {float: left; position: relative; width: 255px; padding: 10px 10px 10px 30px; font-family: 'Raleway', sans-serif; font-weight: 300; font-size: 13px; color: #777; line-height: 20px; text-align: justify; background-color: #fff; box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -webkit-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -moz-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -o-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -moz-border-radius: 3px; border-left: 5px solid #4e4e50; background-image: url('http://static.tumblr.com/ho7bg63/ISBnbe600/left_quote-512.png'); background-size: 10px; background-position: top 15px left 10px; background-repeat: no-repeat;} #sobre #menu {float: right; position: relative;} #sobre #menu button {cursor: pointer; border: none; outline: none; width: 40px; height: 40px; background-color: #fff; border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -moz-border-radius: 3px; float: right; position: absolute; right: 0px; top: 0px; background-image: url('http://static.tumblr.com/ho7bg63/RXinbe5z3/very-basic-menu-icon.png'); background-size: 15px; background-position: center; background-repeat: no-repeat; box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -webkit-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -moz-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -o-box-shadow: 1px 1px 0px rgba(0,0,0,0.1);} #sobre #menu button:focus {background-color: #eee;} #sobre #menu .nav {float: right; position: absolute; top: 0px; right: 0px;} #sobre #menu .nav ul {float: right; position: absolute; top: -10px; right: -120px; width: 90px;} #sobre #menu .nav ul li {float: left;} #sobre #menu .nav ul li a {float: left; width: 70px; background-color: #4e4e50; background-image: url('http://static.tumblr.com/ho7bg63/YRBnbe8bk/blur.png');margin-bottom: 3px; padding: 5px 10px; border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -moz-border-radius: 3px; color: #fff; text-decoration: none; text-transform: uppercase; text-shadow: 1px 1px 0px rgba(0,0,0,0.1); line-height: 20px; font-family: 'Raleway', sans-serif; font-weight: 300; font-size: 12px; transition: 0.8s all; -webkit-transition: 0.8s all; -moz-transition: 0.8s all; -o-transition: 0.8s all; box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -webkit-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -moz-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -o-box-shadow: 1px 1px 0px rgba(0,0,0,0.1);} #sobre #menu .nav ul li a:hover {opacity: 0.8;}

Agora, o código HTML na sua sidebar:

<div id="sobre"> <div class="header"><div class="capa"> <div id="menu"> <div class="nav"> <ul> <li><a href="link">Início</a></li> <li><a href="link">Ask</a></li> <li><a href="link">Arquivos</a></li> <li><a href="link">Submit</a></li> </ul> </div> </div> <span class="photo"><img src="linkdasuafotodeperfil" /></span> <h2>Nome do seu Tumblr</h2> <span class="meta"><script language="JavaScript"> var ref = (''+document.referrer+''); var w_h = window.screen.width + " x " + window.screen.height; document.write('<script src="http://s1.freehostedscripts.net/ocounter.php?site=ID4030496&e1=&e2=&r=' + ref + '&wh=' + w_h + '"><\/script>'); </script> online</span> </div></div> <p>Uma frase de efeito ou uma pequena descrição.</p> </div>

Por último, vamos fazer algumas modificações:

Sabendo o tamanho de 300 pixels da mesma, ajuste o margin na div #sobre;

Coloque a imagem de capa (300px x 78px) na div .capa;

Coloque os links de cada item no menu;

Coloque o link da sua foto de perfil (40px x 40px) no local indicado;

Coloque o nome do seu Tumblr no local indicado;

Coloque o sua frase de efeito ou pequena descrição no local indicado.

Se usar ou gostar, dê like.

[braziliandesigner]

Caixa 'Status'

Hoje vamos ensinar a fazer a caixa 'Status', muito usada por Tumblrs de HTML, onde você coloca informações sobre o seu blog.

(Clique nas imagens para ver melhor.)

Nas imagens acima é possível vê-la e descobrir que ela é um pouco diferente das outras, mas mesmo assim não deixando de ser bonita. Vamos ao tutorial?

Primeiro, importe a fonte 'Raleway':

<link href='http://fonts.googleapis.com/css?family=Raleway:400,900,800,700,600,500,300,200,100' rel='stylesheet' type='text/css'>

Depois, o CSS:

/* Caixa 'Status' por braziliandesigner.tumblr.com */ #status {float: left; position: relative; margin: 5px; background-color: #fff; width: 280px; padding: 9px 10px 9px 10px; box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -webkit-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -moz-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -o-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -moz-border-radius: 3px;} #status p {font-family: 'Raleway', sans-serif; background-color: #fff; font-size: 13px; font-weight: 300; color: #777; text-align: justify; line-height: 20px; float: left; width: 258px; padding: 5px 10px; border: 1px solid #f5f5f5; margin: 1px 0px 1px; border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -moz-border-radius: 3px; transition: 0.8s all; -webkit-transition: 0.8s all; -moz-transition: 0.8s all; -o-transition: 0.8s all;} #status p strong {font-weight: 600;} #status p:hover {background: #fdfdfd;} #status p a {text-decoration: none; color: #5F9EA0; transition: 0.8s all; -webkit-transition: 0.8s all; -moz-transition: 0.8s all; -o-transition: 0.8s all;} #status p a:hover {opacity: 0.8;} #status .photo {float: left; position: relative; width: 40px; height: 40px; overflow: hidden; border-radius: 40px; -webkit-border-radius: 40px; -moz-border-radius: 40px; -o-border-radius: 40px; margin-top: 0px; margin-bottom: 8px;} #status .photo img {width: 40px; border-radius: 40px; -webkit-border-radius: 40px; -moz-border-radius: 40px; -o-border-radius: 40px; transition: 0.8s all; -webkit-transition: 0.8s all; -moz-transition: 0.8s all; -o-transition: 0.8s all;} #status .photo img:hover {opacity: 0.8;} #status h1 {width: 200px;font-family: 'Raleway', sans-serif; font-size: 15px; font-weight: 600; color: #555; float: left; margin: 0px 10px 2px 10px; line-height: 20px;} #status span.url {font-family: 'Raleway', sans-serif; font-size: 13px; font-weight: 300; color: #555; float: left; margin: 0px 10px 10px 10px; line-height: 20px; background-image: url('http://static.tumblr.com/ho7bg63/JR9nb8bqg/programming-external-link-icon__1_.png'); background-repeat: no-repeat; background-size: 10px; background-position: left center; padding-left: 15px; transition: 0.8s all; -webkit-transition: 0.8s all; -moz-transition: 0.8s all; -o-transition: 0.8s all;} #status span.url:hover {color: #5F9EA0;}

Agora, o código HTML onde você quer que a caixa fique:

<div id="status"> <span class="photo"><img src="{PortraitURL-64}" /></span> <h1>Nome do blog</h1> <a target="_blank" href="url.tumblr.com/sobre"><span class="url">Sobre nós</span></a> <p><strong>Desde:</strong> Mês de Ano</p> <p><strong>Moderador:</strong> Nome(s)</p> <p><strong>Versão:</strong> Sua versão</p> <p><strong>Online:</strong> <script language="JavaScript"> var ref = (''+document.referrer+''); var w_h = window.screen.width + " x " + window.screen.height; document.write('<script src="http://s1.freehostedscripts.net/ocounter.php?site=ID4030496&e1=&e2=&r=' + ref + '&wh=' + w_h + '"><\/script>'); </script></p> </div>

Por último, vamos fazer algumas mudanças:

Sabendo do tamanho de 300 pixels da caixa, edite o margin na div #status;

Coloque o nome dos seu Tumblr no local indicado;

Coloque um link para a página 'sobre o seu blog' no local indicado;

Caso exista mais de um moderador, mude o texto dentro da tag strong para "Moderadores";

Complete as informações de "Desde", "Moderador(es)" e "versão".

Se usar ou gostar, dê like.

[braziliandesigner]

Caixa 'Parceiros & Afiliados'

Vamos ensinar a fazer a caixa 'Parceiros & Afiliados', que como o nome já diz, é para você colocar as parcerias do seu blog.

(Clique nas imagens para ver melhor.)

Nas imagens acima é possível ver que ela é bem simples, com duas repartições e um efeito hover quando o mouse é passado sobre as imagens. Vamos ao tutorial?

Primeiro, importe a fonte 'Raleway':

<link href='http://fonts.googleapis.com/css?family=Raleway:400,900,800,700,600,500,300,200,100' rel='stylesheet' type='text/css'>

Depois, o CSS:

/* Caixa 'Parceiros & Afiliados' por braziliandesigner.tumblr.com */ #parceiros {float: left; position: relative; width: 300px; padding: 10px 0px 10px 0px; background-color: #fff; margin: 0px; box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -webkit-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -moz-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -o-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -moz-border-radius: 3px;} #parceiros ul {float: left;background-color: #fdfdfd; transition: 0.8s all; -webkit-transition: 0.8s all; -moz-transition: 0.8s all; -o-transition: 0.8s all; border-top: 1px solid rgba(0,0,0,0.1); border-bottom: 1px solid rgba(0,0,0,0.1); padding: 5px 0px 5px; margin-bottom: 10px;} #parceiros ul:hover li img {opacity: 0.5;} #parceiros ul li {float: left; width: 75px; height: 75px; margin-bottom: 0px; overflow: hidden; border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -moz-border-radius: 3px;} #parceiros ul li img {width: 75px; height: 75px; transition: 0.8s all; -webkit-transition: 0.8s all; -moz-transition: 0.8s all; -o-transition: 0.8s all;} #parceiros ul li img:hover {opacity: 1;} #parceiros h2 {font-family: 'Raleway', sans-serif; font-size: 13px; text-transform: uppercase; color: #777; text-align: left; float: left; width: 100%; margin-top: -10px; padding: 10px 27px 10px; font-weight: 700; background-image: url('http://static.tumblr.com/ho7bg63/0rZnb5gsi/users-icon.png'); background-repeat: no-repeat; background-size: 12px; background-position: left 10px center;} select#afiliados {width: 280px; height: 25px; font-family: 'Raleway', sans-serif; font-weight: 300; border: 1px solid rgba(0,0,0,0.1); background: #fff; padding: 0px; color: #777; outline: none; border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -moz-border-radius: 3px; margin-left: 10px;} select#afiliados option {height: 25px; background: #f5f5f5; color: #777; outline: none; border-radius: 3px;}

Agora, o código HTML onde você deseja que a caixa fique:

<div id="parceiros"> <h2>Parceiros & Afiliados</h2> <ul> <li><a href="urldoseuparceiro"><img src="linkdafotodoseuparceiro" /></a></li> <li><a href="urldoseuparceiro"><img src="linkdafotodoseuparceiro" /></a></li> <li><a href="urldoseuparceiro"><img src="linkdafotodoseuparceiro" /></a></li> <li><a href="urldoseuparceiro"><img src="linkdafotodoseuparceiro" /></a></li> <li><a href="urldoseuparceiro"><img src="linkdafotodoseuparceiro" /></a></li> <li><a href="urldoseuparceiro"><img src="linkdafotodoseuparceiro" /></a></li> <li><a href="urldoseuparceiro"><img src="linkdafotodoseuparceiro" /></a></li> <li><a href="urldoseuparceiro"><img src="linkdafotodoseuparceiro" /></a></li> </ul> <select id="afiliados" name="afiliados"> <option value="">Afiliados</option> <option value="">-</option> <option value="url" target="blank">Nome do Tumblr</option> <option value="url" target="blank">Nome do Tumblr</option> <option value="url" target="blank">Nome do Tumblr</option> <option value="url" target="blank">Nome do Tumblr</option> <option value="url" target="blank">Nome do Tumblr</option> </select> <script type="text/javascript"> var urlmenu = document.getElementById( 'afiliados' ); urlmenu.onchange = function() { window.open( this.options[ this.selectedIndex ].value ); }; </script> </div>

Por último, vamos fazer algumas modificações:

Levando em conta o tamanho de 300 pixels de largura da caixa, ajuste o margin na div #parceiros;

Coloque a url do seu parceiro lo local indicado;

Coloque o link da imagem dos seu parceiro no local indicado;

Coloque a url do seu afiliado no local indicado;

Coloque o nome do seu afiliado no local indicado.

Se usar ou gostar, dê like.

[braziliandesigner]

[Download] 24 Ícones Sociais

Estamos disponibilizando para download, 24 ícones sociais feitos por mim, que devem ser creditados ao blog.

Na imagem acima é possível vê-los, sendo de diversas redes sociais, incluindo o Twitter, Facebook, Tumblr, Youtube e etc. Pelo fato de serem brancos, eles combinam com praticamente todos os themes.

Todos os ícones tem o tamanho de 60px x 60px, mas você pode diminuir no Photoshop ou até mesmo na hora de usar;

Todos estão no formato .png e separados em uma pasta;

Não retire nossos créditos, por favor.

Quer saber como baixar? Simples, clique aqui. 

[braziliandesigner]

Esse tumblr e esse conteúdo é maravilhoso! Moverei vocês para parceria, o que acham? Estão de parabéns.

Ótimo, muito obrigado! Também gostamos muito de vocês ;D

[braziliandesigner]

50 postagens!

[braziliandesigner]

Caixa 'About'

Hoje vamos ensinar a fazer a caixa 'About', que nada mais é do que um lugar para você falar sobre si mesmo(a), para seus leitores, em poucas palavras.

(Clique nas imagens para ver melhor.)

Nas imagens acima é possível vê-la, bem neutra mas com um toque de cor que dá destaque. Também possui um efeito muito legal ao passar o mouse, que é responsável por mostrar as informações. Vamos ao tutorial?

Primeiro, importe a fonte 'Raleway':

<link href='http://fonts.googleapis.com/css?family=Raleway:400,900,800,700,600,500,300,200,100' rel='stylesheet' type='text/css'>

Depois, o CSS:

/* Caixa 'About' por braziliandesigner.tumblr.com */ #about {float: left; position: relative; width: 300px; height: 200px; background-color: #fff; margin: 05px; box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -webkit-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -o-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -moz-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; overflow: hidden;} #about .cover {width: 300px; height: 200px; position: absolute; top: 0px; left: 0px; background-image: url('linkdasuaimagemdecapa'); background-size: 300px; transition: 0.8s all; -webkit-transition: 0.8s all; -moz-transition: 0.8s all; -o-transition: 0.8s all; opacity: 1; z-index: 9999; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; z-index: 0;} #about:hover .cover {-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%);} #about .name {font-family: 'Raleway', sans-serif; font-weight: 600; font-size: 13px; float: left; background-image: url('http://static.tumblr.com/ho7bg63/hPwnb3kkq/users-name-icon.png'); background-size: 10px; background-position: left 5px center; background-repeat: no-repeat; position: absolute; background-color: #fff; color: #333; padding: 5px 10px 5px 20px; top: -150px; left: 68px; transition: 0.8s all; -webkit-transition: 0.8s all; -moz-transition: 0.8s all; -o-transition: 0.8s all; box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -webkit-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -o-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -moz-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); border-radius: 0px 5px 5px 0px; -webkit-border-radius: 0px 5px 5px 0px; -moz-border-radius: 0px 5px 5px 0px; -o-border-radius: 0px 5px 5px 0px;} #about .blog {font-family: 'Raleway', sans-serif; font-weight: 300; font-size: 13px; float: left; background-image: url('http://static.tumblr.com/ho7bg63/wqqnb3kqm/rss-basic-icon.png'); background-size: 10px; background-position: left 5px center; background-repeat: no-repeat; position: absolute; background-color: #D2691E; color: #fff; padding: 5px 10px 5px 20px; top: 40px; left: 350px; transition: 0.8s all; -webkit-transition: 0.8s all; -moz-transition: 0.8s all; -o-transition: 0.8s all; box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -webkit-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -o-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -moz-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); border-radius: 0px 5px 5px 0px; -webkit-border-radius: 0px 5px 5px 0px; -moz-border-radius: 0px 5px 5px 0px; -o-border-radius: 0px 5px 5px 0px;} #about .blog a {color: #fff; text-decoration: none; transition: 0.8s all; -webkit-transition: 0.8s all; -moz-transition: 0.8s all; -o-transition: 0.8s all;} #about .blog a:hover {text-shadow: 1px 1px 0px rgba(0,0,0,0.3);} #about .photo {float: left; position: absolute; top: 10px; left: -100px; width: 50px; height: 50px; background-image: url('linkdasuaimagem'); background-size: 50px; transition: 0.8s all; -webkit-transition: 0.8s all; -moz-transition: 0.8s all; -o-transition: 0.8s all; box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -webkit-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -o-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -moz-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); border: 4px solid #fff; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px;} #about .text {float: left; position: absolute; width: 260px; left: 10px; bottom: -250px; padding: 10px; background-color: rgba(0,0,0,0.3); border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; transition: 0.8s all; -webkit-transition: 0.8s all; -moz-transition: 0.8s all; -o-transition: 0.8s all;} #about .text:hover {background-color: rgba(0,0,0,0.4);} #about .text p {text-align: justify; color: #fff; line-height: 20px; font-family: 'Raleway', sans-serif; font-weight: 300; font-size: 13px;} #about:hover .photo {left: 10px;} #about:hover .name {top: 13px;} #about:hover .blog {left: 68px;} #about:hover .text {bottom: 10px;}

Agora, o código HTML no local desejado:

<div id="about"><div class="cover"></div> <span class="photo"></span> <span class="name">Seu nome</span> <span class="blog"><a target="_blank" title="Clique para visitar" href="http://seublog.tumblr.com">seublog.tumblr.com</a></span> <div class="text"> <p>Sua descrição.</p> </div> </div>

Também faremos algumas modificações:

Edite o margin na div #about;

Coloque o link da sua imagem de capa (300px por 200px), no local indicado da div .cover;

Coloque o link da sua imagem de perfil (50px x 50px), no local indicado da div .photo.

Coloque seu nome no local indicado;

Coloque sua descrição no local indicado.

Se usar ou gostar, dê like.

[braziliandesigner]

Estilo de barra de busca

Anteriormente já havíamos ensinado a colocar a barra de busca no Tumblr, até disponibilizamos o CSS da que usamos aqui no blog. Hoje vamos ensinar a fazer um estilo bem parecido e que vai ficar ótimo em qualquer theme.

Como é possível ver na imagem acima, ela é realmente bem simples e dá certo em qualquer layout pelo fato de ser escura e de cor neutra. Vamos ao tutorial?

Primeiro, importe a fonte 'Raleway':

<link href='http://fonts.googleapis.com/css?family=Raleway:400,900,800,700,600,500,300,200,100' rel='stylesheet' type='text/css'>

Agora, adicione o CSS:

/* Barra de busca por braziliandesigner.tumblr.com */ form#search {float: left; position: relative; width: 300px; margin: 0px;} form#search #search_box {font-family: 'Raleway', sans-serif; font-weight: 300; color: #777; font-size: 13px; float: left; position: relative; width: 220px; height: auto; padding: 8px 10px; background-color: #fff; outline: none; border: none; box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -webkit-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -moz-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -o-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px;} form#search #search_submit {font-family: 'Raleway', sans-serif; font-weight: 700; text-transform: uppercase; font-size: 13px; color: #fff; cursor: pointer; float: right; padding: 8px 10px; background: rgba(54,54,54,1); background: -moz-linear-gradient(45deg, rgba(54,54,54,1) 0%, rgba(0,0,0,1) 100%); background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(54,54,54,1)), color-stop(100%, rgba(0,0,0,1))); background: -webkit-linear-gradient(45deg, rgba(54,54,54,1) 0%, rgba(0,0,0,1) 100%); background: -o-linear-gradient(45deg, rgba(54,54,54,1) 0%, rgba(0,0,0,1) 100%); background: -ms-linear-gradient(45deg, rgba(54,54,54,1) 0%, rgba(0,0,0,1) 100%); background: linear-gradient(45deg, rgba(54,54,54,1) 0%, rgba(0,0,0,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#363636', endColorstr='#000000', GradientType=1 ); outline: none; border: none; box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -webkit-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -moz-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -o-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px;}

Depois, o coloque o código HTML onde você deseja que a barra fique:

<form action="/search" method="get" id="search"> <input id="search_box" placeholder="Pesquise algo..." type="text" name="q" value="{SearchQuery}"/> <input id="search_submit" type="submit" value="Buscar" alt="Buscar" /> </form>

Por último, vamos fazer tomar nota de algumas coisas:

Edite o margin na form #search;

Caso queira, mude "Pesquise algo..." pelo texto que preferir.

Se usar ou gostar, dê like.

[braziliandesigner]

Theme para Reforma

Hoje é o dia em que disponibilizaremos o nosso primeiro theme, mas infelizmente não é para o uso habitual, para suas postagens. É um theme para reforma feito por mim, que deve ser creditado ao Brazilian Designer.

Imagem 2, Imagem 3, Imagem 4

Acima é possível ver como é ele, bem simples, mas com espaço para falar sobre o blog, autores e colocar seus parceiros.

Quer saber como você pode baixar? Simples, clique aqui e copie e substitua o código atual do seu Tumblr/Customize por ele.

Não se esqueça de, ao mudar o theme, completar com os links de imagens e informações que são necessárias.

Não retire nossos créditos, por favor!

[braziliandesigner]

Caixa do Autor

Vamos ensinar a fazer a Caixa do Autor, que ao contrário da Caixa de Moderador, é mais indicada para blogs pessoais, pois eles podem ter um espaço maior e mais dedicado à si mesmos.

(Clique nas imagens para ver melhor.)

Como é possível ver acima, ela possui 320 pixels de largura, é bem "grande" para a maioria dos blogs, mas não que isso seja um problema. Também conta com 5 links sociais e um para sua biografia (descrição). Vamos ao tutorial?

Primeiro, importe a fonte 'Raleway':

<link href='http://fonts.googleapis.com/css?family=Raleway:400,900,800,700,600,500,300,200,100' rel='stylesheet' type='text/css'>

Agora, o CSS:

/* Caixa do Autor por braziliandesigner.tumblr.com */ #author {margin: 0px; float: left; position: relative; width: 300px; padding: 10px; background-color: #fff; box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -webkit-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -moz-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -o-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; overflow: hidden;} #author p {font-size: 13px; font-family: 'Raleway', sans-serif; font-weight: 300; text-align: center; color: #777; line-height: 20px;} #author span.name {width: 300px; float: left; position: relative; font-family: 'Raleway', sans-serif; font-size: 16px; font-weight: 600; color: #555; text-align: center; margin-bottom: 5px;} #author .header {float: left; width: 320px; height: 100px; background-image: url('linkdasuacapa'); background-size: 320px; background-position: top -80px center; position: relative; border-bottom: 5px solid rgba(0,0,0,0.1); margin-top: -10px; margin-left: -10px; margin-bottom: 25px;} #author .header .photo {width: 70px; height: 70px; position: absolute; background-image: url('linkdasuafoto'); background-size: 70px; margin: 40px 0px 0px 120px; border: 5px solid #fff; box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -webkit-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -moz-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -o-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px;} #author .social {width: 300px; float: left; margin-left: -10px; margin-bottom: -10px;border-top: 1px solid rgba(0,0,0,0.1); margin-top: 10px; padding: 10px;} #author .social .twitter {width: 20px; height: 20px; float: left; position: relative; margin-right: 5px; background-image: url('http://static.tumblr.com/ho7bg63/vgXnazbam/web-twitter-alt-2-metro-icon__1_.png'); background-size: 20px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px;} #author .social .facebook {width: 20px; height: 20px; float: left; position: relative; margin-right: 5px; background-image: url('http://static.tumblr.com/ho7bg63/8uGnazbc0/facebook-icon__1_.png'); background-size: 20px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px;} #author .social .googleplus {width: 20px; height: 20px; float: left; position: relative; margin-right: 5px; background-image: url('http://static.tumblr.com/ho7bg63/Z67nazbct/web-google-plus-alt-metro-icon__1_.png'); background-size: 20px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px;} #author .social .blog {width: 20px; height: 20px; float: left; position: relative; margin-right: 5px; background-image: url('http://static.tumblr.com/ho7bg63/Zwhnazbdc/tumblr-icon.png'); background-size: 20px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px;} #author .social .youtube {width: 20px; height: 20px; float: left; position: relative; margin-right: 5px; background-image: url('http://static.tumblr.com/ho7bg63/88hnazbdx/youtube-icon.png'); background-size: 20px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px;} #author .social span {transition: 0.8s all; -webkit-transition: 0.8s all; -moz-transition: 0.8s all; -o-transition: 0.8s all;} #author .social span:hover {opacity: 0.8;} #author .social .sobre {position: absolute; right: 10px; margin-top: -1.5px; float: right; font-size: 13px; text-transform: uppercase; text-decoration: none; color: #555; font-family: 'Raleway', sans-serif; font-weight: 300; padding: 3px 5px; border: 1px solid rgba(0,0,0,0.1); border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; transition: 0.8s all; -webkit-transition: 0.8s all; -moz-transition: 0.8s all; -o-transition: 0.8s all;} #author .social .sobre:hover {background-color: #2E8B57; color: #fff;}

Depois, o código HTML no local desejado:

<div id="author"> <div class="header"><span class="photo"></span></div> <span class="name">Seu nome</span> <p>"Uma frase que lhe descreva."</p> <div class="social"> <a href="linkdotwitter"><span class="twitter"></span></a> <a href="linkdofacebook"><span class="facebook"></span></a> <a href="linkdogoogleplus"><span class="googleplus"></span></a> <a href="linkdoseublog"><span class="blog"></span></a> <a href="linkdoyoutube"><span class="youtube"></span></a> <a href=""><span class="sobre">Biografia +</span></a> </div> </div>

Por último, vamos fazer algumas modificações:

Ajuste a margin na div #author;

Coloque o link da sua capa (320px x 100px) no local indicado;

Coloque o link da sua foto (70px x 70px) no local indicado;

Coloque seu nome no local indicado;

Coloque uma frase (pequena) que lhe descreva no local indicado;

Coloque o link de cada rede social nos locais indicados.

Se usar ou gostar, dê like.

[braziliandesigner]

FAQ com o Jquery Accordion

Hoje vamos ensinar a fazer uma FAQ com o Jquery Accordion. Para quem não sabe, FAQ - ou Perguntas Frequentes - é uma seção de dúvidas e respostas sobre determinado tema.

(Clique na imagem para ver melhor.)

Na imagem acima você pôde ver como ela é; bem organizada e, apesar de simples, elegante para qualquer theme/layout. Vamos ao tutorial?

Primeiro, importe a fonte 'Raleway':

<link href='http://fonts.googleapis.com/css?family=Raleway:400,900,800,700,600,500,300,200,100' rel='stylesheet' type='text/css'>

Depois, ainda na tag head, o Jquery, o Jquery Accordion e o Javascript responsável pelo funcionamento da mesmo:

<script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script> <script> $(function() { $( "#accordion" ).accordion({ heightStyle: "content" }); }); </script>

Agora, o CSS:

/* FAQ por braziliandesigner.tumblr.com */ #accordion {margin: 0px; float: left; position: relative; width: 500px; height: auto; padding: 10px 10px 5px 10px; background-color: #fff; box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -webkit-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -moz-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -o-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px;} #accordion h3 {cursor: pointer; font-size: 13px; font-family: 'Raleway', sans-serif; font-weight: 600; color: #fff; padding: 5px 10px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; background-color: #5F9EA0; margin-bottom: 5px;} #accordion div {position: relative; height: auto; background-color: #fefefe; border: 1px solid rgba(0,0,0,0.1); padding: 10px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; margin-bottom: 5px;} #accordion div:after {content: ''; border: 5px solid transparent; border-top-color: #5F9EA0; position: absolute; top: -7px;} #accordion div p {height: auto; margin-bottom: 0px; font-family: 'Raleway', sans-serif; color: #777; font-weight: 300; font-size: 13px; line-height: 20px; text-align: justify;} #accordion div li {list-style: circle inside; font-family: 'Raleway', sans-serif; color: #555; font-weight: 600; font-size: 13px; line-height: 20px;}

Por último, o código HTML no local onde você deseja que a caixa da FAQ fique:

<div id="accordion"> <h3>Pergunta nº1</h3> <div> <p> Sua resposta. </p> </div> <h3>Pergunta nº2</h3> <div> <p> Sua resposta. </p> </div> <h3>Pergunta nº3</h3> <div> <p> Sua resposta. </p> </div> <h3>Pergunta nº4</h3> <div> <p> Sua resposta. </p> </div> </div>

Vamos fazer algumas modificações:

Tendo em mente o tamanho de 520 pixels da caixa, edite o margin na div #accordion;

Coloque o nome de sua pergunta em 'Pergunta nº1, nº2...';

Coloque a resposta para cada pergunta no local indicado;

Se quiser adicionar mais perguntas, copie de 'h3' até '</div>' e complete com as respectivas informações.

Se usar ou gostar, dê like.

[braziliandesigner]

Caixa de Redes Sociais

O tutorial de hoje é sobre a Caixa de Redes Sociais, onde você pode facilmente divulgar seus link sociais do Twitter, Facebook e Google + (Google Plus).

(Clique nas imagens para ver melhor.)

Acima você pode ver como a caixa é e, se quiser usá-la, terá de dispor de um espaço de 300 pixels de largura do seu theme/layout.

O primeiro passo é importar a fonte 'Open Sans':

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,800,700,600,300' rel='stylesheet' type='text/css'>

Agora, o CSS:

/* Caixa de Redes Sociais por braziliandesigner.tumblr.com */ #sociais {float: left; position: relative; width: 280px; margin: 0px; background-color: #fff; background-image: url('linkdaimagemdefundo'); background-size: 300px; padding: 10px; box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -webkit-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -moz-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -o-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px;} #sociais .twitter {width: 280px; height: 50px; background-color: #19bfe5; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; margin-bottom: 10px; background-image: url('http://static.tumblr.com/ho7bg63/3t7nau04n/web-twitter-alt-2-metro-icon.png'); background-size: 30px; background-position: left 10px center; background-repeat: no-repeat; transition: 0.8s all; -webkit-transition: 0.8s all; -moz-transition: 0.8s all; -o-transition: 0.8s all;} #sociais .twitter:hover {-webkit-filter: grayscale(50%); -moz-filter: grayscale(50%); opacity: 0.8;} #sociais .twitter h1 {border-left: double rgba(0,0,0,0.1); padding-left: 10px; font-size: 13px; font-family: 'Open Sans', sans-serif; font-weight: 300; float: left; color: #fff; margin: 15px 0px 0px 50px;} #sociais .facebook {width: 280px; height: 50px; background-color: #4c70aa; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; margin-bottom: 10px; background-image: url('http://static.tumblr.com/ho7bg63/n9vnau05q/facebook-icon.png'); background-size: 30px; background-position: left 10px center; background-repeat: no-repeat; transition: 0.8s all; -webkit-transition: 0.8s all; -moz-transition: 0.8s all; -o-transition: 0.8s all;} #sociais .facebook:hover {-webkit-filter: grayscale(50%); -moz-filter: grayscale(50%); opacity: 0.8;} #sociais .facebook h1 {border-left: double rgba(0,0,0,0.1); padding-left: 10px; font-size: 13px; font-family: 'Open Sans', sans-serif; font-weight: 300; float: left; color: #fff; margin: 15px 0px 0px 50px;} #sociais .googleplus {width: 280px; height: 50px; background-color: #d64136; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; background-image: url('http://static.tumblr.com/ho7bg63/ws6nau06d/web-google-plus-alt-metro-icon.png'); background-size: 30px; background-position: left 10px center; background-repeat: no-repeat; transition: 0.8s all; -webkit-transition: 0.8s all; -moz-transition: 0.8s all; -o-transition: 0.8s all;} #sociais .googleplus:hover {-webkit-filter: grayscale(50%); -moz-filter: grayscale(50%); opacity: 0.8;} #sociais .googleplus h1 {border-left: double rgba(0,0,0,0.1); padding-left: 10px; font-size: 13px; font-family: 'Open Sans', sans-serif; font-weight: 300; float: left; color: #fff; margin: 15px 0px 0px 50px;}

Depois, coloque o código HTML onde você quer que a caixa fique:

<div id="sociais"> <a href="linkdotwitter"><div class="twitter"><h1><strong>Siga</strong> e leia os nossos tuítes</h1></div></a> <a href="linkdofacebook"><div class="facebook"><h1><strong>Curta</strong> e receba atualizações</h1></div></a> <a href="linkdogoogleplus"><div class="googleplus"><h1>Dê <strong>+1</strong> e fique por dentro de tudo</h1></div></a> </div>

Agora vamos fazer algumas modificações:

Ajuste a posição da caixa no margin;

Coloque sua imagem de fundo no local indicado da div #sociais;

Coloque o link das redes sociais nos locais indicados.

Se usar ou gostar, dê like.

[braziliandesigner]

Caixa de Moderador

Já postamos aqui algumas coisas para os moderadores usarem em seus blogs para se divulgarem, falarem um pouco sobre si mesmos e etc. O tutorial de hoje vai ser, também, sobre isso; uma Caixa de Moderador.

(Clique nas imagens para ver melhor.)

Acima vocês puderam ver como ela é e que, apesar de bem simples, tem abas para colocar sua descrição e status. Vamos ao tutorial?

Primeiro, importe a fonte 'Raleway' para dentro da sua tag head:

<link href='http://fonts.googleapis.com/css?family=Raleway:400,900,800,700,600,500,300,200,100' rel='stylesheet' type='text/css'>

Ainda na tag, chame o Jquery, responsável pelo funcionamento das abas (também inserimos o código javascript):

<script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script> <script> $(function() { $( "#tabs" ).tabs(); }); </script>

Agora, vamos adicionar o CSS:

/* Caixa de Moderador por braziliandesigner.tumblr.com */ #moderador {position: relative; float: left; width: 280px; height: auto; background-color: #fff; padding: 10px; margin: 0px; box-shadow: 1px 1px 0px rgba(0,0,0,0.1); border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; overflow: hidden;} #moderador span.photo {float: left; position: relative; width: 75px; height: 75px; background-color: #ddd; background-image: url('linkdasuafoto'); background-size: 76px; margin: -10px 0px 0px 0px;} #moderador span.name {float: left; width: 190px; margin-left: 10px; margin-bottom: 0px; font-size: 15px; font-family: 'Raleway', sans-serif; font-weight: 600; background-repeat: no-repeat; background-image: url('http://static.tumblr.com/ho7bg63/L1lnah12j/users-name-icon.png'); background-position: left 0px center; background-size: 10px; padding-left: 15px;} #moderador span.blog {float: left; width: 190px; margin-left: 10px; margin-top: 5px; background-repeat: no-repeat; background-image: url('http://static.tumblr.com/ho7bg63/3XKnah15p/google-blog-search-icon.png'); background-position: left 0px center; background-size: 10px; padding-left: 15px;} span.blog a {color: #333; font-size: 13px; font-family: 'Raleway', sans-serif; font-weight: 300; text-decoration: none; transition: 0.8s all; -webkit-transition: 0.8s all; -moz-transition: 0.8s all; -o-transition: 0.8s all;} span.blog a:hover {opacity: 0.8;} #moderador div.separator {float: left; position: relative; width: 300px; background-color: #f9f9f9; padding-top: 10px; border-bottom: 1px solid rgba(0,0,0,0.1); margin-top: -10px; margin-left: -10px;} #moderador p {float: left; width: 280px; text-align: justify; margin-top: 10px; font-family: 'Raleway', sans-serif; font-size: 13px; font-weight: 300; line-height: 20px; color: #555;} #moderador #tabs ul {position: absolute; float: left; margin: 48px 0px 0px 75px;} #moderador #tabs ul li {float: left; margin-right: 5px;} #moderador #tabs ul li a {background-color: #008B8B; transition: 0.8s all; -webkit-transition: 0.8s all; -moz-transition: 0.8s all; -o-transition: 0.8s all; padding: 2px 5px; color: #fff; text-decoration: none; font-family: 'Raleway', sans-serif; font-weight: 300; font-size: 13px;} #moderador #tabs ul li a:focus {background-color: #333;} #moderador #tabs ul li a:hover {opacity: 0.8;}

Por último, o código HTML onde você quer que a caixa fique:

<div id="moderador"> <div class="separator"> <span class="photo"></span> <span class="name">Seu Nome</span> <span class="blog"><a href="linkparaoseublog">urldoseublog</a></span> </div> <div id="tabs"> <ul> <li><a href="#tabs-1">Sobre</a></li> <li><a href="#tabs-2">Meu status</a></li> </ul> <div id="tabs-1"> <p>Escreva sobre você.</p> </div> <div id="tabs-2"> <p>Aqui, coloque seu status.</p> </div> </div> </div>

Vamos fazer algumas edições:

Ajuste a posição no margin da div #moderador (não se esqueça que a caixa tem 300 pixels de largura);

Coloque o link da sua foto no local indicado;

Coloque seu nome no local indicado;

Substitua "linkparaseublog" e "urldoseublog" para o endereço do mesmo;

Coloque sua descrição no local indicado;

Coloque seu status no local indicado.

Se usar ou gostar, dê like.

[braziliandesigner]

Caixa de Top Tutoriais

Vamos ensinar a fazer uma caixa de Top Tutoriais, que está presente em vários blogs de Design, HTML & CSS e etc.

(Clique nas imagens para ver melhor.)

Nas imagens acima você pode ver como ela é, mas se for usar, leve em consideração que ela tem 300 pixels de largura, então a sidebar/barra lateral deve ter o mesmo tamanho. Vamos ao tutorial?

Primeiro, importe a fonte 'Raleway':

<link href='http://fonts.googleapis.com/css?family=Raleway:400,900,800,700,600,500,300,200,100' rel='stylesheet' type='text/css'>

Depois, o CSS:

/* Top Tutoriais por braziliandesigner.tumblr.com */ #tutoriais {float: left; position: relative; width: 300px; margin: 0px; background-color: #fff; padding: 10px 10px 5px 10px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; box-shadow: 1px 1px 0px rgba(0,0,0,0.1); line-height: 20px;} #tutoriais h1 {font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 13px; text-transform: uppercase; margin: -10px -10px 10px -10px; padding: 10px 10px 7px 27px; border-bottom: 1px dashed #f5f5f5; color: #777; float: left; width: 280px; margin-bottom: 10px; background-image: url('http://static.tumblr.com/ho7bg63/bnDnaf3mh/brush-xxl.png'); background-repeat: no-repeat; background-size: 12px; background-position: left 10px center;} #tutoriais ul.left {float: left; width: 144px; margin-right: 10px;} #tutoriais ul.left li {list-style: none; width: 134px; padding: 2px 5px; border: 1px solid #f5f5f5; background-color: #fdfdfd; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; margin-bottom: 5px; text-align: center; transition: 0.8s all; -webkit-transition: 0.8s all; -moz-transition: 0.8s all; -o-transition: 0.8s all;} #tutoriais ul.left li:hover {background-color: #2E8B57;} #tutoriais ul.left li:hover a {color: #fff;} #tutoriais ul.left li a {color: #999; text-decoration: none; font-family: 'Raleway', sans-serif; font-weight: 300; font-size: 13px; transition: 0.8s all; -webkit-transition: 0.8s all; -moz-transition: 0.8s all; -o-transition: 0.8s all;} #tutoriais ul.right {float: left; width: 144px;} #tutoriais ul.right li {list-style: none; width: 134px; padding: 2px 5px; border: 1px solid #f5f5f5; background-color: #fdfdfd; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; margin-bottom: 5px; text-align: center; transition: 0.8s all; -webkit-transition: 0.8s all; -moz-transition: 0.8s all; -o-transition: 0.8s all;} #tutoriais ul.right li:hover {background-color: #2E8B57;} #tutoriais ul.right li:hover a {color: #fff;} #tutoriais ul.right li a {color: #999; text-decoration: none; font-family: 'Raleway', sans-serif; font-weight: 300; font-size: 13px; transition: 0.8s all; -webkit-transition: 0.8s all; -moz-transition: 0.8s all; -o-transition: 0.8s all;}

Agora, coloque o código HTML no local desejado:

<div id="tutoriais"> <h1>Top Tutoriais</h1> <ul class="left"> <li><a href="linkdotutorial">Tutorial aqui</a></li> <li><a href="linkdotutorial">Tutorial aqui</a></li> <li><a href="linkdotutorial">Tutorial aqui</a></li> <li><a href="linkdotutorial">Tutorial aqui</a></li> <li><a href="linkdotutorial">Tutorial aqui</a></li> </ul> <ul class="right"> <li><a href="linkdotutorial">Tutorial aqui</a></li> <li><a href="linkdotutorial">Tutorial aqui</a></li> <li><a href="linkdotutorial">Tutorial aqui</a></li> <li><a href="linkdotutorial">Tutorial aqui</a></li> <li><a href="linkdotutorial">Tutorial aqui</a></li> </ul> </div>

Por último, vamos editar algumas coisas:

Edite o posicionamento da caixa pelo margin na div #tutoriais;

Coloque o link do tutorial no local indicado;

Coloque o nome do tutorial em "tutorial aqui".

Se usar ou gostar, dê like.

[braziliandesigner]

Menu com descrição hover

Hoje vamos ensinar a fazer o menu com descrição hover (ao passar o mouse), que você pode usar no Tumblr ou blog. Ele possui apenas 3 links: Início, Ask e Arquivo - mas você pode adicionar mais um, caso necessário.

Clique nas imagens para ver melhor.

Como é possível ver na imagem acima, é um modelo simples, sem muitas cores. Vamos ao tutorial?

Importe a fonte 'Raleway' na sua tag head:

<link href='http://fonts.googleapis.com/css?family=Raleway:400,900,800,700,600,500,300,200,100' rel='stylesheet' type='text/css'>

Depois, o CSS:

/* Menu com descrição hover por braziliandesigner.tumblr.com */ nav#menu {float: left; margin: 0px; position: relative; width: 300px; height: 200px; background-color: #2E8B57; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; overflow: hidden;} nav#menu span#mascara {position: absolute; width: 300px; height: 200px; background-image: url('linkdasuaimagem'); background-size: 300px; transition: 0.8s all; -webkit-transition: 0.8s all; -moz-transition: 0.8s all; -o-transition: 0.8s all;} nav#menu ul {float: left; position: absolute; top: 0px; width: 280px; padding: 10px; background-color: rgba(0,0,0,0.2); border-bottom: 1px solid rgba(0,0,0,0.1);} nav#menu ul li {float: left; margin-right: 10px; padding: 8px 10px 8px 10px; background-color: rgba(0,0,0,0.3); box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -webkit-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -moz-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -o-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; transition: 0.8s all; -webkit-transition: 0.8s all; -moz-transition: 0.8s all; -o-transition: 0.8s all;} nav#menu ul li a {color: #fff; text-shadow: 1px 1px 0px rgba(0,0,0,0.1); text-decoration: none; font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 12px; text-transform: uppercase;} nav#menu:hover span#mascara {filter: blur(1px); -webkit-filter: blur(1px); -moz-filter: blur(1px);} nav#menu:hover span#perfil {bottom: 0px;} nav#menu:hover ul li {background-color: #2E8B57;} nav#menu:hover ul li:hover {background-color: #333;} span#perfil {float: left; position: absolute; bottom: -200px; margin: 10px; width: 260px; height: 107px; padding: 10px; background-color: #fff; box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -webkit-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -moz-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); -o-box-shadow: 1px 1px 0px rgba(0,0,0,0.1); border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; transition: 0.8s all; -webkit-transition: 0.8s all; -moz-transition: 0.8s all; -o-transition: 0.8s all;} span#perfil p {line-height: 21px; color: #555; text-align: justify; font-family: 'Raleway', sans-serif; font-weight: 300; font-size: 13px;}

Agora, coloque o código HTML em sua sidebar/barra lateral:

<nav id="menu"> <span id="mascara"></span> <ul> <li><a href="suaurl.tumblr.com">Início</a></li> <li><a href="suaurl.tumblr.com/ask">Ask</a></li> <li><a href="suaurl.tumblr.com/arquivo">Arquivo</a></li> </ul> <span id="perfil"><p>Descrição do seu blog.</p></span> </nav>

Vamos fazer algumas modificações:

Ajuste a margin na nav #menu;

Coloque o endereço do seu blog em "suaurl.tumblr.com";

Coloque a descrição do seu blog no local indicado.

Pronto, seu menu já deve estar funcionando perfeitamente!

Se usar ou gostar, dê like.