Adb Fibra Plantilla Responsive para Blogger
Adb Fibra Responsive Blogger Template, una plantilla realmente sorprendente, un diseño profesional.Adb Fibra es una plantilla libre, ¿Estás comenzando un nuevo blog de Blogger?, un nuevo proyecto de puesta en marcha o puede ser que estés personalizando tu blog a un diseño web profesional y quieres mostrar tu trabajo a todo el mundo de una forma creativa?
Adb Fibra Responsive Blogger Template es exactamente lo que estabas buscando. Se puede descargar de forma gratuita, personalizarla y usarlo como mejor lo amerite, todo el tiempo.
Características:
Adb Fibra Plantilla Responsive para Blogger, dispone de fondos de diseño web profesional, menú responsive, además de impresionantes animaciones, CSS3, un admirable Slideshow, con el cual se puede cambiar a las imágenes que usted gusto, también viene con su propio regulador de arranque carrusel y códigos cortos que le permite cambiar rápidamente las descripciones y temas importantes en la página principal todo ello dirigiéndose al Editor HTML de la plantilla
Adb Fibra Plantilla Responsive para Blogger es totalmente sensible “Responsive” y se ve bien en todas las resoluciones de pantallas y dispositivos móviles.
Todo lo mencionado anteriormente es equipado con los potentes estilos CSS y JS de Bootstrap.
A continuación, puede ver su demostración en el siguiente blog
Video Tutorial
¿Cómo se instalara la plantilla AdB Fibra?
Cuando se haya instalado la Plantilla AdB Fibra Blogger Template, tendrá que realizar los diferentes cambios en el Editor HTML de la plantilla
Todo el código que usted necesitara modificar se encuentra dentro del Editor HTML de la plantilla
En la parte de diseño no tendrá que realizar ninguna modificación a no ser que usted disponga de gadgets, los cuales tendrá que organizarlos.
Importante:
Tenga en cuenta que al descargar esta plantilla usted es el responsable de editarla y no la responsabilidad de Ayudadeblogger.com por el uso que se dé a la misma, puede leer las políticas de uso en el siguiente enlace
Empezamos
Siga las siguientes instrucciones de instalación
1.- Descargar plantilla
2.- No instale la plantilla directamente en su blog de Blogger, primero tendrá que crear un nuevo blog de Blogger como ejemplo para poder editar la información que se encuentra en la misma y cuando haya cambiado la información e imágenes de la plantilla Adb Fibra, puede crear una copia de seguridad de la plantilla de ejemplos que creo usted y guardarla en su escritorio para luego subirla en su blog de Blogger. Espero haber sido claro en el procedimiento, si no es así, puede dejarme un mensaje.
Tutorial
Se ha divido en diez secciones para hacer las cosas más sencillas al momento de editar y cambiar la información que se encuentra dentro de la plantilla Adb Fibra
1 Ir a Blogger
2 Un clic en “Plantilla”
3 Un clic en “Editar HTML”
Ahora se le abrirá el Editor HTML de su plantilla
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.
4 Cambiar las Imágenes del Slideshow
Busque el siguiente código:
<!-- Seccion 1 -->
Le mostrara un código similar al siguiente
<style>
.slide-1{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSxVHI17GufKsMbehyLZ5bb7dEhgEzwIICMbYEnB7vgMtpwak6flbtXtfRHrezYx06QPO2f5c4NhBks3FXDYstIER89v4iuQ6WBJ4e8_QOAl-6Bd8BP_8EI-fufyge9rwMm0bq780W8muV/s1600/4.jpg)}
.slide-2{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTcSvnR37CWnyG4jAy2EhjJOjK8jHL_1LBdqe9Z8lEh6eCAbNdvojG97ZU4275TlqU2yFHEBBdZU4NoyUdzPukM7gk_RsrxTde2Vge3XwYAQy4kZ9-1QXPd3QtSYdQnhjUJBF61REITxsL/s1600/2.jpg)}
.slide-3{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmJnK7FaFVOPE7OjQNngzgx_tXe5WmY7f0uSpYioJvxCuDJvkqWsYKTGDO2K2KBH2tKn5dEe2MMPve2n6ayciMd7MFgujBzqapeBigGNRojlmviCIMlWCLgtc8BEvMiJvFZWhMJfjlq9kD/s1600/3.jpg)}
</style>
|
Realice los siguientes cambios:
- Las direcciones URLs que están marcadas de color azul, son las direcciones URLs de las imágenes que se están mostrando en el slideshow de la plantilla, tendrá que cambiar cada una de ellas por las direcciones URLs de las imágenes que usted quiera mostrar en el slideshow.
5 Cambia la imagen de fondo del Slide Carrusel
Busque el siguiente código:
<!-- Seccion 2 -->
Le mostrara el siguiente código:
<style>
.testimonials {
background:
rgba(0, 0, 0, 0)
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSxVHI17GufKsMbehyLZ5bb7dEhgEzwIICMbYEnB7vgMtpwak6flbtXtfRHrezYx06QPO2f5c4NhBks3FXDYstIER89v4iuQ6WBJ4e8_QOAl-6Bd8BP_8EI-fufyge9rwMm0bq780W8muV/s1600/4.jpg")
no-repeat center center / cover ;
padding: 65px
0;
position:
relative;
}
</style>
|
Realice el siguiente cambio:
- La dirección URL que está marcada de color azul, es la dirección URL de la imagen que se está mostrando en el Slider Carrusel de la plantilla, para ello tendrá que cambiar dicha dirección URL por otra que llene sus expectativas.
6 Cambiar los nombres y direcciones URLs del Menú
Busque el siguiente código:
<!-- Seccion 3 -->
Les mostrara un código similar al siguiente:
<li><a
href='#'>NOSOTROS</a></li>
<li><a
href='#'>PROGRAMAS</a></li>
<li><a
href='#'>EVENTOS</a></li>
<li><a
href='#'>VIDEOS</a></li>
<li><a
href='#'>NOTICIAS</a></li>
<li><a
href='#'>FOTOS</a></li>
<li><a
href='#contact'>CONTACTOS</a></li>
|
Realice estos cambios:
- He marcado de color amarillo el símbolo #, en el cual tendrán que ingresar una dirección URL de la entrada que quieran dar a conocer en su menú.
- Cambie los nombres que están marcados de color rojo, por los que usted quiera
7 Cambiar el título y la descripción del slideshow
Busque el siguiente código:
<!-- Seccion 4 -->
Les mostrara tres códigos similares al siguiente:
<h1>AdB Fibra <br/> Plantilla Responsive
para Blogger</h1>
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Pellentesque tincidunt, libero eu pellentesque molestie.
<br/> Raesent eu lorem arcu. Curabitur magna nunc.</p>
<a class='digital' href='#'>Información</a>
<a class='digital' href='#'>Contactos</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='item'>
<div class='single_slide'>
<div class='slider_bg slide-2'/>
<div class='container'>
<div class='slide_text'>
<div class='table'>
<div class='table-cell'>
<h1>Plantilla gratis <br/>
Blogger</h1>
<p>Lorem Ipsum is simply dummy text of the
printing and typesetting industry. <br/> Nterdum et malesuada fames ac
ante ipsum primis.</p>
<a class='digital' href='#'>Información</a>
<a class='digital' href='#'>Contactos</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='item'>
<div class='single_slide'>
<div class='slider_bg slide-3'/>
<div class='container'>
<div class='slide_text'>
<div class='table'>
<div class='table-cell'>
<h1>Lo mejor para usuarios de Blogger <br/>
AdB Fibra Template</h1>
<p>Lorem Ipsum is simply dummy text of the
printing and typesetting industry. <br/>Nterdum et malesuada fames ac
ante ipsum primis.</p>
<a class='digital' href='#'>Información</a>
<a class='digital' href='#'>Contacto</a>
|
Realice los siguientes cambios:
- Edite todas las palabras que están marcadas de color rojo, por las que usted quiera mostrar
- Además, cambie los símbolos numerales # por una dirección URL
8 Cambiar la dirección de correo y la descripción del popup Contactos
Busque el siguiente código:
<!-- Seccion 5 -->
Le mostrara un código similar al siguiente:
<div class='modal-body'>
¿Necesitas ponerte en contacto con nosotros?
puedes realizarlo a la siguiente dirección de correo electrónico:
<div style='text-align: center;'>
<br/>
<p>Ayudadeblogger@gmail.com</p></div>
|
Realice el siguiente cambio:
- Edite las palabras la que están marcadas de color rojo
9 Editar descripción he imagen
Busque el siguiente código:
<!-- Seccion 6 -->
Les mostrara un código similar al siguiente:
<div class='about_title section-title wow
slideInLeft' data-wow-delay='0.3s'>
<h1>Impresionante plantilla para
Blogger</h1>
<p>Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the standard dummy
text. Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the standard dummy text. Lorem Ipsum is simply
dummy text of the printing and typesetting industry.</p>
</div>
<div class='about_title section-title wow
slideInLeft' data-wow-delay='0.3s'>
<h1>Lo mejor para ti</h1>
<p>Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the standard dummy
text. Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the standard dummy text. Lorem Ipsum is simply
dummy text of the printing and typesetting industry.</p>
</div>
<div
class='row'>
</div>
</div>
<div class='col-sm-12 col-md-6'>
<div class='about_right wow slideInRight'
data-wow-delay='0.3s'>
<!-- Cambie la dirección URL de la imagen por la de
usted a continuación-->
<img alt='' id='right_img_1'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjYQb6WzFYAPpiQLZStEj1bTIhGstxocpZG8FHjCl2fik1KiNtFGLV2JJh0Pcrj_a6EYV94NeJHL3RfriAORLq5TmSMu4EHyBY-d0cPiXtoJLLrEbbs1fLnK367H1lywAja9fN0HIxhrzc/s1600/12.jpg'/>
|
Realice los siguientes cambios:
- Edite todas las palabras que están marcadas de color rojo, y remplácelo por las que usted quiera
- Además, cambie la dirección URL que está marcada de color azul, remplácelo por la dirección URL de una de sus imágenes
10 Cambiar imagen, titulo, descripción y URL
Busque el siguiente código:
<!-- Seccion 7 -->
Les mostrara el siguiente código:
<div class='col-sm-6 col-md-3'>
<div
class='thumbnail'>
<img alt='Generic placeholder thumbnail'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2x10pRbpI64PGw6jS6fqVkfx6m_LlA8MILIypabH0SAV58ysCrSKBxdMBb2gnPLEypfH2J_NRZt0_iJzdJKyyxVpcKssjLnJn5IanKqWLmiy7rRnYD7VCz0MxJZI2dcvXWe-qzuMlJHTh/s1600/13.jpg'/>
</div>
<div class='caption'>
<h3>Blogger Temmplate thumbnail</h3>
<p>Lorem Ipsum is simply dummy text of the
printing and typesetting industry.</p>
<p>
<a class='btn btn-primary' href='#'
role='button'>
Información
</a>
</p>
</div>
</div>
<div class='col-sm-6 col-md-3'>
<div class='thumbnail'>
<img alt='Generic placeholder thumbnail'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIxsx1mcloevckI0FCRELMhVqHEOJ5tjXYeNWE26ErPx-ZmsRz2d9GEY-UnLq8oexitollcEL5ZEZkiM7sRmcbDc_bZWO_pAAudP9mYsQnPMdSNMEDcd1EY-mJo4XKSTITUil0KRaPJBk7/s1600/14.jpg'/>
</div>
<div class='caption'>
<h3>Blogger Temmplate thumbnail</h3>
<p>Lorem Ipsum is simply dummy text of the
printing and typesetting industry.</p>
<p>
<a class='btn btn-primary' href='#'
role='button'>
Información
</a>
</p>
</div>
</div>
<div class='col-sm-6 col-md-3'>
<div class='thumbnail'>
<img alt='Generic placeholder thumbnail'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFBi-d3lHe4r63agxbloh6imjLJq1REsrQnH-rRnivWfY53DYHFlsB0xhuozoRUOSk2dAVTGj8qIe4SQeRbdfRtrSed19M6jOtvqyO4x5OippUbPYxxxcGt67nGwhr6ds2PrNo6uo0k5hU/s1600/15.jpg'/>
</div>
<div class='caption'>
<h3>Blogger Temmplate thumbnail</h3>
<p>Lorem Ipsum is simply dummy text of the
printing and typesetting industry.</p>
<p>
<a class='btn btn-primary' href='#'
role='button'>
Información
</a>
</p>
</div>
</div>
<div class='col-sm-6 col-md-3'>
<div class='thumbnail'>
<img alt='Generic placeholder thumbnail'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8R6gO3Ye1DYztZDhPn3UfpCsIPhIfBur0u3rwTfCKNavtMkOWwIb7amt94oQ2S6lB2aA-IWJeRyEQstccVzJR1QRKbjeRj7j3LVZVnzZBpdnUGDES2NemQWMXeoihiMmyitLgeKYLkypf/s1600/16.jpg'/>
</div>
<div class='caption'>
<h3>Blogger Temmplate thumbnail</h3>
<p>Lorem Ipsum is simply dummy text of the
printing and typesetting industry.</p>
<p>
<a class='btn
btn-primary' href='#' role='button'>
Información
|
Realice los siguientes cambios:
- Cambie las palabras que están marcadas de color rojo,
- Existen 4 direcciones URLs de imágenes que están marcadas de color azul, cambie cada una de ellas por la dirección URL de sus imágenes
- Además, existen 4 símbolos numerales # que están marcados de color amarillo, estos son los botones de Información, cambie cada numeral, por una dirección URL de cualquier entrada de su blog.
11 Slider Carrusel, editar las imágenes y la descripción
Busque el siguiente código:
<!-- Seccion 8 -->
Le mostrara el siguiente código:
<li class='active' data-slide-to='0'
data-target='#fawesome_carousel_3'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSxVHI17GufKsMbehyLZ5bb7dEhgEzwIICMbYEnB7vgMtpwak6flbtXtfRHrezYx06QPO2f5c4NhBks3FXDYstIER89v4iuQ6WBJ4e8_QOAl-6Bd8BP_8EI-fufyge9rwMm0bq780W8muV/s1600/4.jpg'/></li>
<li data-slide-to='1'
data-target='#fawesome_carousel_3'><img alt=''
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzLI0yhvP3t4Pd1fssfp6yBnywa_FXLCcqcyMC_CfP_ZUOmozPSQzGMJIm_C9mYw06HUrYYJA9ai4ITZ4xYF7rrnnK4oKu7lloNTARJ9aprJq7iCIIlC8nTVgdCqq0BRlI3Z4PWrXNZ_lf/s1600/7.jpg'/></li>
<li data-slide-to='2'
data-target='#fawesome_carousel_3'><img alt=''
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia_MO3l5LljYlMdD4nVEaMnVNehU4Js8ixNs386auSMlPyhAWXy16wn7Jgx_8WInPRaREDdNhNLKz2inBR18NZ3IXIE0eK9mq31WzZQIioNgjSOyh-EZxZwZgfCYvscIdYR2GPpioLkg5Y/s1600/8.jpg'/></li>
<li data-slide-to='3'
data-target='#fawesome_carousel_3'><img alt=''
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG0b09R5ZFw5Ys_eZ3YXy4vvq6jdhUBhCoDTCEqPAemxk5iWAtE_Iv3ADbW9I6MS0V9YASXoHBY9j7OJZxlV8juvcHAc9tOqyV6h4ibOyOGwf7qxa7X7UFiZ9K_k4sN9-VTQxn8VamqINC/s1600/9.jpg'/></li>
<li data-slide-to='4'
data-target='#fawesome_carousel_3'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOoM7RyidbgtxOjk8suEHqhJ7NwQAWRzncIN3fF-ntjUbqVvEWI2jZQXBrwQZ_qPfVu-ccTZD2tNrF5ov2M8HCgeTeTpGlJBIL7tk8G6gIDj5rNPFhB0bqLhUgsc1AfjtNBZkoimXVUgIC/s1600/10.jpg'/></li>
</ol>
<div class='carousel-inner' role='listbox'>
<div class='item active'>
<div class='single_testimonials'>
<p>Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the standard dummy
text. Lorem Ipsum is simply dummy text of the printing and typesetting
industry.</p>
<h4>Publicado
por: Temas libres</h4>
</div>
</div>
<div class='item'>
<div class='single_testimonials'>
<p>Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the standard dummy
text. Lorem Ipsum is simply dummy text of the printing and typesetting
industry.</p>
<h4>Publicado
por: Temas libres</h4>
</div>
</div>
<div class='item'>
<div class='single_testimonials'>
<p>Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the standard dummy
text. Lorem Ipsum is simply dummy text of the printing and typesetting
industry.</p>
<h4>Publicado por: Temas libres</h4>
</div>
</div>
<div class='item'>
<div class='single_testimonials'>
<p>Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the standard dummy
text. Lorem Ipsum is simply dummy text of the printing and typesetting
industry.</p>
<h4>Publicado
por: Temas libres</h4>
</div>
</div>
<div class='item'>
<div class='single_testimonials'>
<p>Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the standard dummy
text. Lorem Ipsum is simply dummy text of the printing and typesetting
industry.</p>
<h4>Publicado
por: Temas libres</h4>
</div>
|
Realice los siguientes cambios:
- Existen 5 direcciones URLs que están marcadas de color azul, las mismas son las imágenes que se están mostrando en el Slider Carrusel, remplace cada una de ellas por sus imágenes
- Cambie todas las palabras que están marcadas de color rojo, por las que usted necesite mostrar
12 Publicaciones destacadas, cambiar imágenes, títulos y descripción
Busque el siguiente código:
<!-- Seccion 9 -->
Les mostrará el siguiente código
<div class='blog_img'>
<a href='#'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1XXzsvGiLeEdRg4bCSDfD30nCpYtAW0cKngYUhQIQM-Sqhj-ezkheQa_7B_8B01EB2nmYmbz9GcJ2hN6WDkVnXCGXRNvDqgd54phodT6c0_26GccJcAcALDBKN57gtSoEgHREVdxr_W0W/s1600/1.jpg'/></a>
</div>
<div class='blog_text'>
<h4>Publicación 1</h4>
<br/>
<p>Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem <a href='#'>Leer
más</a></p>
</div>
</div>
<div class='single_blog wow fadeInLeft'
data-wow-delay='0.3s'>
<div class='blog_img'>
<a href='#'><img alt=''
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzLI0yhvP3t4Pd1fssfp6yBnywa_FXLCcqcyMC_CfP_ZUOmozPSQzGMJIm_C9mYw06HUrYYJA9ai4ITZ4xYF7rrnnK4oKu7lloNTARJ9aprJq7iCIIlC8nTVgdCqq0BRlI3Z4PWrXNZ_lf/s1600/7.jpg'/></a>
</div>
<div class='blog_text'>
<h4>Publicación 2</h4>
<br/>
<p>Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem <a href='#'>Leer
más</a></p>
</div>
</div>
</div>
<div class='col-sm-4'>
<div class='single_blog wow fadeInUp'
data-wow-delay='0.3s'>
<div class='blog_img'>
<a href='#'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia_MO3l5LljYlMdD4nVEaMnVNehU4Js8ixNs386auSMlPyhAWXy16wn7Jgx_8WInPRaREDdNhNLKz2inBR18NZ3IXIE0eK9mq31WzZQIioNgjSOyh-EZxZwZgfCYvscIdYR2GPpioLkg5Y/s1600/8.jpg'/></a>
</div>
<div class='blog_text'>
<h4>Publicación 3</h4>
<br/>
<p>Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem <a href='#'>Leer
más</a></p>
</div>
</div>
<div class='single_blog wow fadeInUp'
data-wow-delay='0.3s'>
<div class='blog_img'>
<a href='#'><img alt=''
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG0b09R5ZFw5Ys_eZ3YXy4vvq6jdhUBhCoDTCEqPAemxk5iWAtE_Iv3ADbW9I6MS0V9YASXoHBY9j7OJZxlV8juvcHAc9tOqyV6h4ibOyOGwf7qxa7X7UFiZ9K_k4sN9-VTQxn8VamqINC/s1600/9.jpg'/></a>
</div>
<div class='blog_text'>
<h4>Publicación 4</h4>
<br/>
<p>Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem <a href='#'>Leer
más</a></p>
</div>
</div>
</div>
<div class='col-sm-4'>
<div class='single_blog wow fadeInRight'
data-wow-delay='0.3s'>
<div class='blog_img'>
<a href='#'><img alt=''
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOoM7RyidbgtxOjk8suEHqhJ7NwQAWRzncIN3fF-ntjUbqVvEWI2jZQXBrwQZ_qPfVu-ccTZD2tNrF5ov2M8HCgeTeTpGlJBIL7tk8G6gIDj5rNPFhB0bqLhUgsc1AfjtNBZkoimXVUgIC/s1600/10.jpg'/></a>
</div>
<div class='blog_text'>
<h4>Publicación 5</h4>
<br/>
<p>Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem <a href='#'>Leer
más</a></p>
</div>
</div>
<div class='single_blog wow fadeInRight'
data-wow-delay='0.3s'>
<div class='blog_img'>
<a href='#'><img alt=''
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSxVHI17GufKsMbehyLZ5bb7dEhgEzwIICMbYEnB7vgMtpwak6flbtXtfRHrezYx06QPO2f5c4NhBks3FXDYstIER89v4iuQ6WBJ4e8_QOAl-6Bd8BP_8EI-fufyge9rwMm0bq780W8muV/s1600/4.jpg'/></a>
</div>
<div class='blog_text'>
<h4>Publicación 6</h4>
<br/>
<p>Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem <a href='#'>Leer
más</a></p>
</div>
|
Realice los siguientes cambios:
- Cambie todas las palabras que están marcadas de color rojo, por las que usted necesite mostrar
- Existe 6 direcciones URLs que están marcadas de color azul, las cuales son las imágenes que se están mostrando en la plantilla, tendrá que cambiar cada una de ellas por las imágenes que quiera mostrar
- Por último, existen 6 símbolos numerales # que están marcados de color amarillo, tendrá que cambiar cada uno de ellos por la dirección URL de la entrada que quiera mostrar
13 Editar el Footer, Quienes somos, Contáctanos y Mapa
Busque el siguiente código:
<!-- Seccion 10 -->
Les mostrara el siguiente código
<div class='col-sm-4'>
<div class='about_hello wow fadeInLeft'>
<h3>Quienes somos</h3>
<p id='about_p_text'>Lorem Ipsum is simply dummy
text of the printing and typesetting industry. Lorem Ipsum has been the
standard dummy text. Lorem Ipsum is simply dummy text of the printing and
typesetting industry.</p>
</div>
</div>
<div class='col-sm-4 wow fadeInUp'>
<div class='about_hello'>
<h3>Contáctanos</h3>
<p><i class='fa fa-mobile'/>Fono: 593 063
018665</p>
<p><i class='fa fa-envelope'
id='envel'/>Email de Contacto: ayudadeblogger@gmail.com</p>
<p><i class='fa fa-map-marker'/>OE405 Tena
- Napo - Ecuador</p>
</div>
<div class='social_icon'>
<a
href='https://facebook.com/ayudadeblogger'><i class='fa
fa-facebook'/></a>
<a
href='https://twitter.com/ayudadeblogger'><i class='fa fa-twitter'/></a>
<a
href='https://plus.google.com/+Ayudadeblogger'><i class='fa
fa-google-plus'/></a>
<a
href='http://feeds.feedburner.com/ForoAyudaDeBlogger'><i class='fa
fa-rss'/></a>
</div>
</div>
<div class='col-sm-4'>
<div class='quick_contack about_hello subcribe_btn
wow fadeInRight'>
<h3>Mapa</h3>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3989.217615097672!2d-77.81579268572665!3d-0.9942537356565851!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x91d6a44a76e19879%3A0x8f0967c48a0e8c8e!2sGrupodelecluse!5e0!3m2!1ses!2sec!4v1473546627360"
width="250" height="150"
frameborder="0" style="border:0"
allowfullscreen></iframe>
</div>
|
Realice los siguientes cambios:
- Cambie todas las palabras que están marcadas de color rojo, por su información
- Edite las direcciones URLs que están marcadas de color azul, y remplacelos por las direcciones URLs de sus redes sociales
- Por último, elimine todo el código que está marcado de color amarillo, y remplácelo por el código Iframe de Google Maps, si no sabes cómo hacerlo, no te preocupes, muy pronto publicare un tutorial de ayuda sobre este tema de Google Maps.
- Mientras tanto, puede eliminar el código que está marcado de color amarillo
Eso es todo, hemos terminado, ahora es momento de dar un clic en Guardar plantilla
Mire como le quedo esta nueva plantilla.
Recuerde ahora es tiempo de crear una copia de seguridad de su nueva plantilla he insertarla en su actual blog de Blogger
Nota: Si tiene alguna duda, pueden abrir el siguiente enlace en el cual pueden plantear su pregunta y subir una imagen, he informar lo que necesitan saber sobre esta plantilla, con gusto les responderé
Actualización: Fecha 25 de julio 2017
Para los usuarios que recibieron la plantilla antes del 25 de julio de 2017, por favor corregir los siguientes CSS y JS
1.- Busque los siguientes CSS
<!-- Font Awesome -->
<script
src='https://dl.dropboxusercontent.com/s/48ksuz4ehbf6aq1/FontAwesome.js'/>
<link
href='https://dl.dropboxusercontent.com/s/eyg88ri3h4bcsch/bootstrap.min.css'
rel='stylesheet'/>
<link
href='https://dl.dropboxusercontent.com/s/nrajs3rv7o9mkm6/font-awesome.min.css'
rel='stylesheet'/>
<!-- OWL Carrusel -->
<link
href='https://dl.dropboxusercontent.com/s/dqqz2zy6v7ccere/owl.carousel.css'
rel='stylesheet'/>
<!-- slicknav -->
<link
href='https://dl.dropboxusercontent.com/s/4teygls8d21n18e/slicknav.css'
rel='stylesheet'/>
<!-- style css -->
<link href='https://dl.dropboxusercontent.com/s/dk1a71j4blxurhd/stilos.css'
rel='stylesheet'/>
<!-- responsive -->
<link
href='https://dl.dropboxusercontent.com/s/yghhe27snfdrb2d/responsive.css'
rel='stylesheet'/>
|
Cámbielos por los siguientes:
|
<!-- Font Awesome
-->
<script
src='https://cdn.rawgit.com/Luis-Chavez/adb-fibra/3660eed8/adb-fibra-FontAwesome-js.js'/>
<link
href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700'
rel='stylesheet'/>
<link
href='https://cdn.rawgit.com/Luis-Chavez/adb-fibra/94572ab3/adb-fibra-bootstrap-min-css.css'
rel='stylesheet'/>
<link
href='https://cdn.rawgit.com/Luis-Chavez/adb-fibra/faf24594/db-fibra-font-awesome-min.css'
rel='stylesheet'/>
<!-- OWL Carrusel
-->
<link
href='https://cdn.rawgit.com/Luis-Chavez/adb-fibra/c3f8f762/adb-fibra-owl.carousel-css.css'
rel='stylesheet'/>
<!-- slicknav
-->
<link
href='https://cdn.rawgit.com/Luis-Chavez/adb-fibra/a94775c4/adb-fibra-slicknav-css.css'
rel='stylesheet'/>
<!-- style css
-->
<link
href='https://cdn.rawgit.com/Luis-Chavez/adb-fibra/db712e83/adb-fibra-stilos-css.css'
rel='stylesheet'/>
<!-- responsive
-->
<link
href='https://cdn.rawgit.com/Luis-Chavez/adb-fibra/88892bf3/adb-fibra-responsive-css.html'
rel='stylesheet'/>
|
2.- Busque los siguientes JS
<!-- jquery-1.11.3 -->
<script
src='https://dl.dropboxusercontent.com/s/8d1o0sxiaqfdzwy/jquery-1.11.3.min.js'/>
<!--
bootstrap js -->
<script
src='https://dl.dropboxusercontent.com/s/wpq14s27kmlfyex/bootstrap.min.js'/>
<!-- slicknav
js -->
<script
src='https://dl.dropboxusercontent.com/s/euztvam10re53md/jquery.slicknav.min.js'/>
<!-- sticky
-->
<script
src='https://dl.dropboxusercontent.com/s/throge9ak3au8j9/jquery.sticky.js'/>
<!-- scrollUp
-->
<script
src='https://dl.dropboxusercontent.com/s/4baa46ngiedrabx/jquery.scrollUp.js'/>
<!-- wow
-->
<script
src='https://dl.dropboxusercontent.com/s/n35hqq9m2r9w5xl/wow.min.js'/>
<!--
owl-carousel -->
<script
src='https://dl.dropboxusercontent.com/s/7riecow8ibo8ddv/jquery.nicescroll.min.js'/>
<!--
owl-carousel -->
<script
src='https://dl.dropboxusercontent.com/s/rmwtzld3uw9xw3p/owl.carousel.min.js'/>
<!-- main js
-->
<script
src='https://dl.dropboxusercontent.com/s/kf57804g0aae88x/main.js'/>
|
Cámbielos por los siguientes:
|
<!--
jquery-1.11.3 -->
<script
src='https://cdn.rawgit.com/Luis-Chavez/adb-fibra/8323d3f9/adb-fibra-jquery-1-11-3-min-js.js'/>
<!-- bootstrap js -->
<script
src='https://cdn.rawgit.com/Luis-Chavez/adb-fibra/40b7d62c/ad-fibra-bootstrap-min-js.js'/>
<!-- slicknav js -->
<script
src='https://cdn.rawgit.com/Luis-Chavez/adb-fibra/e90bfcca/adb-fibra-jquery-slicknav-min.js'/>
<!-- sticky -->
<script
src='https://cdn.rawgit.com/Luis-Chavez/adb-fibra/99fda68b/adb-fibra-jquery-sticky.js'/>
<!-- scrollUp -->
<script
src='https://cdn.rawgit.com/Luis-Chavez/adb-fibra/65b6d23f/adb-fibra-jquery-scrollUp.js'/>
<!-- wow -->
<script src='https://cdn.rawgit.com/Luis-Chavez/adb-fibra/2e961b7f/adb-fibra-wow-min.js'/>
<!-- owl-carousel -->
<script
src='https://cdn.rawgit.com/Luis-Chavez/adb-fibra/697b4ab0/adb-fibra-jquery-nice-scroll-min.js'/>
<!-- owl-carousel -->
<script
src='https://cdn.rawgit.com/Luis-Chavez/adb-fibra/329e0dde/adb-fibra-owl-carousel-min.js'/>
<!-- main js -->
<script
src='https://cdn.rawgit.com/Luis-Chavez/adb-fibra/21993e98/adb-fibra-main.js'/>
|
¡Fácil verdad!
¿Necesitas ayuda?
Cualquier pregunta no duden en escribir
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
Comentarios