BOTONES SOCIALES CON EFECTO DE DESVANECIMIENTO EN PIE DE PAGINA

Hay muchos tutoriales que explican como agregar iconos o botones de redes sociales en diferentes partes del blog, como en el sidebar lateral, en entradas y hasta flotando por todo el blog, pero en esta ocasión les mostraré cómo insertar estos botones sociales en el footer (pie de pagina).

Lo genial de estos botones, es que al pasar el cursor sobre un icono obtiene un efecto de desvanecimiento para los demás.

DEMO

Los estilos CSS

Para añadir los estilos CSS a los botones, nos dirigimos a Plantilla, Editar HTML y adentro presionamos CTRL+F y escribimos:

]]></b:skin>

Antes del código mencionado anteriormente, pegamos:  

#footericons { text-align:center; margin: 0 auto; padding:30px; background-color: #F5F5F5; } #footericons ul li { list-style-type: none; text-align:center; margin-left:5px; } #footericons ul li:hover{ -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; text-shadow: 10px 5px 5px #000; }

El HTML 
Ahora, buscamos el siguiente código:  

</body>

Y antes, pegamos lo siguiente:

<div id='footericons'> <a href='#Facebook' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRykBF8FE3HkMbW18X7mob5MF-TybqaW6nEtcaJqdvcxp8iPDKaGQMOR82Wt-wxrcMpR6T6vLGJUWCYNoQnoZt-1NYdVT64-bi5YBgcoK0T4dx8twwgLpExkcxn9yTimDSWzumD0mi53qM/s1600/facebook.png' style='margin-right:15px;'/></a> <a href='#Twitter' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQE19jvhFBkfjypc4cIS38Dqh_OAaA69RT7sQqonohcj-rsc0JISw-JsqBq0u2LlP3dVCmU3m2r0nR_EW3pPik336-5teM2sexfb43L8deD7us8y_Xc48kU0zvRaWFlZoxJfsyqM3_2Qpg/s1600/twitter.png' style='margin-right:15px;'/></a> <a href='#GooglePlus' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOnPxsgxMF1eaL1Vpp2rRBTt4-lIPYl5rdZcDbci7MGvkX0LEj2MA0LUxEK28XT_suLqzMuEYYI-Wws1fZL3MlgBpsifPHIKrOg0HRRpElnL71Mg5V_MdBBRiqn5YuXe12_3LULPeAZCDV/s1600/google+.png' style='margin-right:15px;'/></a> <a href='#Youtube' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYtdW7yXPHjc5xj-D0zmpKSxeVxD5seFdjvnIvl14WrVxHiP8PXPyQYoH9CWKrIVGMiMqFqaNoFUoscCaoCBiwRguzD8lSDZaS0H4-tt3pdUEaZg2kjb6gIzdFxAvjyVJHiFc4t9vSS44d/s1600/youtube.png' style='margin-right:15px;'/></a> <a href='#LinkedIn' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy-8bayg9ZAud1QwmRSQOZlYAd-Nw9daIZFcMy62c0x4Xnzkw-a65QcoBr9pNBooD75XROIgBvkhg9hldC081H1VjAMTa_JjW3Sz0QMRppwl036nFcyxNNelK2nAH_xRU3gkKfUc7DeEPb/s1600/linkedin.png' style='margin-right:15px;'/></a> <a href='#Feedburner' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsQzae6Q9VMWZj8tXGL7EmeGPM6fuoqSjE6tS6x7vU51yhRAXHdyjmkHA8R2B8cUEwhZQp9IRTTzfDTyZNsLxDAyBpZUJjSDwvev4yLF2UIRULvpIF6U97IgfFLPN4M_X5FUljHqgtH00r/s1600/rss.png' style='margin-right:15px;'/></a></div> <script src=' http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/> <script> $(document).ready(function() {     $(&#39;#footericons a&#39;).hover(function() {         $(&#39;#footericons a img&#39;).not($(&#39;img&#39;, this)).stop().fadeTo(250, &#39;0.1&#39;);     }, function() {         $(&#39;#footericons a img&#39;).stop().fadeTo(250, &#39;1.0&#39;);     }); }); </script>

Post de NovedadBlogger.net: BOTONES SOCIALES CON EFECTO DE DESVANECIMIENTO EN PIE DE PAGINA

Leer mas »

CÓMO INSERTAR UNA PUBLICACIÓN DE FACEBOOK, TWITTER Y GOOGLE+ EN TU BLOG

Las redes sociales son una herramienta importante para compartir tus publicaciones sobre todo para aquellas personas o empresas que tienen blogs o webs y quieres tener un posicionamiento SEO bueno para tener popularidad. Por ello le voy a explicar como insertar sus publicaciones de Facebook, Twitter y Google+ en vuestro blog.


FACEBOOK

Vamos a la publicación que queremos insertar, damos en la flecha de la parte superior de arriba, hacemos click y despues en "insertar publicación":

Aparece una ventana con un código HTML, ese código lo tienes que insertar en su post de blogger:

TWITTER

Nos dirigimos a la tweet que deseamos insertar, le damos al enlace "Mas" y despues a "Insertar Tweet":

Nos vuelve a aparece una ventana con un código HTML, ese código lo tienes que insertar en su post de blogger:

GOOGLE+

Nos vamos a la publicación que queremos insertar en nuestro blog, hacemos click en la flecha que aparece en la parte superior a la derecha de la publicación y despues a "Insertar publicación":

Vuelve a aparecernos otro código HTML que será para pegarlo en nuestra entrada de blogger:

Leer mas »

Cambiar el enlace de la cabecera del blog

Hay quienes crean varios blogs que son parte de un blog principal y desean que al dar click a la cabecera no los dirija a la portada, sino que los lleve a otro blog. Lo que aprenderemos en esta entrada será a cambiar el enlace de la cabecera para que abra otra página, ya sea otro blog, una página estática, o cualquier otra dirección.

DEMO

Para conseguir lo antes mencionado debemos ir a Plantilla | Edición de HTML.
Si el título de tu blog es una imagen busca este código:

<div id='header-inner'> <a expr:href='data:blog.homepageUrl' style='display: block'> <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/> </a>

Cambia todo lo que está en color rojo por esto:

  

href='URL del enlace'

Ahí deberás agregar el link del blog o la página que quieras enlazar.

Si no tuvieras una imagen en la cabecera, o sea, que el título del tu blog sea sólo texto, entonces busca este código:

<b:includable id='title'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <data:title/> <b:else/> <a expr:href='data:blog.homepageUrl'><data:title/></a> </b:if> </b:includable>

De igual manera cambia lo que está en color rojo por esto:

href='URL del enlace'

En el caso de quienes en el título sólo tienen texto, sabrán que cuando se está en la portada el título no tiene enlace, únicamente cuando se entra a un post. Si quisieras que el título de tu blog tenga enlace aun estando en la portada entonces cambia el código anterior por esto:

<b:includable id='title'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <a href='URL del enlace'><data:title/></a> <b:else/> <a href='URL del enlace'><data:title/></a> </b:if> </b:includable>

Así de simple podrás cambiar el enlace de la cabecera y hacer que al dar click no muestre la portada del blog, sino que abra otro blog.  

Post de Ciudadblogger: Cambiar el enlace de la cabecera del blog

Leer mas »

Cómo hacer que el gadget de Páginas se haga flotante al bajar el scroll

Lo que hace este código es que al bajar el scroll de la página el gadget de Páginas flota y se mantiene visible, y una vez que se sube el scroll de la página el gadget toma de nuevo su posición original.

DEMO

Para colocarlo en tu blog entra en Plantilla | Edición de HTML y antes de </head> pega lo siguiente:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/> <script> //<![CDATA[ $(function() { var $flotarMenu = $("#PageList1"), $window = $(window), offset = $flotarMenu.offset(); $window.scroll(function() { if ($window.scrollTop() > offset.top) { $flotarMenu.css({'position' : 'fixed', 'width' : '880px', 'top' : '0px'}); } else { $flotarMenu.css({'position' : 'relative', 'top' : 'auto'}); } }); }); //]]> </script> <style> #PageList1 { width:880px; /* Ancho del gadget de Páginas */ background:#fff; /* Color de fondo del gadget */ z-index: 99; } </style>

¿Qué hay que tener en cuenta si decides usarlo?

Si ya tuvieras jQuery omite la primera línea en color gris. Y si usaras Scriptaculous/Prototype deberás hacer unos cambios.

Lo que está en color rojo es el ID del gadget de Páginas, así que asegúrate que el ID de tu gadget sea el mismo que el que se muestra en el código, ya que algunas veces puede variar a #PageList2, #PageList3, etc. si así fuera sólo cambia lo que está en rojo por tu verdadero ID.

Incluso puedes usarlo con cualquier otro menú, sólo tendrás que cambiar lo que está en rojo por el ID de tu menú, aunque seguramente tendrás que añadir algunos estilos extras debajo de <style>

En color azul se establece el ancho del gadget. Si ves que queda muy angosto o muy ancho ahí es donde deberás moverle.

Si usas la plantilla Fantástico, S.A. (Awesome Inc.) sabrás que el menú cubre todo el ancho de la pantalla, así que quienes usen esa plantilla deberán usar este código en lugar del anterior:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/> <script> //<![CDATA[ $(function() { var $flotarMenu = $(".tabs-outer"), $window = $(window), offset = $flotarMenu.offset(); $window.scroll(function() { if ($window.scrollTop() > offset.top) { $flotarMenu.css({'position' : 'fixed', 'width' : '100%', 'top' : '0px'}); } else { $flotarMenu.css({'position' : 'relative', 'top' : 'auto'}); } }); }); //]]> </script> <style> .tabs-outer { width:100%; background: url(http://www.blogblog.com/1kt/awesomeinc/tabs_gradient_groovy.png) repeat scroll 0px 0px #000; /* Color de fondo */ z-index: 99; } </style>

En este caso no hace falta verificar el ID del gadget ni cambiar el ancho del gadget, pero en caso de que lo requieras puedes cambiar el color de fondo modificando lo que está en negrita.

Como has podido ver la instalación es de un solo paso y no hace falta hacer nada más excepto retocar algunos estilos en caso de ser necesario; y el resultado además de ser muy llamativo puede ser muy práctico para tus visitantes y para ti, sobre todo si quieres que tus lectores tengan siempre visibles y a la mano los enlaces de tu menú.

Post de Ciudadblogger.com Cómo hacer que el gadget de Páginas se haga flotante al bajar el scroll

Leer mas »