Eliminar o Desactivar Deep Freeze sin contraseña

Para las usuarios que tienen el programa deep freeze instalado en sus computadoras, y han perdido la contraseña y quieren eliminar o desactivar el programa, les encantara este articulo, traigo varios descongeladores que recolecte durante un tiempo, al principio había hecho un pack con el único de fin de desactivar el deep freeze del computador de mi escuela, al final todo el trabajo valió la pena y me apodere del pc de mi colegio!, bien a lo que vinimos.

Archivos ads.txt en Blogger

Bueno, por mi parte hago esto porque me acaba de llegar el mensaje "Ingresos en riesgo: uno o varios de sus archivos ads.txt no contienen su ID de editor de AdSense. Solucione este problema ahora para evitar que afecte de manera significativa a sus ingresos." por parte de Adsence, a lo al dar en acción me sale "Falta el ID de editor de los archivos ads.txt" ahora se preguntara que esto? y porque ahora sale después de tanto tiempo? bueno te explicare eso muy rápido y te mostrare como resolverlo.

Que es el ads.txt?

Es un nuevo proyecto lanzado en junio por Interactive Advertising Bureau para evitar el fraude publicitario por parte de editores ilegítimos dando así mayor transparencia al sistema publicitario, esta es una nueva norma primordial para la legitimidad de la publicidad en linea. Saber mas sobre ads.txt.
y como crearlo según la ayuda de adsence.

Por ello, Adsence sigue los estándares y tarde que temprano te va a pedir que agregues este archivo.

Decora tu blog para Navidad

Llega la navidad con su alegría y gastadera de plata, y para los bloggers es muy importante que nuestros blogs estén altanto de las festividades por motivos decorativos, y es ese el motivo de esta entrada, te mostrare algunos trucos para que decoremos nuestro blog para que tenga ese toque navideño que tanto nos hace sentir en casa.

Botones para Compartir el Blog en Redes Sociales

Como poner botones para compartir en redes sociales  nuestro blogger, ahora que las redes sociales cada vez están haciendo mas peso sobre los motores de búsqueda, es esencial hallar una forma de compartir, nuestro blog de blogger o una web, ademas de eso, regar nuestra url por las redes sociales ayuda a aumentar el trafico de visitas en nuestro sitio, una buena forma de lograrlo es insertar iconos o botones de estas redes sociales en el blog, para que los usuarios que interactúan en el, puedan compartir nuestro enlace, y así se difunda. No confundir, lo que mostrare en esta entrada es para compartir una URL especifica o la pagina principal, si lo que estas buscando es colocar botones para compartir las entradas o post visita esta entrada de botones para compartir las entradas de blogger, por otro lado si lo que quieres son iconos tipo sígueme en tu blog sigue esta entrada para colocar iconos para seguidores, no siendo mas, basta de parloteo y manos a la obra.

Tengo listos estos botones (como los de la imagen), para agregarlos a tu blog, solo debes seleccionarlos y pegarlos en un HTML/Javascript. Si usas dispositivo movil o no quieres copiar el código, usa el botón rápido que dice Añadir a Blogger, pero recuerda que debes cambiar lo que dice URL-BLOG por la URL de tu blog o pagina. Nota el botón de facebook no se vera hasta que le coloques la URL de tu blog.

Si usas wordpress: copia el código -> ve a Escritorio-> Apariencia-> Widgets -> elige el widget cuyo nombre es ‘Texto’-> y pega el código.

<div id="botones-para-compartir"> <table border='0'> <tr> <td><a class='twitter-share-button' data-count='vertical' data-url="URL-BLOG" data-lang='es' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script></td> <td><script src='http://apis.google.com/js/plusone.js' type='text/javascript'></script><g:plusone size='tall' href='URL-BLOG' /></g:plusone></td> <td><iframe allowtransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php?href=URL-BLOG&layout=box_count&show_faces=false&width=83&height=63&action=like&font=tahoma&colorscheme=light' style='border:none; overflow:hidden; width:83px; height:63px'></iframe></td> </tr> </table> </div> <style type="text/css"> #botones-para-compartir { background: #eee; /* Color de fondo */ z-index:1500; /* no tocar */ box-shadow: 0px 0px 4px #808080; /* Color del borde */ max-width:210px; } </style>

O también este diseño estilo botón pequeño con contador al lado del botón, como en el caso de arriba puedes agregarlo mas rápido o desde un dispositivo movil con el boton Añadir a Blogger, recuerda cambiar lo que esta en color rojo por la URL de tu Blog. Nota el botón de facebook no se vera hasta que le coloques la URL de tu blog.

<div id="botones-para-compartir"> <table border='0'> <tr><td><iframe allowtransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php?href=URL-BLOG&layout=button_count&show_faces=false&width=115&height=25&action=like&font=tahoma&colorscheme=light' style='border:none; overflow:hidden; width:106px; height:22px'></iframe></td><td><a href="https://twitter.com/share" class="twitter-share-button" data-url="URL-BLOG"data-lang="es">Twittear</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </td><td><script src='http://apis.google.com/js/plusone.js' type='text/javascript'></script><g:plusone href='URL-BLOG' size='medium'/></g:plusone></td></tr> </table> </div> <style type="text/css"> #botones-para-compartir { background: #fbfbfb; /* Color de fondo */ z-index:1500; /* no tocar */ box-shadow: 0px 0px 4px #808080; /* Color del borde */ max-width:300px; } </style>

También les presento estos estilizados iconos sociales para compartir el blog en redes sociales como los de arriba, solo que en estos incluye pinterest y likedin, a diferencia de los anteriores, estos iconos no generan carga adicional, (es decir no cargan los scripts de los botones) son livianos y están optimizados al 100%, al dar click para compartir el blog se abre una pequeña ventana POP Up! y después de compartir en enlace se cierra, ademas de que se tornan circulares y con una leve sombra al pasar el cursor sobre ellos, muy buena opción para los que prefieren este tipo de estilo, puedes ver como funcionan a continuación, Recuerda cambiar donde dice URL-BLOG por la dirección de tu blog.

<div id="botones-para-compartir"> <a href="javascript:void(0);" onclick="window.open("http://www.facebook.com/sharer.php?u=http://www.inovablog.com/","gplusshare","toolbar=0,status=0,width=548,height=325");" rel="nofollow" title="Compartir en Facebook"><img alt="compartir en facebook" class="facebooki" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY2F3_tqTjt9yWWfUa_-0YRgzdNz5kSg7sVGCwl9jvjVvLL2vxk9X6PGhCglf7zY-rbklIO5WG7AjaEW8Z3MpjjnP7BnQrH9_W5gOtVhg7wgbLRWR9cEsbugghnQSXF7UrApW3xRLm1B4/s320/facebook.png" title="compartir en facebook" width="32" /></a> <a href="javascript:void(0);" onclick="window.open("https://plus.google.com/share?url=http://www.inovablog.com/","gplusshare","toolbar=0,status=0,width=548,height=325");" rel="nofollow" title="Compartir en Google+"><img alt="compartir en google+" class="googlei" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxaDuMJ1HBtE3YZjbKFR6pQcpnyM22n2uPgvksiROcv3QMmxHv_iq-7Wgh7IUoeiELfN6ZYlQVMPVJn-hvTKHXZ2jybkJ1MNcp-RlkCtKn_2qMV6DPyG1ptMIPilGKH-FuiBg3PL2RhXA/s1600/Google%252B+alt.png" title="compartir en google+" width="32" /></a> <a href="javascript:void(0);" onclick="window.open("http://twitter.com/home?status=http://www.inovablog.com/","gplusshare","toolbar=0,status=0,width=548,height=325");" rel="nofollow" title="Compartir en Google+"><img alt="compartir en twitter" class="twitteri" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMu6htRcZ176F7EkDIg0RxSumRz-sBnWWOV9y_v6P2RSyx5elAvma2VVHex-qIROnk6BRUH0jpThYv0Mj8GWu9r2YfiUPykXfyn7MjLYXqFejQkjn02dZVpVGqc1S7HNXXKz2wnoA9v3c/s1600/twitter.png" title="compartir en twitter" width="32" /></a> <a href="javascript:void(0);" onclick="window.open("https://www.pinterest.com/pin/create/button/?url=http://www.inovablog.com/","gplusshare","toolbar=0,status=0,width=548,height=325");" rel="nofollow" title="Compartir en Google+"><img alt="compartir en pinterest" class="pinteresti" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvagvlQgxLEMAIJdOnZi9wnr_bKuSX1JRBeU-FsFaqip39H_gHw2dsjg68b7ekkpZ-HUqy5qt7NETNErfeudcKIy28ulYslk2Z3-a5AQgL08bWZ_nz_JAIuYatfL22LYfVlvrkDTPgjvk/s1600/pinterest.png" title="compartir en pinterest" width="32" /></a> <a href="javascript:void(0);" onclick="window.open("http://www.linkedin.com/shareArticle?url=http://www.inovablog.com/","gplusshare","toolbar=0,status=0,width=548,height=325");" rel="nofollow" title="Compartir en Google+"><img alt="compartir en likedin" class="likedini" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtFqFoJz7taJL89_aIeNhgSCCEvooRhRRKhYfV5YqhwOtbmocNJVl1YHxCB56SwU0WogEWFIeAJLsf9M-M3NcIaLBCjre3ko5Cc1PPCCCMuQYQHHlN6Ld4wxqS6oyVur4GZeZBwWFsHn8/s1600/linkedin.png" title="compartir en likedin" width="32" /></a></div> <style>#botones-para-compartir { text-align:center;}.likedini:hover, .facebooki:hover, .twitteri:hover, .googlei:hover,.pinteresti:hover {border-radius:25px 25px 25px 25px;transition:all .3s ease-out;box-shadow: 0px 0px 5px #000; /* Sombra */-moz-transition: all .5s;-webkit-transition: all .5s;-o-transition: all .5s;}.likedini, .facebooki, .twitteri, .googlei, .pinteresti {transition:all .3s ease-out;-moz-transition: all .5s;-webkit-transition: all .5s;-o-transition: all .5s;}</style>

Como no incluir por lo menos el mismo estilo de botones pero para los usuarios que prefieren algo un poco mas pequeño literalmente, por ello también tengo estos bonitos iconos sociales para compartir, tienen las mismas funciones que los anteriores, simplemente son un poco mas pequeños, aunque no son los mismos, son iconos diferentes a los otros ya que están hechos de este tamaño para una mejor optimizacion, puedes verlos en acción a continuación. Recuerda cambiar donde dice URL-BLOG por la dirección de tu blog.

<div id="botones-para-compartir"> <a href="javascript:void(0);" onclick="window.open("http://www.facebook.com/sharer.php?u=http://www.inovablog.com/","gplusshare","toolbar=0,status=0,width=548,height=325");" rel="nofollow" title="Compartir en Facebook"><img alt="compartir en facebook" class="facebooki" height="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU4hiC0Km3APxwfYKBOu-ynzsO4jvDPG1M7gE8_8A5zdPbGr1OfUGnuzLdu4ORR_NMxpQKnV3mSH2qBTASIBmy2tSkt3YmeQiOTiEDuHu2iE_2g8M6H6E2bDim8xxH3bnym4UXPaNtjQQ/s1600/facebook.png" title="compartir en facebook" width="25" /></a> <a href="javascript:void(0);" onclick="window.open("https://plus.google.com/share?url=http://www.inovablog.com/","gplusshare","toolbar=0,status=0,width=548,height=325");" rel="nofollow" title="Compartir en Google+"><img alt="compartir en google+" class="googlei" height="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKbDbAIjMQlF5WeeOoLu-lRcfsN-hhe3d2D3UXmvIPKvC3tXD24cJ8TQ6jzGbuh9NqhHZqRLVQhckxr5d7UZytPEufXchLUAqAFbM8gQq5PHkgxSX8kjT-JM3zL_KHzqGWD-sI22pXLM4/s1600/Google%252B+alt.png" title="compartir en google+" width="25" /></a> <a href="javascript:void(0);" onclick="window.open("http://twitter.com/home?status=http://www.inovablog.com/","gplusshare","toolbar=0,status=0,width=548,height=325");" rel="nofollow" title="Compartir en Google+"><img alt="compartir en twitter" class="twitteri" height="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYDBq35vnqPnnG_l33pDbJHdJhu99yhyphenhyphen1WUrWwQOxZLjVHJpiGQjdmKp7dauVwVais0MOPH5PJAWilwFPvBbfof6Bmp0n_eYor3ZXkKdS32OfBdL5euAysF2QX7kU4ztXOHX1WNAliZpw/s1600/twitter.png" title="compartir en twitter" width="25" /></a> <a href="javascript:void(0);" onclick="window.open("https://www.pinterest.com/pin/create/button/?url=http://www.inovablog.com/","gplusshare","toolbar=0,status=0,width=548,height=325");" rel="nofollow" title="Compartir en Google+"><img alt="compartir en pinterest" class="pinteresti" height="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6wIwHeQlwtIrsbgJRv98ylochnJCxLVjr7TPELebXjdoYnrSx81qY7LpzbQlz2mJcFZhqFI7c3WtDS7t1vSmztX42XIc5qAamSlkq3OflyZOf-OIopl4t346B9DufXzgt8N2aKtkT2KE/s1600/pinterest.png" title="compartir en pinterest" width="25" /></a> <a href="javascript:void(0);" onclick="window.open("http://www.linkedin.com/shareArticle?url=http://www.inovablog.com/","gplusshare","toolbar=0,status=0,width=548,height=325");" rel="nofollow" title="Compartir en Google+"><img alt="compartir en likedin" class="likedini" height="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ72bYo1jMfK6jr_G79Gy-Ys99gLIlV5uXDiX3FSjbUjIyRzBUnb9vJxZV-hMhFanilu8lU9YK5ntumwHPL0e2a3CHSGFgtB7DCmp6jvkveMA0OhYSKm7pqPudBU6sGB5wIMBU22MKPDE/s1600/linkedin.png" title="compartir en likedin" width="25" /></a></div> <style>#botones-para-compartir { text-align:center;}.likedini:hover, .facebooki:hover, .twitteri:hover, .googlei:hover,.pinteresti:hover {border-radius:25px 25px 25px 25px;transition:all .3s ease-out;box-shadow: 0px 0px 5px #000; /* Sombra */-moz-transition: all .5s;-webkit-transition: all .5s;-o-transition: all .5s;}.likedini, .facebooki, .twitteri, .googlei, .pinteresti {transition:all .3s ease-out;-moz-transition: all .5s;-webkit-transition: all .5s;-o-transition: all .5s;}</style>

Pero eso no es todo para los bloggers que no les gusta el diseño cuadrado les tengo este impecable diseño de Inovablog, tipo iconos redondos con rotación al pasar el mause por ellos, una muy buena forma para cautivar a tus usuarios y motivarlos a compartir el blog, tiene la misma función que los anteriores solo que el estilo es diferente, están de impacto y recuerda cambiar lo que dice URL_BLOG por la dirección de la pagina que vas a ponerle.

<div id="botones-para-compartir"> <a href="javascript:void(0);" onclick="window.open("http://www.facebook.com/sharer.php?u=URL_BLOG","gplusshare","toolbar=0,status=0,width=548,height=325");" rel="nofollow" title="Compartir en Facebook"><img alt="compartir en facebook" class="facebooko" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjchOCiJv-zaI0KNrhpxjAUU4y6Mhymqd36YMPbhJz-Y4-S2kLsZbsyB7mOaQ-y7SX-o7iK-QBuqNGB80wog7BxboIUTGKp_-Awkl7RcYokYzQFpg3HYmfPiyP7AoN67uP1zWyILAg8yEs/s1600/facebook-long.png" title="compartir en facebook" width="40" /></a> <a href="javascript:void(0);" onclick="window.open("https://plus.google.com/share?url=URL_BLOG","gplusshare","toolbar=0,status=0,width=548,height=325");" rel="nofollow" title="Compartir en Google+"><img alt="compartir en google+" class="googleo" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhreeeqJIIj0mx0-sebVZd3Taz3OXYCk-VGp_2SbaaYPr8AHjkuV2TZ2nMwqbvWxXeN1uP8dZVDZ1oG4mmuF395oAwwcoSUv3MvkV4rgCKCv36yrxa6TWU1Mw4CkVu5TgVgHaskVgH0Jnc/s1600/google-long.png" title="compartir en google+" width="40" /></a> <a href="javascript:void(0);" onclick="window.open("http://twitter.com/home?status=URL_BLOG","gplusshare","toolbar=0,status=0,width=548,height=325");" rel="nofollow" title="Compartir en Google+"><img alt="compartir en twitter" class="twittero" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzdMp4-Z0oZneGVnj_abGpInwwQhUDrY8R87FzkVOnNbA2DSanNcszb9kGvaUAkNTqCN6wdvmeQE_yJOxVXyQ3EsqKPRLhF0tS9kUB_WkKM_ZL8vIo8L1JAwYQkdTkxf_S4fXF4pzff74/s1600/twitter-long.png" title="compartir en twitter" width="40" /></a> <a href="javascript:void(0);" onclick="window.open("https://www.pinterest.com/pin/create/button/?url=URL:BLOG","gplusshare","toolbar=0,status=0,width=548,height=325");" rel="nofollow" title="Compartir en Google+"><img alt="compartir en pinterest" class="pinteresto" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy6tNBtDiasQh0QUXymqyxZ2wo9uVlRfOmcuddh1AjgscYImGc4TBq5lxx6rb6vAlcWlbPIwZUx1cpsH3eYc0utpxJHFunRDOpJHnhQ8rV3I_usU-N9IXS24dqdrNicavBX1bJ5oohXiE/s1600/pinterest-long.png" title="compartir en pinterest" width="40" /></a> <a href="javascript:void(0);" onclick="window.open("https://www.linkedin.com/shareArticle?mini=URL_BLOG","gplusshare","toolbar=0,status=0,width=548,height=325");" rel="nofollow" title="Compartir en Google+"><img alt="compartir en likedin" class="likedino" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsrGSgbEr9seDeugPYsr_1CSKbK7b9zImo47AvQUwklc-nnU1Q5CyLrN6GEp7ifMuddbqFKWCtSlwpo5s45bS8FlVo9AGUREAb_jUI-bD2Kqmy4QLTQKb0ni0I97IsfIMyeRwmWY4pRMk/s1600/linkedin-long.png" title="compartir en likedin" width="40" /></a></div> <style>#botones-para-compartir{ text-align:center;}.likedino:hover, .facebooko:hover, .twittero:hover, .googleo:hover,.pinteresto:hover {-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);transform: rotate(360deg);transition:all .3s ease-out;-moz-transition: all .5s;-webkit-transition: all .5s;-o-transition: all .5s;}.likedino, .facebooko, .twittero, .googleo, .pinteresto {transition:all .3s ease-out;-moz-transition: all .5s;-webkit-transition: all .5s;-o-transition: all .5s;margin-left:10px; /* espacio entre cada boton */}</style>

Botones, compartir el blog, compartir en redes sociales, compartir sitio en facebook, compartir blog en twitter, boton para compartir, publicar en redes sociales, compartir tu blog en redes sociales, agregar botones de redes sociales, enlace para compartir en facebook, compartir mi blog en redes

4 plantillas estilo facebook para blogger

E aquí 4 hermosas plantillas con diseño estilo facebook para los usuarios de blogger que amen esta red social, consta de 4 plantillas muy similares a la pagina facebook para integrar en tu blog (blogger) . algunas tendrán que hacerles alguna configuración desde el html pero bien vale la pena hacerlo, bien sin mas preámbulo te las presento, plantillas facebook para blogger.

Como Poner Metatags en Blogger

Bien, vamos a agregar MetaTags en nuestro blog o pagina, para ello les presento un generador de etiquetas meta, como también pueden ser conocidas, las cuales son muy importantes para el SEO de nuestros sitios, consta de un formulario en el que  llenas los campos y te genera un código HTML para poder integrarlas en el blog, tu pagina de wordpress o cualquier otro sitio que tengas, hay algunas diferencias leves en cuanto a si funcionan para blogger o sitios en general, pues mi web va dirigida para aplicar específicamente sobre blogs de esta plataforma, pero no habrá mucho problema, también actualizaremos algunas etiquetas esenciales y de paso nos evitaremos un problema con la etiqueta Descripción (descripciones duplicadas).

Botones Sociales para Compartir las Entradas de Blogger

Los botones para compartir entradas del blog en redes sociales, son la llave maestra para cualquier bloggero (avanzado o novato) nada mejor que un usuario al que le gusto una de tus publicaciones pueda compartirla con sus amigos o conocidos, aquí es donde entras los botones sociales ya que ayudan a difundir el contenido de nuestras publicaciones y las mismas atrayendo mas publico y ahorrándonos trabajo de difucion del blog, siendo esto muy importante ahora que las redes sociales tienen un peso mayor sobre los buscadores. En esta entrada te enseñare como colocarlos en tu blog, mas que todo en las entradas individuales, por experiencia propia usaremos los mas populares, como lo son el de Me gusta, Twittear y +1, pero igual tendremos de los otros, también este truco sirve para wordpress y otros sitios web, no confundir, si lo que estas buscando es colocar iconos tipo sígueme en tu blog sigue esta entrada para colocar iconos para seguidores por otro lado si quieres los botones pero para una URL especifica visita esta entrada de botones para difundir la pagina principal, basta de parloteo y manos a la obra.

Envíar Pagina a Google, Yahoo y Bing, Motores de Búsqueda

Bien, en esta entrada vamos a enviar nuestra URL del Blog o pagina a los motores de búsqueda Google, Yahoo y Bing, que son los principales, tambien hay muchos otros como yandex, ask, entre otros, pero por mi parte dejare la indexacion de estos para despues, ya que estadisticamente los principales que mencione son los mas usados, si tu pagina es nueva o notas que aun no tiene la presencia que tanto quisieras en los resultados de búsqueda, talvez se deba a su ausencia en los dichos motores, entonces sera importante añadir la web a los indices de buscadores para darlo de alta, ya que así aceleraremos la indexacion de este por parte de ellos, ahora veremos los 3 sitios para sugerir  los enlaces de nuestros blog o webs.

Menu que Cubra toda la Pantalla (Fullscreen)

Hola gente, esta vez traigo un tutorial para colocar un menu que cubra toda la pantalla en nuestro blog, si ya lo notaste cambie el diseño del blog, pues estaba un poco cansado con el anterior aunque no estaba nada mal a mi parecer, aprovechando, puse una navegación tipo fullscreen, este le dio un respiro fresco a mi pagina, solo tienes que presionar las 3 lineas que están en la esquina (icono de la hamburguesa  ≡) para desplegarlo, saldrá desde la esquina izquierda, es una gran ventaja tener uno de este tipo, gracias al icono de la hamburguesa que cada vez es mas frecuente en tabletas y smartphones, así pues , este se adapta a toda la pantalla y muestra las secciones.

Cuando alguien visite el blog y vea la figura, sabrá exactamente que se trata de un menu, tiene un estilo fresco, simple pero muy atractivo, por eso no cuenta con submenus, si lo que querías era uno con desplegables pues tendrás que buscar por otro lado, por mi parte no necesito los submenus, pues cada uno pertenece a una pagina principal, bueno, ya con este desplegado, para cerrarlo solo debes dar click en símbolo x que aparecerá en la esquina, dejando la palabrería de lado, mira esta demostración de su funcionamiento, presionarlo y mira como funciona!

×

Acerca de Articulos Buscar Enlazanos

 ≡

Pues que te pareció? genial no? bien eso es lo te tendremos en el blog, un menu que ocupe todo el ancho y alto de pagina, ademas de lo visto el código para implementarlo es bastante corto, pero lo mejor es que es responsive! osea que se adapta a los dispositivos móviles, manos a la obra.

Como Hacer el Responsive Menu Fullscreen?

Primero tenemos que tener nuestro código HTML, (esto lo haré orientado a blogs de blogger, si usas wordpress o cualquier otra plataforma pues tu ya entenderás como implementarlos), en donde estarán las listas o secciones, es donde colocaremos los enlaces, usaremos este código:

<div id="myNav" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="overlay-content">
    <a href="enlace1">Pagina1</a>
    <a href="enlace2">Pagina2</a>
    <a href="enlace3">Pagina3</a>
    <a href="enlace4">Pagina4</a>     

  </div>
</div>
<div id='spani'>
<span onclick="openNav()">&#160;&#8801;</span></div>

Para colocarlo en el blog:

1. Copia el código que te mostré.
2. Nos vamos a a diseño 
3. Añadir un gadget
4. Elegimos  uno del tipo HTML/Javascript 
5. Pega los códigos que copiaste 
6. y guarda.

Con esto tendremos lo primero, ahora vamos a agregar los estilos para darle forma:

.overlay {
height: 100%; /*Alto del menu*/
width: 0;
position: fixed; 
z-index: 1; 
left: 0;
top: 0;
background-color: rgba(0,0,0, 0.9); /*Color de fondo*/
overflow-x: hidden; 
transition: 0.5s; /*Tiempo que tarda el despliegue*/
}
.overlay-content {
position: relative;
top: 25%; /*Altura de enlaces desde el top de pantalla*/
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 46px; /*Tamaño texto de enlaces*/
color: #818181; /*Color de enlaces*/
display: block; 
transition: 0.3s; /*Tiempo hover de enlaces*/
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1; /*Cuando pasa el raton en un enlace*/
}
.overlay .closebtn {
position: absolute;
top: 20px; /*Altura de la X*/
right: 45px; /*Posicion de la X*/
font-size: 60px; /*Tamaño de la X*/
}
#spani span{
font-size:60px; cursor:pointer;font-family: "Times New Roman", Georgia, Serif;
}

• Ve a Personalizar
• En Avanzado 
• Busca en lo ultimo Añadir CSS 
• Pega el código de arriba

Otra forma mas manual es:

• Ve Plantilla 
• Editar HTML 
• busca con CTRL+F ]]></b:skin> y pegalo justo arriba de este y guarda los cambios.

Bien, los estilos están listos para terminar con todo haremos lo siguiente, colocaremos un trozo de script que se encargara de la función de despliegue.

<script type='text/javascript'>
function openNav() {
    document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
    document.getElementById("myNav").style.width = "0%";
}</script>

• Copia el código
• Ve Plantilla 
• Editar HTML 
• Busca con CTRL+F </body> y pegalo justo arriba de este 
• Guarda los cambios.

Con esto ya tenemos lista nuestra navegación que ocupa toda la pagina!!

Configuración del Menu: 

En el código HTML: el texto en color verde es la dirección que se abrirá al presionar una sección, lo que tiene que hacer es cambiarlo por la URL que quieras que abra, lo de color rojo es el nombre de la pagina que abrirá, cámbialo según lo que quieras mostrar.

Si quieres agregar otro link solo debes agregar este código debajo de cualquiera de los otros enlaces:

<a href="enlace5">Pagina5</a>

En el CSS: hay etiquetas de color rojo mostrando algunos atributos como el tiempo de despliegue, tamño de letra etc, cambia estos valores si quieres para ir probando y personalizando tu menu fullscreen a tu gusto

En el Script: dejalo asi,

BONUS Si quieres abrir el menu de arriba a bajo

El despliegue es de izquierda a derecha, pero si en ligar de eso te gustaría mas que lo hiciera de arriba a abajo solo tienes que hacer esto:

En la parte de CSS en el primer fragmento intercambia los valores de height: 100%; y width: 0; de manera que queden height:0; y width:  100%;
Y en la parte de Script en vez de style.width ponemos style.height y listo, eso sera todo.

Te ha gustado este truco? puedes ver su versión original en w3schools, si es así agradezco lo compartas con tus amigos, no siendo mas nos estamos leyendo!