Bom dia, pessoal.
Agradeço a todos que desejaram-me melhoras ontem, foi apenas uma dor de cabeça boba de tanto ficar aqui na frente da tela do computador, nada mais. Quero agradecer também as visualizações de ontem, nós chegamos às 18.000 visualizações diárias graças a vocês, obrigada. Espero que a gente continue crescendo, pois eu vejo vários blogs grandes por aí que foram esquecidos.
Para hoje, trouxe mais um tutorial que dessa vez transformei do tumblr Help-4all. O tutorial é de um efeito para ser usado na elite de afiliados de vocês. Ele é redondinho, com bordas e ao passar o mouse a cor muda com um efeito super criativo, deve ficar lindo em todos os tipos de blogs. Além disso, não é nada complicado de se aplicar, o que facilita bastante a nossa vida de blogueiro, não é mesmo?
1. Vá até editar HTML e procure por ]]></b:skin>. Acima dessa tag, cole o seguinte código:
.efeitoround {background: #CORDOFUNDO;border: 5px solid #CORDABORDA;display: inline-block;font: 20px 'Chela One', cursive;width: 50px;height: 40px;color: #CORDAFONTE;padding-top: 10px;margin: 5px;-webkit-border-radius: 50px;-webkit-transition: 1s linear;}.efeitoround:hover {background: #e7a6c0;-webkit-box-shadow: inset 0px 60px 10px #CORDOFUNDOHOVER;border-radius: 0px;color: #ffffff;text-decoration: none;-webkit-border-radius: 50px;-webkit-transition: 1s linear;}
Edite as partes em negrito trocando as palavras pelo que as mesmas pedem e depois salve.
2. Em um gadget de HTML/JavaScript, cole o seguinte código:
<a href="LINK" class="efeitoround" title="NOME INTEIRO DO BLOG">SIGLA DO BLOG</a>
Troque as palavras em maiúsculo pelo que elas pedem e salve. Para que apareçam mais bolinhas, repita esse mesmo código trocando apenas as informações.
Códigos auxiliares: Se você deseja usar a mesma fonte que eu, procure por <head> e abaixo do código, cole:
<link href='http://fonts.googleapis.com/css?family=Chela+One' rel='stylesheet' type='text/css'/>
Nenhum comentário:
Postar um comentário