Set de iconos marcadores sociales con animación en el esquinal
Para seguir con la onda de los marcadores sociales, los cuales son muy importantes, y creo que ya lo he dicho en post como la de Marcadores sociales para Blogger con efecto onMouseOver y la de Social Bookmarking (Marcadores Sociales) para blogger con efecto opacidad, y hoy, quiero reiterarlo aquí, mientras mas enlaces a estas redes tengas, sera mucho mejor, colocar imágenes con efectos atractivos que llamen la atención. Para ver una demostración del maravilloso efecto de estos botones, solo pasa el puntero del ratón por encima de las siguientes imágenes a continuación:
El archivo de descargar contiene un conjunto de iconos. Todos ellos disponibles en formato PNG y en tamaños de 32px, 48px, 64px y 128px.
<!-- DELICIOUS CODE STARTS --> <img width="" height="" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKG2l_kHXx1vN3PleBSUUj-Fb8DuQPWuxDwcDOKZZ9hWjpg8QYC2yp9dSMlCFg99WI_PDSulEUWWdSrMsqb6XM9KbsFWcg08UsXZ06XdXhleSqnWujpRImW6kCDVzyyiH7-yXmJ6dhNU8/s400/DELICIOUS1.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUGl5qZB5KArmKmARbjGN7MSr71cDC-1vrgYon_A2F5Bhl2TcITJyRGhH9UmZKI4d6p6XfDUAzV2bWhV34v82Ymqk-UpSdjtnG5auIF1VXH3MHy-Yf2vAjZ97nSAlXTidjcyJTLd2yiHY/s400/DELICIOUS2.png" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUGl5qZB5KArmKmARbjGN7MSr71cDC-1vrgYon_A2F5Bhl2TcITJyRGhH9UmZKI4d6p6XfDUAzV2bWhV34v82Ymqk-UpSdjtnG5auIF1VXH3MHy-Yf2vAjZ97nSAlXTidjcyJTLd2yiHY/s400/DELICIOUS2.png'"/> <!-- DELICIOUS CODE ENDS --> <!-- RSS CODE STARTS --> <img width="" height="" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqWGpzaisxIaCNY0Af-XT1O8eb0qqQulJiKxHoieRZp7Aj5P_RNY9oeEOHcqcOmUGBWG_GD67jtvU6IuGpo_MLxdFBKU-0uBqrd3SVsF8gBfHhCo2K3gZCUJRYjgaAGCLfpb-fyO-y0ck/s400/RSS1.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAK7V8v0ncXV_QSbL6jHLiCQz-6dKPcF8hAnanghX3KMwlrE0TWkyAOQUymUfseD4aEJydaUdDkQQAUGyzdyCfBhhId7H8Srn3b4gSXqHBQFq7b8ysOb8RfRk9Zc1zgLMoVOjksRPNwWk/s400/RSS2.png" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAK7V8v0ncXV_QSbL6jHLiCQz-6dKPcF8hAnanghX3KMwlrE0TWkyAOQUymUfseD4aEJydaUdDkQQAUGyzdyCfBhhId7H8Srn3b4gSXqHBQFq7b8ysOb8RfRk9Zc1zgLMoVOjksRPNwWk/s400/RSS2.png'"/> <!-- RSS CODE ENDS --> <!-- YOUTUBE CODE STARTS --> <img width="" height="" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOnJJoxlKK7lS93diuw2C-j4WYs32jHdqVphep8_2ywVIVWBaywL8qxMokjeQSYzr16ii4sksqLWIhpyE4ZwACkI0uRaUf6aIqfGp-KbKOm8eYFIz3VghdMeEAOURowX60qX_x9FAmqhc/s400/YOUTUBE1.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiAHURAtZDEl0qIAiyDmjKX53lqbyxCBnO_6FFr38lwuy8hyphenhyphenRbmAfro-TlpF20FQOfcHgI-0YIg6zqz6is975FNKXaG-UYb-huKZ10REvL8_-ijw0UCznFg1MwbYomykpZ-B95zMIw5AI/s400/YOUTUBE2.png" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiAHURAtZDEl0qIAiyDmjKX53lqbyxCBnO_6FFr38lwuy8hyphenhyphenRbmAfro-TlpF20FQOfcHgI-0YIg6zqz6is975FNKXaG-UYb-huKZ10REvL8_-ijw0UCznFg1MwbYomykpZ-B95zMIw5AI/s400/YOUTUBE2.png'"/> <!-- YOUTUBE CODE ENDS --> <!-- YAHOO CODE STARTS --> <img width="" height="" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDJDh8wm3vfnG3n6RFJAt7COVs4Qj43MhhBBFWUfCIrUGqYkfWvgSKI_PgkU3Kwm3UBNtLvFf890qIbr0wz7RW6hCbjOrvoZBA1qB8shlX4gU3hCEWlbeAK068SMoFTB4DI2NTUaK2Qzw/s400/YAHOO1.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOtJImLbWYCPZ-_raTnpD6wyIhtG1r6ggT55t5pyMoe_aYSVzJNGSREf5jx6HbZBZ2FhOU2HXBETAEvElBnOmlYZ5DUrFqwcPgZKABjXnFlAW49PUoq3Q9yZLFuxWGtH3n9FBt8WIgtus/s400/YAHOO2.png" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOtJImLbWYCPZ-_raTnpD6wyIhtG1r6ggT55t5pyMoe_aYSVzJNGSREf5jx6HbZBZ2FhOU2HXBETAEvElBnOmlYZ5DUrFqwcPgZKABjXnFlAW49PUoq3Q9yZLFuxWGtH3n9FBt8WIgtus/s400/YAHOO2.png'"/> <!-- YAHOO CODE ENDS --> <!-- TWITTER CODE STARTS --> <img width="" height="" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQneBr2VEE-ZG0o_hj1ZQXExnmknEP4l-8AEDLEqOPwv-gQWBXWhFQrIG8E6qVoZqlDRZOdETJ6dP5zVkTiBaUp6VcZXPsjAXUd7NHHAjKROqDkedyLN1mnEVrdx55GA0JfFm-Ie6gnKQ/s400/TWITTER1.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE106DgG5j1W_PSLEspZ1V_Ko5y9IqxuqOaAOYU23ZUR4dUpIW5QH35gPY0cUOr6s-qVoj9q8PHK9MCwVMEm3EaO81UOygjMhFyAdCPeXIvSJvSOvOswiPR1yGuGUcrrux0YZXf8-JZNc/s400/TWITTER2.png" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE106DgG5j1W_PSLEspZ1V_Ko5y9IqxuqOaAOYU23ZUR4dUpIW5QH35gPY0cUOr6s-qVoj9q8PHK9MCwVMEm3EaO81UOygjMhFyAdCPeXIvSJvSOvOswiPR1yGuGUcrrux0YZXf8-JZNc/s400/TWITTER2.png'"/> <!-- TWITTER CODE ENDS --> <!-- TECHNORATI CODE STARTS --> <img width="" height="" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim3Ks8GhCrsVRhWPy6W8eSxMWW8yqaYZHjxRYdXdWSjBxix8_HunbzOBh6ovmyo8Phjhfhc5bgaRiEuMqIwdANRJXWHGOmgj4xFWWIaHHj68K4_eOMGrBYIg-4r7nBdqZHfHjqnX2gAjA/s400/TECHNORATI1.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-RYBPqglYmn96v1pyz63ZOYnjb_Bqt07rxRaTz-_LhrjA6e1Osk32HkCMYffvf4lSvYl_GIhzc7WPUwFN6Wxstu18vlOs8-k6KwNNC_pXhvjBb5X7h5JFpJgbzQ_fzYKi0fgUuF_7eDk/s400/TECHNORATI2.png" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-RYBPqglYmn96v1pyz63ZOYnjb_Bqt07rxRaTz-_LhrjA6e1Osk32HkCMYffvf4lSvYl_GIhzc7WPUwFN6Wxstu18vlOs8-k6KwNNC_pXhvjBb5X7h5JFpJgbzQ_fzYKi0fgUuF_7eDk/s400/TECHNORATI2.png'"/> <!-- TECHNORATI CODE ENDS --> <!-- REDDIT CODE STARTS --> <img width="" height="" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm3a-pFgPbxKyhw0rqs06A0MkL0WvGWRiPamBy5pxKisZ9AUaS6OHDKBLIpSjsXv7KohEP2RWtWVipQENpeNTgJFRWQPIMIDg3TJyh-Ta5fucJh4p97YEdSCzvBNMTlEIaYZ_F-ShuRyQ/s400/REDDIT1.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3xRKAFoou2xg9pRu6t05RNG08fol2XgdD0o6o6uLi_x7lkvp1htutWbUg16lE17j6DGkMF4mEj0CnMERr6ZipmcFTBoGRfDLonP8WhG9fqlbNAK6qB4DGpfpOysMrqBp_1NnOsFeAWE0/s400/REDDIT2.png" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3xRKAFoou2xg9pRu6t05RNG08fol2XgdD0o6o6uLi_x7lkvp1htutWbUg16lE17j6DGkMF4mEj0CnMERr6ZipmcFTBoGRfDLonP8WhG9fqlbNAK6qB4DGpfpOysMrqBp_1NnOsFeAWE0/s400/REDDIT2.png'"/> <!-- REDDIT CODE ENDS --> <!-- FACEBOOK CODE STARTS --> <img width="" height="" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBHdeXz-IFCRZWIUXaAbIhqmfVn5w9ZA5FHjP8c2fRT3Car_9udhVDSB5NhEDWge2728fVHkpWgTCeOtipcdwjtmE0sTG81vv1mTt4KeI0lw8MHW1rHFEyA_MCxhsVy-ZW-GYA5Ap-5gs/s400/FACEBOOK1.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglr-DadxC8y5MzuWX6dLJEb0GXwxi7d9C-Y-Tfi4zGcRyMW6HyDunfKltSzMFMwQj-iFWsWmW1QvsVNEzCavosOStY6xTDR3TUFcHpThKds4Cn_nkgWnLqucxcSJWu2GA7TVWxrlDIZRo/s400/FACEBOOK2.png" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglr-DadxC8y5MzuWX6dLJEb0GXwxi7d9C-Y-Tfi4zGcRyMW6HyDunfKltSzMFMwQj-iFWsWmW1QvsVNEzCavosOStY6xTDR3TUFcHpThKds4Cn_nkgWnLqucxcSJWu2GA7TVWxrlDIZRo/s400/FACEBOOK2.png'"/> <!-- FACEBOOK CODE ENDS --> <!-- DIGG CODE STARTS --> <img width="" height="" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnglP_gGgLQI_jT_an18ALQblFbk1HIxHcUOJCKZpdIcNwv3mIfOl4QmxN-nHXuP0RHJFFP7x_84Yro-0PP1IdxoscFpon4UIdv0dnUXSaCJxD3gsxRxy-rj0rHKWRsCZDt1k7fDLHb2g/s400/DIGG1.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJaKnTpFcDODEpRwzxSaMSYdJp08Hj5dB6lDidlV3IKr9R2tzw7037qX9cHxDIIKit3QvtFle7RRuaHxVxzAtQqiE5JnOrqd9GomAfHC1KMTQHbahDJ1Me1ImpVFEo4rq1SXUOBc4-hLw/s400/DIGG2.png" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJaKnTpFcDODEpRwzxSaMSYdJp08Hj5dB6lDidlV3IKr9R2tzw7037qX9cHxDIIKit3QvtFle7RRuaHxVxzAtQqiE5JnOrqd9GomAfHC1KMTQHbahDJ1Me1ImpVFEo4rq1SXUOBc4-hLw/s400/DIGG2.png'"/> <!-- DIGG CODE ENDS -->Puedes colocar estos iconos en donde quieras que aparezca en tu blog un enlace a la red social que quieras, es decir, estos no son para ponerlos especialmente debajo de cada entrada, ya que como habras notado son demasiado grandes, aunque no se quita la oportunidad de hacerlo alterando el tamaño de la imagen con el width y el height de esta forma, width='64px' height='64px', puedes editar lo que esta en rojo y colocale el numero que desees.
Como ya te dije, estos iconos vienen en distintos tamaños, te sugiero descargues el archivo y subas todos los iconos de 16px a tu propio servidor. Me parece que se te hara un poco dificil, ya que tendras que subir dos imagenes por cada icono, para realizar el efecto, pero com un poco de empeño lo lograras. Luego de eso, coloca la url en el siguiente codigo para realizar la animación.
<img width="" height="" onmouseover="this.src='URL DEL LA IMEGEN1.png'" src="URL DE LA IMAGEN2.png" onmouseout="this.src='URL DE LA IMAGEN2.png'"/>Asi haras con todos, hasta llegar al ultimo, ahora para agregarlo a tu plantilla debajo de cada post, sigue estos pasos:
♦ Entra en Blogger > Diseño > Edicion HTML
♦ Marca la casilla expandir plantillas de artilugios
♦ Busca el siguiente código:
<div class='post-footer-line post-footer-line-3'>♦ Ahora, justo debajo de ese código que acabas de buscar, pega los códigos que creaste con la imagen, si no, también, como te dije, puedes cambiarle el tamaño a el código anterior, solo deberás colocar un tamaño de 16px por 16px, el width y el height ya lo tiene incorporado el código, solo queda que tu lo edites, la única desventaja de esto, es que mientras mas pequeñas las hagas, la imagen ira perdiendo resolución, por eso es importante que subas tus propias imágenes, luego solo queda guardar los cambios y ver como quedo.
Eso es todo...
Enlaces para compartir en tu blog o pagina web.
![[1] Crear una calculadora simple en Microsoft Visual Studio 2010 (El Diseño)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihK06o3qxRgndTN83gagg5xMy8Y0s4rg9GCiBabAgKpoFDpCUkp8Al_rfR6HKBuaEHmmst0IOnxKE7V2kHfX63AoPgzF_mZQ-nZ-Bkj4vdbhyphenhyphenPMU_bP1Dk_0ZJf_4_NgJh7dzseZHN7Okh/s72-c/calculadora.JPG "[1] Crear una calculadora simple en Microsoft Visual Studio 2010 (El Diseño)")
No hay comentarios :
Publicar un comentario