BlogDesign

Hoy les traigo unos muy llamativos menúes para usarlos en tu blog. Lo especial que tienen es que utilizan opacidad para el fondo lo que le otorga una apariencia más profesional. Para poder apreciar la opacidad de los botones, es imprescindible una imagen de fondo, o un textura o un patrón. Por lo que deberás empezar a buscar una buena imagen que además combine con la imagen de fondo de tu blog o los colores que utilizas. Puedes ver las demostraciones de cada ejemplo en este blog de pruebas . Debes pegar el código en un gadget HTML/Javascript, y luego ubicarlo debajo de la cabecera, no sé cómo se verán estos menúes en la sidebar ya que los diseñé de manera que sean horizontales. Ejemplo 1 <div id="contenedor-menu"> <div id="menu2"> <ul> <li><a href=" # "> seccion1 </a></li> <li><a href=" # "> seccion2 </a></li> <li><a href=" # "> seccion3 </a>...

Esto será algo muy útil cuando debas dejar algún mensaje o aviso para tus lectores. Se trata de una ventanita, con apariencia similar a las de Windows, que es flotante y tiene la opción de cerrar con un efecto fade utilizando un botón. Insertarla es muy simple, sólo pega este código en un gadget HTML/Javascript y puedes cambiar algunos valores para personalizar la ventana a tu gusto. <div id='ventana-flotante'>    <a class='cerrar' href='javascript:void(0);' onclick='document.getElementById(&apos;ventana-flotante&apos;).className = &apos;oculto&apos;'>x</a>    <div id='contenedor'>        <div class='contenido'> Aquí va el mensaje.        </div>    </div> </div> <style> #ventana-flotante { width: 360px;   /* Ancho de la ventana */ height: 90px;   /* Alto de la ventana */ background: #ceffad;   /* Color de fondo */ posi...

Utilizando CSS, podemos crear un efecto de biselado para utilizar en botones, mensajes, contenedores o lo que se les ocurra. Veremos 2 formas de aplicar este efecto, una utilizando bordes y otra implementando la propiedad box-shadow . Con los bordes, encontraremos una forma más tradicional que nos permite que los bordes inferior y lateral derecho sean más oscuros simulando relieve. HTML <div class="biselado"> Texto </div> Hola, soy un cuadro con outset. .biselado { background: #2323ff ;   /* Fondo, debe ser más claro que el borde */ border: 5px outset #4444ff ;   /* Grosor del Borde */   /* Color del Borde */ color: white ;   /* Color del texto */ text-align: center ;   /* Alineación del texto */ text-shadow: -1px -1px rgba(0,0,0,.2); } O podemos lograr el efecto contrario, reemplazando la palabra outset que se encuentra antes del color del borde por inset . Hola, soy un cuadro con inset. Veamos ahora una manera más ef...

Como debes saber, existen muchos botones de redes sociales que sirven por ejemplo para seguir (en Twitter), agregar a los círculos de amigos (Google +) o para indicar que te gusta cierta página o una persona (Facebook). Navegando por la web encontré un práctico botón para poder suscribirse a los canales de YouTube. Este es un botón que te permite suscribirte al canal de Google Argentina sin necesidad de salir del blog. Insertarlo es muy simple, puedes pegar esto en un gadget HTML/Javascript para colocarlo en la sidebar: <div style="border: 0; height: 35px; overflow: hidden; width: 248px;"> <iframe align="middle" allowtransparency="true" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" src="http://www.youtube.com/subscribe_widget?p= NOMBRE-USUARIO " style="left: -1px; position: relative; top: -65px;" width="250px"> </iframe></div> Si quieres ...