Crear páginas estáticas en Amp HTML


En este tutorial de Blogger aprenderá a crear 4 páginas estáticas en AMP HTML, siempre y cuando esté utilizando la plantilla Landing page Amp HTML que se encuentra en el siguiente tutorial:

Landing page Amp HTML Blogger

Los pasos son sencillos, deberá seguir las instrucciones claras de cada video tutorial, crear una página nueva, copiar el código y pegarlo  en modo HTML, luego realizar los cambios pertinentes, después tendrá que dirigirse al Editor HTML de la plantilla y realizar un solo cambio, como lo es remplazar la URL de la nueva página estática creada por la que se encuentra en el ejemplo


Empezamos

1 Página estática en Amp HTML sección contactos

Crear páginas estáticas en Amp HTML

Instrucciones:

Video Tutorial


1.1 Crear una página estática

1.2 Un clic en Páginas

Crear páginas estáticas en Amp HTML

1.3 Un clic en Página nueva

Crear páginas estáticas en Amp HTML

1.4 Trabajar en modo HTML y no en modo Redactar

Crear páginas estáticas en Amp HTML

1.5 Ingrese las siguientes líneas de código


<div class='col-md-13'>


<!-- Imagen seccion2 -->

<section class='section2 section-image3' id='imagenseccion5'>

<div class='imagenseccion6'>

<div class='container'>

       <div class='row'>

<center>

<br/>

<br/>

<br/>

<br/>

  <h2 class='title2'>Página de contactos</h2>

  </center>

<br/>

<br/>

<div class='col-md-13'>

<div class='col-md-3 col-md-offset-2 d'>

<h3><i class='material-icons griss-color circle2'>place</i> Av. 15 de Noviembre Tena, Ecuador</h3>

<h3><i class='material-icons griss-color circle2'>person_add</i> +LuisChávez</h3>

<h3><i class='material-icons griss-color circle2'>call</i> +593 994589032</h3>

<h3><i class='material-icons griss-color circle2'>local_post_office</i> ayudadeblogger@gmail.com</h3>

</div>

<div class='col-md-3 col-md-offset-2'>

<div class='text-responsive'>

<h4 class='d'>Este es un texto simple, este texto sirve para verificar y acompañar a rellenar parte de una descripción, que ayuda a los diseñadores web a desarrollar correctamente un sitio web.</h4>

<br/>

<a href="http://landingpageamphtml.blogspot.com/" class="read_more"><i class="fa fa-chevron-right"></i>   Leer más</a>

</div>

</div>


<div class='col-md-3 col-md-offset-2'>

<div class='text-responsive'>

<h4 class='d'>Este es un texto simple, este texto sirve para verificar y acompañar a rellenar parte de una descripción, que ayuda a los diseñadores web a desarrollar correctamente un sitio web.</h4>

<br/>

<a href="http://landingpageamphtml.blogspot.com/" class="read_more"><i class="fa fa-chevron-right"></i>   Leer más</a>

</div>

</div>


</div>

        </div>

</div></div>


    </section>

    <!-- End Imagen seccion2 -->

 </div>


<div class='col-md-13'>

<amp-iframe frameborder='0' height='200' layout='responsive' sandbox='allow-scripts allow-same-origin allow-popups' src='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3989.2176475242013!2d-77.81577118570475!3d-0.9942268992747325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x91d6a44a76c2b909%3A0x109836fcdd0679e1!2sAyudadeblogger!5e0!3m2!1ses!2s!4v1487736852348' width='600'>

</amp-iframe>

</div>

Realice los siguientes cambios:

Elimine las palabras que están marcadas de color rojo y remplácelos por las que necesite mostrar

Elimine las direcciones URLs que están marcadas de color azul por las que quiera mostrar

Diríjase a Google maps, y genere el iframe de su mapa, luego copie solo la URL generada y remplácelo por la URL que está marcado de color amarillo

Crear páginas estáticas en Amp HTML

- El código que me genero como ejemplo, tendrá que copiar solo la URL que esta marcada

Crear páginas estáticas en Amp HTML

Un clic en Publicar

Crear páginas estáticas en Amp HTML

Ahora diríjase a Tema

Crear páginas estáticas en Amp HTML

Un clic en Editar HTML

Crear páginas estáticas en Amp HTML

Busque el siguiente código

/* Seccion Contactos */

Le mostrara un código similar al siguiente:


/* Seccion Contactos */

/* Editar la URL con la de su página de contactos  */

<b:if cond='data:blog.url == &quot;http://landingpageamphtml.blogspot.com/p/contactos.html&quot;'>

#outer-wrapper {

    width: 100%;

margin: 0px auto 0px;

}

#main-wrapper {

    width: 100%;

    float: left;

    margin: -9px;

    padding: 5px 10px 5px 10px;

    word-wrap: break-word;

    overflow: hidden;

}

#rsidebar-wrapper, .adbpostautor, .post-title, #HTML4, #blog-pager, #footer, #ayudadeblogger-left{

display:none;

}

#content-wrapper {

    background: #fff;

    padding: 15px;

    padding-top: 0px;

}

.post-outer {

      margin: -16px;

}


/* Imagen seccion contactos */

#imagenseccion5 {

    background-image: url(https://3.bp.blogspot.com/-TGfjG-I_Uv8/WLHgfm6RuWI/AAAAAAAAOlU/1Z3wKnJRmkQz27yVRE5zf5QNYjNBEM5fQCLcB/s1600/4.jpg);

    padding-bottom: 0;

    padding-top: 0;

}


Realice los siguientes cambios:

Remplace la dirección URL que dice http://landingpageamphtml.blogspot.com/p/contactos.html por la dirección URL de su nueva página de contactos

Elimine la dirección URL de imagen que está marcado de color amarillo, por una nueva dirección URL de imagen

Un clic en Guardar Tema

Crear páginas estáticas en Amp HTML

Visite su nueva página

2 Página estática en Amp HTML sección servicios

Crear páginas estáticas en Amp HTML

Instrucciones:

Video Tutorial


1.1 Crear una página estática

1.2 Un clic en Páginas

Crear páginas estáticas en Amp HTML

1.3 Un clic en Página nueva

Crear páginas estáticas en Amp HTML

1.4 Trabajar en modo HTML y no en modo Redactar

Crear páginas estáticas en Amp HTML

1.5 Ingrese las siguientes líneas de código

 
<div class='col-md-13'>

<!-- Imagen seccion2 -->

<section class='section2 section-image3' id='imagenseccion5'>

<div class='imagenseccion6'>

<div class='container'>

    <div class='row'>

<center>

<br/>

<br/>

<br/>

<br/>

  <h2 class='title2'>Página de Servicios</h2>

  </center>

<br/>

<br/>

<div class='col-md-2 col-md-offset-2 '>

</div>

<div class='col-md-5'>

<div class='text-responsive'>

<h4 class='d'>Este es un texto simple, este texto sirve para verificar y acompañar a rellenar parte de una descripción, que ayuda a los diseñadores web a desarrollar correctamente un sitio web.</h4>

<br/>

<h4 class='d'>Este es un texto simple, este texto sirve para verificar y acompañar a rellenar parte de una descripción, que ayuda a los diseñadores web a desarrollar correctamente un sitio web.</h4>

<br/>

<h4 class='d'>Este es un texto simple, este texto sirve para verificar y acompañar a rellenar parte de una descripción, que ayuda a los diseñadores web a desarrollar correctamente un sitio web.</h4>

</div>

</div>
   </div>

</div></div>

</section>

 
<br/>

<br/>

<br/>

 </div>

<div class='container'>

<div class='col-md-1 col-md-offset-2'>

</div>

<div class='col-md-5'>

<div class="service_box service_box_align_left ">

<div class="service_icon ">

<i class="fa fa-institution"></i>

</div>

<div class="service_info default_simple_title">

<h3>ANALYTICS SOLUTIONS</h3>

<div class="mb_10">Phasellus varius cursus turpis dign issim mollis. Vestibulum hendrerit arcu nunc, sit amet dignissim dui mollis maximus. <a href="http://landingpageamphtml.blogspot.com/" class="read_more"><i class="fa fa-chevron-right"></i>   Leer más</a>

</div></div></div>

<br/>

<div class="service_box service_box_align_left ">

<div class="service_icon ">

<i class="fa fa-adjust"></i>

</div>

<div class="service_info default_simple_title">

<h3>SHOPPING CAMPAIGNS</h3>

<div class="mb_10">Phasellus varius cursus turpis dign issim mollis. Vestibulum hendrerit arcu nunc, sit amet dignissim dui mollis maximus. <a href="http://landingpageamphtml.blogspot.com/" class="read_more"><i class="fa fa-chevron-right"></i>   Leer más</a>

</div></div></div>

<br/>

<div class="service_box service_box_align_left ">

<div class="service_icon ">

<i class="fa fa-bar-chart-o"></i>

</div>

<div class="service_info default_simple_title">

<h3>GREAT ENVIRONMENT</h3>

<div class="mb_10">Phasellus varius cursus turpis dign issim mollis. Vestibulum hendrerit arcu nunc, sit amet dignissim dui mollis maximus. <a href="http://landingpageamphtml.blogspot.com/" class="read_more"><i class="fa fa-chevron-right"></i>   Leer más</a>

</div></div></div>

<br/>

<div class="service_box service_box_align_left ">

<div class="service_icon ">

<i class="fa fa-shield"></i>

</div>

<div class="service_info default_simple_title">

<h3>WELL DOCUMENTED</h3>

<div class="mb_10">Phasellus varius cursus turpis dign issim mollis. Vestibulum hendrerit arcu nunc, sit amet dignissim dui mollis maximus. <a href="http://landingpageamphtml.blogspot.com/" class="read_more"><i class="fa fa-chevron-right"></i>   Leer más</a>

</div></div></div>

</div>

<div class='col-md-5'>

<div class="service_box service_box_align_left ">

<div class="service_icon ">

<i class="fa fa-bookmark"></i></div>

<div class="service_info default_simple_title">

<h3>ENTERPRISE</h3>

<div class="mb_10">Phasellus varius cursus turpis dign issim mollis. Vestibulum hendrerit arcu nunc, sit amet dignissim dui mollis maximus. <a href="http://landingpageamphtml.blogspot.com/" class="read_more"><i class="fa fa-chevron-right"></i>   Leer más</a></div></div></div>

<br/>

<div class="service_box service_box_align_left ">

<div class="service_icon ">

<i class="fa fa-bullhorn"></i></div>

<div class="service_info default_simple_title">

<h3>MARKETING</h3>

<div class="mb_10">Phasellus varius cursus turpis dign issim mollis. Vestibulum hendrerit arcu nunc, sit amet dignissim dui mollis maximus. <a href="http://landingpageamphtml.blogspot.com/" class="read_more"><i class="fa fa-chevron-right"></i>   Leer más</a></div></div></div>


<br/>

<div class="service_box service_box_align_left ">

<div class="service_icon ">

<i class="fa fa-check-square-o"></i></div>

<div class="service_info default_simple_title">

<h3>BOOST PERFORMANCE</h3>

<div class="mb_10">Phasellus varius cursus turpis dign issim mollis. Vestibulum hendrerit arcu nunc, sit amet dignissim dui mollis maximus. <a href="http://landingpageamphtml.blogspot.com/" class="read_more"><i class="fa fa-chevron-right"></i>   Leer más</a></div></div></div>

<br/>

<div class="service_box service_box_align_left ">

<div class="service_icon ">

<i class="fa fa-cog"></i></div>

<div class="service_info default_simple_title">

<h3>HIGHLY CUSTOMIZABLE</h3>

<div class="mb_10">Phasellus varius cursus turpis dign issim mollis. Vestibulum hendrerit arcu nunc, sit amet dignissim dui mollis maximus. <a href="http://landingpageamphtml.blogspot.com/" class="read_more"><i class="fa fa-chevron-right"></i>   Leer más</a></div></div></div>

<br/>

<br/>

<br/>

</div>

</div>



Realice los siguientes cambios:

Elimine las palabras que están marcadas de color rojo y remplácelos por las que necesite mostrar

Elimine las direcciones URLs que están marcadas de color azul y remplácelos por las que quiera mostrar

Puede cambiar los iconos Fond Awesome que están marcados de color amarillo, visite el siguiente enlace en el cual encontrara una variedad de iconos

Iconos Fond Awesome


Un clic en Publicar

Crear páginas estáticas en Amp HTML

Ahora diríjase a Tema

Crear páginas estáticas en Amp HTML

Un clic en Editar HTML

Crear páginas estáticas en Amp HTML

Busque el siguiente código

/* Seccion servicios */

Le mostrara un código similar al siguiente


/* Seccion Servicios */

/* Editar la URL con la de su página de servicios  */

<b:if cond='data:blog.url == &quot;http://landingpageamphtml.blogspot.com/p/servicios.html&quot;'>

#outer-wrapper {

    width: 100%;

margin: 0px auto 0px;

}

#main-wrapper {

    width: 100%;

    float: left;

    margin: -9px;

    padding: 5px 10px 5px 10px;

    word-wrap: break-word;

    overflow: hidden;

}

#rsidebar-wrapper, .adbpostautor, .post-title, #HTML4, #blog-pager, #footer, #ayudadeblogger-left{

display:none;

}

#content-wrapper {

    background: #fff;

    padding: 15px;

    padding-top: 0px;

}

.post-outer {

      margin: -16px;

}

#imagenseccion5 {

    background-image: url(https://2.bp.blogspot.com/-ci2faEicwCc/WLJGTYIvY7I/AAAAAAAAOmU/D3_YxsiBPmYBTtu1TmsDGe_KOWb9Iq89ACLcB/s1600/6.jpg);

    padding-bottom: 0;

    padding-top: 0;

}


Realice los siguientes cambios:

Remplace la dirección URL que dice http://landingpageamphtml.blogspot.com/p/servicios.html por la dirección URL de su nueva página de servicios

Elimine la dirección URL de imagen que está marcado de color amarillo, por una nueva dirección URL de imagen

Un clic en Guardar Tema

Crear páginas estáticas en Amp HTML

Visite su nueva página

3 Página estática en Amp HTML sección nosotros

Crear páginas estáticas en Amp HTML

Instrucciones:

Video Tutorial


1.1 Crear una página estática

1.2 Un clic en Páginas

Crear páginas estáticas en Amp HTML

1.3 Un clic en Página nueva

Crear páginas estáticas en Amp HTML

1.4 Trabajar en modo HTML y no en modo Redactar

Crear páginas estáticas en Amp HTML

1.5 Ingrese las siguientes líneas de código


 <div class='col-md-13'>

<!-- Imagen seccion2 -->

<section class='section2 section-image3' id='imagenseccion5'>

<div class='imagenseccion6'>

<div class='container'>

  <div class='row'>

<br/>
<br/>
<br/>
<br/>
<br/>
<div class='col-md-offset-2 text-responsive'>

<h1 class='title2'>About Us</h1>

<br/>
<br/>

</div>

<div class='col-md-2 col-md-offset-2 '>

</div>

<div class='col-md-4'>

<div class='text-responsive'>

<h5 class='d'>Este es un texto simple, este texto sirve para verificar y acompañar a rellenar parte de una descripción, que ayuda a los diseñadores web a desarrollar correctamente un sitio web. <a href="http://landingpageamphtml.blogspot.com/" class="read_more d"><i class="fa fa-chevron-right"></i>   Leer más</a></h5>

<br/>

<h5 class='d'>Este es un texto simple, este texto sirve para verificar y acompañar a rellenar parte de una descripción, que ayuda a los diseñadores web a desarrollar correctamente un sitio web. <a href="http://landingpageamphtml.blogspot.com/" class="read_more d"><i class="fa fa-chevron-right"></i>   Leer más</a></h5>

</div>

</div>


<div class='col-md-4'>

<div class='text-responsive'>

<h5 class='d'>Este es un texto simple, este texto sirve para verificar y acompañar a rellenar parte de una descripción, que ayuda a los diseñadores web a desarrollar correctamente un sitio web. <a href="http://landingpageamphtml.blogspot.com/" class="read_more d"><i class="fa fa-chevron-right"></i>   Leer más</a></h5>

<br/>

<h5 class='d'>Este es un texto simple, este texto sirve para verificar y acompañar a rellenar parte de una descripción, que ayuda a los diseñadores web a desarrollar correctamente un sitio web. <a href="http://landingpageamphtml.blogspot.com/" class="read_more d"><i class="fa fa-chevron-right"></i>   Leer más</a></h5>

</div>

</div>
 </div>

</div></div>
 </section>

 

<br/>
<br/>
<br/>

 </div>

<div class='container'>

<div class='col-md-1 '>

</div>

<div class='col-md-5 '>

<div class="wpb_column vc_column_container ">

<div class="vc_column-inner ">

<div class="wpb_wrapper">

<div class=" "><div>

<div class="special_title under_line_title align-left spcf_58b2845bbf84c">

<h2>ABOUT US</h2>

<div class="mb_10">

Donec porta maximus eros vitae dapibus. Nulla a purus tristique dolor suscipit tincidunt. Morbi lorem purus, consequat ac tristique nec, dictum et odio. Nulla eu sem turpis.</div>

</div></div></div>

<div class=" "><div>

<blockquote>Donec ac nunc quis nisl aliquet hendrerit. Pellentesque ultricies, felis id iaculis feugiat, mauris nunc viverra lectus, quis egestas felis nisi non ante. Donec bibendum magna.</blockquote></div></div>

 <div class="wpb_text_column wpb_content_element ">

  <div class="wpb_wrapper">

   <p>Aliquam lorem nisl, bibendum et sollicitudin ut, viverra vitae ligula. In hac habitasse platea dictumst. Quisque in tincidunt augue. Cum sociis natoque penatibus magnis dis parturient montes.</p>

  </div>

 </div>

<div class=" "><div>

<div class="special_title side_line_title align-left spcf_58b2845bc060c">

<h4><b>CREATIVE STUDIO </b></h4>

<div class="mb_10">Quisque congue accumsan ante id condimentum. Aliquam lorem nisl, bibendum et sollicitudin ut, viverra vitae ligula. In hac habitasse platea dictumst. Quisque in tincidunt augue. Mauris tempus pulvinar feugiat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. <a href="http://landingpageamphtml.blogspot.com/" class="read_more"><i class="fa fa-chevron-right"></i>   Leer más</a></div>

</div>

</div>

</div>

</div></div></div>

</div>

<div class="col-md-5">

<div class="wpb_column vc_column_container">

<div class="vc_column-inner ">

<div class="wpb_wrapper">

<div class=" "><div>

<div class="service_box text_half_overlay  align-center">

<div class="service_img">

<amp-img src="https://1.bp.blogspot.com/-VZ9vGaxd5Ks/WLKRJoAiF8I/AAAAAAAAOmk/U6d-xuQcPo0m6Md74B3JQboR-c7RHIf5ACLcB/s1600/7.jpg" width="420" height="510" layout="responsive"></amp-img>

</div>

<div class="service_info default_simple_title">

<h3>CREATIVE STUDIO</h3>

<div class="mb_10">Phasellus varius cursus turpis dign issim mollis. Vestibulum hendrerit arcu nunc, sit amet dignissim dui mollis maximus. Aliquam lorem nisl, bibendum et sollicitudin ut, viverra vitae ligula.

<p></p></div><a href="http://landingpageamphtml.blogspot.com/" class="read_more">Leer más</a></div></div></div></div>

</div></div></div>

</div>

</div>

<div class="col-md-3 col-md-offset-2">

<amp-img src="https://3.bp.blogspot.com/-w9TK8mJMfrw/WLHh0zFbt2I/AAAAAAAAOlk/K42vxDwCNTsiyQRDmm3tXtx6w13IB3JoACLcB/s1600/5.jpg" width="300" height="140" layout="responsive"></amp-img>

<br/>

<div class="text-responsive adb-justificar">

<p>Donec ac nunc quis nisl aliquet hendrerit. Pellentesque ultricies, felis id iaculis feugiat, mauris nunc viverra lectus, quis egestas felis nisi non ante. Donec bibendum magna. <a href="http://landingpageamphtml.blogspot.com/" class="read_more"><i class="fa fa-chevron-right"></i>   Leer más</a></p>

</div>

<br/>

</div>

<div class="col-md-3 col-md-offset-2">

<amp-img src="https://4.bp.blogspot.com/-gM0xt2J9WsE/WJOhs-JxfnI/AAAAAAAAOPI/NxFDwpmtQoo0Z-1osfjYj6fbiVl96S3wACLcB/s1600/4.jpg" width="300" height="140" layout="responsive"></amp-img>

<br/>

<div class="text-responsive adb-justificar">

<p>Donec ac nunc quis nisl aliquet hendrerit. Pellentesque ultricies, felis id iaculis feugiat, mauris nunc viverra lectus, quis egestas felis nisi non ante. Donec bibendum magna. <a href="http://landingpageamphtml.blogspot.com/" class="read_more"><i class="fa fa-chevron-right"></i>   Leer más</a></p>

</div>

<br/>

</div>

<div class="col-md-3 col-md-offset-2">

<amp-img src="https://1.bp.blogspot.com/-j-jUNwbwbG4/WJOkAK0IgQI/AAAAAAAAOPg/845d43_dsYc9NH0hTnJvTwDPjNrfsCyywCLcB/s1600/1.jpg" width="300" height="140" layout="responsive"></amp-img>

<br/>

<div class="text-responsive adb-justificar">

<p>Donec ac nunc quis nisl aliquet hendrerit. Pellentesque ultricies, felis id iaculis feugiat, mauris nunc viverra lectus, quis egestas felis nisi non ante. Donec bibendum magna. <a href="http://landingpageamphtml.blogspot.com/" class="read_more"><i class="fa fa-chevron-right"></i>   Leer más</a></p>

</div>

<br/>

</div>


Realice los siguientes cambios:

Elimine las palabras que están marcadas de color rojo y remplácelos por las que necesite mostrar

Elimine las direcciones URLs que están marcadas de color azul y remplácelos por las que quiera mostrar

Elimine las direcciones URLs de imágenes que están marcadas de color amarillo, remplácelos por unas nuevas URLs de imágenes

Un clic en Publicar

Crear páginas estáticas en Amp HTML

Ahora diríjase a Tema

Crear páginas estáticas en Amp HTML

Un clic en Editar HTML

Crear páginas estáticas en Amp HTML

Busque el siguiente código

/* Seccion Nosotros */

Le mostrara un código similar al siguiente:


/* Seccion Nosotros */

/* Editar la URL con la de su página Nosotros  */

<b:if cond='data:blog.url == &quot;http://landingpageamphtml.blogspot.com/p/nosotros.html&quot;'>

#outer-wrapper {

    width: 100%;

margin: 0px auto 0px;

}

#main-wrapper {

    width: 100%;

    float: left;

    margin: -9px;

    padding: 5px 10px 5px 10px;

    word-wrap: break-word;

    overflow: hidden;

}

#rsidebar-wrapper, .adbpostautor, .post-title, #HTML4, #blog-pager, #footer, #ayudadeblogger-left{

display:none;

}

#content-wrapper {

    background: #fff;

    padding: 15px;

    padding-top: 0px;

}

.post-outer {

      margin: -16px;

}

figcaption {

    display: block;

    padding: 118px 11px 5px 38px;

}

/* Imagen seccion nosotros */

#imagenseccion5 {

    background-image: url(https://3.bp.blogspot.com/-OFShNUy9NrI/WLOfGurvqiI/AAAAAAAAOoA/TNrnUkxfuh4xU-Z8CIh2z3jIs9itXemKwCLcB/s1600/13.jpg);

    padding-bottom: 0;

    padding-top: 0;

}



Realice los siguientes cambios:

Remplace la dirección URL que dice http://landingpageamphtml.blogspot.com/p/nosotros.html por la dirección URL de su nueva página de servicios

Elimine la dirección URL de imagen que está marcado de color amarillo, por una nueva dirección URL de imagen

Un clic en Guardar Tema

Crear páginas estáticas en Amp HTML

Visite su nueva página

4 Página estática en Amp HTML sección autor

Crear páginas estáticas en Amp HTML

Instrucciones:

Video Tutorial


1.1 Crear una página estática

1.2 Un clic en Páginas

Crear páginas estáticas en Amp HTML

1.3 Un clic en Página nueva

Crear páginas estáticas en Amp HTML

1.4 Trabajar en modo HTML y no en modo Redactar

Crear páginas estáticas en Amp HTML

1.5 Ingrese las siguientes líneas de código


<div class='col-md-13'>

<!-- Imagen seccion2 -->

 <section class='section2 section-image3' id='imagenseccion5'>
        <div class='imagenseccion6'>

<div class='container'>
            <div class='row'>

<br/>
<br/>
<br/>
<br/>

<div class='col-md-offset-2 text-responsive'>

<h1 class='title2'>Autor</h1>

<br/>
<br/>

</div>

<div class='col-md-3 col-md-offset-2 '>
</div>

<div class='col-md-5'>

<div class='text-responsive'>

<h5 class='d'>Este es un texto simple, este texto sirve para verificar y acompañar a rellenar parte de una descripción, que ayuda a los diseñadores web a desarrollar correctamente un sitio web.</h5>

</div>

</div>
        </div>

</div></div>

 </section>

<br/>
<br/>
<br/>

 </div>

<div class="vc_custom_1480261227764">

<div class="container">

<div class="vc_row wpb_row vc_row-fluid">

<div class="wpb_column vc_column_container col-md-12">

<div class="vc_column-inner ">

<div class="wpb_wrapper">

<div class=" "><div>

<div class="service_box service_shadow_text_box  align-center">

<div class="service_img">

<amp-img src="https://4.bp.blogspot.com/-F0vunLgm3Oc/WLMV84Qp5iI/AAAAAAAAOnE/x9u2k0_j2fw0kkD1yg2YeRRdA8eOk8LNwCLcB/s1600/8.jpg" width="600" height="300" layout="responsive"></amp-img>


</div>

<div class="service_info default_simple_title">

<h3>WHO WE ARE</h3>

<div class="mb_10">Quisque congue accumsan ante id condimentum. Aliquam lorem nisl, bibendum et sollicitudin ut, viverra vitae ligula. In hac habitasse platea dictumst. Quisque in tincidunt augue. Mauris tempus pulvinar feugiat.</div>

<a href="http://landingpageamphtml.blogspot.com/" class="read_more">Read More</a>

</div></div></div></div>

</div></div></div></div></div></div>


<div class="vc_custom_1480261412684">

<div class="container">

<div class="vc_row wpb_row vc_row-fluid">

<div class="wpb_column vc_column_container col-md-7">

<div class="vc_column-inner ">

<div class="wpb_wrapper">

<div class=" "><div>

<div class="special_title under_line_title align-left spcf_58b29a888a01f">

<h2>WHAT WE DO</h2><div class="mb_10">Quisque congue accumsan ante id condimentum. Aliquam lorem nisl, bibendum et sollicitudin ut, viverra vitae ligula. In hac habitasse platea dictumst. Quisque in tincidunt augue. Mauris tempus pulvinar feugiat.</div></div></div></div></div></div></div></div></div></div>

<div class="col-md-13">

<br/>
<br/>
<br/>

<div class="vc_custom_1480261412684">

<div class="container">
<div class="vc_row wpb_row vc_row-fluid">
<div class="wpb_column vc_column_container col-md-4">
<div class="vc_column-inner ">
<div class="wpb_wrapper">
<div class=" "><div>
<div class="service_box service_shadow_text_box_center  align-center">
<div class="service_img">

<amp-img src="https://3.bp.blogspot.com/-RI76z0ANYa0/WLOWfPY2rAI/AAAAAAAAOnc/uqQmwiNHX6oZ9zIcslFvb0pYb3efeE3lQCLcB/s1600/10.jpg" width="360" height="240" layout="responsive"></amp-img>

</div>

<div class="service_info default_simple_title">
<h3>ART DIRECTION</h3><div class="mb_10">Phasellus varius cursus turpis dign issim mollis. Vestibulum hendrerit arcu nunc, sit amet dignissim dui mollis bibendum. Aliquam lorem nisl.</div><a href="http://landingpageamphtml.blogspot.com/" class="read_more">Read More</a></div></div></div></div>

</div></div></div><div class="wpb_column vc_column_container col-md-4">

<div class="vc_column-inner "><div class="wpb_wrapper">

<div class=" "><div>

<div class="service_box service_shadow_text_box_center  align-center">

<div class="service_img">

<amp-img src="https://4.bp.blogspot.com/-nFR7Sox7CMY/WLOWfTY9CUI/AAAAAAAAOng/hDh7GweCU3Yn9BmYE-aCv-1u9XBdZvHJACLcB/s1600/11.jpg" width="360" height="240" layout="responsive"></amp-img>

</div>

<div class="service_info default_simple_title">

<h3>BRANDING &amp; STRATEGY</h3><div class="mb_10">Phasellus varius cursus turpis dign issim mollis. Vestibulum hendrerit arcu nunc, sit amet dignissim dui mollis bibendum. Aliquam lorem nisl.</div><a href="http://landingpageamphtml.blogspot.com/" class="read_more">Read More</a></div></div></div></div>

</div></div></div>

<div class="wpb_column vc_column_container col-md-4">

<div class="vc_column-inner ">

<div class="wpb_wrapper">

<div class=" "><div>

<div class="service_box service_shadow_text_box_center  align-center">

<div class="service_img">

<amp-img src="https://4.bp.blogspot.com/-rQ2wc3hTA-M/WLOWfkE1nvI/AAAAAAAAOnk/Wrnl6Nm0CY45uFpUa6_rcQA4OANG1MT4QCLcB/s1600/12.jpg" width="360" height="240" layout="responsive"></amp-img>

</div>

<div class="service_info default_simple_title">

<h3>PHOTOGRAPHY</h3>
<div class="mb_10">
Phasellus varius cursus turpis dign issim mollis. Vestibulum hendrerit arcu nunc, sit amet dignissim dui mollis bibendum. Aliquam lorem nisl.</div><a href="http://landingpageamphtml.blogspot.com/" class="read_more">Read More</a></div></div></div></div>

</div></div></div></div></div></div>
</div>



Realice los siguientes cambios:

Elimine las palabras que están marcadas de color rojo y remplácelos por las que necesite mostrar

Elimine las direcciones URLs que están marcadas de color azul y remplácelos por las que quiera mostrar

Elimine las direcciones URLs de imágenes que están marcadas de color amarillo, remplácelos por unas nuevas URLs de imágenes

Un clic en Publicar

Crear páginas estáticas en Amp HTML

Ahora diríjase a Tema

Crear páginas estáticas en Amp HTML

Un clic en Editar HTML

Crear páginas estáticas en Amp HTML

Busque el siguiente código

/* Seccion Autor */

Le mostrara un código similar al siguiente


/* Seccion Autor */

/* Editar la URL con la de su página Autor  */

<b:if cond='data:blog.url == &quot;http://landingpageamphtml.blogspot.com/p/autor.html&quot;'>

#outer-wrapper {

    width: 100%;

margin: 0px auto 0px;

}

#main-wrapper {

    width: 100%;

    float: left;

    margin: -9px;

    padding: 5px 10px 5px 10px;

    word-wrap: break-word;

    overflow: hidden;

}

#rsidebar-wrapper, .adbpostautor, .post-title, #HTML4, #blog-pager, #footer, #ayudadeblogger-left{

display:none;

}

#content-wrapper {

    background: #fff;

    padding: 15px;

    padding-top: 0px;

}

.post-outer {

      margin: -16px;

}


/* Imagen seccion autor */

#imagenseccion5 {

    background-image: url(https://2.bp.blogspot.com/-yc44eALlGK4/WLKbk2s8-XI/AAAAAAAAOm0/xDcU2aWiQvAX2LjXguadI-6remDn5TaKQCLcB/s1600/32.jpg);

    padding-bottom: 0;

    padding-top: 0;

}



Realice los siguientes cambios:

Remplace la dirección URL que dice http://landingpageamphtml.blogspot.com/p/autor.html por la dirección URL de su nueva página de servicios

Elimine la dirección URL de imagen que está marcado de color amarillo, por una nueva dirección URL de imagen

Un clic en Guardar Tema

Crear páginas estáticas en Amp HTML

Visite su nueva página

Si llegaste hasta el final, muchas felicidades has realizado un buen trabajo

¿Se puede crear más páginas estáticas con este método?

Claro que sí, deberá escoger una sección, con su código y crear una nueva página estática, al igual tendrá que copiar parte del código que se encuentra en el Editor HTML de su plantilla, la sección que quiera mostrar, para más detalles revise el siguiente video tutorial

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no duden en escribir




Share:

Related post

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments: