Yo pessoal como vão? Ainda estou fazendo os tutoriais de maratona, desta vez trago um bem legal que é como colocar fundos alternativos no seu blog, assim podendo o visitante escolher qual o agrade. Eu coloquei background de estilo Teen, Kawaii e Rocker caso estejam sem muitas opções para colocar. Esse tutu eu peguei no blog Cherry Bomb então os creditos são para ela ok?
Quando pronto ficara assim:
Tem efeito de bordinhas hover nas imagens
Abra um gadget de HTML/Javascript, e dentro dele coloque esse codigo:
Códigos
<style>
#estilo a img{
width:40px;
height:40px;
display:inline;
margin-right:10px;
margin-top:0px;
border: 2px solid #6ed6e0;}
#estilo a:hover img{
border: 2px solid #a7e06e;}
</style>
<div id="estilo">
<script src='http://code.jquery.com/jquery-1.6.2.min.js' type='text/javascript'></script>
<script>
$(document).ready(function(){
$("#bgcolor1").click(function(){
$("body").css({"background":"url(PRIMEIRA IMAGEM)"});
});
});
$(document).ready(function(){
$("#bgcolor2").click(function(){
$("body").css({"background":"url(SEGUNDA IMAGEM)"});
});
});
$(document).ready(function(){
$("#bgcolor3").click(function(){
$("body").css({"background":"url(TERCEIRA IMAGEM)"});
});
});
</script>
<center><a href="javascript:void(O)" id='bgcolor1' title="NOME DA IMAGEM"><img src="PRIMEIRA IMAGEM" /></a>
<a href="javascript:void(O)" id='bgcolor2' title="NOME DA IMAGEM"><img src="SEGUNDA IMAGEM" /></a>
<a href="javascript:void(O)" id='bgcolor3' title="NOME DA IMAGEM"><img src="TERCEIRA IMAGEM" /></a></center>
</div>
#estilo a img{
width:40px;
height:40px;
display:inline;
margin-right:10px;
margin-top:0px;
border: 2px solid #6ed6e0;}
#estilo a:hover img{
border: 2px solid #a7e06e;}
</style>
<div id="estilo">
<script src='http://code.jquery.com/jquery-1.6.2.min.js' type='text/javascript'></script>
<script>
$(document).ready(function(){
$("#bgcolor1").click(function(){
$("body").css({"background":"url(PRIMEIRA IMAGEM)"});
});
});
$(document).ready(function(){
$("#bgcolor2").click(function(){
$("body").css({"background":"url(SEGUNDA IMAGEM)"});
});
});
$(document).ready(function(){
$("#bgcolor3").click(function(){
$("body").css({"background":"url(TERCEIRA IMAGEM)"});
});
});
</script>
<center><a href="javascript:void(O)" id='bgcolor1' title="NOME DA IMAGEM"><img src="PRIMEIRA IMAGEM" /></a>
<a href="javascript:void(O)" id='bgcolor2' title="NOME DA IMAGEM"><img src="SEGUNDA IMAGEM" /></a>
<a href="javascript:void(O)" id='bgcolor3' title="NOME DA IMAGEM"><img src="TERCEIRA IMAGEM" /></a></center>
</div>
Repita a imagem 2 vezes como coloquei escrito ali no codigo ok? E não esqueça de colocar o nome que quer que apareça!
Onde está como no codigo abaixo, você muda as cores das bordas para qual desejar, 6ed6e0 e a borda normal, em a7e06e e a borda hover quando passa o mouse sobre ela.
border: 2px solid #6ed6e0;}
#estilo a:hover img{
border: 2px solid #a7e06e;}
Agora os background para teste!
Kawaii:[www] [www] [www]
Teen: [www] [www] [www]
Rocker:[www] [www] [www]
Estava LOUCA , ATRÁZ DISSO !
ResponderExcluirBrigadão , hehe
Hehe fico contente que tenha lhe ajudado
Excluir