olá leitores ,venho ensinar a voçes como inserir o efeito neon com sombra nós links do Seu site, esse efeito deixa seu site mais moderno é eficaz , dando assim melhor aparencia
é bem simples adicionar esse efeito
1.acesse seu painel do bloggler , vá em design > editar HTML
é bem simples adicionar esse efeito
1.acesse seu painel do bloggler , vá em design > editar HTML
agora procure por :
]]></b:skin>
2.e antes dessa linha insira o seguinte texto:
3. obs : onde tem o #FF000 voce poderá esta alterando a cor , de sua preferencia.a:hover{ color: #FF000;text-shadow:0 0 .3em #FF000; }
Primeiramente, este tutorial irá ensinar a como colocar um cursos em fórum ( flechinha ), primeiramente, vamos aceder seu Painel de Controle em:
Painel de Controle
Visualização Imagens e Cores Cores Folha de Estilo CSS
Painel de Controle
Visualização Imagens e Cores Cores Folha de Estilo CSS
Coloque em sua CSS
Código:
body {
cursor: url('URL DA IMAGEM'), url('URL DA IMAGEM'), auto;
}
a:hover {
cursor: url('URL DA IMAGEM'), url('URL DA IMAGEM'), auto;
}
cursor: url('URL DA IMAGEM'), url('URL DA IMAGEM'), auto;
}
a:hover {
cursor: url('URL DA IMAGEM'), url('URL DA IMAGEM'), auto;
}
Em Azul e Negrito, você irá adicionar URL do cursor que você preferir..
Valide e pronto!
Adicionar efeito ao passar o mouse por cima do Avatar!
bom esse tutorial é bem Simples, quando voce adicionar o codigo (que se encontra abaixo) em sua pagina CSS, ao passar ao mouse por cima do avatar ele irá ter um efeito e ficará na diagonal.
--->Tutorial , dicas e astúcias <---
Adicionar efeito ao passar o mouse por cima do avatar
1. Acesse :
Painel de controle > > visualização>>cores >> folha de estilo CSS >> aplique o código de sua versão:
2. Códigos para devidas versões
PhpBB2:
.poster-profile img{margin-left: 3px;border: 5px solid #eee;-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);box-shadow: 4px 4px 4px rgba(0,0,0,0.2);-webkit-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;}.poster-profile img:hover {-webkit-transform: rotate(-7deg);-moz-transform: rotate(-7deg);-o-transform: rotate(-7deg);}
PhpBB3:
div.postprofile dl dt img{
margin-left: 3px;
border: 5px solid #eee;
-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
div.postprofile dl dt img:hover {
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
}
PunBB:
div.user-basic-info img{
margin: 3px;
border: 5px solid #eee;
-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
div.user-basic-info img:hover {
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
}
Invision:
dl.postdetails dt img{margin-bottom: 10px;border: 5px solid #eee;-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);box-shadow: 4px 4px 4px rgba(0,0,0,0.2);-webkit-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;}dl.postdetails dt img:hover {-webkit-transform: rotate(-7deg);-moz-transform: rotate(-7deg);-o-transform: rotate(-7deg);}
Pronto, após escolher o código de sua versão,Valide
3. Resultado:
Primeiramente, este tutorial irá ensinar a quem estiver com duvidas a como colocar xat na lateral de seus fóruns, nosso amigo Lud pediu um tutorial, e ele não sabia como colocar, por tanto estou aqui a ensinar a vocês a como colocar, primeiramente, vamos aceder seu Painel de Controle em:
Painel de Controle ->> Módulos ->> HTML e JavaScript ->> Gestão dos códigos HTML
Clique em "Criar um novo HTML".
Título: Escolha um título qualquer.
Código: Você ira colocar o código de seu xat, aquele de quando você cria, vem com o código para você instalar em seu site, e fazendo isto, salve!
Obs: Antes de ir pro proximo passo, veja o URL que você criou da página HTML e copie.
Logo em seguida vá em:
Painel de Controle ->> Módulos ->> HTML e JavaScript ->> Gestão dos códigos JavaScript
Clique em "Criar um novo Código JavaScript"
Painel de Controle ->> Módulos ->> HTML e JavaScript ->> Gestão dos códigos HTML
Clique em "Criar um novo HTML".
Título: Escolha um título qualquer.
Código: Você ira colocar o código de seu xat, aquele de quando você cria, vem com o código para você instalar em seu site, e fazendo isto, salve!
Obs: Antes de ir pro proximo passo, veja o URL que você criou da página HTML e copie.
Logo em seguida vá em:
Painel de Controle ->> Módulos ->> HTML e JavaScript ->> Gestão dos códigos JavaScript
Clique em "Criar um novo Código JavaScript"
Título: Escolha um título qualquer.
Investimento: Coloque onde você quiser (Preferência "No Indice")
Código:
Você ira adicionar este código:
jQuery(document).ready(function(){s="jQuery('#chatboxpop').animate({width:'toggle'},1200); jQuery('#chatboxopen,#chatboxclose').toggle();";jQuery('body').prepend('<div style="overflow: visible; position: fixed; bottom: 30px; height: 450px; left: 0px; z-index:1000;"><iframe src="URL_DA_PAGINA_HTML" id="chatboxpop" scrolling="yes" style="height: 360px; float: left; overflow-x: visible; overflow-y: visible; display: none; width:600px" marginwidth="0" marginheight="0" frameborder="0"></iframe><div onclick="'+s+'" style="margin-top: 10px; cursor :pointer; float:right"><img src="http://i34.servimg.com/u/f34/16/04/51/75/open10.png" id="chatboxopen" style="display: inline; "><img src="http://i34.servimg.com/u/f34/16/04/51/75/close10.png" id="chatboxclose" style="cursor: pointer; display: none; "></div></div>')});
Em Azul e negrito, você ira adicionar o URL da página HTML que você tinha criado anteriormente, a do código HTML do xat.
e Salve!
Assinar:
Postagens
