:::: MENU ::::
  • Desarrollo Web - Responsive Design

  • Easy to Customize

  • Customizable fonts.

miércoles, 28 de agosto de 2013

Este menú es compatible con Google Chrome, Firefox 3,6+, Safari 2+ e Internet Explorer. En IE, el hover no sera visible puesto que este no soporta gradientes en CSS3.


Para agregar este menú a nuestro blog, realizaremos el siguiente procedimiento:

Agregar estilos del Menú Horizontal
Agregaremos los estilos de este menú, directamente en la plantilla del blog. Para esto ve a Plantilla - Editar HTML, das clic dentro de la plantilla, presionas Ctrl + F y buscas: 
]]></b:skin> 

Y justo antes pega el siguiente código:

/*tutoriales2010.blogspot.mx*/
div.bottombar{ /* La barra inferior */
height: 10px;
background: #1a1109; /* Color de la barra inferior */
}

ul.semiopaquemenu{ /* Menu principal UL */
font: bold 14px Georgia ;
width: 100%;
background: #2AA7FA; /* Color de fondo del Menu principal */
padding: 11px 0 8px 0; /* Relleno de los 4 lados del menú*/
margin: 0;
text-align: left; /* Escribe "left", "center", o "right" para alinear el menú*/
}

ul.semiopaquemenu li{
display: inline;
}

ul.semiopaquemenu li a{
color:black;
padding: 6px 8px 6px 8px; /* Relleno de los 4 lados de cada enlace del menú */
margin-right: 15px; /* Separación entre cada enlace del menú */
text-decoration: none;
}

ul.semiopaquemenu li a:hover, ul.semiopaquemenu li a.selected{
color: black;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjgyIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4xNiIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.16) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.82)), color-stop(100%,rgba(255,255,255,0.16)));
background: -webkit-linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
background: -o-linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
background: -ms-linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
background: linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1ffffff', endColorstr='#29ffffff',GradientType=0 );
-moz-box-shadow: 0 0 5px #595959; /* Sombras en CSS3 */
-webkit-box-shadow: 0 0 5px #595959;
box-shadow: 0 0 5px #595959;
padding-top: 12px; /* relleno sobresaliente hacia arriba */
padding-bottom: 20px; /* relleno sobresaliente hacia abajo */
}

Si el menú no se visualiza correctamente puedes ajustarlo cambiando los valores que el resaltado indica.

INSERTAR EL MENÚ.


Despues de haber guardado los estilos, alli mismo busca </header> (en plantillas del diseñador) o <div id='header-wrapper'> (en plantillas personalizadas) y pega el siguiente código justo después.


Recuerda que en las plantillas personalizadas, después que encuentres <div id='header-wrapper'>, busca hacia abajo el cierre </div> y después pega el código. No olvides que hay un cierre </div> por cada <div> que se abre, así que debes buscar exactamente el que cierra la apertura <div id='header-wrapper'>. (no necesariamente sera el primer cierre que encuentres... puede ser el segundo o tercero; según tu plantilla)

Este es el código:

<ul class='semiopaquemenu'>
<li><a class='selected' href='/'>Inicio</a></li>
<li><a href='#'>Item 1</a></li>
<li><a href='#'>Item 2</a></li>
<li><a href='#'>Item 3</a></li>
<li><a href='#'>Item 4</a></li>
<li><a href='#'>Item 5</a></li>
<li><a href='#'>Item 6</a></li>
<li><a href='#'>Item 7</a></li>
<li><a href='#'>Item 8</a></li>
</ul> <div class='bottombar'>
</div>

Ahora reemplaza cada Item por el nombre de tu categoría, y cambia  el #  por el enlace de cada una de ellas.

Para agregar mas categorias o eliminar alguna, quita o agregar alguna linea como esta:
<li><a href='/'>Item 8</a></li>


Con esto tendrás un menú horizontal en CSS3 para facilitar la navegación en tu blog.


domingo, 25 de agosto de 2013

blogger, entradas al azar, gadget
En esta ocasión les traigo un gadget que nos ayudara a mostrar entradas de nuestro blog al azar, es muy fácil de instalar o añadir en nuestro blog basta con agregar un nuevo gadget en la plantilla.





Aquí puedes ver un ejemplo:            

Clic en la imagen para ver el ejemplo.













¿Como añadir el botón? 

Nos iremos a Diseño > Añadir gadget > Html/Javascript, ahora solo copiamos y pegamos el siguiente código:

<div id='myLuckyPost'></div> <script type='text/javascript'> function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'entrada al azar'; document.getElementById('myLuckyPost').appendChild(a); } </script> <script src='/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky'></script> <style type='text/css'> @import url( 'http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700' ); #myLuckyPost a { position: relative; color: rgba(255,255,255,1); text-decoration: none; background-color: rgba(219,87,5,1); font-family: 'Yanone Kaffeesatz'; font-weight: 700; font-size: 30px; display: block; padding: 4px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7); -moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7); box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7); margin: 10px auto; width: 200px; text-align: center; -webkit-transition: all .1s ease; -moz-transition: all .1s ease; -ms-transition: all .1s ease; -o-transition: all .1s ease; transition: all .1s ease; } #myLuckyPost a:active { -webkit-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9); -moz-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9); box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9); position: relative; top: 6px; } </style>

Ahora antes de guardas podemos cambiar el texto en color rojo para que se muestre en nuestro botón creado en css, si sabes de css lo puedes modificar a tus colores preferidos o que mejor se acomoden a tu blog.

Si tienes alguna duda no dudes en dejarme un comentario. Te contestare a la brevedad.

sábado, 24 de agosto de 2013

Blogger seo, atributos alt, atributos title

Los atributos 'alt' y 'title' son los que describen una imagen y su contenido. El atributo 'alt' se utiliza para describirle el contenido a los motores de búsqueda, y el atributo 'title' describe el contenido a los usuarios.

Para optimizar nuestros atributos aquí en blogger existen dos métodos :

METODO 1

El código base de una imagen debe ser este:

<img src="imagen.jpg" alt="descripcion" title="descripcion" />

En Internet Explorer el atributo 'alt' genera una descripción (tool tip) al pasar el puntero de mouse sobre una imagen, mientras que en Firefox y Google Chrome, esta descripción visible es generada por el atributo 'title'.

Al describir lo que sucede en una imagen le estas ayudando a los motores de búsqueda a encontrar dicha imagen mas rapidamente y esto generara un aumento de trafico hacia tu sitio web.

No debes exceder en el uso de palabras clave en los atributos 'title y 'alt' ya que Google penalizará eso, puesto que no estas describiendo lo que en realidad esta sucediendo en la imagen.

Para agregar estos atributos a las imagenes, Blogger ha implementado un herramientas desde el editor de entradas.

Simplemente, después de agregar un imagen y estando en el editor de entradas sigue estos pasos:

  • Das un clic sobre la imagen. 
  • Te diriges a Propiedades. 
  • Allí agregas el texto del titulo y el texto del alt. 
METODO 2

Sin embargo, para reducir el trabajo y realizar este proceso automáticamente, te dejare un script que tomará el nombre de la imagen y lo usará para insertar los atributos title y alt. Pero recuerda que la mejor descripción es la realizada manualmente.

Este script utiliza Jquery; si ya lo tienes en tu blog entonces omite el código resaltado en azul.


  • Ve a Plantilla>Editar HTML> das un clic dentro de la plantilla, presionas Ctrl + F y buscas </head> Justo antes pega este código:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ /*Atributos alt y title*/ $(document).ready(function() { $('img').each(function(){ var $img = $(this); var filename = $img.attr('src') $img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.'))); $img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.'))); }); }); //]]> </script>

Guardas lo cambios realizados y vas a una entrada donde exista una imagen. Pasando el mouse sobre ella observaras que se muestra una descripción de dicha imagen y efectivamente esto es lo que queremos lograr.


Con esto se optimizara el posicionamiento de tus imágenes y por lo tanto tu pagina web estará mejor ubicada en los resultados de búsqueda. Si tienes alguna duda escríbeme en comentarios.


domingo, 18 de agosto de 2013

meta tags, blogger seo

Las meta tags son etiquetas que proporcionan información del blog a los robots de búsqueda como Google, yahoo, big y otros buscadores. Estas etiquetas resultan importantes por que ayuda a los robots a indexar nuestro blog, existen muchas etiquetas por ahora solo veremos 3 ( las mas importantes) que son meta description, meta keywords y meta robots.

Meta Description: Es la que describe nuestro blog de que se trata o que ofrece. Se recomienda ser breve en la descripción y lo mas claro posible.

Meta Keywords: En esta etiqueta pondremos las frases o palabras claves lo que normalmente el usuario introduce en su navegador, por ejemplo para un blog de música: el usuario pone en google... "Música de banda el recodo" o "descargar música gratis"  esas frases son las que podemos utilizar en esta etiqueta.
NOTA: se recomienda no usar mas de tres palabras por frase, agregar las frases mas importantes al inicio, las frases se separan por una coma (,)

Meta Robots: Esta etiqueta se encarga de permitir o denegar a los robots de los buscadores el acceso a nuestro blog.

¿COMO AGREGAR LAS ETIQUETAS?


Iremos a nuestra sección de Plantilla y Editar HTML y buscamos la apertura de nuestra etiqueta de cabecera...

<head>


Justo debajo de la etiqueta pegamos este codigo:

<b:include data='blog' name='all-head-content'/> 
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='Descripcion del blog' name='description'/>
<meta content='palabras claves' name='keywords'/>
<meta content='all, index, follow' name='robots'/>
 </b:if>

Y antes de guardar agregamos nuestra descripción, palabras claves. y listo podemos guardar cambios.

Si quieres agregar mas etiquetas existen paginas que crean el código necesario para crearlas aquí te dejó algunas para que las visites y así agregues mas etiquetas el modo de implementación es el mismo.


Si tienes dudas déjame un comentario. Mas adelantes estaremos viendo mas etiquetas.





viernes, 16 de agosto de 2013

Hoy les traigo un nuevo tutorial para mejorar el diseño de su blog de blogger, antes de empezar recuerden que pueden hacer sus peticiones en comentarios o la sección de contacto.

Muy bien, lo que haremos en este tutorial como en el titulo lo dice... pondremos una paginación a nuestro blog para darle un diseño mas amigable al  visitante del blog ya que la que tiene por defecto la mayoría de las plantillas "ver entradas mas antiguas" es poco atractiva.




blogger paginacion
Así se vera tu paginación
 Como puedes observar en la imagen de arriba así se verá tu paginación entonces vamos a empezar primero que nada ps debemos iniciar sesión en blogger  y luego nos iremos a Diseño y agregamos un gadget de tipo Html/JavaScript


  • Copiamos y pegamos el siguiente código:

<style type="text/css">#blog-pager{font-size:normal;padding:10px 0;clear:both;} .showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px} .showpageArea a{color:#000;text-shadow:0 1px 2px #fff;font-weight:700} .showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;background:#ddd url(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_a0U9fJI/AAAAAAAAAAU/qcqAF8aqWME/s1600/wp1.jpg) 0 -50px repeat-x} .showpageNum a:hover{border:1px solid #888;background:#ccc url(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_a0U9fJI/AAAAAAAAAAU/qcqAF8aqWME/s1600/wp1.jpg) 0 -25px repeat-x} .showpageOf{margin:0 4px 0 0} .showpagePoint{color:#fff;text-shadow:0 1px 2px #333;padding:3px 8px;margin:2px;font-weight:700;-webkit-border-radius:3px;-moz-border-radius:3px;border:1px solid #999;background:#666 url(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_a0U9fJI/AAAAAAAAAAU/qcqAF8aqWME/s1600/wp1.jpg) 0 0 repeat-x;text-decoration:none}</style> <script style='text/javascript'> var numshowpage=7; var postperpage =6; var upPageWord="Anterior"; var downPageWord="Siguiente"; var home_page="/"; var urlactivepage=location.href; </script> <script style='text/javascript' src='https://dl.dropboxusercontent.com/u/168482905/paginacion%20para%20blogger/script-paginacion-blogger.js'></script>


  • Ahora solo guardamos  y listo! 
Ahí tienes tu paginacion en tu blog, con un sencillo gadget. Si tienes dudas no dudes en dejarme un comentario.




lunes, 12 de agosto de 2013

Revisando comentarios de mi canal en youtube (tutoriales2010) observe que muchos de ustedes tenían la duda de como agregar la caja de "me gusta" de facebook y que aparezca en una ventana emergente al inicio del blog, que seria algo como esto:
Da clic en la imagen para ver un ejemplo.
Si duda alguna es un efecto muy agradable que ocupa toda la pantalla y nos ayudará a conseguir mas likes a nuestra pagina.

AGREGAR EL POP UP


  • Empezamos, para eso nos iremos a nuestra parte de Plantilla y Editar HTML... Damos un clic dentro del código y presionamos ctrl + f para que se nos abra el cuadro de búsqueda y sea mas fácil encontrar la etiqueta de cierre del head  así que copiamos y pegamos esto:  </head>  y antes  del cierre pega este código: 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<link href="https://dl.dropboxusercontent.com/u/168482905/Archivos%20%20facebook%20pop%20up/colorbox-tutoriales2010.css" rel="stylesheet"></link> <script src="https://dl.dropboxusercontent.com/u/168482905/Archivos%20%20facebook%20pop%20up/colorbox-tutoriales2010.js"></script> <script type="text/javascript"> jQuery.noConflict(); jQuery(document).ready(function(){ if (document.cookie.indexOf('visited=true') == -1) { var fifteenDays = 1000*60*60*24*0; var expires = new Date((new Date()).valueOf() + fifteenDays); document.cookie = "visited=true;expires=" + expires.toUTCString(); jQuery.colorbox({width:"400px", inline:true, href:"#facebook-TB"}); } }); </script>

DOS COSAS IMPORTANTES

  • El texto o código resaltado en color azul  es jquery si ya lo tienes en tu plantilla omite esa parte del código.
  • El cero en color rojo es el numero de días que tardara en reaparecer la caja,  yo lo puse en cero pero les recomiendo que lo cambien por el numero 1 por que es algo molesto que el lector este a cada rato cerrando dicha ventana, por que cada ves que cambien de pagina o actualicen el blog la caja estará apareciendo una y otra ves.
Entonces una vez hechos estos cambiamos nos iremos a Diseño y agregamos un nuevo gadget de tipo Html/JavaScript y copiamos y pegamos este código.


<div style="display: none;"><div id="facebook-TB" style="background: #fff; padding: 10px;"><h3 class="box-title">Sigueme en Facebook</h3><center><iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FTodoParaTuPcTutoriales2010&width=300&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&height=258" style="border: none; height: 258px; overflow: hidden; width: 300px;"></iframe></center><div align="left"><span style="font-size: x-small;">tutoriales2010.blogspot.mx</span></div></div></div>

Antes de guardar solo debes cambiar la parte subrayada por el nombre de usuario correspondiente. Y listo!

Ten encuenta que:

si tu pagina no tiene url personalizada entonces debes agregar el ID 

http://www.facebook.com/pages/nombrepagina/1243535343

Cualquier duda solo déjame un comentario.

Grabar la pantalla de un dispositivo también es conocido como Screencast, y en el caso de dispositivos Android rooteados se puede hacer de manera fácil, rápida y sin la ayuda de la computadora u otros dispositivos con muy buenos resultados y en formato .mp4 gracias a Screencast video recorder. Esta aplicación permite hacer screencasts en Android  permitiendo configurar ciertos parámetros para sacarle el mayor provecho a nuestro vídeo, como indicar la calidad de grabación, los FPS (cuadros por segundo), la orientación o la figura del puntero al tocar la pantalla, incluso podemos grabar audio mediante el micrófono interno, entre otras opciones.



¿Cómo grabar la pantalla en Android?
Simple, abre Screencast video recorder, si se requiere, configura los parámetros de grabación deseados mediante la sección de ajustes, sino basta con pulsar sobre el botón del centro  y la comenzara la grabación de la pantalla, en la barra de notificaciones aparecerá un símbolo (círculo rojo)  indicando que está en proceso de grabación y basta con bajar la barra de notificaciones y pulsar sobre el aviso correspondiente para detener la grabación.





Descargar ScreenCast Video Recorder para Android

Screncast video recorder está disponible en la Google Play Store por un precio de $52.47Mx, sin embargo es posible probarla gratis por 24hrs antes de comprarla mediante su versión demo  y cabe recalcar:

  • Solo funciona en dispositivos rooteados.
  • Para el Galaxy S3 es necesario seleccionar calidad “Alta ” (High) en las opciones.
  • En el caso de el Galaxy Nexus o Tegra 2/3, no funciona.
  • Descargar ScreenCast Video Recorder en Google Play | versióndemo


Bienvenidos. El footer corresponde al pié de página, es la sección que se muestra debajo del blog. En este tutorial les enseñaré una forma de añadir varias columnas para aprovechar ese espacio que muchas veces no se aprovecha.

Primero, tienes que saber que el footer no debe contener espacios para gadgets, si los contiene, deberás eliminar toda línea que se encuentre en él.  

footer multi-columna

Antes que nada te recomiendo que hagas un respaldo de tu plantilla por si algo no sale como lo esperas, después sabiendo que en la mayoría de las plantillas de blogger  el footer se le denomina footer-wrapper lo que haremos será eliminar todo el contenido dentro del contenedor. Para eso busca en el código de tu plantilla utilizando ctrl + f  (para que se abra el cuadro de búsqueda) y pegas el siguiente código:

<div id='footer-wrapper'>

Y borraremos todo lo que se encuentre entre ese código  y el cierre del mismo. El </div> del contenedor.
Ejemplo:

<div id ='footer-wrapper'>
Código que tenemos que borrar.
Hasta encontrar el cierre del contenedor.
</div>

Una vez vació todo el contenedor del footer agregamos nuestro nuevo código que es el siguiente:


<div id='piedepagina'>
 <div id='izquierdafooter'>
    <h6>Título de la columna 1</h6>
         Contenido de la primera columna.
  </div>
  <div id='centradofooter'>
    <h6>Título de la columna 2</h6>
         Contenido de la segunda columna.
  </div> 
 <div id='derechafooter'>
    <h6>Título de la columna 3</h6>
        Contenido de la tercera columna.
  </div>
</div>

Ahora solo nos queda agregar los estilos correspondientes (css) para esto buscaremos como ya sabemos la parte de nuestro codigo...

]]></b:skin>

Copiamos y pegamos el siguiente código:


/*Contenedor general tutoriales2010.blogspot.mx*/
 #footer-wrapper { margin-bottom:10px; background:#969696; /*Color de fondo del footer*/ width:100%; /*Esto permite que el footer se muestre al 100% del blog*/ padding:15px; /*Espaciados*/ margin-left:auto; /*IGNORAR*/ margin-right:auto; /*IGNORAR*/ line-height: 1.5em; /*Separado entre líneas de texto*/ font-size:12px; /*Tamaño de fuente*/ } /*Contenedor de las 3 columnas*/ #piedepagina { border-radius:13px; /*Bordes redondeados*/ color:#fff; /*Color del texto*/ width:940px; /*Ancho del contenedor*/ height:210px; /*Alto del contenedor*/ margin:50px auto; /*Permite centrar el contenido*/ font-family: Century Gothic, sans-serif; /*Tipografía*/ text-align:left; /*Alineación del texto*/ margin-bottom:20px; /*Separación del borde inferior*/ background:#2d2d2d; /*Color de fondo*/ } /*Enlaces*/ #piedepagina a{ color:#fff; /*Color de los enlaces*/ } /*Títulos*/ #piedepagina h6 { color:#fff; /*Color de los títulos*/ font-size:16px; /*Tamaño de los títulos*/ margin:10px; /*Separación de los títulos*/ } /*Columna izquierda*/ #izquierdafooter { padding:10px; /*Espaciados internos*/ margin:0px; /*Distancia entre contenedores*/ background: url(http://3.bp.blogspot.com/-Wyk_YzkLG6U/TlJ2xmoNbeI/AAAAAAAABiw/C5Wk7lwhGGw/s1600/vertical+linea+ayudabloggers.png) right no-repeat; /*Imagen separadora*/ width:30%; /*Porcentaje del ancho de la columna*/ height:200px; /*Alto de la columna*/ float:left; /*Permite alinear a la izquierda esta columna*/ } /*Columna media*/ #centradofooter { padding:10px; /*Espaciados internos*/ margin:0px; /*Distancia entre contenedores*/ width:30%; /*Porcentaje del ancho de la columna*/ height:200px; /*Alto de la columna*/ float:left; /*Permite alinear a la izquierda esta columna*/ } /*Columna derecha*/ #derechafooter { padding:10px; /*Espaciados internos*/ margin:0px; /*Distancia entre contenedores*/ width:30%; /*Porcentaje del ancho de la columna*/ height:200px; /*Alto de la columna*/ float:right; /*Permite alinear a la derecha esta columna*/ background: url(http://3.bp.blogspot.com/-Wyk_YzkLG6U/TlJ2xmoNbeI/AAAAAAAABiw/C5Wk7lwhGGw/s1600/vertical+linea+ayudabloggers.png) left no-repeat; /*Imagen separadora*/ }

Guardamos todos los cambios y listo.

Algo IMPORTANTE QUE DEBEMOS TOMAR EN CUENTA...

  • Cada línea tiene una pequeña descripción para que no te confundas y para que puedas añadir el contenido exitosamente.
  • Para añadir o quitar columnas, es necesario dar flotación, disminuir o aumentar los anchos de las columnas y además crear o eliminar las reglas.
  • Si en tu plantilla el footer-wrapper no existe, deberás buscar la línea correspondiente, o si tu plantilla no tiene footer, crea el contenedor con ese nombre.

Si tienes dudas déjame un comentario y te contesto lo antes posible.




sábado, 10 de agosto de 2013

Vista previa del slider

Hoy les voy a compartir un pequeño slider animado para que puedan mostrar entradas de su blog de una manera mucho mas amigable, su instalación es muy fácil y nos queda un buen efecto en nuestro blog.
Para ver una vista previa puedes observarlo funcionando en el siguiente blog:


Te gusto? entonces empezamos con su instalación...

  1. Iniciamos sesión y vamos a la opción Plantilla y despues en Editar HTML








  • Bien ahora que estamos en nuestra plantilla buscaremos el siguiente código:

]]></b:skin>


  • Justamente arriba de este parte de código pegaremos nuestros estilos css, copiamos y pegas el siguiente código:

/* slide by tutoriales2010.blogspot.com */
#tbi_slider { overflow: hidden; margin: 20px auto; padding: 0; width: 805px; height: 320px; -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); } #tbi_slider ul { margin: 0; padding: 0; width: 2000px; } #tbi_slider li { position: relative; display: block; float: left; width: 160px; border-left: 1px solid #888; -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } #tbi_slider ul:hover li { width: 40px; } #tbi_slider ul li:hover { width: 640px; } #tbi_slider li img { display: block; width: 640px; } #tbi_title { position: absolute; top: 0; left: 0; padding: 20px; width: 640px; background: rgba(0, 0, 0, 0.5); color: #fff; font: bold 16px 'trebuchet MS', sans-serif; } #tbi_title a { display: block; color: #fff; text-decoration: none; }

 /*  slide by tutoriales2010.blogspot.com */


  • Guardamos cambios  y ahora procedemos a agregar un gadget a nuestro blog en la parte de Diseño de tipo HTML/JAVASCRIPT, copiamos y pegamos el siguiente codigo: 

<!-- Acordeon Slider of tutoriales2010.blogspot.com -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='tbi_slider'>
 <ul>
 <li>
 <div id='tbi_title'>
 <a href='http://www.tutoriales2010.blogspot.mx/'>Ejemplo1</a>
 </div>
 <a href='http://www.mov-alterado.blogspot.com/'>
 <img src='https://lh6.googleusercontent.com/-DTh_yVWYqcQ/UflfyoqV6aI/AAAAAAAABL8/v4hH3OrmEU8/w605-h302-no/vb.net4.png'/>
 </a>
 </li>
 <li>
 <div id='tbi_title'>
 <a href='http://www.tutoriales2010.blogspot.mx/'>ejemplo2</a>
 </div>
 <a href='http://www.tutoriales2010.blogspot.mx/'>
 <img src='https://lh5.googleusercontent.com/-BpO8DoeWBGc/UflzRGw4ySI/AAAAAAAABNo/z0QxvfQzbU4/w605-h302-no/vb.net5.png'/>
 </a>
 </li>
 <li>
 <div id='tbi_title'>
 <a href='http://www.tutoriales2010.blogspot.com/'>ejemplo3</a>
 </div>
 <a href='http://www.tutoriales2010.blogspot.com/'>
 <img src='https://lh6.googleusercontent.com/-6VE_Tmu_4Co/UflxiuRcpXI/AAAAAAAABNM/Q0LJQico36c/w572-h302-no/vb.net6.png'/>
 </a>
 </li>
 <li>
 <div id='tbi_title'>
 <a href='http://www.tutoriales2010.blogspot.com/'>ejemplo4</a>
 </div>
 <a href='http://www.tutoriales2010.blogspot.com/'>
 <img src='https://lh4.googleusercontent.com/-4gkWlofqftk/UflWZdpKybI/AAAAAAAABJU/b5tJRe_HB2k/w605-h302-no/vb.net7.png'/>
 </a>
 </li>
 </ul>
</div>
</b:if>

 <!-- Acordeon Slider of tutoriales2010.blogspot.mx -->


  • Antes de guardar el gadget debes cambiar lo siguiente: 
  1. Los links en color rojo por cada una de las entradas que quieras mostrar
  2. El texto en colo azul que es lo que se va mostrar en nuestro gadget
  3. El link de la imagen que quieres mostrar y que esta marcado con un fondo azul
Para que se te haga mas fácil el editar las imágenes que vas a agregar el gadget o slider te dejo mis proyectos en formado PSD para que los edites a tu manera. 

Descarga los formatos PSD

Es todo por esta ocasión si te quedo alguna duda no dudes en dejarme un comentario.


viernes, 9 de agosto de 2013

Para todos aquellos que quieran unificar todos los enlaces de sus redes sociales del  blog aquí te dejo otro diseño mas. Este Gadget para Blogger que además de ser bastante útil, es muy facil de combinar con la plantilla y muy agradable a la vista por su estética parecida a Windows 8.


Su instalación es muy fácil solo tenemos que agregar un nuevo gadget para eso iremos a nuestra parte de configuración Diseño y ahí agregamos un nuevo gadget de tipo Html/JavaScript.

Copia y pega el siguiente codigo:

<div class="sidebar-subscription"> <ul id="subscription"> <li><a href="URL TWITTER" target="_blank"><img src="http://2.bp.blogspot.com/-9EERlW87Dwk/T8Sn5q14dwI/AAAAAAAAAUY/WCVu06SV-Iw/s1600/twittersocial.png" /></a> <h4> <a href="URL TWITTER" target="_blank">Twitter</a></h4> No te pierdas nada estés donde estés</li> <li><a href="URL RSS" target="_blank"><img src="http://3.bp.blogspot.com/-hRkEHRJANiA/T8Sn5JCCH-I/AAAAAAAAAUU/BTzCg9dVOLI/s1600/rsssocial.png" /></a> <h4> <a href="URL FEED" target="_blank">Posts RSS</a></h4> Lee todos los artículos en tu lector de Feeds</li> <li> <a href="URL FACEBOOK" target="_blank"><img src="http://2.bp.blogspot.com/-EsF_SrIVCoI/T8Snw3tNToI/AAAAAAAAAUM/3hWwnHDqVgk/s1600/facebooksocial.png" /></a> <h4> <a href="URL FACEBOOK" target="_blank">Facebook</a></h4> Hazte Garrapatero Empresario!</li> <li> <a href="http://feedburner.google.com/fb/a/mailverify?uri=ID FEEDBURNER&loc=es_ES" target="_blank"><img src="http://4.bp.blogspot.com/-vW7PTLvVE_g/T8SsGagR-II/AAAAAAAAAU0/z2qqXDzWydc/s1600/correosocial.png" /></a> <h4> <a href="http://feedburner.google.com/fb/a/mailverify?uri=ID FEEDBURNER&loc=es_ES" target="_blank">Correo</a></h4> Recibe todas las actualizaciones, noticias, etc.</li> </ul> </div> <style> .sidebar-subscription { background: url("http://lh6.ggpht.com/_7Y9pl24WpQY/S_f7UbjdNxI/AAAAAAAAD7k/MRxXLntEnfo/post_head_thumb%5B4%5D.gif") no-repeat scroll 0 0 #FFFFFF; border: 1px outset #FFFFFF; color: #000000; padding: 15px; width: 100%; } #subscription { list-style: none outside none; margin-left: 10px; margin-top: 0; width: 100%; } #subscription li { height: 58px; line-height: 1.0em; padding: 5px 5px; padding-bottom: 0px; } #subscription li a { color: #000000; } #subscription li a:hover { color: #A8000C; text-decoration: none; } #subscription li h4 { border: medium none; color: #333333; font-size: 18px; margin: 0 0 0 45px; } #subscription li p { font-size: 13px; margin: 0 0 0 0px; } #subscription li img { float: left; margin: 0 10px 0 0; padding: 0; } #subscription li:hover { opacity: 0.7; } </style>


Ahora solo antes de guardar debes poner tus links correspondientes a cada red social (letras rojas), lo que esta en color azul es la descripción de cada red social... si decides cambiar el texto trata de ser breve en tus comentarios para no perder estética del gadget.

GUARDAMOS Y LISTO!!

Quizás te interese estas otras opciones:



lunes, 5 de agosto de 2013



Hoy les traigo un nuevo gadget para que puedan mostrar redes sociales en su blog de blogger, en esta ocasion es un estilo parecido al metro de windows 8 y cuenta con las redes sociales de Facebook, Twitter, Google+, y Fedd Rss.

El estilo es igual al de la imagen pero tambien puedes ver un ejemplo y verlo funcionar en este blog de prueba:


  • Para agrega este gadget solo debes ir a Diseño > agregamos un nuevo gadget de tipo HTML/JAVASCRIPT y pegamos el siguiente codigo:

<style> #WG-social { width:305px; float:left; margin-top:10px; } #WG-social li { position:relative; cursor:pointer; padding:0!important; } #WG-social .fb,.tw,.gp,.fd { position:relative; -moz-transition:all .4s ease-in-out; -webkit-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; transition:all .4s ease-in-out; z-index:5; display:block; float:left; margin:1px; } #WG-social .fb { width:150px; height:152px; background:url(//goo.gl/6xmUk) no-repeat center center #3b5998; } #WG-social .tw { width:150px; height:74px; background:url(//goo.gl/oyiFK) no-repeat center center #3b5998; } #WG-social .gp { width:150px; height:74px; background:url(//goo.gl/oT0kF) no-repeat center center #3b5998; } #WG-social .fd { width:302px; height:74px; background:url(//goo.gl/ncoLY) no-repeat center center #3b5998; } #WG-social li:hover .fb { -moz-transition:all .1s ease-in-out; -webkit-transition:all .1s ease-in-out; background:url(//goo.gl/MH8AP) no-repeat center center #3468b6; } #WG-social li:hover .tw { background:url(//goo.gl/hHRHv) no-repeat center center #4099ff; -moz-transition:all .1s ease-in-out; -webkit-transition:all .1s ease-in-out; } #WG-social li:hover .gp { background:url(//goo.gl/wva4B) no-repeat center center #e44524; -moz-transition:all .1s ease-in-out; -webkit-transition:all .1s ease-in-out; } #WG-social li:hover .fd { background:url(//goo.gl/JFGqn) no-repeat center center #f60; -moz-transition:all .1s ease-in-out; -webkit-transition:all .1s ease-in-out; } </style> <br /> <div class="WG" id="WG"> <ul id="WG-social"> <br /><a href="http://www.tutoriales2010.blogspot.mx/"></a> <li><a class="fb" href="http://www.blogger.com/URL-FACEBOOK" target="_blank"></a></li> <li><a class="tw" href="http://www.blogger.com/URL-TWITTER" target="_blank"></a></li> <li><a class="gp" href="http://www.blogger.com/URL-GOOGLE-+" target="_blank"></a></li> <li> <a class="fd" href="http://feeds.feedburner.com/TU-FEED" target="_blank"></a></li> </ul> </div> <br /> <a href="http://www.tutoriales2010.blogspot.mx/"></a>


  • Ahora solo basta con modificar las partes en color ROJO por cada uno de los links de nuestras redes sociales y listo! guardamos nuestro trabajo. 
Si tienes alguna duda no dudes en dejarme un comentario. También puedes visitar los siguientes enlaces que también contienen gadgets de redes sociales...



viernes, 2 de agosto de 2013



Hoy te  voy a mostrar la forma de agregar unos simpáticos iconos de redes sociales flotantes en Blogger como los que puedes observar a tu izquierda. Con ellos les permitirá a tus lectores del blog que se conecten o suscriban a tu blog a través de los diferentes medios sociales. Se encuentran flotando a la derecha o la izquierda de su blog.


En este tutorial, los sitios sociales que he incluido son Facebook, Twitter, Google+ y RSS. Así que veamos como instalarlos.

Antes que nada les dejo una vista previa de como se miran los iconos. 


Para añadir estos iconos a tu blog debes ir a tu pagina de Diseño y añadimos un nuevo Gadget de tipo HTML/JavaScript ahy copeas y pegas este codigo:

<style type="text/css">.redes-flotantes {
position: fixed;
right: 5px;
top: 40%;
}
.redes-flotantes img {
float: right; clear: right;
 margin: 5px;
-moz-transform: scale(.8) ;
-webkit-transform: scale(.8) ;
-o-transform: scale(.8) ;
-ms-transform: scale(.8) ;
transform: scale(.8) ;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.redes-flotantes img:hover {
-moz-transform: scale(1.1) rotate(6deg);
-webkit-transform: scale(1.1) rotate(6deg);
-o-transform: scale(1.1) rotate(6deg);
-ms-transform: scale(1.1) rotate(6deg);
transform: scale(1.1) rotate(6deg);
}</style>
<div class='redes-flotantes'>

<!-- Twitter -->
<a href='URL DE TWITTER' target='blank'><img alt='Twitter' height='48' src='https://lh3.googleusercontent.com/-HiZe1pm_Rok/ToE0l_3Wl4I/AAAAAAAACvY/ztE85o-w3Lg/s800/Fa_Twitter_creatures.png' width='48'/></a>

<!-- Facebook -->
<a href='URL PAGINA FACEBOOK' target='blank'><img alt='Facebook' height='48' src='https://lh3.googleusercontent.com/-QaLRred01jw/ToE0l2ruGBI/AAAAAAAACvc/ydfvF-xOi_4/s800/Facebook_creatures.png' width='48'/></a>

<!-- Google+-->
<a href='URL DE GOOGLE+' target='blank'><img alt='Feed' height='48' src='https://lh5.googleusercontent.com/-dUIx19LJB_A/UYqbVu4cK_I/AAAAAAAALeI/p7qqF1vg3ng/s48-no/google%252B.gif' width='48'/></a>

<!-- RSS -->
<a href='URL DE FEEDBURNER' target='blank'><img alt='Feed' height='48' src='https://lh5.googleusercontent.com/-16rpSgs_Rdk/ToE0l6-gnjI/AAAAAAAACvg/pbKahocVGVg/s800/Feed_creatures.png' width='48'/></a> </div>

Antes de guardar debes introducir tus respectivos links marcados en color rojo para cada red social.

NOTA: Si quieres cambiar de lado debes cambiar el right:5px por left:5px.
La altura la aplicamos cambiando el top:40%;.




Hoy les voy a compartir la suite completa de Microsoft Office, para ser específicos se trata de  la versión Office Professional Plus 2013 para que puedas usar totalmente gratis durante un período de 60 días a partir de la fecha de descarga.



Tendrás que registrarte para posteriormente pasar a descargar el archivo de instalación que tiene un peso de aproximadamente 800 MBel cual estará disponible tanto para Windows 7 como para Windows 8... sí como también para las versiones Windows Server 2008 R2 y Windows Server 2012. XP y Vista no podrán instalar la nueva suite.

Para registrarte y descargar el instalador de Office Professional Plus 2013 puedes hacerlo a través del enlace que te mostramos a continuación.




jueves, 1 de agosto de 2013

Bien hoy te traigo un truco para este juego que se esta poniendo de moda en facebook llamado Criminal Case, un juego de destreza en el cual debes ubicar objetos en escenas del crimen pero cuentas con un limite de tiempo en ciertas escenas, en otras entre mas pase el tiempo ganas menos puntos... Entonces lo que haremos en este tutorial es hacer que ese tiempo pase mucho mas lento y así tener mas tiempo para ubicar los objetos.

Lo que necesitas para hacer el hack es: 

  • Mozilla firefox, si no cuentas con este navegador lo puedes descargar desde aquí
  • Cheat Engine, Herramienta fundamental para hacer el truco también la puedes descargar desde aquí
Bien eso es todo lo que necesitamos, así que instalamos ambos programas en nuestra computadora, cosa que no es muy dificil solo damos siguiente a todo jeje e iniciamos sesión en nuestra cuenta de facebook e iniciamos nuestro juego de criminal case... 

  

Cuando estemos en nuestra pantalla de escenas del crimen... Este hack funciona con todos las escenas pero si notas en la imagen de arriba hay una escena (#11) que tiene un relog ahi es donde recibiremos mejores resultados.

 Empecemos con el truco solo sigue estos pasos: 

  • ya con el juego abierto iniciamos nuestro programa de Cheat Engine


  • Elegimos la escena que vamos a jugar pero no la iniciamos, paran cuando lleguen a la imagen siguiente.

  • Como puedes ver solo tenemos 45 segundos para encontrar todas los artículos que puedas, pero antes de iniciar el juego debemos hacer algunos cambios con nuestro Cheat Engine ...

  • En la imagen vienen los pasos especificados de lo que debes hacer. 
  1. Da clic en el icono que se indica de la parte superior derecha.
  2. Selecciona el proceso de Flash 
  3. Da clic en Open 
  • Al momento de dar clic en Open veras que algunos campos de nuestro programa se llenaron automáticamente y solo debemos chequear la opcion de Enable SpeedHack la velocidad por defecto es 1.0 nosotros la cambiaremos por un 0.1 y ahora iniciamos el juego pero enseguida de iniciado el juego damos clic en el botón Apply de nuestro Cheat Engine...

  • Notaras que el juego se hace mas lento (tiempo) pero ahora si podrás recaudar mas objetos. Esta fue mi puntuación para que vean que si funciona obviamente no soy tan bueno pero se hace lo que se puede jeje. 

  • Cuando termines de jugar no olvides de poner de nuevo la velocidad del juego en 1.0 para que vuelva a su velocidad normal y damos clic en apply para realizar los cambios. 



Eso es todo por todo este tutorial si quieren mas  trucos de algún juego solo envíame un mensaje mediante esta pagina haciendo clic AQUI. Si por alguna razón el hack dejara de funcionar hasmelo saber mediante un comentario para seguir buscando mas trucos como este. Cuento con sus colaboraciones, Hasta pronto.


¿Necesitas una pagina web? Contáctanos