BlogDesign

Hoy les enseñaré a personalizar las scrollbars (barras de desplazamiento) de nuestro blog. Como dice en el título, este truco sólo afecta a Google Chrome y Safari, ya que se utiliza una propiedad que sólo se aplica en estos navegadores. Lo único que se necesita es aplizar el CSS, que como ya sabemos, se pega justo antes de  ]]></b:skin> ::-webkit-scrollbar { Estilos... } ::-webkit-scrollbar-thumb { Estilos... } ::-webkit-scrollbar-button { Estilos... } ::-webkit-scrollbar-track { Estilos... } ::-webkit-scrollbar-corner { Estilos... } Acá un esquema para poder ubicarse mejor: Se pueden agregar toda clase de estilos: color, borde, resplandor, etc. Un ejemplo de estilos sería así: ::-webkit-scrollbar {     width: 16px; background:white; } ::-webkit-scrollbar-track {     box-shadow: inset 0 0 6px rgba(0,0,0,0.3);     border-radius: 10px; } ::-webkit-scrollbar-thumb {     border-radius: 10px; ...

En este tutorial veremos cómo poner en el blog de manera muy fácil música de fondo. Vamos a Diseño   > Edición de HTML y antes de </body>  pegamos: <iframe frameborder='0' height='0' name='musica-fondo' src='http://www.youtube.com/v/ XXXXXXX ?&amp;autoplay=1&amp;loop=1' width='0'/> Musica: <a href=' http://www.youtube.com/v/ XXXXXXX ?&amp;autoplay=1&amp;loop=1 ' target='musica-fondo'>On</a> | <a href='about:blank' target='musica-fondo'>Off</a> Cambiamos las  XXXXXXX por la ID del video (de Youtube, obvio) y de esa forma ya tendremos música de fondo al acceder al blog. Continuemos... También podemos hacer que la música sea opcional añandiendo estos ingeniosos botones que permiten encender y apagar la música. Musica: On | Off Donde quieras (en un Gadget HTML/Javascript o en algún lugar de la Plantilla, etc) pegá lo siguiente: <div i...

ACTUALIZADO Para que los avatares de los comentarios queden más atractivos, la mejor manera es agregándoles estilos. Acá les dejo dos opciones para personalizarlos: OPCIÓN 1: CIRCULAR  Vamos a Edición de HTML y buscamos la línea  ]]></b:skin> y justo antes pegamos: .comments .avatar-image-container,  .comments .avatar-image-container img {  { max-width:60px !important; / *Ancho */ width:60px !important; / *Ancho */ max-height:60px !important;  /*Alto */ height:60px !important;  /*Alto */ } .comments .avatar-image-container { overflow: hidden; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVWFo0iNPE6mzTvGAWQ0SKJM0_Ql5yPrSbC-iHhTeRTFaNeZO8_VsusBtx0pdSMjfEZm5r8yCJjvGNf7m0vZapVX7CYamn3C-7JCoAeAPiHaeUNrp1v6-1MdNZEHYrWayYcEnViZaImJo/s1600/avatar+anonimo.png);  /*Imágen de autor anónimo */ box-shadow: 1px 1px 1px 0 #ccc;  /*Color de sombra */ -moz-transition: 0.8s; -webkit-transition: 0.8s; ...

Para los que no nos gustan llenar nuestro head de larguísimos scripts, acá un resúmen de un truco que encontré en Ciudad Blogger . Antes de </head> pegar: <!-- Cupido volando --> <script src='http://db.tt/4TqR7m8g' type='text/javascript'/> <!-- Cupido volando --> Ahora, elegí la imagen que más te guste y pegá el código justo antes de </body> . <!-- Cupido volando --> <div id='CupidoVolando' style='position:absolute; z-index:80; left: -500px;'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji8axXuJkedWD7uqa4lVj04BwXBQRyvbfieXpbwtCbsHlDmxWrli1fw6Nz3YHN-rJMlpqjw0UZ86iL8s2R5cQL5OLcdrzyiIAMQBZkzz3BvMtDo_cc88C4zpaPuRC-5S-J0uev412B5qk/s107/Cupido01.gif '/></div> <!-- Cupido volando --> <!-- Cupido volando --> <div id='CupidoVolando' style='position:absolute; z-index:80; left: -500px;'><img border='0...

Ya lo podés ver en mi blog: un botón que sólo aparece en las entradas individuales y al presionarlo te dirige automáticamente al cuadro de comentarios. Insertarlo es muy fácil. Sólo tenés que pegar el siguiente código antes de </body> . <b:if cond='data:blog.pageType == &quot;item&quot;'> <a href="#comment-form"><img class="boton-comentar" style="position:fixed; bottom:0px; right: 0px;" id="boton-comentar" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqN0ioai3NfIio56gI5hv4E4fQTOgcvKjCWuPUA_mhkVEl3JcJf0Me_GnM91LUjrYyYVFM-OhDm86pwT_Nrs_u7i36jZ6NwvXU6oH2G9a_e33F6xfnEGcqzqMdT3n0lUZE405KXKnhy3A/s1600-r/Deja+un+comentario+homero.png " /></a> </b:if> Aviso Podés cambiar la URL en color rojo por otra imagen que prefieras. También... podés agregar estos estilos:    (antes de ]]></b:skin> en Edición de HTML .) #boton-comentar { -moz-transitio...