Trabaja Desde Casa !!

domingo, 10 de junio de 2018

Personalizar Menú Horizontal en Blogger

Personalizar Menú Horizontal en Blogger. Hola amigos, aquí tenéis el cuarto paso para crear un Blog gratis y en este post os enseño como personalizar nuestro menú horizontal, el cual dejamos instalado en el paso anterior. Realizaremos varias cositas para que sepan como editarlo al 100%.

Para poner los colores es importante hacerlo en formato HTML. Si van a esta pagina, pueden encontrar distintos colores.

Lo que vamos a realizar sera lo siguiente:

Editar los colores de fondo del menú horizontal, las pestañas normales, subpestañas, fuentes, etc. Todo esto lo explicare en el vídeo que os dejo mas abajo.

Lo siguiente que les enseñare sera agregar pestañas a nuestro menú.

Para agregar una pestaña simple:

<li class='top'><a class='top_link' href='URL'><span>Pestaña 1</span></a></li>

Para agregar una pestaña con subpestaña:

<li class='top'><a class='top_link' href='URL'><span class='down'>Pestaña 1</span></a>
<ul class='sub'>
<li><a href='URL'>Pestaña 1.1</a></li>
</ul>
</li>

Para agregar una pestaña que tenga otra subpestaña:

<li class='top'><a class='top_link' href='URL'><span class='down'>Pestaña 1</span></a>
<ul class='sub'>
<li><a href="URL" class="fly">Pestaña 1.1</a>
<ul>
<li><a href="URL">Pestaña 1.1.1</a></li>
</ul>
</li>
</ul>
</li>

Personalizar Menú Horizontal en Blogger "Vídeo"

¿Que te ha parecido este artículo? Me encantaría saber tu opinión y para eso tienes la sección de comentarios un poco mas abajo para que te expreses siempre en el margen del respeto y asín dejar un comentario positivo como también uno negativo en el cual podamos debatirlo de forma amigable. Saludos amigos y a seguir ganando dinero por Internet !!

Sígueme en mis Redes Sociales!!!

jueves, 7 de junio de 2018

Colocar Menú Horizontal Despegable con Subpestañas

Colocar Menú Horizontal Despegable con Subpestañas. Hola amigos, hoy vamos con el tercer paso para crear el Blog de Trabaja Desde Casa y lo que haremos en esta ocación sera insertar nuestro menú principal con sus pestañas y subpestañas. También cambiaremos los colores de la barra, el tamaño, etc.

Lo primero que haremos es ir a Tema >> Editar HTML. Luego damos clic en cualquier lugar donde están los códigos y damos en el teclado a Ctrl+F. En el buscador colocamos <b:section class= y damos al Intro. Damos Intro hasta que aparezca la siguiente linea.

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>

Eliminamos lo que está en color rojo. Es posible que encontremos muchas partes como las que están en color rojo, así que eliminamos todas las que encontremos.

Luego buscaremos el siguiente código /* Tabs.
Posteriormente borraremos todo lo que se encuentre entre /* Tabs y /* Headings y en su lugar pegaremos lo siguiente:

#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}

Luego dentro del buscador colocamos ]]></b:skin> y damos Intro.

Luego de haber encontrado el código anterior, lo que haremos será pegar el código completo que les dejaré a continuación antes de ]]></b:skin>.

/* Menu horizontal con buscador
----------------------------------------------- */
#menuWrapper {
width:100%; /* Ancho del menú */
height:35px;
padding-left:14px;
background:#333; /* Color de fondo */
border-radius:20px; /* Bordes redondeados de la barra principal */
}
.menu {
padding:0;
margin:0;
list-style:none;
height:35px;
position:relative;
z-index:99;
font-family:arial, verdana, sans-serif;
}
.menu li:hover li a {
background:none;
}
.menu li.top {display:block; float:left;}
.menu li a.top_link {
display:block;
float:left;
height:35px;
line-height:34px;
color:#ccc;
text-decoration:none;
font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;
font-size:13px; /* Tamaño de la fuente */
font-weight:bold;
padding:0 0 0 12px;
cursor:pointer;
}
.menu li a.top_link span {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link:hover, .menu li:hover > a.top_link {color:#fff; }
.menu li:hover {position:relative; z-index:2;}
.menu ul,
.menu li:hover ul ul,
.menu li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu li:hover ul.sub {
left:0;
top:35px;
background:#333; /* Color de fondo del submenú */
padding:3px;
white-space:nowrap;
width:200px;
height:auto;
z-index:99;
}
.menu li:hover ul.sub li {
display:block;
height:30px;
position:relative;
float:left;
width:200px;
font-weight:normal;
}
.menu li:hover ul.sub li a{
display:block;
height:30px;
width:200px;
line-height:30px;
text-indent:5px;
color:#ccc;
text-decoration:none;
}
.menu li ul.sub li a.fly {
/* Color de fondo del submenú */
background:#333 url(https://lh4.googleusercontent.com/_dsEG33PDaHw/TZ0rcSPpqlI/AAAAAAAABSc/RseHiYluzAM/arrow_over.gif) 185px 10px no-repeat;}
.menu li:hover ul.sub li a:hover {
background:#2580a2; /* Color de fondo al pasar el cursor */
color:#fff;
}
.menu li:hover ul.sub li a.fly:hover, .menu li:hover ul li:hover > a.fly {
/* Color de fondo al pasar el cursor */
background:#2580a2 url(https://lh4.googleusercontent.com/_dsEG33PDaHw/TZ0rcSPpqlI/AAAAAAAABSc/RseHiYluzAM/arrow_over.gif) 185px 10px no-repeat; color:#fff;}

.menu li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {
left:200px;
top:-4px;
background: #333; /* Color de fondo del submenú */
padding:3px;
white-space:nowrap;
width:200px;
z-index:99;
height:auto;
}
#search {
width: 228px; /* Ancho del buscador */
height: 22px;
float: right;
text-align: center;
margin-top: 6px;
margin-right: 6px;
/* Imagen de fondo del buscador */
background: url(http://4.bp.blogspot.com/_qgZA1ny_dAs/Szuhn02zO6I/AAAAAAAADdI/u2etpRWlwF8/s1600/search-bar.png) no-repeat;
}
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}

Copiado todo el código anterior, daremos clic en Guardar Tema.

Ahora iremos a Diseño >> Agregar un Gadget >> HTML/JavaScript copiamos el siguiente código que les dejo.

<div id='menuWrapper'>
<ul class='menu'>
<li class='top'><a class='top_link' href='URL del enlace'><span>Pestaña 1</span></a></li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 2</span></a><ul class='sub'><li><a class='fly' href='#'>Pestaña 2.1</a><ul>
<li><a href='URL del enlace'>Pestaña 2.1.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.1.2</a></li>
<li><a href='URL del enlace'>Pestaña 2.1.3</a></li>
</ul>
</li>
<li class='mid'><a class='fly' href='#'>Pestaña 2.2</a>
<ul>
<li><a href='URL del enlace'>Pestaña 2.2.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.2</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.3</a></li>
<li><a class='fly' href='#'>Pestaña 2.2.4</a>
<ul>
<li><a href='URL del enlace'>Pestaña 2.2.4.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.4.2</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.4.3</a></li>
</ul>
</li>
<li><a href='URL del enlace'>Pestaña 2.2.5</a></li>
<li><a class='fly' href='#'>Pestaña 2.2.6</a>
<ul>
<li><a href='URL del enlace'>Pestaña 2.2.6.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.6.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='URL del enlace'>Pestaña 2.3</a></li>
<li><a href='URL del enlace'>Pestaña 2.4</a></li>
<li><a href='URL del enlace'>Pestaña 2.5</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 3</span></a>
<ul class='sub'>
<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>
</ul>
</li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 4</span></a>
<ul class='sub'>
<li><a href='URL del enlace'>Pestaña 4.1</a></li>
<li><a class='fly' href='#'>Pestaña 4.2</a>
<ul>
<li><a href='URL del enlace'>Pestaña 4.2.1</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.2</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.3</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.4</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.5</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.6</a></li>
</ul>
</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 class='top'><a class='top_link' href='#'><span class='down'>Pestaña 5</span></a>
<ul class='sub'>
<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>
</ul>
</li>


<li>
<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == "") this.value = "Buscar...";' onfocus='if (this.value == "Buscar...") this.value = "";' size='28' type='text' value='Buscar...'/></form>
</li>

</ul>
</div>

Colocar Menú Horizontal Despegable con Subpestañas "Vídeo" Próximamente

Sígueme en mis Redes Sociales!!!

miércoles, 6 de junio de 2018

Ajustar Ancho, Colocar imagen de Título

Ajustar Ancho, Colocar imagen de Título. Hola amigos, seguimos con la explicación de como crear el Blog de Trabaja Desde Casa en esta ocasión vamos a colocar el ancho del margen, una imagen de titulo, quitaremos la barra de navegación que nos aparece, reduciremos el espacio superior que nos queda y cambiaremos los colores del fondo. Bueno amigos, sin mas que decir os dejo con el paso #2.

Ajustar Ancho de nuestro Blog

Para ajustar el ancho de nuestro Blog, vamos a Temas >> Personalizar >> Ajustar ancho. Las medidas que uso yo para mi Blog son 1160 px de ancho del Blog y 360 px de ancho de la barra lateral.

Desactivar barra de navegación superior (NavBar)

Vamos a Diseño >> Barra de navegación (Clic en editar). Damos a la opción que dice No y guardamos los cambios.

Eliminar espacio superior

Para eliminar el espacio, vamos a Temas >> Editar HTML.

Luego daremos un clic dentro del espacio donde están todos los códigos y pulsaremos las teclas Ctrl+F para que nos aparezca un buscador. Dentro de ese buscador pondremos ]]></b:skin> y daremos Enter.

Cuando encontremos ese código pondremos antes de este el siguiente contenido .content { margin-top:-30px !important;

}.

Luego damos en Guardar Tema y con eso hemos terminado.

Cambiar colores de fondo

Para cambiar los colores de fondo de nuestro Blog, iremos Tema >> Personalizar >> Avanzado >> Fondos.

Colocar imagen del título del Blog

Para eso iremos a Diseño >> Titulo (Clic en editar). Después vamos a seleccionar una imagen que tengamos en nuestra computadora, la cual usaremos como portada de nuestro Blog (recomiendo usar 468 x 60 px). Luego donde nos dice "Ubicación" marcaremos la casilla que dice "En lugar del titulo y descripción" y damos clic en Guardar.

Ajustar Ancho, Colocar imagen de Título "Vídeo"

Sígueme en mis Redes Sociales!!!

lunes, 4 de junio de 2018

Crear Cuenta de Google y Blogger

Crear Cuenta de Google y Blogger. Hola amigos, vamos a empezar con el apartado numero 1, que es crearnos una cuenta de Google para empezar a construirnos nuestro propio Blog en Blogger y empezar a definir la plantilla.

Crear cuenta de Google

Para crear una cuenta en Google, lo primero que debemos hacer es ir a Google.com y rellenar el formulario de registro. Este paso es muy importante, ya que, nos servira para tener una cuenta de Google +, Youtube, Gmail y Blogger. Simplemente rellena los datos que te vayan pidiendo y acepta las condiciones de servicios de Google y con eso ya tendremos nuestra cuenta creada.

Crear cuenta de Blogger

Para crear cuenta en Blogger lo vamos hacer desde Blogger.com. Luego damos clic donde dice "Crear tu Blog" y nos dirá que cuenta de Google queremos utilizar si aun no hemos iniciado sección con ella. Luego tendremos que confirmar nuestro perfil para seguir y tendremos que elegir entre un perfil de Google + o un perfil de Blogger.

Una vez que hemos escogido nuestro perfil, ya podremos entrar a nuestro Blogger. Dentro de Blogger, daremos clic donde dice "Crear Blog". Ahora tendremos que colocar el Titulo de nuestro Blog y la dirección. Luego en donde dice plantilla, escogeremos la que pone "Sencillo" y finalizamos dando clic en el botón naranja que hay abajo que pone "Crear Blog".

Crear cuenta de Blogger "Vídeo"

Sígueme en mis Redes Sociales!!!

Como Crear el Blog de Trabaja Desde Casa

Como Crear el Blog de Trabaja Desde Casa. Hola amigos, en este apartado os enseñare paso a paso como cree mi propio Blog en Blogger, bien explicado para que no tengáis problemas a la hora de hacerlos ustedes mismos. Este apartado es muy importante hacerlos las personas que están empezando a ganar dinero a través de Internet y para ellos podáis conseguir referidos gratis promocionando vuestros negocios.

Para comenzar a crear vuestro blog idéntico al que hice en Trabaja Desde casa, empezaremos desde abajo hacia arriba, para ello tendréis que seguir paso a paso cada uno de los apartados que os iré enumerando mas abajo para que no tengáis ninguna duda a la hora de hacerlo.

A la hora de ir sacando los artículos, los iré colocando en esta sección, asín que, estar atentos amigos.

1.- Crear Cuenta de Google y Blogger.

2.- Ajustar el Ancho, Colocar imagen de título.

3.- Colocar Menú Despegables con Subpestañas.

4.- Personalizar Menú Horizontal.

5.- Dividir Cabecera de Blogger y Colocar Menú Superior.

6.- Colocar un Slider en Blogger Fácilmente.

7.- Colocar Redes Sociales, Gadget y Favicon.

Sígueme en mis Redes Sociales!!!