Código, Web y SEO

domingo, 21 de mayo de 2017

Colocar Anuncio Adsense tipo menú de texto arriba de las entradas Blogger

Menú señalado con flechas a ambos lados
Un post más, hoy veremos como colocar un anuncio de adsense como si este fuera un menú de texto de una página web o blog, tal tipo de anuncio lo podrás ver en este blo ya implementado o en la siguiente imagen:



¿Ventajas de este tipo de Anuncio? 

  • No quita tanto espacio del sitio web o blog tuyo a pesar de lo delgado tiene buen potencial.
  • Su similitud con el menú de un sitio web hace que el usuario lea el contenido por su forma y en alo que le interese posteriormente de click.
  • Ubicado siempre en la parte de arriba de nuestro sitio traerá posiblemente una mayor rentabilidad con Adsense.  


¡Creando el Anuncio en Adsense!


Lo primero será crear el bloque de anuncio desde "adsense.com" allí vamos a (Mis anuncios > Nuevo bloque de anuncios > Anuncios de texto y de display) listo:


Imagen1: Creación de anuncio


Como apreciamos en la imagen1 damos un nombre a nuestro anuncio puede ser "menu" ; en tamaño del anuncio para este caso escogeremos en "Anuncios publicados > Anuncios de enlace" saldrán varias medidas:

Imagen2: Mejores anuncios

En la imagen2 tenemos señalado con 1 (Horizontal mediano) y con 2 (Horizontal grande) podemos escoger cualquiera de las dos todo depende del ancho de tu blog pero si con uno no te salió como esperabas no te preocupes puedes editar el anuncio y cambiar el tamaño, para este caso yo tendré la opción 1.  

Bien de todo lo siguiente que nos sale el único que seleccionaremos será "Estilo de anuncio de texto" las demás opciones no pondremos nada pues no son de vital importancia los podemos dejar quietos por están con una X:

Imagen3: Parámetros a modificar

En el estilo del anuncio definirán cual es el más acorde con su sitio es una selección personal una vez listo sólo queda dar en guardar y obtener el código, al final en este paso nos mostrará así:

Imagen4: Código que nos da Adsense

¡Paso final anuncio en nuestro blog!

Estamos en la etapa final creado el anuncio correctamente, ya tenemos el código lo vamos a incrustar arriba de las entradas de nuestro blog en blogger:

1. Lo primero será parsear nuestro código del anuncio por cuestione de compatibilidad para ello vamos al siguiente sitio (Click aquí) allí pegamos nuestro código y damos en parse al final debemos tener un código así:

Imagen5: Código Anuncio ya parseado

2. Con nuestro código ya parseado ahora vamo a nuestro escritorio en Blogger (Tema > Editar HTML) y buscamos el siguiente código"<div id='main-wrapper'>" y justo arriba de él debes pegar el código parseado de tu anuncio.
 
Imagen6: Código anuncio ubicado correctamente

3. Por último queda guardar los cambios y esperar algunas horas para que podamos ver los anuncios tipo menú en nuestro blog puedes centrar el anuncio con etiquetas HTML como está en la imagen6, es todo.

Es todo en este post un poco largo quizá pero bien fundamentado si te ha quedado alguna duda no olvides comentar.

Hasta la próxima ;)

viernes, 19 de mayo de 2017

Descargar Alvendi programa control de inventario y facturación completo gratis

¡Un nuevo post en Bloggin Red! Si buscas un software contable de inventario, facturación, almacene datos de clientes compras, ventas y demás estás en el post correcto, te presentamos Alvendi un software gratuito (No tendrás ningún problema de uso de licencia) para facturar, registrar compras, ventas y llevar el control de tu inventario. 

Link descarga al final de post

CAPTURAS DE PANTALLA

 
PARA DESCARGAR || CLICK AQUÍ

lunes, 1 de mayo de 2017

Saber mi número de celular Claro, Movistar, Tigo, Virgin, Uff en Colombia 2017

Suele ocurrir que en alguna Sim Card del pasado olvidamos que número de celular tenía asignado, es por ello que he creado este breve y sencillo para  "Averiguar tu número de celular con operadoradores móviles de Colombia" sin más veamos como se hace:


Paso a Paso por operadores móviles...

¿Cómo saber mi número de celular Claro Colombia?

Para saberlo simplemente debemos marcar *595# luego oprimes el botón llamar y al momento saldrá el número de celular.

¿Cómo saber mi número de celular Movistar Colombia?

¡Fácil! debemos marcar *#61# luego oprimes en llamar y saldrá tu número de teléfono Movistar.



¿Cómo saber mi número de celular Tigo Colombia?

Debes marcar en tu teléfono *255*4# luego oprima la tecla llamar y te saldrá tu número de teléfono.


¿Cómo saber mi número de celular Virgin Mobile Colombia?

Marca en tu celular el siguiente código *111*3*3# luego oprime llamar y al los segundos te saldrá tu número telefónico.



¿Cómo saber mi número de celular Uff Colombia?  

Debes escribir el siguiente código en tu celular *200*4# luego oprimes llamar y te saldrá en segundos tu número de teléfono.

Y listo con este brevísimo tutorial habrás resuelto tu interrogante de ¿Cómo saber mi número de celular?.

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

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

SOLUCION: Logo mala calidad en mi tienda Prestashop cualquier versió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,

lunes, 27 de marzo de 2017

Sobre la publicidad digital y que tipos existen

La publicidad digital hoy en día es una de las mayores fuentes de ingresos para muchas empresas de distintos propósitos, por ende, de esta forma surgen nuevas formas métodos e ideas para cumplir todo lo relacionado en este campo, veamos un poco más sobre ello.



¿Qué es publicidad digital?

La publicidad digital está definida, como la posibilidad de transmitir un mensaje específico a un público objetivo ya sea usando, internet, redes sociales, correo electrónico (envío masivo de correos) entre otros medios posibles y existentes para de esta forma lograr lo que se desea en el campo de la publicidad.

¿Qué tipos de publicidad digital existen? 

Se basan en elementos gráficos, tanto animados como fijos en imagen, a día de hoy usado en grandes plataformas como YouTube, blogger, facebook entre otras veamos algunas:


Email marketing

El envío masivo de correo electrónico es un método de alto alcance y con una buena gestión de email marketing, equivalente a la famosa suscripción por correo electrónico. 

Publicidad en redes sociales

Una herramienta de alto calibre bien implementada es tan objetivo como la anterior aunque su ideal no es el enviar correos masivos, sino usuarios masivos y mostrar un contenido muy relacionado al gusto del usuario final o futuro cliente.

lunes, 20 de marzo de 2017

Solución Windows - El disco seleccionado tiene el estilo de partición GPT

Al hacer algún formateo de tu portátil o PC de mesa, o instalar un sistema operativo nuevo en tu equipo te sale algún mensaje que dice:

No se puede instalar Windows en este disco. El disco seleccionado tiene el estilo de partición GPT

No hay de que preocuparse la solución es muy fácil y aplica para equipos o portátiles de cualquier marca (Lenovo, Dell, HP, Asus etc.) así que sin más vamos a iniciar con el tutorial a fondo.


EL TUTORIAL(Imágenes de comunidad Lenovo)

El mensaje que suele salir en este tipo de problemas gráficamente es el siguiente:




Lo primero será presionar las teclas "shift + f10" o "Fn + shift + f10" Este último en algunos equipos debe ser así, esto nos abrirá una consola o cmd:




Explicación puntos rojos del 1 al 7:

1. Escribimos en la consola el comando "Diskpart" y nos permite una gestión completa del disco duro.

2. Luego listamos los discos que hay con el comando "list disk", nos saldrá sólo uno y que tiene una partición tipo GPT se sabe porque está marcada con un asterisco (*).

3. Ahora necesitamos seleccionar el disco tipo GPT lo haremos con el comando "select disk 0" el número 0 fue puesto sólo en este caso en donde se ubica el GPT te podrá salir otro número indicado.

4. Se listan todas las particiones, con el comando "list partition" (NO ES OBLIGATORIO HACER ESTE PASO).

5. Ahora el comando "clean" elimina la estructura del disco duro GPT y lo convierte en MBR para de esta forma dejarse trabajar normalmente.

6. Verificamos de nuevo con el comando "list partition" que particiones hay, lo correcto es que no salga alguna ya que se eliminaron.

7. Y de nuevo con "list disk" corroboramos que el disco ya no es de tipo GPT.


Por último el comando "exit"(2) veces para salir del CMD o simplemente cerrar.

Logrando el objetivo así:


Y procedemos a instalar nuestra versión de Windows:



Como vemos el tutorial es muy fácil, aplica para Windows 8, 8.1, 10, espere les guste si tienen dudas pueden comentar.

Hasta la próxima,

domingo, 5 de marzo de 2017

Poner efecto "Page Loading - Carga personalizada" a tu blog de blogger

Un nuevo post el día de hoy veremos como colocar el efecto "Page Loading" en tu blog este truco además de sencillo para usarlo, tiene como objetivo sobre poner en tu blog cada que carga alguna página, post o contenido un efecto de 3 puntico cargando mientras todo el contenido está listo, lo cual lo hace interesante.



Podemos ver un Demo en el siguiente blog click a DEMO Abre un artículo de blog demo para ver el efecto:

http://senorjuventud.blogspot.com.co/

Interesante ¿No? para ponerlo en nuestro blog haremos estos cortos pasos.

EL TUTORIAL

1. Bastará con ir a Tema > Editar HTML allí buscamos el código "</body>".

2. Ahora justo encima del código buscado pegamos el siguiente código:
<style>
#abt-page-loader {
        position: fixed!important;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9999;
        background:#000 url('http://3.bp.blogspot.com/-sW166HTPK4U/UY2kVNdjsFI/AAAAAAAAEHk/fIO-B-mOeCE/s200/load6.gif') no-repeat 50% 30%;
        color: #FFF;
        display: none;
        font: 0/0 a;
        text-shadow: none;
        padding: 1em 1.2em;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="abt-page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
    // ... Show the Animation `.fadeIn()`
    $('#abt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>
3. Y listo ya quetodo sólo queda guardar y disfrutar el efecto.

Lo que tenemos en color Naranja es el link de la imagen por defecto con el efecto es un .gif ya que lleva movimiento la imagen puedes reemplazar por otra similar.

Es todo nos vemos en un próximo post, 

SÍGUENOS EN: