Código, Web y SEO

miércoles, 26 de abril de 2017

Menú horizontal desplegable 2 columnas para blogger 2017

Tomado gentilmente de Ciudad Blogger
Hoy tenemos un menú para tu blog de blogger con estilo bastante especial el mismo es desplegable y fácil de incorporar un detalle exclusivo es que en sus subpestañas se despliega en dos columnas lo cual hace que la casilla no se extienda tanto para esta subpestaña.



Veamos un DEMO aquí mismo: 


¿Cómo ponerlo?


1. Lo primero será ingresar a Edición HTML allí buscamos el siguiente fragmento ]]></b:skin> y justo antes pegaremos lo siguiente: 
/* Menú horizontal con subpestañas en dos columnas
----------------------------------------------- */
#toppic {
width:940px; /* Ancho del menú */
height:37px;
background-image: -moz-linear-gradient(top, #317FB8, #385D96);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #317FB8), color-stop(1.0, #385D96));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#317FB8,endColorStr=#385D96);
border-bottom:1px solid #002851;
border-top:1px solid #2f558b;
margin:0 auto;padding:0 auto;
overflow:hidden;
text-shadow:1px 1px 2px #002851;
}
#topwrapper {
width:940px; /* Ancho del menú */
height:40px;
margin:0 auto;
padding:0 auto;
}
.clearit {clear: both;height: 0;line-height: 0.0;font-size: 0;}
#top {width:100%;}
#top, #top ul {padding: 0;margin: 0;list-style: none;}
#top a {
border-right:1px solid #2f558b;
text-align:left;
display: block;
text-decoration: none;
padding:10px 12px 11px;
font:bold 14px Arial;
text-transform:none;
color:#eee; /* Color del texto de las pestañas */
}
#top a:hover {
background:#2f558b; /* Color de las pestañas al pasar el cursor */
color:#c5fa6f; /* Color del texto de las pestañas al pasar el cursor */
}
#top a.trigger {
/* Flecha */
background-image: url(http://3.bp.blogspot.com/-LzmPTNyR6po/TwETZufjSTI/AAAAAAAAATo/oisHmXUjmSY/s1600/arrow_white.gif);
background-repeat: no-repeat;
padding: 10px 24px 11px 12px;
background-position: right center;
}
#top li {float: left;position: relative;}
#top li {position: static !important; width: auto;}
#top li ul, #top ul li {width:300px;} /* Ancho del contenedor de las subpestañas */
#top ul li a {
text-align:left;
padding: 6px 15px;
font-size:13px;
font-weight:normal;
text-transform:none;
font-family:Arial, sans-serif;
border:none;
}
#top li ul {
z-index:100;
position: absolute;
display: none;
background-color:#1a3352; /* Color de fondo del contenedor de las subpestañas */
margin-left:-80px;
padding:10px 0;
border-radius: 0px 0px 6px 6px;
box-shadow:0 2px 2px rgba(0,0,0,0.6);
filter:alpha(opacity=87);
opacity:.87;
}
#top li ul li {
width:150px; /* Ancho de cada subpestaña */
float:left;
margin:0;
padding:0;
}
#top li:hover ul, #top li.hvr ul {display: block;}
#top li:hover ul a, #top li.hvr ul a {
color:#ddd; /* Color del texto de los submenús */
background-color:transparent;
text-decoration:none;
}
#top ul a:hover {
text-decoration:underline!important;
color:#c5fa6f !important; /* Color del texto de los submenús al pasar el cursor */
}
2. Ahora vamos a Diseño y añadimos un Gadget HTML/Javascript en dicho espacio pegaremos el siguiente código: 
<div id='toppic'>
<div id='topwrapper'>
<ul id='top'>
<li><a href='URL del enlace'>Pestaña 1</a></li>
<li><a href='URL del enlace'>Pestaña 2</a></li>
<li><a class='trigger' href='#'>Pestaña 3</a>
<ul>
<li><a href='URL del enlace'>Pestaña 3.1</a></li>
<li><a href='URL del enlace'>Pestaña 3.2</a></li>
<li><a href='URL del enlace'>Pestaña 3.3</a></li>
<li><a href='URL del enlace'>Pestaña 3.4</a></li>
<li><a href='URL del enlace'>Pestaña 3.5</a></li>
<li><a href='URL del enlace'>Pestaña 3.6</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Pestaña 4</a>
<ul>
<li><a href='URL del enlace'>Pestaña 4.1</a></li>
<li><a href='URL del enlace'>Pestaña 4.2</a></li>
<li><a href='URL del enlace'>Pestaña 4.3</a></li>
<li><a href='URL del enlace'>Pestaña 4.4</a></li>
<li><a href='URL del enlace'>Pestaña 4.5</a></li>
<li><a href='URL del enlace'>Pestaña 4.6</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Pestaña 5</a>
<ul>
<li><a href='URL del enlace'>Pestaña 5.1</a></li>
<li><a href='URL del enlace'>Pestaña 5.2</a></li>
<li><a href='URL del enlace'>Pestaña 5.3</a></li>
<li><a href='URL del enlace'>Pestaña 5.4</a></li>
<li><a href='URL del enlace'>Pestaña 5.5</a></li>
<li><a href='URL del enlace'>Pestaña 5.6</a></li>
<li><a href='URL del enlace'>Pestaña 5.7</a></li>
<li><a href='URL del enlace'>Pestaña 5.8</a></li>
</ul>
</li>
<li><a href='URL del enlace'>Pestaña 6</a></li>

</ul>
<br class='clearit'/>
</div>
</div>
3. Y listo hasta aquí nuestro menú deberá estar funcionando perfectamente en nuestro blog.

Explicación colores:

- En el primer código, lo que tenemos en verde esmeralda, son los comentarios frente al parámetro CSS que puedes modificara a tu gusto.
- Lo que tenemos en naranja es donde irá el link o URL al cuál llevará dicho sección del menú ¡Fácil!
- Lo que tenemos en color Rojo es el nombre de la pestaña el cl llevará. 


Es todo en este post, hasta la próxima ;)

domingo, 23 de abril de 2017

Renderizar vídeos 1080P HD para YouTube con Sony Vegas Pro 13

Un post más, es esta ocasión vamos a aprender fácilmente como renderizar en el mejor formato en Sony Vegas Pro 13 para subir nuestro vídeo en Full HD a YouTube, sin más empezamos.



EL TUTORIAL...

1. Lo primero es tener definido que parte de nuestro proyecto vamos a renderizar seleccionando con los indicadores amarillos marcará en azul lo que deseemos renderiza:



2. Ahora en el menú superior de Sony Vegas vamos a seleccionar el icono e "Renderizar como":



3. Allí nos desplegará una ventana en donde debemos buscar el formato "MainConcept AVC/AAC (*.mp4,*.avc)" lo abrimos y luego buscamos dentro de él "Internet HD 1080P":



4. Una vez seleccionado daremos en "Personalizar Plantilla" nos desplegará otra ventana la cual tendrá 4 divisiones (vídeo, audio, sistema, Proyecto):



5. La parte de vídeo en la cual estamos actualmente no le modificaremos nada, ahora vamos a audio y allí vamos a "Velocidad de bit (bps)" y colocaremos (320.000):



6. En sistema no modificaremos nada, y en proyecto finalmente en el sector de "Calidad de renderización de vídeo" colocaremos "Lo mejor":



7. Por último daremos en "Aceptar" y finalmente en:



De esta forma sólo nos queda esperar y será 100% seguro que tu vídeo tendrá la mejor calidad a 1080P para tus vídeos en YouTube.

Un resultado sencillo en vídeo con este método es el siguiente observa la calidad que se puede escoger:


 
 
Es todo en este Post hasta la próxima,

miércoles, 19 de abril de 2017

Logo mala calidad en Prestashop cualquier versión [Solución]

Un nuevo post, probablemente muchos de ustedes con su tienda PrestaShop les ha sucedido que al montar la imagen del Logotipo este mismo al verlo en la tienda pierde calidad severamente y claro a nadie le gusta un logo de pésima calidad. Es por ello que hoy te mostraré como solucionar este inconveniente despreocúpate que es muy fácil.
 EL TUTORIAL...

1. Muy bien lo primero es saber que no importa la versión de Prestashop sin embargo en mi caso estoy usando la versión (1.6.1.11), allí vamos a ingresar a nuestro panel y luego iremos a Preferencias > Imágenes:


2. Allí vamos a bajar un poco en la página y veremos la opción que dice "OPCIONES GENERACIÓN DE IMÁGENES


3. En la parte que dice formato de imagen como vemos en la imagen anterior está seleccionado "Usar JPEG" debemos cambiarlo a la segunda opción "Usar PNG sólo si la imagen base está en este formato" así:


4. Listo sólo queda guardar y carga de nuevo el logo y recarga tu sitio o tienda verifica como la calidad en la que está tu imagen se conserva ahora.
CONSEJOS: - Procura usar tu logo imagen en formato PNG.
                  - Luego de hacer este tutorial borra caché de tu navegador para
                    notar los cambios.
                  - Tu Logo PNG no conserve fondo sino transparente.

Es todo en este Post muy completo espero les sirva hasta la próxima.

Saludos,

SÍGUENOS EN: