add

Como crear una página web gratis Tutorial 8


En el anterior tutorial aprendimos a descargar y a configurar nuestra nueva página web de una forma sencilla, si te perdiste el séptimo tutorial a continuación les dejo la dirección URL: Como crear una página web gratis Tutorial 7.

Como crear una página web gratis

Ahora nos toca terminar este grandioso tutorial de cómo crear una página web gratis, lo que nos faltaba es aprender a configurar el menú desplegable y los iconos de las redes sociales para que nuestros visitantes puedan suscribirse en nuestros perfiles.

Como crear una página web gratis

Como crear una página web gratis

Empezamos

1 Ir a Blogger

2 Un clic en “Plantilla

¿Cómo hacer que los vídeos de YouTube se hagan totalmente Responsive en mi blog de Blogger?

3 Un clic en “Editar HTML

¿Cómo hacer que los vídeos de YouTube se hagan totalmente Responsive en mi blog de Blogger?

Ahora se le abrirá el Editor HTML de su plantilla

¿Cómo hacer que los vídeos de YouTube se hagan totalmente Responsive en mi blog de Blogger?

En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.

¿Cómo hacer que los vídeos de YouTube se hagan totalmente Responsive en mi blog de Blogger?


1 Vamos a cambiar el título del blog por el título de su blog

Como crear una página web gratis

Busca este código

Reporter'>Seguros de Coches</a>

Ejemplo, mira la imagen

Como crear una página web gratis

Una vez que hayas encontrado el código cambia la frase que dice “Seguros de Coches” por el título de tu blog.

2 Configuración del Menú desplegable

Como crear una página web gratis

Busca este código

>Inicio <i class

Mira la imagen:

Como crear una página web gratis

Cuando hayas encontrado el código te mostrara un código similar al siguiente

<h3 class='widget-title'><span>MENU</span></h3>
                                                                                                           <div class='menu-pages-container'>
                                                                                                   <ul class='menu' id='menu-pages'>
                                                                                                               <li><a href='LA DIRECCION DE SU ARTICULO 1 AQUI'>Noticias</a></li>
                                                                                                                                  <li><a href='LA DIRECCION DE SU ARTICULO 2 AQUI'>Seguros</a></li>
                                                                                                                                  <li><a href='LA DIRECCION DE SU ARTICULO 3 AQUI'>Negocios</a></li>
                                                                                                                                  <li><a href='LA DIRECCION DE SU ARTICULO 4 AQUI'>Comprar</a></li>

Deberás cambiar las palabras que dicen LA DIRECCION DE SU ARTICULO 1 AQUI y remplazarlas por las direcciones URLs de los artículos más importante que quieras dar a conocer en el menú.

Al igual cambia las palabras que están marcadas de color rojo, por el nombre que tu quieras

3 Configuración de los iconos sociales

Como crear una página web gratis

Busca este código

'widget-title'><span>Bienvenidos</span></h3>

Mira la imagen:

Como crear una página web gratis

Después te encontrar el código, te mostrara un código como el siguiente:

<a class='Mail' href='LA DIRECCION DE SU EMAIL AQUI' target='_blank'><img alt='Mail' src='http://1.bp.blogspot.com/-6tH1QTvvyt8/Unz-oi9fHvI/AAAAAAAAAcU/VvUnfHt3l-8/s1600/Mail_2.png'/></a>
                                                                                                                       <a class='Facebook' href='LA DIRECCION DE SU CUENTA DE FACEBOOK AQUI' target='_blank'><img alt='Facebook' src='http://3.bp.blogspot.com/-2AUOcDdidI0/Unz-nkk3fSI/AAAAAAAAAcA/SHTdikX1KJU/s1600/Facebook_2.png'/></a>
                                                                                                                       <a class='Instagram' href='LA DIRECCION DE SU INSTAGRAM AQUI' target='_blank'><img alt='Instagram' src='http://2.bp.blogspot.com/-FnwBB_EqC78/Unz-oQkU23I/AAAAAAAAAcc/bsqglOVB5NI/s1600/Instagram_2.png'/></a>
                                                                                                                       <a class='Pinterest' href='LA DIRECCION DE SU PINTEREST AQUI' target='_blank'><img alt='Pinterest' src='http://3.bp.blogspot.com/-_FImETrg_hI/Unz-pEHV4lI/AAAAAAAAAck/5vagPQwIlac/s1600/Pinterest_2.png'/></a>
                                                                                                                       <a class='RSS' href='LA DIRECCION DE SU FEED BURNER AQUI' target='_blank'><img alt='RSS' src='http://3.bp.blogspot.com/-jWP2LTRyJX8/Unz-p0GLWyI/AAAAAAAAAc0/a0EV4NBl_KE/s1600/RSS_2.png'/></a>
                                                                                                                       <a class='Twitter' href='LA DIRECCION DE SU TWITTER AQUI' target='_blank'><img

Cambia todas las palabras que están marcadas de color azul y remplázalas por las diferentes direcciones URLs correspondientes de sus perfiles sociales

4 Configuración de los iconos sociales

Como crear una página web gratis

Busca este código

<div class='dt-social size-16px'>

Mira la imagen:

Como crear una página web gratis

Una vez que hayas encontrado el código, te mostrara un código igual al siguiente:

<div class='dt-social size-16px'>
                                                            <a class='Mail' href='LA DIRECCION DE SU EMAIL AQUI' target='_blank'><img alt='Mail' src='http://1.bp.blogspot.com/-23WhnSD2Yb8/Unz-oQRPPOI/AAAAAAAAAcQ/nzh2a_4t6v0/s1600/Mail.png'/></a>
                                                                        <a class='Facebook' href='LA DIRECCION DE SU FACEBOOK AQUI' target='_blank'><img alt='Facebook' src='http://4.bp.blogspot.com/-KEZMykNRniY/Unz-nuJi3NI/AAAAAAAAAb4/vft67u6xQr0/s1600/Facebook.png'/></a>
                                                                        <a class='Instagram' href='LA DIRECCION DE SU INSTAGRAM AQUI' target='_blank'><img alt='Instagram' src='http://1.bp.blogspot.com/-bfyXi0i1tV0/Unz-nhTrwtI/AAAAAAAAAb8/_3iVu2uVmqI/s1600/Instagram.png'/></a>
                                                                        <a class='Pinterest' href='LA DIRECCION DE SU PINTEREST AQUI' target='_blank'><img alt='Pinterest' src='http://3.bp.blogspot.com/-QUvZAcNaAas/Unz-pD9tldI/AAAAAAAAAcs/DE7efpr24Pc/s1600/Pinterest.png'/></a>
                                                                        <a class='RSS' href='LA DIRECCION DE SU FEED BURNER AQUI' target='_blank'><img alt='RSS' src='http://4.bp.blogspot.com/-vypmQcAxWOQ/Unz-qM1vZbI/AAAAAAAAAc8/2IIFLiXUuw8/s1600/RSS.png'/></a>
                                                                        <a class='Twitter' href='LA DIRECCION DE SU TWITTER AQUI' target='_blank'><img alt='Twitter'

Borra las palabras que están marcadas de color azul, y remplázalos por las direcciones URLs de sus perfiles sociales

5 Configuración del segundo menú

Como crear una página web gratis

Busca este código

<li><a href=''>Servicios ONLINE</a>

Mira la imagen:

Como crear una página web gratis

Cuando encuentras el código, te mostrara un código igual al siguiente:

<li class='divider'/>
                                                                                   <li><a href='LA DIRECCION URL AQUI '>Redes</a></li>
                                                                                   <li class='divider'/>
                                                                                   <li><a href=' LA DIRECCION URL AQUI '>Economía</a></li>
                                                                                   <li class='divider'/>
                                                                                    <li><a href=' LA DIRECCION URL AQUI '>Negocios</a></li>
                                                                                   <li class='divider'/>
                                                                                   <li><a href=' LA DIRECCION URL AQUI '>Videos</a></li>
                                                                                   <li class='divider'/>
                                                                                   <li><a href=' LA DIRECCION URL AQUI '>Vehiculos</a></li>
                                                                                   <li class='divider'/>
                                                                                   <li><a href=' LA DIRECCION URL AQUI '>Coverturas</a></li>
                                                                                   <li class='divider'/>
                                                                                   <li><a href=' LA DIRECCION URL AQUI '>Seguros de Coches</a></li>

Remplaza todas las palabras que están marcadas de color azul por las direcciones URLs de los artículos que quieras dar a conocer

También, cambia las palabras que están marcadas de color rojo por las palabras que tu quieras

6 Configuración del menú vertical “CATEGORIAS”

Como crear una página web gratis

Busca este código

<h3 class='widget-title'><span>Categorías</span></h3>

Mira la imagen:

Como crear una página web gratis

Una vez que hayas encontrado el código, te mostrara las siguientes líneas de código

<h3 class='widget-title'><span>Categorías</span></h3>   
                                                                                   <ul>
                                                                                   <li><a href='LA DIRECCION DE SU ARTICULO 1 AQUI'>Noticias</a></li>
                                                                                               <li><a href='LA DIRECCION DE SU ARTICULO 2 AQUI'>Temas</a></li>
                                                                                               <li><a href='LA DIRECCION DE SU ARTICULO 3 AQUI'>Videos</a></li>
                                                                                               <li><a href='LA DIRECCION DE SU ARTICULO 4 AQUI'>Foros</a></li>
                                                                                               <li><a href='LA DIRECCION DE SU ARTICULO 5 AQUI'>Seguros</a></li>
                                                                                               <li><a href='LA DIRECCION DE SU ARTICULO 6 AQUI'>Economía</a></li>
                                             </ul>

Remplaza todas las palabras que están marcadas de color azul, por las direcciones URLs de los artículos destacados

Además, borra las palabras que están marcadas de color rojo, y pon ahí las palabras que tú quieras

7 Configuración de los iconos sociales

Como crear una página web gratis

Busca este código

<h3 class='widget-title'><span>Suscríbete</span></h3>

Mira la imagen:

Como crear una página web gratis

Luego de encontrar el código, te mostrara un código similar al siguiente:

<h3 class='widget-title'><span>Suscríbete</span></h3>
                                                                                   <div class='dt-social size-32px'>
                                                                                       <a class='Mail' href='LA DIRECCION DE SU EMAIL AQUI' target='_blank'>
                                                                                                   <img alt='Mail' src='http://1.bp.blogspot.com/-6tH1QTvvyt8/Unz-oi9fHvI/AAAAAAAAAcU/VvUnfHt3l-8/s1600/Mail_2.png'/>
                                                                                       </a>
                                                                                               <a class='Facebook' href='LA DIRECCION DE SU FACEBOOK AQUI' target='_blank'>
                                                                                                   <img alt='Facebook' src='http://3.bp.blogspot.com/-2AUOcDdidI0/Unz-nkk3fSI/AAAAAAAAAcA/SHTdikX1KJU/s1600/Facebook_2.png'/>
                                                                                               </a>
                                                                                               <a class='Instagram' href='LA DIRECCION DE SU INSTAGRAM AQUI' target='_blank'>
                                                                                                   <img alt='Instagram' src='http://2.bp.blogspot.com/-FnwBB_EqC78/Unz-oQkU23I/AAAAAAAAAcc/bsqglOVB5NI/s1600/Instagram_2.png'/>
                                                                                               </a>
                                                                                               <a class='Pinterest' href='LA DIRECCION DE SU PINTEREST AQUI' target='_blank'>
                                                                                                   <img alt='Pinterest' src='http://3.bp.blogspot.com/-_FImETrg_hI/Unz-pEHV4lI/AAAAAAAAAck/5vagPQwIlac/s1600/Pinterest_2.png'/>
                                                                                               </a>
                                                                                               <a class='RSS' href='LA DIRECCION DE SU FEED BURNER AQUI' target='_blank'>
                                                                                                   <img alt='RSS' src='http://3.bp.blogspot.com/-jWP2LTRyJX8/Unz-p0GLWyI/AAAAAAAAAc0/a0EV4NBl_KE/s1600/RSS_2.png'/>
                                                                                               </a>
                                                                                               <a class='Twitter' href='LA DIRECCION DE SU TWITTER AQUI' target='_blank'>

Cambia todas las palabras que están marcadas de color azul, por las diferentes direcciones URLs de sus perfiles sociales

Hemos terminado de configurar nuestra plantilla en el Editor HTML, tienes que dar un clic en “Guardar plantilla” para que tus nuevos cambios surjan efectos.

Como crear una página web gratis

Has terminado toda la configuración de tu nueva página web

Felicidades ahora tienes tu propia página web sin costo alguno

Solo falta cambiar el subdominio de blogspot.com por un dominio personalizado propio

Si quieres comprar un dominio personalizado para tu página web, te recomiendo que lo compres en Godaddy a un costo de 12,99 dólares por un año.

Puedes dirigirte al siguiente enlace en el cual explico sobre la compra de dominios personalizados en Godaddy


Ahora que ya eres un profesional creando tu propia página web, puedes visitar algunos tutoriales de plantillas gratis que publique anteriormente, y sigue todas las instrucciones tal y cual lo muestro, dirígete al siguiente link si quieres crear nuevos temas


Recuerda suscribirte y recibirás mis nuevas actualizaciones directamente en su correo electrónico

¿Necesitas ayuda?

Cualquier pegunta no dudes en hacérmelo saber y de inmediato les responderé

Saludos

emailEnviar por correo

1 comentarios:

  1. la verdad es una página que tiene mucha información. Lo hice pero al final la borré. Gracias igualmente.

    ResponderEliminar

Discusión

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (33) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (11) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios