No es la primera ves que preguntan sobre la forma de añadir los iconos de redes sociales en la sidebar con opacidad y no es nada dificil todo lo contrario, de forma muy sencilla los añadiremos paso a paso.
Lo primero que vamos a hacer es crear una clase a los botones y añadirle los estilos a esa clase, para eso
debemos de ir a diseño > Edición HTML >
Activar la opción de “Expandir plantillas de artilugios.
Para una busqueda mas rapída tecleamos Ctrl+F y ponemos lo que queremos buscar.
en este caso vamos a buscar lo siguiente: ]]></b:skin> y una ves encontrado añadimos el siguiente codigo justo antes :
text-align: center;
padding:14px;
border: 0px dashed #C0C0C0;
}
a.redes-sociales img {
filter:alpha(opacity=40);
opacity: 0.4;
}
a.redes-sociales:hover img {
filter:alpha(opacity=100);
opacity: 1.0;
}
Una ves puesto este codigo en su lugar nos vamos a dirigir a colocarlo en la sidebar para eso vamos a diseño y a añadir un gadget en donde ustedes quieran mostrar las redes sociales una ves abierta la ventanita para añadir un gadget buscamos HTML/Javascript y pegamos el siguiente codigo:
<center><a class="redes-sociales" href="http://feeds.feedburner.com/tu-nombre-feedburner" target="_blank"><img style="width: 45px; height: 45px;" alt="Subcribete a nuestro RSS Feed" src="http://dl.dropbox.com/u/25944020/para%20tube%20rss.png" title="Subcribete a nuestro RSS Feed" /></a><a class="redes-sociales" href="http://twitter.com/tu-nombre-twitter" target="_blank"><img style="width: 45px; height: 45px;" alt="Siguenos en Twitter" src="http://dl.dropbox.com/u/25944020/para%20tube%20twitter.png" title="Siguenos en Twitter" /></a><a class="redes-sociales" href="http://facebook.com/tu-perfil-facebook" target="_blank"><img style="width: 45px; height: 45px;" alt="Siguenos en Facebook" src="http://dl.dropbox.com/u/25944020/para%20tube%20facebook.png" title="Siguenos en Facebook" /></a><a class="redes-sociales" href="http://www.youtube.com/user/tu-nombre?feature=mhsn" target="_blank"><img style="width: 45px; height: 45px;" alt="Siguenos en youtube" src="http://dl.dropbox.com/u/25944020/para%20tube%20youtube.png" title="Siguenos en youtube" /></a><a class="redes-sociales" href="Url de la pagina de google+" target="_blank"><img style="width: 45px; height: 45px;" alt="Siguenos en google+" src="http://dl.dropbox.com/u/25944020/google%2B1%20tube%29.gif" title="Siguenos en google+" /></a>
</center></div>
Una ves puesto el codigo le damos a guardar y es todo ya tiene sus botones de redes sociales con opacidad.
Lo que esta en rojo debes poner los datos correspondiente .
Lo que esta en naranja lo pueden modificar a sus gustos.
Lo que esta en amarillo es la url de la imagen.
:)
:(
;)
:D
;;-)
:-/
:-O
X(
B-)
#:-S
:((
:))
=))
~X(
:-t
8-
=P~
#-o
=D7
:-SS
:-q
:-bd
que buena iniciativa asi le dará más creatividad a la pagina web.
ResponderEliminaroficina virtual
ResponderEliminarGracias por tu comentario y su visita y si esta muy bueno este codigo ya que con el le damos un toquesito a nuestro sitio .saludos
:-[
No pueden ser MAS genios, me quedo divino..
ResponderEliminarHola Lookwoman que bueno que te haya gustado y la verdad si va muy bien con tu sitio con el color de fondo y todo si quieres puedes añadir el boton de google + lo que pasa es que yo no lo habia añadido pero ya lo actualice y aquí te dejo el codigo por si quieres añadirlo :
ResponderEliminar<a class="redes-sociales" href="https://plus.google.com/u/0/b/100442535676711232426/100442535676711232426/posts" target="_blank"><img style="width: 45px; height: 45px;" alt="Siguenos en google+" src="http://dl.dropbox.com/u/25944020/google%2B1%20tube%29.gif" title="Siguenos en google+" /></a>
recuerda cambiar la url de google plus por la tuya y es todo otro detallito es que el codigo para obtener el efecto opacidad lo colocastes despues de ]]></b:skin> y lo debes colocar justo antes ]]></b:skin> por eso es que te sale ese codigo en la cabecera si tienes alguna duda ya sabes no dudes en preguntar .saludos