BlogDesign

Buenas :) En este tutorial veremos cómo aplicar un efecto fade al cargar el blog . Desde otro punto de vista también podemos decir que creamos una ventana de carga que oculta el contenido del blog hasta que éste se cargue por completo. El truco es muy sencillo  sólo creamos un contenedor que oculte todo el blog, y con Javascript (mejor dicho: jQuery) le ordenamos que desaparezca, luego de finalizar la carga, y que aparezca, al ingresar a un enlace. La idea y gran parte del código lo obtuve de esta entrada de Ciudad Blogger , pero tuve que modificar algunas cosas para que no sea el body quien se oculte, sino que la ventana de carga se pose sobre el mismo para ocultarlo. Antes de empezar, debes tener instalado en tu plantilla jQuery , pegando la siguiente línea antes de </head> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/> En caso de ya tenerlo, no pegues nada ;) Ahora continuemos con el HT...

Y con ustedes, ¡la primer plantilla de BlogDesign! Ya me había llegado el momento y decidí iniciar mi carrera como 'diseñador de plantillas' :) Se trata de una plantilla para Blogger que puedes descargar y utilizarla en tu blog. El aspecto es relamente sencillo. Sin muchos colores, sin fuentes raras y simple organización. Una plantilla que no le vendrá muy mal a los blogs que no deseen llamar mucho la atención. Aquí más características: Buscador a un lado del título del blog. Contenedores con fondo blanco, un pequeño borde, y bordes redondos. Algunas (no muchas) funciones son configurables desde el Diseñador de plantillas. Las entradas se muestran de manera completa en la página principal. Plantilla simplista sin mucho código, lo que hace fácil la edición. Aquí te muestro una vista previa de cómo quedan los comentarios: Y aquí los enlaces al demo y descarga: Demo           Descarga Para instalar la plantilla investiga en este post de Oloblogge...

Hace unos días vimos cómo generar utilizando solamente CSS, el icono del sobre, representativo del correo o e-mail. Ahora veamos cómo hacerlo con el ícono RSS . Con el siguiente código podrás conseguir el icono, y podrás utilizarlo como botón o para decorar solamente. Lo malo de generar el icono es que no es fácil cambiar de tamaño, si necesitas hacerlo habrá muchos valores con los cuales tener que cambiar. HTML <div class="icono-rss"></div> CSS .icono-rss { width: 40px;   /* Ancho del icono */ height: 40px;   /* Alto del icono */ box-sizing: border-box; background: #FD7527;   /* Fondo del icono */ border: 1px solid #FF5D00;   /* Borde del icono */ border-radius: 5px;   /* Bordes redondos */ position: relative; box-shadow: inset 0 15px 10px -8px #FF9356, 0 2px 3px -1px rgba(0,0,0,.2);   /* Sombras */ } .icono-rss:before, .icono-rss:after { display: block; content: ""; position: absolute; bottom: 5px; left: 5px; } .icono-rss...

Como sabemos, el icono representativo del e-mail es el sobre de correo. Aunque muchas veces el arroba @ nos indica lo mismo. Hoy veremos cómo, utilizando solamente estilos CSS, crear un simple icono de sobre. HTML <div class='icono-email'></div> CSS .icono-email { background: white;   /* Fondo del icnono */ box-sizing: border-box; width: 40px;   /* Alto del icono */ height: 30px;   /* Ancho del icono */ border: 1px solid #777;   /* Borde del icono */ border-radius: 2px; box-shadow: 1px 1px 3px rgba(0,0,0,.095);   /* Sombra */ position: relative; } .icono-email:before, .icono-email:after { content: ""; width: 0; height: 0; position: absolute; top: 0; left: 0; } .icono-email:before { border: 19px solid transparent; border-top: 20px solid #777;  /* Color igual a color de borde */ } .icono-email:after { border: 18px solid transparent; border-top: 19px solid white;   /* Color igual a color de fondo */ left:1px...

Seguro conocerás este sistema de pestañas, que nos permite mostrar de manera alternativa distintos contenidos en un mismo espacio. Hay distintas versiones como con jQuery , o utilizando CSS, más específicamente la pseudoclase :target . Aquí veremos como obtener un resultado similar, pero utilizando la pseudoclase :checked. Comencemos con la estructura. <div id="contenedor">     <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />     <label for="tab-1" class="tab-label-1"> Pestaña1 </label>         <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />     <label for="tab-2" class="tab-label-2"> Pestaña2 </label>         <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />     ...