
En este articulo te mostrare como añadir un lindo y animado deslizador de iconos sociales a tu blog de blogger.Al usar este widget podras enlazar el profile de las redes sociales tales como Facebook, Twitter , Rss Google plus,Rss y StumbleUpon Solo dale un vistazo a el demo en este enlace.
El ejemplo lo podras vere en siguiente enlace:http://lanoticiaspr.blogspot.com/
Vamos a añadir este widget de social media deslizable a tu blog de blogger siguiendo estos simples pasos.
1.Entra en tu cuenta de Blogger

2. Luego selecciona "Diseño" como muestra abajo.
3. Da Click Añadir un Gadget y selecciona 'HTML/Javascript
4. Pega el codigo de abajo
<style> #socialmenu_cbt { margin:0; padding:0; width: 30em; height: 4.5em; overflow:hidden; } #socialmenu_cbt li { display:inline; list-style-type:none; } #socialmenu_cbt li a { display:block; float:left; text-decoration:none; margin:0; } #socialmenu_cbt li a img { opacity:0.7; margin:0.5em; border:0; float:left; } #socialmenu_cbt li a span { display:none; } #socialmenu_cbt li a:hover { background:transparent; } #socialmenu_cbt li a:hover span { width:7em; color:#aaa; display:block; cursor:pointer; float:left; } #socialmenu_cbt .h2 { margin:0 5px; padding:0; color:#fc0; font-variant:small-caps; font-size:1em; border:0; } </style> <ul id="socialmenu_cbt"> <li> <a href="https://www.facebook.com/trucosblogger"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJFgTBislWktJb-oTFdkRAR1hVCMs0Fr7rR7mpMj5Z0L2EzF6FlbWiIkbURTXo9C371mlSAiTGgBX7USVNvfQOC3iDOCDEFzzL882g03l0hD6T-nIBDiZeJjiLTVKtQb7svcc7SKHgs7I/s1600/Facebook-icon_btrix.png" alt="facebook" width="50" height="50" title="Facebook" /> <span><br /> <b class="h2">Facebook</b><br /> Añadir a facebook </span> </a> </li> <li> <a href="https://plus.google.com/107955298793879609876"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0umuvg_IQdsBCivIUnUx8CCRTk4254Qc-yJMqyVeoLeKnLvyvw6pAG-7HQ4MDe_nspwCsK_rnNInrQFDxsrI-ZYsAFBpVcCKPUHVVMWDZvR9_Pf22qG6HwJLzfNiyDSMhhljM_0G1JHA/s1600/Google-plus-icon_btrix.png" alt="Google plus" width="50" height="50" title="=Google plus" /> <span> <br /> <b class="h2">Google Plus</b><br /> Añadir a Google Plus </span> </a> </li> <li> <a href="http://feeds.feedburner.com/ciudadblogger"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifhVNsWIHAJENVJSzy_K0K9yjM5ZQq61Eh7skFa1ClExumFmgZlzpufenc1X_PXR120kim9dIKip9CxB0Biud6l4fU5pZTviG7a-eIT1HfwyUy8fiEGuZKsSn7XlYQBeCwaWpgwOLql7U/s1600/RSS-icon_btrix.png" alt="Rss" width="50" height="50" title="Rss" /> <span><br /> <b class="h2">Rss Feed</b><br /> Subscribete </span> </a> </li> <li> <a href="http://stumbleupon.com/Nombre de Usuario"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgei1bAwrbnPGhWn-pjxRpZk39vopxptS9-BL__Q2Lkvg95qxlB0ZDsLut-rP94YTLS2n79cz7kbtdCO1xDM2bLmNzvfqf-jCD3xehf4Wj20S-dJZ1tY7RR_USqWi8AIXTL67y5acAeDvg/s1600/StumbleUpon-icon_btrix.png" alt="Stumbleupon" width="50" height="50" title="Stumbleupon" /> <span><br /> <b class="h2">Stumbleupon </b><br /> Añadir a stumble </span> </a> </li> <li> <a href="https://twitter.com/andante772"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeUAdb2XOcyQ5VrKoKoUnEeMgy-A5hTcUBVgV0xmS7HMpiJn9Fs3Dcf3_9bvFqpvnDmSJCMhvkcftumOHXZVWjF_LMHWB3ZK7QgwoFOcj73Q5rZlX474deO46PhsxylEc3K6VPZUW08FI/s1600/Twitter-icon_btrix.png" alt="twitter" width="50" height="50" title="twitter" /> <span><br /> <b class="h2">Twitter</b><br /> Añadir a twitter </span> </a> </li> </ul>
Nota:Puedes cambiar los contadores manualmente, solo cambia el numero color rojo de acuerdo al profile.
Reemplace ciudadblogger con tu ID de Feedburner
Reemplace trucosblogger con el nombre de usuario de Facebook
Reemplace andante772 con tu nombre de usuario de Twitter
Reemplace 107955298793879609876 con tu ID de Google plus
Reemplace Nombre de Usuario con tu nombre de usuario de StumbleUpon
Nota:Si por alguna razon no te trabaja como debe pon el codigo de css <style>codigo css</style> en area de Editar Html arriba de la etiqueta ]]</b:skin> y listo.
5. Luego guarda tu HTML/Javascript'.
Listo...
0 comentarios:
Publicar un comentario