¡Hola hola! Aqui un tutorial muy elegante para las redes sociales Son muchos efectos pero empezaremos con el básico.... Veamos una vista previa, clic ¡aqui! Mola mucho (al menos a mi) Comencemos ¿Ok? · ·
Solo es dificil porque son muchos códigos |
Nos vamos a plantilla y antes de ]]></b:skin>
.social-ax > a {
border: 1px solid #CCCCCC;
display: inline-block;
height: 70px;
line-height: 0;
margin: 0 20px 10px;
padding: 4px;
position: relative;
width: 70px;
}
.social-ax > a > span {
background-color: rgba(0, 0, 0, 0.7);
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguCEbxGQrZXOyjjNxna_Q-eNYTwON24GBfqbVvFZ7sOxtmhMdM6QcOnjHSm9wdbkhzIH5guo79syAjMRtcU89pJVfB-QabYGvcA3bsrkMNmtKF6MNACuhHWn3ckrj_c8nCH6tzGqxR3qm8/s1600/all-icons.png");
background-repeat: no-repeat;
display: block;
height: 70px;
position: absolute;
top: 4px;
width: 70px;
z-index: 50;
transition: all 300ms ease-in-out 0s;
-moz-transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
-o-transition: all 300ms ease-in-out 0s;
}
.facebook-zk > span {background-position: 7px 2px;}
.twitter-zk > span {background-position: -92px 2px;}
.google-zk > span {background-position: -194px 2px;}
.youtube-zk > span {background-position: -292px 2px;}
.rss-zk > span {background-position: -393px 1px;}
.social-ax.fade > a > span {opacity: 0;}
.social-ax.fade > a > span:hover {opacity: 1;}
Ya está, ahora a hacer el efecto... si lo quieres en tu blog lo pones con este código, en un gadget o lo que quieras:
<div class="social-ax fade">
<a target="_blank" href="enlace" class="facebook-zk">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho4tOskaTv1xjp3RcDBAPYsXJ8s5YTRCiZWTUron71UIs0riCjcEMIpKsvPYf2D75ilAbmayDgtvrV_0A3RLQh13ZMtSNVc-6GxsV83auJ0fsEzLXGkFSTUq_YaPPyJaYDalvi52PgHPpJ/s1600/01.jpg">
<span></span>
</a>
<a target="_blank" href="enlace" class="twitter-zk">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia-FqCEKWJPkJUR-uLj-7YCpAygC9x2hLPTtXR0MfBSFQB2fGvpiGhLIeANxWYxYP2AaSBKXCtIo2hABXGj6bkfIHwTNSCJ24LMiFmchDuRqqQTr-lM3UYu7_7cXx-IjBqOdJl3CpHqtxP/s1600/02.jpg">
<span></span>
</a>
<a target="_blank" href="enlace" class="google-zk">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4WIGD4NEhLVFB4g4OttZL5EXS2i06fH-nzMHWim48ucBm8lNPIITDlys5d-nhzecdyxvOa0kMraPpW5GOnJkQFaxTkE17qbPjhpuN0u5y8XYaiBt8EleMwOyKrU5-j62R7uMOJo9Hpm4k/s1600/03.jpg">
<span></span>
</a>
<a target="_blank" href="enlace" class="youtube-zk">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcPn-BYuNPykNg7FpAne-W8KE6ioV6OksU8E2AC-TgdfHg2qXUVPT4tGSwVbPpWzJ8SaAwzF4R3AAzReXGQOTFsB4Ba65LuJTnuzUTbNC6smeuMS4pcQbs8cX_lWdc8i3Azq3QcH-kjkmR/s1600/04.jpg">
<span></span>
</a>
<a target="_blank" href="enlace" class="rss-zk">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibBj1HJzZI_HOiaGkAkRUtNtiuGruUeI6GKGgdflbsWwyCaEvmsAHo7CBqQG4QviTwq5OXLwd0eth9-3-HCHxSpxJqwXXLXvp-JVET04Bqeu-r_co2UALFysxu0Ma0AQEtgNZm3rwHd6it/s1600/05.jpg">
<span></span>
</a>
</div>
En otro tutorial aprenderemos otro efecto del mismo tipo, espero que os gustara Y eeeeen fin, eso es todo por ahora.
Espacio Publicitario
· Te gustaría unos fondos para tu blog? ¡Clic aqui! ·
excelenteeeee, yo podria pedir un tutorial???
ResponderEliminarClaro... ¿Cual quieres?
Eliminarun tuto facil de como poner los seguidores en plantillas clasicas de blogger, los que encuentro en google son realmente muyyyyy dificiles -.-! te lo agradeceria en grande!
EliminarQue genial !! *O*!! <3
ResponderEliminardefinitivamente lo haré cuando tenga tiempito °v°
besos~
Que bien :D ^^
EliminarSaludos!
que lindo tuto muchas gracias
ResponderEliminarDe nada :D
Eliminar