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

Instrucciones:

Demo Clic aquí

Video Tutorial

Suscríbase a nuestro canal de Youtube
1.1 Crear una página estática

1.2 Un clic en Páginas

1.3 Un clic en Página nueva

1.4 Trabajar en modo HTML y no en modo Redactar

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

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

Un clic en Publicar

Ahora diríjase a Tema

Un clic en Editar 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizvqc_TwKvxmdqHvynDwuBtb9BrN4plkkc0lfl3HzjNh2eDADV3IaRt4A1lVpTTssDTf1K1gCZdBvBfwicj8LQrSZmS8RxumzhD9KbkAk2fm5_PkfbLT4LSS05uxpm_B7XlTGf5786q1o/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

Visite su nueva página

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

Instrucciones:

Demo Clic aquí

Video Tutorial

1.1 Crear una página estática

1.2 Un clic en Páginas

1.3 Un clic en Página nueva

1.4 Trabajar en modo HTML y no en modo Redactar

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

Ahora diríjase a Tema

Un clic en Editar 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSqnfHE4x8Q98wgZOY0g7lj_7OSbDGMybnhzpj81H7_XibxaXuGIosGVReKprKPls8cbLvZBB-O9HndSFsF1mziTIb1P5xu9gClLXOs36Zk42uRntizt0Ffv8vCOnUF-_ATBSczzX0xCk/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

Visite su nueva página

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

Instrucciones:

Demo Clic aquí

Video Tutorial

1.1 Crear una página estática

1.2 Un clic en Páginas

1.3 Un clic en Página nueva

1.4 Trabajar en modo HTML y no en modo Redactar

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTQR-AJo_FZ8Df7m6_l40BIzh6LZVmRGSpnUqQHMJLXiPeHt6MHeOU5-vk5rFLheQOQyNB3F3dnGpsgTJwYZ6zfO_vAonMEmJKBBLfSEwQKIFelzwluMP0Muz_gDhJOlvZMuG7Se_KddM/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4P5pO-Bk1RLtzfps1VBUApxzWBY9MRp5c2uZTlydnL-uVoeaqgaHRkro4hQ_DPGGy26rEeiS2fw2CbKkvE6M-Uj0ZPcjq1p_AVtcAKVxLs5IhSYLrd8-gcH2k7s99FwAkW6a9gzvQ5F8/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5lc2JLqRcqJGyKAUQtnrQVBKQgL3aAKSD6jHLv4nA7IxTBv_JXmqipVmgN2BoMjpoMEC9vCsJjsQpzX-rMRtnOnjUgpKVteK1NIDZfnVpdMT5VcsoTQ7cvK6olny48djZgrB23Pne6Kk/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG8bHUpiEBVG_5oY3hB7AGifFYBng5aMPkOzU_m6wwlkEUYS4KO4mHsJbciodJnK4Wxl157vjV_Y6EkzU6DzXgQw3I440EvTRY6yAlrbJXd-ShXDL4igeT8IKD7zo_18XFLJycuUS8YVs/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

Ahora diríjase a Tema

Un clic en Editar 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV3oiNraoC_wmSBVMfFdIWZP6cuwj62SVLCOS30RaD-_PhN5t1brB9PV01nFWOMBo1Vm66zvx2-J9k7KvWxfokZfbtiD5O9hyFOKTVJZlMkPBK_SP3e7pwiVSA1W4bmjpS66tsqlxoC2M/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

Visite su nueva página

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

Instrucciones:

Demo Clic aquí

Video Tutorial

1.1 Crear una página estática

1.2 Un clic en Páginas

1.3 Un clic en Página nueva

1.4 Trabajar en modo HTML y no en modo Redactar

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrBbVb1EpPFmGFM_ekSyil6Fbr7qME2WRP19KBMR-AI-Re2V4DUZpLnQQNxKb3TWyQ1Q7Sl9iF9OyN7L_EALVAzaQEBY3JXDDp_7I5W7qElb3RF5zVMlER35G3FpPd4MARKXe-TUPyzJA/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitDizysqbWGahuV3A-VUmQJ50HONqIfvKzZnuVm0pYQGrq3aKQJXjvu3bTAVP9kXpTcR1YZ8vSGZQt8TQvuuBxlT8CP4SWaDAyc9E3XXLzhzoxboF_41C3l4mv-VIk5hn0eKhodo5NaXg/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOpM_PxhvQBh2J2HHSwkTI3b5-0hFe2GboxQFt4O3CZrJhyRnrxr8WijUUyyFgvUqFh-HxztjWpX2bWCQp04U2O2qXiHE_g3FWukq1tScQRiRe5ispyfD-mi3Zcfamk0vxDFCRDLjjHkE/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZZU2jkotCC7e8WE1mBTe8x58QgkINL0ESSxd7pJqOrbGrd0wZ9KW4vPlvozlyqQqUg7v9ml2XatXGM2Kp2HQgAabJaiXlD0IRTxOhY5ctmNAKqsARBnU6KbeREgFq6Blqm93xG4Jv9W0/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

Ahora diríjase a Tema

Un clic en Editar 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHQg63SQOZOc8QRxyzxCjoac2fN9OJOwO5YJEH9m5DRWxrZwMSbmqEvQcfyI0_qBrwsyX5SsRoglhpLIalAIvNsvBEyp5v6Gx9ygL5fKrYVV7lp-v27PQrcEYQsxK6lwePpd5w8z4rUBU/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

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

Preguntas frecuentes

Cómo editar el amp-sidebar barra lateral de mi blog en AMP de Blogger
¿Cómo publicar una entrada de Blogger correctamente en Amp?
¿Cómo habilitar la plantilla móvil de mi blog de Blogger en AMP?
Cómo configurar los comentarios de Disqus de mi blog en AMP de Blogger
¿Cómo configurar el gadget Related post? de mi plantilla en AMP de Blogger
Invalid Amp Error al crear un nuevo Gadget/Widget en Blogger
¿Cómo agregar Google AdSense en un Widget de Blogger en AMP HTML?
¿Cómo añadir Google AdSense a tus entradas de Blogger en AMP HTML?
Anuncios automáticos AMP de texto y de display
Corregir error en los datos estructurados al configurar en Blogger
Corregir error en los datos estructurados - error detectado Breadcrumb
Cómo editar las meta etiquetas de las plantillas de Blogger en AMP
¿Cómo configurar los datos estructurados de mi blog de Blogger en AMP?

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no duden en escribir

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE

¿Te ha resultado útil este artículo, recomiendanos?

TAGS: Plantillas en AMP

Crear páginas estáticas en Amp HTML

Preguntas frecuentes

Recuerda suscribirte:

Related post

Comentarios

1 comentario:

Autor

Labels

Popular post

Youtube.com/ayudadeblogger

Formulario de contactos

Diseño

Inspiración

Tecnología

AMP Carrusel video

Suscríbete completamente gratis a nuestro boletín diario

Crear páginas estáticas en Amp HTML

Preguntas frecuentes

Recuerda suscribirte:

Related post

Comentarios

1 comentario:

Autor

Labels

Popular post

Youtube.com/ayudadeblogger

Formulario de contactos

Diseño

Inspiración

Tecnología

AMP Carrusel video

AMP ADRASTEA

AMP DESIGN DEMO

AMP INSPIRITING

AMP DESTACADO

AMP KITCHEN

AMP FENIX

AMP MODERN

AMP ANDROMEDAD

AMP ALEX DESIGN

AMP BREAKING NEWS

AMP PRO DEMO

AMP BLOG BUILD

AMP TOUCH

AMP OCEAN FREE

AMP KILO

AMP DOMPI

AMP LANDING PAGE ONE

Suscríbete completamente gratis a nuestro boletín diario